| 加入收藏

网站设计实例:追求细节的完美

2009-09-24 21:56来源:未知 浏览:[]
所属专题:

译文由笨活儿翻译

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

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

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

screenshot上的线条细节

Tutorial9.Net上的细节设计实例

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

screenshot-网页细节设计实例RedBrick Health上 按钮和分割线上的完美像素级细节

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

03. 网站设计实例:文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容,不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用,不过我不会给大家列一些该做什么或者不能做什么的规矩和条款,我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例The Netsetter上大而漂亮的字体

网页设计中,标题很重要,对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处,不仅能提高特定内容区块的可用性,而且有助于组织设计中的空间和结构。Netsetter在这方面做得非常好,如您所见,标题字体很大,周围有大量留白,十分易读。

网站文字排列的细节设计

行间空白和字符间距

Viget的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页,再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体,他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高(line height)[行间空白]的的绝妙选择。行间距被设定得比默认值大很多,大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

行间空白和字符间距的细节

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败,或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子,Web Design Ledger,在给人以复古和做旧感的同时,也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师)为标题选择了一种流行的传统衬线字体:Georgia,为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体,一种无衬线的、滑溜的、开放的字体。

完美的字体设计实例

网站设计中字体选用的快速决断

看了上面这么多好例子,将来你选用起字体来应该会更加得心应手。不过,为什么他们给人的感觉这么好?下一次在你自己的设计中,你又该如何运用?

  • 你可否考虑过间距?
    间距对于可读性有很大决定作用
  • 你的字体带给人什么情绪?
    确保字体选择适合你的设计风格
  • 是否可读?
    不要怕尝试粗大的字体

这方面还有大量值得关注的地方,不过我不是这方面的专家,我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。在逆云网本身的设计上也可以看出站长对细节的处理还不是特别到位。



Copyright 2008 逆云网 | 粤ICP备08131116号 |关于我们 | 联系我们 |