在区分平凡和非凡时，细节会产生天壤之别。一辆豪华车的车轮、座椅、门窗数量可能与传统汽车相同，但让它在竞争中脱颖而出的是花在细节上的时间。加热真皮座椅、一键启动引擎、无钥匙进入、自动停车和大量的数字控制台为一辆昂贵的新车增添了价值。
同样的原则也适用于网页设计。花时间钻研细节的网页设计师将收获更有价值的设计的回报。这里的关键词是价值。没有人能保证投入创建网站的时间和结果的价值之间有直接的关联。
有些细节比其他细节更重要，能够确定哪些细节会产生影响是很重要的。
增加价值的细节
我们想要花更多时间在细节上的类型可以提高我们的工作，超出审美水平。我们希望专注于能够深刻改变用户体验的视觉调整，比如用户感知网站主题和信息的方式，或者他们如何浏览网站．
一般的网站访问者，一个没有创建网站经验的人，将无法指出改善他们体验的细微差别，但如果这些细节被删除，在感知和可用性方面的显著差异将被揭示出来。这些都是我们想花时间研究的细节。那么，设计细节究竟是如何为网站增加价值的呢?
诀窍在于用户体验．网页设计师应该有一个很好的理解如何负空间，对比，形状，颜色所有不同的视觉元素都在人们如何使用和感知网站设计中发挥着作用。令人惊讶的是，设计师在开始产生更大影响之前，只需要处理很少的像素。
有哪些不同之处呢?
仔细看
当我在Photoshop中放大到500%或更接近时，我感觉最舒服。这里有家的感觉。
让我们来挖掘一些设计工作，这些工作很好地指导了我们的经验与微妙的细节。我将使用集中注意力以网站为例;这似乎是一个适合我们首先集中注意力的地方。从一个高级视图开始，我们可以看到一个创造性的视觉文字游戏，它正在浓缩液网站上进行。
在浓缩橙汁罐头之外，我们看到了橙色主题的调色板和背景，很好地模仿了真正的橙子的纹理。再深入挖掘一下，我们看到CSS3已经被用来为文本提供一些阴影，以增加与背景的对比。为了真正欣赏细节，我们需要挖掘得更深一些。
像素完美
真实的细节被应用到像素级。我们在浓缩液网站上看到这个行动号召按钮在顶部附近网页布局．首先，按钮后面的阴影提升了页面的这一部分。
在区域的顶部和底部的两个简单的单像素线是一个简单的设计技巧，它给出了这个区域更强的视觉区分在页面的其他元素中。
其中一条单像素线更明显，因为它是亮橙色的。这提供了投影和背景之间的对比，但真正有帮助的是第二条较暗的橙色线。
这两条单像素线一起工作，把上面的部分围起来。
的区别
当这些线条不再是网页设计的一部分时，这种差异得到了最好的体现。下面，我删除了这些行，向您展示两个像素可以产生多大的差异。
微妙的阴影
投影在网页设计中并不陌生。大多数网站很早就利用它们来模拟平面二维介质的深度。阴影和高光可以以微妙但强大的方式改善我们网站的体验。
当我们采用CSS3在我们的设计在美国，人们很容易对它所能带来的巨大不同感到兴奋。不过，对我来说，真正令人兴奋的消息是，有多少细节工作可以从图像编辑软件直接转化为我们网站的代码。在浓缩水网站上，我们看到了一个很好的例子，说明了文本阴影如何以一种微妙而有效的方式使用，使网站的内容更易于阅读。
CSS3文本阴影在这里，财产有两种使用方式。首先，红色标题得到了一个较浅的阴影，以提供嵌入/嵌入外观的颜色选择，否则将不会工作得很好。第二个阴影位于段落文本的后面，简单地让白色在页面上有所提升。
的区别
将上面的截图与Internet Explorer 8(不支持文本阴影属性)，我们看到了一个更难以阅读的站点。
值得指出的是，该网站销售的是Mac软件，这自然会大大降低IE用户所看到的内容的关注度。
导航细微差别
除了提高可读性和强调可能的网站操作，细节在网站导航中有很长的路要走。
任何网页最重要的部分是你的用户导航到另一个页面的能力。毕竟,链接是什么让网络成为现在的样子，那么为什么不花一点额外的时间在可导航性上呢?对于本例，我们将重点转移到Lipperhey网站。
除了导航活动状态的良好颜色选择外，我们还看到该设计为其主导航栏添加了一些有趣的细节。的首页除了颜色的变化，Button还有其他一些原因。首先，我们可以看到它从导航栏下降了几个像素。
此外，在按钮后面添加了一个阴影，并在视角上进行了轻微的调整。这两个细节一起给这个链接增加了维度，表明了它的重要性和活跃状态。
的区别
回顾没有上述细节的相同导航，我们发现许多令人兴奋的东西都消失了，我们的活动链接具有完全不同的外观和感觉。
与细节一起前进
我们探索了我们的新能力的一种方式CSS3能为我们的设计增添价值(文本阴影)．但是CSS3的力量并没有在阴影中结束。CSS3动画的形式，比如变换而且过渡属性，可以为我们提供详细描述工作的额外工具。
如果使用得当，CSS3动画可以有效地为我们的网站元素添加运动，而不需要Flash或JavaScript的帮助。在细节方面，动画可以让我们为用户提供各种输入的流畅反馈。例如，添加一个过渡动画来链接悬停状态或按钮点击，可以告诉用户他们正在悬停在一个活动元素上(或者在触屏移动设备的情况下触摸)。
处理网站细节的美妙之处在于渐进增强我们仍然可以为一部分用户提供价值，而不会疏远那些选择使用过时浏览器的用户。这里的关键是，我们使用所有这些技术来增加一个已经坚实的网页设计的价值。在没有基本可靠设计的情况下使用这些技术无疑是本末倒置。
还有哪些地方可以向站点添加细节来增加其价值?在过去的项目中，你成功地运用了哪些细节技巧?
相关内容
- 在Photoshop中创建一个放大效果
- 让你的网页设计更上一层楼
- 反馈。创造力杀手。
