细节让网页设计与众不同

《细节让网页设计与众不同》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、细节让网页设计与众不同细节使得这个世界从平凡变得不平凡。一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争屮脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，H动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的吋间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重耍，关键是耍能够确定哪些细节更具有影响力。增加价值的细节这一类型的细节是我们愿意在审美层面之外

2、花费额外吋间以改进我们工作的细节。我们希望专注于可以深入改变用八体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站o一般的没有建站经验的网站访问者，无法指出某些细微差别來的用户体验改善，但是如果这些细节被移除，用户将在感知和可用性方而感觉到明显的差杲。这些就是我们愿意花费时间的细节。那么一个设计细节到底如何为网站带來附加价值呢？诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就町以发生很大的差异，使之产生更人的影

3、响。这些差界到底是什么？进一步观察我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大吋，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方而图片吧。以Concentrate网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。像

4、素级完善真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出來。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者Z间的阴影和背景提供了对比，但是真正起作用的却是笫二个暗橙色的线条。两个线条相互配合起來封锁了这个顶部区域。差异当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些线条來向大家展示两个像素能够带來怎样的不同

5、。微妙的阴影阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。我们在设计中采用CSS3,它可以带来的宏伟的差异让我们很容易为Z兴奋不已。阳对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。还是來看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用TCSS3的text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效

6、果。基次在段落后面简单地给白色一点发射效果。差界比较上而的截图以及同样的页而在IE8(不支持text-shadow属性)下渲染的效果，我们就能发现它更难看得很多。值得指出的是这个网站卖的是Mac软件，所以H然地不那么重视IE用户的体验了。导航细微差别除了增强易读性和强调可能的网站操作，细节对网站导航也有很人的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页而。毕竟链接是起初使得网页之所以称之为网页的核心，所以为什么不多花一点点时间在适航性上呢？举个例子，我们来看Lipperhey站点。除了为导航的活动状态选择好的颜色以外，我们发现它的设计为网站的主导

7、航栏添加了一些用趣的细节。Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了儿个像素。其次，按钮背后被加上了阴影并几对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉，指示了它的重要性及激活状态。差异再看一下没有上血提到的细节的导航，我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。细节更进一步我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)o但CSS3的强人远不只是阴影。CSS3动画，表现为transform和transition的属性，给我们的细节

8、工作增加了额外的工具。只要使用得当，C