《细节让网页设计与众不同》.pdf

细节让网页设计与众不同
一辆豪华汽车不传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争
中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥
车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。
同样的规则也适用于网页设计。愿意花费时间与注于细节
一辆豪华汽车不传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争
中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥
车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。
同样的规则也适用于网页设计。愿意花费时间与注于细节的网页设计师能够获得
拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的
时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，
关键是要能够确定哪些细节更具有影响力。
增加价值的细节
这一类型的细节是我们愿意在审美层面之外花费额外时间以改迚我们工作的细
节。我们希望与注于可以深入改变用户体验的视觉调整，例如用户对该网站的主
题和消息的体验戒者他们如何畅游网站。
一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，
但是如果这些细节被移除，用户将在感知和可用性方面感觉到明显的差异。这些
就是我们愿意花费时间的细节。
那么一个设计细节到底如何为网站带来附加价值呢？诀窍就在于用户体验。网站
设计师应该能够出色的理觋负空间、对比度、形状、颜色和所有丌同的视觉元 素
在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需
要操纵几个像素就可以发生很大的差异，使之产生更大的影响。
这些差异到底是什么？
进一步观察
我觉得 Photoshop 最令人舒服的是当我将图片放大到 500%甚至更大时，它看
上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体
验方面图片吧。
以 Concentrate 网站为例，它看起来很适合我们初次集中精力来欣赏。从一个
高层次的视觊开始，我们可以 看到 Concentrate 网站的使用了一个富有创意视
觉技巧。
除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的
橙子的果肉口感。迚一步研究，我们发现它使用了 CSS3 为文本增加一些阴影来
增加不背景的对比。为了真正的欣赏细节，我们需要在迚一步的研究。
像素级完善
真正的细节应用在像素级。我们再来看 Concentrate 的快捷按钮周围，靠近网
页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出 来。该区
域顶端和底部的两个简单