Web2.0时代的设计指南(第一章)

原文：http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

翻译：hidecloud

转载请保留以上信息

在本教程中，我将重新阐述传统的图形设计元素是如何应用在现代（2.0时代）的页面设计中的。

然后我将解释为什么它们能流行开来，以及如何、何时、在哪里使用这些元素。

而以上这些都是建立在我的有关”传统样式“的文章上的，我只是在如何将之应用到当前的web2.0中做了更深的分析而已。

内容概要

下面的这张列表里就是当前的一些典型的”web2.0″站点元素。本文一共分5章放出，每章3个小节。

当然，一个站点没必要将这些元素都发挥到极致。并且即使用上了这些元素，也不能让你的设计看上去就2.0了。

1. 简朴
2. 中央布局
3. 少来几栏
4. 独立出顶部的板块
5. 页面中固定的区域
6. 简明的导航栏
7. 醒目的Logo
8. 大号的字体
9. 醒目的文字介绍
10. 显眼的颜色
11. 华丽的界面效果
12. 颜色渐变
13. 反光效果
14. 可爱的图标
15. 星形标志

声明

这些设计元素并不是在所有场合都有效，凡事总有例外的。所以肯定存在一些错误地、过度地、没经过思考就使用这些元素的反面教材。

仅仅将它们全都揉合在一起可不能为你创造出一个好的页面设计来。就像将鸡蛋、糖及面粉搅和在一起可不能马上就得到个蛋糕。

设计网页需要一种能将各种元素巧妙的融合在一起的能力（大多数时候它们都是相对的），而一个好的页面设计当然就是平衡了各种元素的方案了。

Web 2.0?!

我使用”Web 2.0设计”来描述一种当前很流行的页面设计方案。

而有很多人将Web 2.0用在这些地方：

• 网络经济的复兴
• 网站与服务之间更高级别的交互技术
• 或者是一种建立在当前在线社区及社会化网络之上的社会现象

还有一些人将这个术语用在最近的网页设计教学中。我觉得这个语义很符合我这里用的感觉。

用社会学的观点来看，流行活动在各个层面上影响着人们：经济层面、文化层面、政策层面、等等。你说Skate-punk（一种PUNK音乐）是代表娱乐和体育？还是代表音乐和音乐史？又或者代表时尚以及垮掉的一代？

入门简介

我将带领你们去体验当前最流行的各种页面设计风格及要素，并为你分析为何它们每个都那么成功，最后当然是教你如何在自己的站点里使用它们了。

如果要我用一个词来总结Web 2.0设计，我会选择”简朴”，所以我们将从这个要素开始讲习。

我是一个”简朴”教的忠实信徒。我觉得这是未来设计的发展方向。

当今这些简单、醒目、优雅的页面用更少的元素传递了更多的信息：

• 它们让设计师能直接考虑网站的主要功能，避免用户被过多的无用视觉元素干扰，引导用户一步步的使用这些功能。
• 它们用更少的话去表达更多的含义，这样就要求每张图片都必须经过精心选择以达到所需要的效果。
• 它们驳斥了我们无法预测用户需求的言论。

简朴

页面设计比从前任何时候都简单了，这不是很好么？

2..0意味着专注，干净，简洁。

但这并不意味着简陋，在后文中我会解释这点。

我真的很信仰简朴。可这并不意味着所有网站都应该尽可能简单化，只是我们应该让所有元素都物有所用，不要有多余的元素出现。

我曾经写过一篇有关Occam’s Razor的文章，这是一个我经常使用的原则。用我的话来说就是：遇到一件有两个选择的事，简单的那个选择就是最好的。

这里有一些例子。注意那些不必要的元素是怎么被去除的。你会发现原来多余的元素是那么多。而那些多余的元素起到什么作用了么？比如让你的主题更鲜明了？

结论就是你应该专注于内容，你将发现你是在制作程序员所需要的界面。很简单的方法，却得到了大家想得到的结果。

为什么简朴就很好

• 网站是有功能目的的，所有的网页也都有自己的意义。
• 用户的注意力是一个有限的资源。
• 帮助用户找到他们所想要的（或者让他们感受到这个网站是干什么的），是设计师的责任。
• 屏幕上的元素将吸引用户的眼球，越多的元素就需要用户去关注更多不同的东西，那么最重要的元素的被关注度就会下降。
• 所以我们需要加强主要信息的强度，减少其他信息的干扰。这就意味着我们需要用更少的元素去表述更多的含义。这就是经济又简朴的设计方式。

什么时候&怎样让你的设计变简洁

什么时候？

时时刻刻！

怎样做？

这里有两个做到简朴的重要建议：

1. 移除不必要的组件，以此提高页面阅读效率。
2. 试试另一种既能达成目标，又更加简洁的方案。

当你在设计时，请将这句话当成一个教条来记住：移除所有不必要的视觉元素。

特别关注那些与页面主题无关的地方，因为在那些地方添加视觉元素将会不可避免的吸引走用户的注意力。

使用各种视觉符号——线条、语言、图形、颜色来表达所需表达的信息，而不仅仅是用来装饰。

这里有一个因为不够简洁而十分让人苦恼的例子。

Yaxay 的界面使用了很多元素，但是大多都是用来装饰的。只有很少的元素是用来让用户明白这个站点是用来干什么的。

看看有多少元素等着你去注意，其中又有多少是与实际的信息、导航、交互内容相关的呢？

当涉及到有关信息资源的设计时Edward Tufte就是王道。他使用了这两个术语”信息体”（能让传递信息的细节）”非信息体”（仅仅是细节的细节）。

Tufte用来衡量一个设计是否高效的方法就是使用信息体评级法。信息体所占的比例越高，这个设计就越高效。

就拿上面这个Yaxay的设计来说，它充斥着太多的”繁杂因素”。比如有很多的边界线，色彩变换，造型，线条……太多需要关注的细节了。但在这些细节中，真正有用的只有：

1. 站点的Logo。
2. 导航栏上的标签信息。

其余那些”繁杂信息”：背景中的那些图形、交互界面上的对角线、网格、斜角……都是干扰信息，都是”非信息体”，因为它们没有促进沟通。

我并没有反对丰富，复杂和美丽的设计

简朴意味着：

尽量只使用你所需要的像素，以此来让沟通更加容易。

当然，大多数时候与你沟通的都不是一些表面上的事实信息，而是一些间接信息。

• 事实信息
  

  指那些事实存在的，如新闻、股票价格、列车时刻、或者你的帐号里有多钱…

• 间接信息

  涵盖了那些意识上的感觉，比如对一个公司的第一印象，服务提供商是多么的容易沟通，或者你对一个产品是否适合你的判断。这些信息也非常重要！

不管你处理的是事实信息还是间接信息，每一个像素都得算着用，所以请小心并真切的对待它们。

看看下面这个的例子：

Alex Dukal的站点丰富、有趣、颇具吸引力。它使用了一些视觉技巧来吸引你的注意，让你觉得这个页面很有趣并且对他们的设计感到很温暖。

但是这个设计确实简单，因为他们很谨慎地使用着像素、文字。而这并不是吝啬，是经济有效。

不管你想表达什么，请在使用图像及文字前考虑一下。这些东西就应该而且只应该用来沟通互动，再考虑一下能否用更精简的方式来表达这种沟通。如果行，那就放手做吧。

中央布局

基本上，最近的大多数站点都是在中央进行布局的。这与几年前流行的全屏布局和左对齐布局比起来，可是相当不一样的。

为什么中央布局很好

这种”2.0″样式很简洁，而且对信息有强调作用。因为在屏幕上站得直直的且处于正中央的站点，让人觉得更富信任感。

当然，也因为我们在更加谨慎地对待图像及文字，所以像全屏那种设计方案就再也没有出现了。

我们在用更少的细节表达更多的信息，自然的，更多的空间就可以空出来衬托我们那可爱的网站内容了。

什么时候&怎样使用中央布局

我可以这样说，就用中央布局来设计你的网站吧，除非你能找出一个不这样做的理由。

少来几栏

几年前，3栏站点是标准，4栏的站点也不少见。

如今2栏是标准，而3栏成为了极限。

为什么少一些栏数会更好

少即是多。少几栏看上去更简洁，更突出，并且更直接。我们将更加清晰的传递我们的消息。

其实这也是中央布局的一个副产品。因为我们不需要将屏幕填那么满了，所以还要那么多栏干什么呢？

37Signals 在简洁地提供答案或状态方面总是比人先行一步.

如右图，他们使用了2栏布局。这是一个有关简朴的极佳学习案例。这个方案让信息自己说话了。并且让你与信息之间能毫无阻碍的交流。

Apple 在优雅地应用简朴风格方面也是一位领先者。

这样的布局真的是非常非常的好。每次我去体验Apple精妙的设计时，我都更加确定这种设计哲学就是设计界的圣杯。

这个标准的Apple布局准确的告诉了我们”到底我们需要多少方框、栏目、线条？”然后它将一切繁杂的东西都抛弃了，剩下了什么？简洁，却高效的交流体验。

如何选择你的栏数

我强烈建议你不要使用超过3栏这个数目。

但万事总有例外，所以我在这里列举几个使用了超过3栏却取得成功的例子。

Derek Powazek’s 的blog在主要位置使用了3栏布局，但是在底下却加入了4小栏。

下面那些小栏目给人一种亲切随意的感觉，传达给你一种”想看什么就看什么”吧的感觉。

Amazon (UK) 有两个侧边栏，他们把产品布局在页面中央。

这样布局很好，因为他添加的两栏都是目的明确的两栏。一个用来导航，一个用来显示其他物品。而中间的3栏通过空白来凸显出来。所以这个设计并不繁杂。

Popurls.com 拥有很多站外信息，比如来自digg或del.icio.us的链接。但是他在页面的主要位置仍然保持了3栏的配置。

更妙的是，他在页面下方提供了一组来自Flickr的照片群。为什么放在这里很合适呢，因为当人们看到页面底部时，都是正想放松一下的时候，这样的布局让人感觉很亲切。