用户界面设计——用好的设计替代不好的 角色模型:来自MS的实践总结

October 29, 2006

这篇文章翻译至:http://www.webdesignfromscratch.com/current-style.cfm

它总结了一些当前网站设计风格的发展趋势。但是我得先提一句,它说的都是西方网站,未必适合我们中国网站的情况和中国网民的审美观。如果能给你一点点参考和借鉴的价值,就足够了。

————–Enjoy!————–

我很高兴看到2006年的网站设计比以往任何时候都要好。这并不仅仅是因为现在有更多的网站,因而可以找到更多长得不错的。事实上还是有很多长得抱歉的。我想是因为有越来越多的网页设计师比以往更懂得该如何做设计。

下面的这些例子显示了现代图形设计技术的精彩。它们看起都很漂亮、干净而且容易使用。

最热门的

我并不是说下面这些就是最好的,但它们是典型:


» The Alternative Energy Store


» Gr0w collective


» Forecast Advisor


» emaginacion.com.ar


» iconbuffet.com


» Save Longstone Edge


» iomega.com


» linkedin.com


» mozilla.org


» Rapid Mortgages


» plaxo.com


» Prolotize

共同的特点

以上这些网站都有下面的特征:

  • 布局简单
  • 中心定位
  • 3D效果
  • 柔和,自然的背景色
  • 颜色鲜亮(要谨慎使用)
  • 可爱的图标(也要谨慎使用)
  • 有许多留白
  • 大字体

我们一个一个来说。

布局简单

和几年前相比,设计师们似乎正在寻找更加简单的单栏或双栏布局。总的感觉就是设计师们普遍认同简单的页面表现更好。阅读这类页面只需要从上看到下即可,你的眼睛不用在页面上转来转去拼命寻找想要的东西。同时在浏览过程中它也提供更加平和、稳定的浏览体验。

中心定位

从上面的这些网站还可以发现第二个特点,它们的内容都分布在中轴线附近。

大概两年前,你可以找到很多“流动布局”和“左对齐并固定宽度”的布局,现在内容开始在出现在屏幕的中央。

左对齐的布局方式已经不如以前常见了,流动布局(全屏)也没有这么流行了。

尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言(也就是尽可能不要滚屏)。而流动布局可以达到这一点。然而,现在我们似乎不太介意滚屏了,而且我们更乐意发挥由滚屏带来的优势,比如更多的留白和行高。

有节制地使用3D效果

上面所有的网站都使用了一些很细致的斜面、给分隔条的边缘来个轻微的倒角、给背景一点点空间感、或者使用一些很“跳”的带着浮雕和阴影的图标。倒影和渐变非常普遍,阴影也还在使用,不过非常小心。

到处都是带着闪光图案的商标:

柔和,自然的背景色

上面这些网站都有一个朴素的背景,最流行的就是白色和灰调渐变。这样的背景提供了一个又酷又柔和又中立的环境,让那些抢眼的颜色可以引导用户的目光。

颜色鲜亮(要谨慎使用)

柔和、时髦的背景色为添加吸引眼球的特性提供了极好的基础,而强色调高对比度非常适合页面上的其他重要元素。

Iomega比其他几个网站用了更重的颜色,它的推广区域使用了浓烈的暗红色。然而这并没有淹没页面上的其它部分,因为它采用了一致的色调和简单的形状。

可爱的图标(也要谨慎使用)

有一个“规则”:不要在同一个页面上使用太多好看的元素(这样会影响用户的注意力)。(译者注:所谓适可而止)

抢眼的颜色、3D效果、漂亮的图标和按钮可以给页面增加一些闪光点,给人一种高品质的感受。但是,如果用滥了,就会产生一种叠加效应,使页面变得混乱,用户变得迷惑。

有许多留白

今天的网页设计风格非常之清新,仿佛刚刚经历了深呼吸一般

有时候我甚至想把一些非常拥挤的网页粘到气球上,然后一直吹气直到页面上所有东西之前都有足够的空隙。

我们的眼睛需要被注视物的周围有一定的空间,这样才能看清楚它是个什么玩意儿。

一般来说,留白越多越好。我极少看到一个页面,然后会想:“唉,他们一定要再加点内容上去才行!”。

当然,留“白”不一定是的,但它必须留出一定的空间。

很高兴地看到现在有很多设计都使用了合适大小留白,页面上的元素之间有足够的空隙。同时为了屏幕阅读也设定了额外的行间距。

看看这些让人舒服的留白吧!

大字体

我并不是说你网站上的所有文字都要大得让人吃惊。事实上,在某些情境下,小字体也不错。

真正优秀的设计应该是这样:

让重要的文字比一般的文字更大

就像我们在上面提到的设计方法一样,它只有在一定的模式下使用才能起作用。如果所有的文字都很大,那就没有一个是大的了。

用大字体让你的访客迅速地了解这个页面是关于什么的,什么是重要的,并且指出接下来他们可以在哪里找到想要的东西。

感谢承志的投稿,来自淘宝UI团队的辛勤翻译,欢迎订阅他们的blog;同时欢迎在豆瓣为我们留言:doubanclaim7dfc2b8d5079066b

Tags: No Tags

相关文章:

推荐文章

您的评论对我们很重要:

26 Comments »

  1. 很好啊。有借鉴的价值。

    Comment by ikias — October 29, 2006 @ 6:15 am

  2. 不错,实用的

    Comment by Anonymous — October 29, 2006 @ 12:39 pm

  3. […] blog中文翻译 » 当前的网站设计风格 (tags: WEB) […]

    Pingback by On The Road » links for 2006-10-29 — October 29, 2006 @ 8:17 pm

  4. […] blog中文翻译 » 当前的网站设计风格 (tags: 网站 设计) […]

    Pingback by links for 2006-10-29 « launlee’s Blog — October 30, 2006 @ 12:17 am

  5. […] 当前的网站设计风格 (tags: web 设计)  […]

    Pingback by ourr » links for 2006-10-29 — October 30, 2006 @ 7:28 am

  6. […] blog中文翻译 » 当前的网站设计风格 (tags: web design 设计) […]

    Pingback by ourr » links for 2006-10-29 — October 30, 2006 @ 7:28 am

  7. 很不错哦

    www.powerleveling.cc

    Comment by wow powerleveling — October 30, 2006 @ 6:00 pm

  8. […] 簡體翻譯:(內容比較正確) http://chn.blogbeta.com/223.html […]

    Pingback by Jir’s Wordpress WebBlog » FW: 當前的網站設計風格 — October 30, 2006 @ 10:09 pm

  9. 网摘2006-10-30…

    用户界面设计——用好的设计替代不好的
    每一个有关用户界面的决定,从一像素的精确定位到整个网站的信息架构都需要深思熟虑。对每一个设计方案给用户带来的好处与花费两者之间的仔…

    Trackback by 自说自划 — October 30, 2006 @ 11:32 pm

  10. 楼主举例的那些图片,都是欧美风格的,能不能对韩国风格的做点评价呢?谢谢~

    Comment by Roger- — November 2, 2006 @ 2:21 pm

  11. 楼主举例的那些图片,都是欧美风格的,能不能对韩国风格的做点评价呢?谢谢~

    Comment by Roger-Eric — November 2, 2006 @ 2:22 pm

  12. Good looking design can attract most of users first look;
    Good thinking design can attract more of users second look.

    A good book about design “Dont make me think”.

    Comment by lix — November 5, 2006 @ 1:17 am

  13. […] 当前的网站设计风格 […]

    Pingback by 为朋友六面插刀 » 网摘11月6日 — November 6, 2006 @ 2:08 pm

  14. 当前的网站设计风格…

    <a href="" title=""> <abbr title=""> &amp%……

    Trackback by :::米蘭數位部落格‧Medialand BLOG::: — November 7, 2006 @ 10:48 pm

  15. […] blog中文翻譯 » 當前的網站設計風格  Annotated(1) […]

    Pingback by Diigo Diary Bookmarks 11/21/2006 « Benx Blog — November 22, 2006 @ 8:51 am

  16. […] blog中文翻譯 » 當前的網站設計風格 (tags: webdesign css !介面設計 *精華* *推薦* *收藏*) […]

    Pingback by links for 2006-11-22 « Benx Blog — November 22, 2006 @ 2:26 pm

  17. […] http://chn.blogbeta.com/223.html 提到一些與網站設計有關的幾大特點,還蠻有用處的!! […]

    Pingback by :: IM管理團隊 :: » 11/22 — November 23, 2006 @ 6:34 pm

  18. […] http://chn.blogbeta.com/223.html 提到一些與網站設計有關的幾大特點,還蠻有用處的!! […]

    Pingback by :: IM管理團隊 :: » 11/21 22 — November 23, 2006 @ 6:38 pm

  19. […] [当前的网站设计风格] […]

    Pingback by 301志{从这里出发,去梦想的草原} - » 网摘20061125–你的 Web 服务可以赢利吗? — November 25, 2006 @ 4:14 pm

  20. […] What is Web 2.0? The Logos of Web 2.0 Current style in web design The Web 2.0 Awards 当前的网站设计风格 […]

    Pingback by blog中文翻译 » Web 2.0 的视觉设计 — December 5, 2006 @ 8:33 pm

  21. […] blog中文翻译 » 当前的网站设计风格 Posted in bookmarks | Trackback | del.icio.us […]

    Pingback by blog中文翻译 » 当前的网站设计风格 : Popular Bookmarks : eConsultant — December 9, 2006 @ 12:06 am

  22. 非常好~

    Comment by igolg — January 24, 2007 @ 2:26 pm

  23. your explaination give me a great help, thank you very much

    Comment by tangjie — March 30, 2007 @ 6:14 pm

  24. 不错,楼主分析得很好.我也是经常为外贸公司做网站.有空欢流下.QQ:540616004

    www.chongguang.com

    Comment by lx0889 — May 25, 2007 @ 9:08 pm

  25. bu cuo

    Comment by songjiayun — June 8, 2007 @ 10:11 am

  26. […] 最后的效果相信谁都不想多看。 除非那些黄金的内容是…… 多的不说了。 blog中文翻译翻译了一篇非常好的UI文章,它提到了空白。 尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言(也就是尽可能不要滚屏)。而流动布局可以达到这一点。然而,现在我们似乎不太介意滚屏了,而且我们更乐意发挥由滚屏带来的优势,比如更多的留白和行高。 […]

    Pingback by 未选之路 - secondsky » 空白与浪费 — September 7, 2007 @ 5:59 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment