网页设计中那些不容忽视的细节

你有没有经历过看到一个页面的时候马上就被它的设计吸引并且留下了深刻的印象呢？然后你进一步细看这个页面发现真正使这个页面变得神奇的是一些小细节，在这篇文章中我们将看到几种把细节设计做到完美的页面。

完美的像素线

Image Spark 的设计师用一个像素的线条来分割顶部导航，搜索输入框，导航底栏。任何时候一个较浅的颜色紧挨着一个较深的颜色会使人出现有一个凸起的边缘的错觉。请注意这种线条只能比背景色稍微浅一点点。如果使用一条白线那将失去这种效果。

atebits使用了类似的技术，但是在这里是用来做一些分隔。注意他们是使用两个1px的线条相映成趣，一个明亮的一个暗一点的。这给人的错觉是一个插图槽。另外一个漂亮的接触线的两端是渐渐消逝，而不是突然结束。

恰到好处的阴影

阴影可以给页面增加一些深度，但是在使用阴影的时候有一点需要特别注意，不要过度的使用。ps中的阴影效果如果错误的使用会成为一个非常危险的工具。阴影的强弱应该与背景颜色结合使用。一个较暗的背景需要一个更暗的阴影，一个较亮的背景比较是个一个更亮的阴影。

Fubiz的设计师使用了一个微妙的阴影的错觉，提高了页面的导航栏。

为了好玩，让我们看看如果过度的使用阴影会发生什么。

白宫的官方网站阴影无处不在，但是他们都做了巧妙的设计，网站保持了一个非常干净的外观。

简单的渐变

渐变是一个非常简单的效果。它们可以被用来实现各种效果，如光源的错觉或建立深度，但是要保持它的微妙。Tapbots使用了一个简单的梯度背景使其出现光源照亮的iPhone。微妙的细节，像这样可以使这个页面更紧凑。在这个页面中渐变的效果使iphone更加突出。

Metalab的标签都有一个渐变填充。这样会造成深度的幻觉，使他们看起来略微凸起。Metalab的是上面提到的像素完美的细节也是一个很好的例子。

精确的纹理

纹理往往用于填充大面积。给一个设计添加一些有意思的元素，纹理是一种简单的方法，但是纹理也可以被用在更细微的地方来表达一些更精确的东西。

看看这个自我推广的页面。在我的收藏夹中，我用了大量的纹理来给他一种磨损风化的效果。然而，这不是仅仅是填补较大的空白的有质感的内容，还有一步用星星点点的纹理沿边缘添加更多的细节。

利亚姆·麦凯在他的设计中创造了微妙的油渍效果。在他的博客上，他用微妙的做旧的纹理，能够更有效地强调内容，而不是分散注意力。注意甚至1px边框线有一个破旧的外观。

================关于畅游VC================

搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。
官网博客：vc.changyou.com
新浪微博：@畅游VC

微信公众平台：cyou_vc

您也可以通过扫描下方二维码快速添加：