设计是空

《DIAMIND》是广州车胎企业，实习的第一套VI成功案例，想不到当时的天马行空也能在商业设计中站到一席之地！一个方案，一次就定稿了！挺开心的，今天整理出《DIAMIND》LOGO的创作心得，希望与大家分享相关经验，以及品牌类的交流。初次写心得，很多不足，还望大家多多指点。

整套LOGO提案是以一个故事的形式解说LOGO的创作思路及创意。

先来看看关于钻石的的故事吧

以蓝钻石为元素进行构思，实物钻石是种复杂的图形，难以在脑海中记住的图形 。

以蓝色作为主色调，表现企业以科技领航的经营模式。

那么讲蓝钻的图形进行简单化，容易识别。

可是图形太普通常见，

继续深入

对图形进行了进一步的简化，

分解出了四个图形。

分解的图形当时给我造成了一定困扰，用哪个好？

对四个图形进行进一步的分析

最后取四个主“觉”们的共性，这样又形成了，

四个图形都具备的特点。

以上是前记，好“觉”现在才开始，

来吧，主“觉”们秀一段.

（吹下水先/）

通过稳固的八边形构建标志，表现钻石车胎的产品拥有如钻石般的品质，在业内具有不可动摇的地位。八边图形与中部原点构造的统一的形象，寓意企业提供始终如一的优质产品服务及与顾客建立长期而稳定的合作关系

精彩继续 ,

企业标识与英文名称组合

企业标识与英文名称组合标准化制图

企业英文名称标准化制图

单色应用。

四个图形后面VI都有延伸，后续部分下集分享。

谢谢观看。

最后分享一张现场提案的照片，

那种感觉很深刻记在心里！

小弟不才，在文字阐述上还有欠缺，欢迎专业人士提出宝贵意见。

LOGO以采用，仅供参考与学习。

本文由 站酷网 – Kongzhan 原创

方法非原创，原作系列在此：http://estudiogoro.tumblr.com/。偶觉得这些徽章图标纹理运用比较巧妙且精致，很有生活气息，遂模仿了一下。以下是我个人仿制的过程步骤，原作PSD与教学在此下载。

1、打开Photoshop，新建一个空白文档。使用叠加等图层混合模式简单几步做出背景：

2、开始绘制图标：

深绿色的外环图层样式参数如下：

3、织布的纹理需要使用Illustrator来做。主要使用到了AI里面的波纹效果（菜单 -> 效果 -> 扭曲和变换 -> 波纹效果）和虚线。

制作纹理过程中会用到的一些图形：

4、接下来就是将AI里面制作好的纹理应用到Photoshop里面去。在AI中直接选中一个对象并复制，可直接粘贴到PS中。在这个教程中一般选择“智能对象”，可以保留完整的外观。

镶边的缝线，浅色的半径比深色的缝线半径要大，但是宽度更窄。置于最后的缝线有深色和浅色。深色置于最后，浅色在其上，并略微旋转2－3度，错开一定角度，就有了缝线的立体感：

5、然后就是绘制中间的图案部分。此部分方法与之前大致相同，在此不赘述了。最后给徽章加上阴影，如果环境有光源，那么给徽章加上一些明暗。至此一个精致的带有织布和缝线纹理的徽章图标就绘制完毕了：

下载：badges_png | badges_ai | badges_psd

本文由 站酷网 – hasaddl 原创

在网站或软件的策划和设计过程中，我们经常听到这样的讨论：“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题，也是方兴未艾的Web2.0大浪下设计师们的最爱（看看那些在全世界遍地开花的SNS网站，无论是视觉元素还是交互流程均能轻则轻）。本文主要从实践和总结的角度出发，提出了让设计变得更轻的6个技巧。

何为轻设计：

　　在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义，只是归纳了大家对轻设计所应具有的特性的理解。
具有灵敏的可交互元素：页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。
轻便的流程和提示，不打断用户的当前任务：一项任务尽量用少而清晰的步骤去完成，提示和临时任务尽量不中断用户主任务，不要让用户做不必要的确认和操作。
不干扰用户的注意力：用户是来使用产品和服务的，而不是来欣赏精美的设计，如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。

轻设计的6个技巧：

1. 灵活的logo响应区

　　点击网站的logo通常能将我们带回到首页。从这个角度看，Logo不仅起着品牌标识的作用，还承担了重要的导航功能。就连普通的链接当在鼠标划过时都有下划线或者变色提示，那么logo作为一个更为重要的可交互元素，是否也应该在鼠标划过时提供适当的反馈呢？
　　下面列举了几个logo区灵活响应鼠标例子，在使用过程中发现，小小的变化不仅提升了可用性，还让网站显得灵敏而有生气。

2. 灵敏的可交互元素

导航对于网站的重要性不言而喻，导航元素要即时响应鼠标操作。

重要的操作和引导按钮应该设计得更加细致些，包括按钮的三态（常态，hover，active）甚至四态（增加一个禁用态）。这么做也是为了使重要的可交互元素对不同的操作及时给出反馈，使其显得灵敏高效。

文本框的状态也是一个容易被忽略的细节，主要是获取焦点后无提示或者提示不够明显。

另外对于一些响应时间稍长的操作，应该给出进度反馈。似乎是显而易见的道理，但是设计中往往也容易忽视。

3. 清晰且温和的提示

　　提示通常都是提供辅助性信息的，既然是辅助性的，就不宜喧宾夺主过分强化。除非必要，也最好不要给用户带来额外的操作（比如需要用户主动关闭，确认等）。提示的内容也是为了带来帮助或者提供反馈，因此言简意赅最重要。

twitter中更换个性化主题时的提示，从页面顶部柔和出现，停留片刻后自动消失。

meme中的follow提示，在操作处出现。

4. 隐藏或弱化不常用的操作

　　不常用的操作可以弱化，或者隐藏起来，当鼠标经过的时候再出现。这个是基于上文提到的不干扰用户注意力角度出发的。

Twitter中将每条微博条目的操作隐藏了起来，减小了对阅读的干扰。而且在鼠标经过条目响应区和操作时，都有相应的变化以作为反馈。

flickr中针对照片的操作也使用淡灰色，尽可能弱化和减少对照片浏览的干扰。

5. 引导和强化推荐操作

　　强而明晰的引导是十分必要的，研究表明用户在浏览页面的时候是跳跃性、非线性的，用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理，以便于寻找和点击。

大而易用的表单和注册按钮

箭头和红色的按钮一起提供了明晰的视觉路径指引。

常用操作的特异处理。某些浏览器的后退操作也有类似处理。

6. 轻便处理临时任务

　　如果在看一部精彩电影的时候想喝水了，是希望走到厨房间倒水呢还是希望手边就有一个杯子和水壶？显然人们都不太愿意中断主任务和注意力去处理临时任务，页面设计也是如此，能在当前页面完成就尽量在当前页面完成。模态窗口、跳转页面、付出层等都不是让用户觉得舒服的做法。除非确实必要，少使用这样的做法。

flickr中对相片名字的即时编辑，当页完成，非常轻巧。

Delicious中对收藏条目的删除确认，同样在当页完成，轻巧且很好地降低了骚扰。

小结：

本文从可用性角度提出了轻设计的几个技巧：
1. 灵活的logo响应区；
2. 灵敏的可交互元素；
3. 清晰且温和的提示；
4. 隐藏或弱化不常用的操作；
5. 引导和强化推荐操作；
6. 轻便处理临时任务

以上仅是个人的实践和经验总结，欢迎大家指出不足之处并提供更多轻设计方面的建议。

原文：http://www.kevinzhong.com/index.php/2009/6-tips-for-creating-sensitive-website/

【译者的话】 设计师不应该是只会坐在咖啡馆里拿着一个手提电脑或戴着iPOD听着音乐然后看一下有没有异性打量自己的那种装模作样的小资。毛主席教导我们：到群众中去，从群众中来。这同样是一个设计师必须紧记的工作态度。现在很多的设计作品都很漂亮，从设计技巧上来说无懈可击，但却不真实。无论是颜色还是设计元素，都是设计师凭空想象出来的。本文试图通过一个设计案例，来探讨如何才能设计出一件真实可信的作品。

原文出处：www.bamagazine.com

在本文之前，让我们先来了解一下这个设计的一些背景，然后再来看一下我们是如何将一个平淡无奇的设计改造成一个真实而且令人留下深刻印象的作品。

肯德基矿山夏季系列音乐会（ Kentucky Mine Summer Concert Series ）是在内华达州山区举行的一个低预算的晚上露天的表演节目。在 150 英尺高的松树下的一个小舞台上，莓草叶被风起来的声音、民谣及民歌歌手的音乐与仲夏夜森林中的芳香混合在一起，让这里变成一个让人陶醉的时刻。

我们改造前的设计

但问题是，这个音乐会的网页横幅的宣传却完全不能传达这种氛围，虽然它制作得很漂亮和整洁。问题出在哪里？它整齐的线条及平滑的表面既缺乏力量，也缺乏音乐元素和表现出那个山区的感觉。造成这种结果是因为设计师在设计时只是凭空想象，并没有深入这次活动中去。在本文中我们将会为你介绍如何将一些更好的元素加进设计中去。

音乐会的气氛中哪里？图中这个黑色的帽子是想表达西部乡村的夏季音乐会主题，但事实上它不起作用。因为图中的线条太直，字体太过平静，而空白的区域太多，不能传达真实音乐会里那些欢乐的、五弦琴的琴声及歌手跺着脚在唱歌的那种气氛。

让我们来解剖一下这个设计：

这个广告的设计师其实并不了解这次活动，于是便犯下一个通常的错误：凭想象设计。这样的设计明眼人一看就知道是人工成分太多。

除了字体的选择不合适外，还有一些不真实的元素：

• 正反两种颜色的区域不真实；
• 区域多呈直线和直角并不真实；
• 颜色采用一些现代感的颜色不真实。

不真实的元素

为什么这么说呢？说起乡村山区，你脑海里的第一印象是什么？难道是整整洁洁、井井有条的那种样子？

如果仅从设计技巧上来说，这个广告其实做得不错：它视觉元素重点突出，颜色和谐，字体统一，而且排列整齐，没有混乱的感觉。但它却毫无生气，因为它不能反映事件的本来面目。举个例子，整齐光滑的平面和直线让人想起的只是都市里的会议室，并不是山区那种户外的感觉。

直线和平滑的表面让人联想起城市，而不是乡村

深入生活吧。真正的山区是这样的：有树，有岩石，有木制的小屋，有破旧的运货四轮车。这些元素都是呈现一种粗旷的、风化的、粗野的气息。

几张乡村的照片

另外，原来的广告的字体太过静态，空间过于消极：

音乐在哪里？我们说过，这个帽子是这个广告的焦点，但与文字却毫无关系：我们阅读的习惯总是从左到右横穿整个页面的，然后就希望能够看到一个与其有关的东西来加强我们观看的效果。但图中的帽子既没有传达树林也没有传达音乐的效果。所以，这个帽子并不能与文字产生某种联系。

下述的字体是采用 Quirky ITC Usherwood 黑体，该字体从某个角度上讲是一种可以吸引人的字体，一是该字体在字母“ M ”及“ N ”上有独特的半衬线，而且也呈现一种不规则的效果。但也正是这种特点，命名这种字体看起来有太多的设计味在这里，反而显得不真实和亲切。

让我们开始改造：

为了传达真实的气息，我们需要真实的视觉符号——真实的物体、真实的颜色、真实的图案。而由于这是一个聚会，我们还需要有一些让人感到惊讶的东西——更少的空间。

在一个空间不大的地方挤满人可以产生一种聚会的感觉（上图），而一个空荡荡的空间却不能产生这种效果。所以我们第一步，就是将多余的空间去掉。将原来横幅的高度收紧。在这里我们用了原来高度的 65% 。

我们将高度缩紧到原来的65%，背景我们使用了一张陈旧的羊皮纸图片

• 将一切光滑的东西去掉：我们采用一张显得很陈旧的羊皮纸作为背景图案及整个空间的区域。
• 将帽子扔掉，我们用了一个五弦琴，使整个效果不但立即就能传达音乐的气息，而且还能传达一种很特别的音乐韵味。

一把五弦琴（班卓琴）

选用乡村字体：为了使整个效果出来后没有太多的“设计味”而是真实的，就象在淘金时代就存在一样，而为了使整个空间产生一种拥挤的效果，我们的标题一定要采用厚重结实的字体。我们采用 Poplar Standard Black 字体。

Poplar 字体是根据 19 世纪 30 年代的一种字体重新设计的。因为这种字体内部几乎没有留下空间，使它充满了厚实感及力量感。而它的外观又人联想与木头有关的东西——不平坦、不精细、不规则。它只有一个缺点，就是在字体较小的情况下，它难于阅读，但字体较大时，则不存在这个缺陷。

这个标题字体采用什么颜色？不要去凭空想象什么所谓的“漂亮的颜色”，它要来自真实的世界。我们通过 PS 中的吸管，在真实的照片中采用了这种泥土气息的颜色，这种字体的颜色与这次活动是非常配合的。

从现实世界提取颜色

标题颜色定好了，那其它文字采用什么颜色与这种棕色搭配呢？利用一下色轮我们就可以找到。根据经验，一般邻近色（或相似色）的搭配一般都有良好的表现效果。

其它文字采用什么字体？我们采用 Rosewood 字体。这种字体与 Poplar 简直天生一对，因为象 Poplar 字体一样，这种字体的宽度没有规律，还有特别的衬线，也有短粗的字母伸臂（ E 和 F ），字母的线条也一样不规则。唯一的不同是，这种字体在很小的情况下也容易阅读，因为这种字体空间很开阔（见上图）。

生动的构图：

我们手上有了这些刚才所述的背景及图片，设计效果开始真实起来。现在，我们要解决的是构图。为了有个生动的构图，我们可以想一下这几样东西：集中、轮廓及角度。

角度传达动感：角度有一种不稳定的感觉，使到它能产生一种紧张兴奋的效果。同时，倾斜的物体越靠前，这种效果就越明显。所以我们要做的就是将这把五弦琴放置成一个角度，并且尽可能离观看的人近一点（亦即大一点）。只要有空间排列文字就行了。

三种不同的构图

问题又来了，五弦琴要多大才合适？我们可以先考虑一下两种极端情况，上图最上面的这个五弦琴占的位置非常小，而且是一个完整的图案。但它太小的，没有力量。

而中间那个图又太大，几乎就象贴近你的脸上一样。这个设计只会使整个设计的重点放在五弦琴上，而不是这个活动上。

五弦琴的这种放置能呈现最好的视觉效果
既可以产生动感的效果，又可以留出空间来传达其它信息。

字体绝对不能随便放上去就了事，就算你放得很整齐。文字是看得见的语言，当你放上这些文字时，可以使用不同的字体、大小、颜色及位置的变化来模仿自然的气息。而且要将字行与字多余的空间去掉。

我们来看文字排列的三种情况：

上图上：这种字体都采用同一种尺寸及字体样式，虽然每一个字母都不会使阅读的人遗漏，但却不自然。可以说，并没有一种“文字声音”上的变化。显得呆板。

上图中间：这种文字排列层次分明。文字大小泾渭分明，但因为两行文字长度差别太大，使文字没有成为一个整体的效果。也显得缺少冲击力。

上图下：这种排列一看就是一个有机的整体，不同的文字字体及大小组合，使到文字虽然排得很密，但仍能使观看的人不会造成混淆。而且整体上也呈现出一种厚实的区域，与我们在这次设计中所追求的效果一致。

我们采用了上述的这种文字排列方式

最后，我们加上一句 Foot Stompin’ Fun! （跺脚的乐趣）在上面，颜色与下面日期的颜色一致，使整个效果更协调。黑色的“肯德基矿山竞技场”与粗壮的棕色的大标题形成对比，突出了大标题的力量。而“ T ”刚好被五弦琴压住一点，是想使视觉上有纵深的感觉。

不同的几个尺寸，以便对不同的情况适用

随机应变：作为一个网页的横幅的广告，我们可能要多留一条后路。在不同的地点需要不同的尺寸。所以我们必须要作必要的调整。但这种调整必须要紧记主要的元素一定要一致。图中显示的另外两个尺寸主要元素（包括颜色、字体）仍然是一样的。但综合来说，我们仍然认为最上面的设计是最有力量的，所以在可以的情况下，仍然要首选这个设计。

本文采用几种颜色的数值

设计与开发之间本有一线界限，但当时代步入又一个十年，这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面，足矣？或许五年前是吧！现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计，那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计（responsive design）、持续联系（constant connection）和虚拟现实（virtual reality）。

作 为设计师的你，2011年会作神马打算？真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗 忘。出色的设计师犹如造梦师，给用户创造一个梦境，让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素：优秀的配色，直观的设计，良好的交 互性和快的响应速度。此外，永远不要低估简约的力量。2011年，你的设计不但要考虑笔记本、台式电脑，还要考虑智能手机、上网本和平板电脑等设备。你都 准备好了吗？

2011年网页设计趋势有何变化？一起关注11个网页设计趋势热点：

1. 更多的CSS3 + HTML5

这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2011年CSS3+HTML5将会得到更广泛的应用。网页 设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2011年，Flash渐行渐远，魔术师 “HTML5”成为舞台的主角：

当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此，2011年两者会各自保持属于 自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用 HTML5替代Flash，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash，Flash的某些效果HTML5暂时还不能够实现。

然而最值得人兴奋的是CSS3的应用越来越广，在某些地方甚至超越PS（Adobe表示有鸭梨），因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会，是时候去了解CSS3和HTML5。

2. 简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。比如：

只是简单的绿色，通过调节透明度设计出如此美观的Twitter可视化工具。可要知道：这个网页只是用了XHTML/CSS和Javascript，给力吧！

红色绝对经典，如果配色做得好给人的视觉冲击就更……。上面的网站独特的红色和易友好的文字设计让人不得不为之折服

3. 移动互联网时代的到来

智能手机，ipad和上网本随处可见，OMG，2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。

创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素，那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是，新的技术让一切变得更简单。

在使用CSS3的情况下，设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。

你也可以设计一个移动设备专属的网站，但相信那个网站不久还是要改版的，以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选 项。如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化，那你并未准备好迎接移动互联网时代的到来。据相关预测，智能手机销量将会超越个人 PC。赶快准备好，迎接移动设备大军的来临。

4. Parallax Scrolling

先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现（示范站点：站点1 站点2）。Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果：如header、footer或者背景。不过最好不要运用于网站导航，那显得有点不伦不类。

Old Pulteney Row to the Pole 在网站背景使用了Parallax Scrolling特效，打开该网站然后往下拉即可看到效果。

5. 设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗？

作为设计师，我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮，然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接？

同样，如何才能做到方便你的游客仔细阅读您的网站？这可能在浏览器标准上存在争议，或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览你的网站。

最后，你必须考虑在你的网页设计中使用流体布局（liquid layouts）。2011年，你需要处理的重点不再是屏幕分辨率问题，而是如何做到使访客从垂直到水平阅读你的网站都会清晰。你的设计必须做到灵活以应付任何的挑战。否则你将会成为过去式。

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. 深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。

Plántate提供了一个可旋转的3D地球，灵活利用阴影和层等手段。

Jordon活动页，3D元素清晰简单，设计非常醒目。（貌似已经撤掉）

7. 大背景图

大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。

当然背景图的色彩、内容等都十分讲究，任何情况下都不要破坏用户的体验，不然再漂亮的照片也是枉然。图片类型趋向于一些比较柔和、略带透明的一类，不要影响到网站文字的阅读，讲究协调，易于阅读。

上面的网站使用了高分辨率的图片作为网站的背景，网站主色调是黄色。

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. 不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短 的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。

.me 用在个人展品陈列页、博客是非常不错的。

另一个.me域名的示范

9. QR: Quick Response

如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门。但它跟网页设计何干呢？实在匪夷所思。

这个方形的条形码被称为QR，全称为Quick Response（在“QR Code读取器QuickMark” 介绍过）。使用你的手机拍摄一张唯一的条形码的照片，像魔术一样，手机上读取QR的软件就会打开条形码相关的网站。最美妙的事情是你可以将QR应用到很多 地方。应用QR到你的网站，目的是让浏览者拥有一个你的移动网页的快捷方式。你还可以通过在您的网址上放置一个特殊的推介代码QR追踪你的访客。 哈哈，你完全可以使用QR作为你的头像，然后到别人的网站留言、评论。2011年的移动媒体优势更加凸显，而利用这点优势的网页设计是最明智的选择也是将 来的发展趋势。

上面是软矿博客的QR . 如果你也想创建一个，猛点击这里 .

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。

如果你的设计是基于Flash，会存在这样的一个问题，预览将无法显示你的设计元素。

2011年的一般互联网用户变得更加精明，他们更希望看到更多人性化的导航设计。

11. 持续联系/ Life Stream

Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等。

最后一点，不是最不重要的一点，是网页设计更加注重人与人之间持续联系，如Life Stream。互联网本身是原始的，枯燥无味的，是人类通过这个开放的平台分享他们的一切才变得多姿多彩。将来人们还会而且加强如 lifestreaming的形式进行人与人之间的交流互动。作为网页设计师，你必须了解这个趋势和应对这个趋势。

2011年，个人博客在Twitter feeds更活跃（不只是连接到Twitter页面的链接），人们会通过Foursquare互相传递即时信息，where are u and what are u doing。毋庸置疑，2011年将会带我们走进一个更交心的互联网时代。

个人网站，使用了 lifestreaming。

一个商业网站，在一个页面上综合大量信息。

MK编译 via WDL

软矿原创文章，

一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。

同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，关键是要能够确定哪些细节更具有影响力。

增加价值的细节

这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站。

一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，但是如果这些细节被移除，用户将在感知和可用性方面感觉到明显的差异。这些就是我们愿意花费时间的细节。

那么一个设计细节到底如何为网站带来附加价值呢？诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就可以发生很大的差异，使之产生更大的影响。

这些差异到底是什么？

进一步观察

我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大时，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方面图片吧。

以Concentrate 网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。

除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。

像素级完善

真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出来。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。

其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者之间的阴影和背景提供了对比，但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这个顶部区域。

差异

当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些线条来向大家展示两个像素能够带来怎样的不同。

微妙的阴影

阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。

我们在设计中采用CSS3，它可以带来的宏伟的差异让我们很容易为之兴奋不已。而对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。

还是来看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用了CSS3的text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。

差异

比较上面的截图以及同样的页面在IE8（不支持text-shadow属性）下渲染的效果，我们就能发现它更难看得很多。

值得指出的是这个网站卖的是Mac软件，所以自然地不那么重视IE用户的体验了。

导航细微差别

除了增强易读性和强调可能的网站操作，细节对网站导航也有很大的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页面。毕竟链接是起初使得网页之所以称之为网页的核心，所以为什么不多花一点点时间在适航性上呢？举个例子，我们来看 Lipperhey 站点。

除了为导航的活动状态选择好的颜色以外，我们发现它的设计为网站的主导航栏添加了一些用趣的细节。
Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了几个像素。其次，按钮背后被加上了阴影并且对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉，指示了它的重要性及激活状态。

差异

再看一下没有上面提到的细节的导航，我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。

细节更进一步

我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)。但CSS3的强大远不只是阴影。CSS3动画，表现为transform和transition的属性，给我们的细节工作增加了额外的工具。

只要使用得当，CSS3动画为我们的网页元素添加高效的动画效果，而不需要借助Flash或JavaScript。在细节方面，动画允许我们在各种输入情况向用户提供流畅的反馈。例如为链接的hover状态或按钮点击添加过渡动画，可以告诉用户他们鼠标正悬停在（或触摸，对于触屏移动设备）一个活动的元素上面。

与网站细节相伴的工作的美好在于通过进一步努力，我们仍然可以为我们的用户提供部分价值，而不需要疏远那些使用过时的浏览器的用户。关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值，没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。

网站还能在哪些细节方面改进来增加它的价值呢？你做过的项目还成功地使用过哪些类型的细节技术？

查看英文源文

来源：http://rockux.com

响应网页设计目前在网页设计中无疑是一个热门话题。从某种程度上来说，响应网页设计概念的普及是非常应该的，因为用户以越来越多样化的方式访问网站。iPad，iPhone，Android移动设备，桌面，笔记本——现在我们的网页设计必须在众多方式下使用。

让我们来了解响应网页设计的含意和原则。

响应网页设计的关键特征

认为网页设计是“响应”的，需要有三个关键牲。网页设计师和开发者Ethan Marcotte——提出响应网页设计的人——将这些特征描述如下：

• 网站必须以灵活的网格为基础构建。
• 设计中包含的图片也必须是灵活的。
• 在不同的环境中必须可以通过媒体查询拥有不同的视图。

CSS-Tricks根据浏览器窗口的大小改变它的网页布局。

重要的是要注意所有这三个特征都必须实现，以使真正的响应网页设计生效。

任何缺少这些特征的设计都不是一个响应网页设计。它是不可改变的。

接下来，让我们来深入研究这三个特征，以更好的理解它们如何融合并给我们带来完整地响应网页设计。

灵活的网格

网格这个术语对于网页设计来说变得很含糊。说你的网站必须由灵活的网格组成并不意味着你被限制于从几十个现有的很棒的网格系统中选择一个。

对于列，间距和容器定义自己的参数对于网页设计来说往往是最好的方案，并且可以与任何现存的系统一样灵活。

事实上，大多数存在的网格系统都限制于使用CSS类来定义大小，间距和排列。试着附加这些限制到一个响应网页设计上可能会很棘手并且比写自己的布局更浪费时间。

不管你是使用预置的网格系统还是使用自定义的解决方案，灵活网格系统真正重要的地方是你的布局大小和间距的机制。

对于网页设计者，这意味着要放弃我们心爱的像素，并用百分比和em这样的相对测量单位的网页布局代替它们。

当然，这不意味着我们不再在我们的图像编辑软件（即Photoshop，Fireworks等）中使用像素。取而代之的是，增加的一个需要简单的数学计算的步骤成为网页设计过程的一部分，因为我们要将我们的像素转化为使用相对单位的网页布局。

St Paul’s School网站使用了灵活的网格布局，它可以根据浏览器的窗口大小改变布局，布局的改变以平滑的动画来展示。

灵活的图片

图片随着我们的灵活的网格移动和缩放是响应网页设计的更一个关键特征。灵活的图片常常让网页设计者有些头疼。加载一个区大的，超出大小的图片，并在更小的浏览设备我们需要更多的空间来显示内容时使用HTML的width和height属性来缩小它不是一个加快网页加载速度的很好实践。

当然，这个问题有多大取决于图片对你的网站带来的压力有多大。随着网页设计发展，我们看到网站越来越少的使用没有必要的图像和图片库。可能这是一个好机会去评估你的网页设计是否需要像现在这样多的图片。

另一个缩放图片的方法是使用CSS裁剪它们。CSS的overflow属性（比如说overflow:hidden）让我们能够动态地裁剪图片，并使得周围的空间能够适合新的显示环境。

我们也可以在服务器上有多个版本的图片，并且根据用户agent等服务器或客户端特征检测技术动态地使用不同大小的版本。

最后我们可以完全隐藏图片，如果我们真的希望关注无图的内容，可以在样式表中将图片设置为display:none。

Think Vitamin中的图片元素是灵活的，它们根据浏览器窗口大小缩放。

媒体查询

媒体查询对于响应网页设计无疑是最令人兴奋（也是对于不熟悉它们的人最可怕的）特征。

人们时常会对媒体查询有错误的理解，把它当作是一个响应设计的核心部分而认为灵活是可有可无的。真实的情况是，如果没有实现包括灵活网格和灵活图片在内的坚实的HTML和CSS基础，媒体查询几乎是没有用的。

媒体查询允许设计者使用相同的HTML文档创建多个布局，通过基于用户agent特性（如浏览器窗口大小）来选择不同的样式来实现。其它参数有方位，屏幕方案，颜色（即屏幕可以渲染多少种颜色）等等。

下面是媒体查询根据窗口宽度来选择样式的例子：

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

媒体查询没有明确是移动解决方案还是平板方案。取而代之的是，媒体查询和响应设计允许我们跳出屏幕大小或方案来思考，并且开始创建一个灵活的适应所有不同媒介的网站。

UX London uses meta viewport to set the scale and layout width.

响应网页设计到底是什么

虽然我们研究了响应网页设计的三个特征，但是好像真的没什么值得兴奋的。事实上90%构成响应网页设计的是良好的网页设计的开头。组织良好的HTML和灵活的布局对于现代网页设计来说是日常工作的一部分。Marcotte提倡响应网页设计所做的事就是向我们展示一种新的方法来实现我们不管如何都本应该做到的良好设计实践。在现代环境下，提供灵活的布局更加有必要，这样我们可以更好的适应现存的多样的浏览情况，我们要设计得更流畅和灵活。

响应网页设计让我们关注于花时间去做正确的事，不仅仅是我们如何写代码，而且是构思新想法和执行新的设计。

8 Faces magazine具有灵活的布局

这还不够

任何有过创建灵活内容和媒体查询经验的人都会意识到这并不是创建适应每一个用户agent网站的最终的，一切的解决方案。用户通过不同的浏览设备浏览网站通常会有不同的需求，这取决于他们使用的设备。

移动浏览器用户可能最关心的是可以尽快地访问到最核心的信息。对于酒店来说，可能是菜单，服务电话号码，物理地址以及楼层等。对于这样的情况，下载整个网站并显式的隐藏90%的内容并不是一个完美的方案。

正确的方向

响应网页设计是正确方向上的一步。许多网站坚持从响应设计中获取很多好处，并且每一个设计师肯定应该能够执行这个方案并寻找优化他们的设计的方法。

当设计者地在适应各种设备和情况的解决方案上不断进步，设备也尽可能地努力在显示网页上寻找最完美的和直接的方法。

两者相辅相成，我们就必然会有越来越多的机会来创建更动态，更有魅力并且更美丽的Web世界。

而那就是值得奋的事情了[English]

转载请注明：
作者：RockUX–WEB前端
出自：理解响应网页设计元素

最早看到这张图的时候，还觉得能产生这个不可思议，因为当时是在创业型公司，而且之前经历的即使是大公司也都是创业型的产品，小团队的好处就是勤沟通，常交流，从设计到开发阶段，每个人都在参与和思考，目标一致，所以一直觉得这个图片算是夸张夸大了信息的传达，直到今天有了教训，开始思考。其实问题本没有这么大，不过对于这类问题，宁愿放大了想。

上面的这个结果一定是最糟最坏的，也是所有人都不愿意看到的

• 产品本身就是失败的了
• 浪费了大量的人力物力
• 对每个人的打击也都是很大的
• 耽误了时间，浪费了市场机会

但是如何产生的？我开始问自己，静下心来想想可以理出来几点原因，当然，回忆原因的目的是为了更好的解决问题，从避免到杜绝这种问题的产生。

1. 前期思考的不到位：在单页面复杂交互的时候，单纯的静态demo无法完整的显示全部的逻辑，包括各种分支。过去在做产品的时候对于复杂的页面都会做一个单页面的逻辑图，用来校验整体的逻辑设计，交互设计。但是现在看看，这个方式对于更复杂的交互可能多少还是力不从心。
2. 信息表达的不到位：如何通过合理的方式来展示出交互逻辑依然是一个值得思考和尝试的问题，及时通过axure可以实现部分交互，但是在更多复杂的情况下是无法满足的，同时大量的制作和维护成本无法适应快速调整和变化的设计节奏。后面还是需要考虑更有效的表现方式。
3. 信息传递的不到位：产品的设计完成只能是50%,，设置是小于50%。其他的比重是开发和实施阶段。这个阶段实现的方式和质量的保重尤为重要。真实的实现产品的功能逻辑，同时需要考虑未来产品功能的扩展，对运营市场等活动的支持等，需要多方考虑。同时如何有效的传达功能的逻辑是需要考虑的。
4. 需求变更后的验证：需求的变更和调整是一定会存在的，记得一句话：唯一不变的就是变化。变化是无法完全避免的，但是发生变化之后，调整产品之后还是需要完整和细致的重新检验一下新的设计，在满足变化的同时，是否增加或者复杂了操作方式。
5. 前端技能的缺失：虽然具备一些前端技能的基础，但是对于AJAX的了解依然不够深入和系统，否则应该可以在异步同步数据处理方式上尽早的发现一些问题和隐患，尽早避免问题的产生。
6. 没有尽早的投入到测试当中：产品人员需要尽早的投入到产品的测试当中，在研发的时候就需要与开发人员进行紧密的沟通，尤其是影响产品的关键环节
7. 多项目并行：多项目并行导致思考的内容和方式在不断的转换，中间容易产生“断档”，导致前后思考的方式方法不一致，最终会影响到产出的质量。虽然有时“对产品麻木了，可以放一段时间回来看，能发现问题”，但是这个方式一般是对产品整体流程或单个“静态”的点是有效的。

总结一下，发现比较理想的环节就是：设计->验证设计（自我）->表达设计->验证设计（开发/产品/其他相关）->开发->验证设计->测试。提高验证设计的频率和调整验证设计的环节是很关键和必要的，同时配合前端技能的提升。

最后向辛苦了的前端同学致敬加道歉，感谢你们……….

来源：http://pd4.me/blog/idea/consider_the_problem_of_discrepancy/