首页 >交互设计 >大图轮换

7招提升网页设计品质

“高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧。

Untitled document

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节,一些别人几乎无法察觉的细节。我所说的 “像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线,不如多加一些细节。细节可以是细微的渐变,也完全可以只是一条1像素宽的细线(用作 表现阴影或高光)。有了这些细节, 你的设计会大不一样。有些设计师在这方面特擅长:Collis Ta’eedDavid Leggett以及Wolfgang Bartelme

像素级完美细节的实例:Envato的细节鉴赏

下图的Example 1(例子1)中,绿色内容框的边缘有一条更亮的绿色线。而Example 2处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边。这做法非常聪明,用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果,有助 于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。 尽管这种做法并不是总能让设计看起来更加精致,不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石,而不是平铺在上面的 一张毫无动感的纸。

quality_6.jpg

 

Tutorial9.Net上的细节

David Leggett 对于如何制造单像素顶边条有很深的理解。他最近重新设计的tutorial9集合了很多非常棒的像素化技巧。Example 1处你能看到,他是如何仅仅通过添加一条1像素的高光,而将导航标签变得更有质感。Example 2处使用的技巧则更多了。相机图标的投影,下方白色区域的阴影与高光,以及导航条上的1像素高光。

quality_7.jpg

 

RedBrick Health:按钮和分割线上的完美像素级细节

这个漂亮的导航菜单,由Ryan Scherf创造,是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮,链接之间的分割线也有同等的品质与细节。正如你所看到的,他没有满足于只用一条灰色线分割,Ryan还在下面添加了一条1像素宽的高光线,避免了设计看起来过于平坦。

quality_8.jpg

   

完美像素级细节也适用于Grunge风格:AvalonStar

译注:Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面,算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar:Distortion(扭曲)主题博客,有着极赞的grunge风格。不过,即便是肮脏做旧的 grunge风,利用1像素高光也能创造大不同。下图的Example 1处,上面的棕色区域有一个渐变阴影,下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合,让这些区块显得更为精致。

quality_9.jpg

  

完美细节小贴士

要在这一技巧上达到完美,不断的实践尤为重要。如您所见,一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变,费尽心力做一些实实在在的置于某对象之上的效果。

  ·一定要注重细节:小细节完善内容感官是关键。

  ·思考像素级问题:描边、渐变、线条、阴影等等,不用太宽大也能有效增强设计

  ·前后对比:应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。