细节决定成败之网页设计中1像素的妙用

 　　“细节决定成败”这句话不管放到哪个行业都是真理，把这句话放在网页设计当中更是颠扑不破的真理。我们的眼睛和感觉总是非常敏锐的，即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好，但是直觉会告诉他他自己喜欢哪一个。如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是：“很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”在这篇文章里，我将着重讲一下细节中的一小点“一像素的妙用”。我们就从技术的角度出发，以我做过的几个站点作品为例，来总结一下在网页设计中到底是哪些一像素的用法细节让好的作品脱颖而出。

　　一像素的衬线

　　像素是网页上的最小单位，真正的细节应用在像素级。

　　我们再来看下图一、二中有无一像素的衬线的差别。 在页面的导航顶部，你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开，如下图：

　　图一

　　而如果没有这条衬线会是怎样的一个效果，我们也来看看图二。

　　图二

　　实际上，在网页设计中，使用到衬线的例子非常普遍。

　　而在下面这个设计好的按钮中，蓝色边框顶部向下1个像素也能看到一条颜色更浅的线条，而这条衬线制作的更为精细，因为它应用了蒙版，从顶部向下你会发现这条衬线渐渐隐去了

　　之所以要使用衬线，是为了体现物体在2D效果上的立体感，而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现，而高光效果的实现， 最常用的技巧之一就是使用衬线了。上面的三个例子的衬线都在物体的顶部，说明光线是从上向下照射的，高光处于物体的顶部。而如果光下从下向上照射的话，高 光就应该在底部了，那我们就应该将衬线放置于物体的下方。所以在衬线的使用上，我们始终要问自己这几个问题，”我在这里使用了衬线，那么光源在哪里?” “如果光源在这里的话，阴影应该出现在什么位置?”完成了这两个回答，设计出来的物体的立体感才能更加真实。

　　字体上微妙的阴影

　　在之前没有CSS3时候，字体阴影除非切成图片，所以没有用过，但是现在阴影效果可以用CSS3来实现了，现在对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。

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

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

　　我们在做效果图的时候只要copy一个图层错开一个像素，颜色效果调到足够柔和，不可过于强烈，不然很容易让整个设计看起来有一种脏脏的感觉，显得不够精致。同理右侧的世界地图错开一像素。

　　差异

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

　　下面我发一些其他的效果图，看看那些地方用到了衬线，文字上用到了阴影，看一下用与不用之后的对比!亲，都是一像素哦。

　　用过!

　　没用过!

　　局部放大到200%

　　对于一像素的细节应用还有很多地方有用到，等待您的发现。细节应用除了这一个1像素之外还有很多很多，这只是其中之一，抽空在与大家分享细节方面的应用!