网页设计理论:细节让优秀的作品脱颖而出

前一段时间在企业管理界流行一句格言叫”细节决定成败”。企业管理当然不是我们这里要讨论的主题，但是，把这句话放在网页设计当中的确是颠扑不破的真理。我们的眼睛和感觉总是非常敏锐的，即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品。虽然他说不出来为什么这件东西比那些都好，但是直觉会告诉他他自己喜欢哪一个。如果别人向我们问起为什么这件作品要优于其它呢？我们的回答是”很大一部分原因是因为优秀的设计作品总是充满了丰富的细节。”在这篇文章里，我们就从技术的角度出发，以PremiumPixels上的Redux WordPress主题设计作品为例，来总结一下在网页设计中到底是哪些细节让优秀的作品脱颖而出。

一、1像素的衬线

在页面的顶端，你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开，如下图：

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

实际上，网页设计中，使用到衬线的例子非常普遍。例如下面的这个例子中，你会在包围着”The Dorchester Hotel”文字的黑色边框的顶部向下1个像素发现一条灰色的衬线。

而在下面这个设计好的按钮中，绿色和黄色边框顶部向下1个像素也能看到一条颜色更浅的线条，而这条衬线制作的更为精细，因为它应用了蒙版，从顶部向下你会发现这条衬线渐渐隐去了。另外，在”Add To Cart”和”$9.99″两个文字之间的分隔线实际上是两条线，左边颜色深一些，右边颜色浅一些，这样就能产生线条的凹陷效果。

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

二、细微的材质

Redux主题真是解释背景材质的绝佳案例。因为在整个页面中，从上至下使用了三种不同的材质作为页面的背景。上面的深蓝色部分应用的是坑坑洼洼凹凸不平的材质，中间黑色

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!