技术资讯

9个让你成为更牛网页设计师的要诀

2008-12-30 16:09:00

Dec 3rd in Articles by Collis

这可能是网页设计里最不吸引人的部分，但是信息设计绝非最不重要。定位和吸收信息是最精华的网络任务，它远远超过了购买、娱乐和交流这些自身已包括了相当一部分信息设计的项目。用户如何发现然后利用信息本身受到信息如何架构并展现的影响。因此每一个网页设计师应该把自己装备合格并被告知如何去做到这一点。
作者: Collis

大家好！我开始在这个网上写教程是因为几年前通过阅读Photoshop教程，我走上了设计的道路。我希望这个站点可以帮助并激励♔其他人！你们可以在Twittꦍer上找到我！

网页设计三部曲系列
这篇文章是网页设计三部曲系列中的一部分，以下是其他文章的链接（目前已发布的）

网页设计三部曲
9个信息设计要诀让你成为更牛的网页设计师
网页设计师应该知道的 6个界面设计要点
为你的网络工具箱准备的8个点子、技术和窍门

1 - 有条不紊
信息设计是一个网站越大则越复杂的问题。但即使是一个小网站也会因为有条不紊，循序渐进的发现应该怎样组织网站的内ౠ容而获益。以下有些简单的步骤你可能愿意尝试：

理解网站的内容、流程和目的
整理一堆你根本不知道是什么的东西是很难的。所以你的第一个任务是扫一遍网站的内容、流程和目的。一个网站的内容是指文字、图像、视频和其他你为吸引人光顾你的站点而放上去的东西。一个网站的流程是指用户和网站完成交互所需要的任务和工作流。ꦡ而站点的目标指的是客户和用户的目标。

所以对于一个简单的餐厅范例，你可能发现你已经有了1-20页左右的文字，你知道用户会试图完成一些任务例如预定席位。你可能也知道了用户在这个站点的目标是弄清楚这个餐厅有꧟什么菜，餐厅在哪儿和是否还有空位，然后可能会预定席位。最后，客户的目标可能是满足用户，同时也让他们看到一些他们经营的特色产品。

确定优先级和寻找用户路径
一旦你牢牢把握了进入网站是怎么回事，你可以开始确定信息的优先级，然后弄明白用户是如何游览网站的。他们会以什么路径去完成他们的目标？哪些页面是最重要的？🌞♈哪些应该在一开始就被看到而哪些只是补充信息？

即使是一个像餐厅网站那样简单的例子，也有很多方法去设置信息。例如你可能把今日特色菜品直接放到主页上，或者你可能把它们放到预定的流程里，或者你可能把它们放到菜单里。类似的，你会发现针对不同客户的目标，你也可能为页面内容设置不同的优先级。也许客户告诉你这家餐馆很难找到，所以你需要把如何找到该餐馆做成单独的一页并设置成较高的优先级。
整理信息
理解进入网站后是怎么回事，而且清楚的掌握了不同元素之间的关系、用户会想要怎样和它们打交道，还有每个模块不同的优先🌺级以后，你现在可以整理一下网站的信息。这种整理不仅包含给页面分类──例如弄明白“关于公司”适合放在“关于”标签下──而且还包含对你已经放置的内容提出疑问和重新安排。有时候你可能发觉合并多个页面、打破一个长段落、把一些文字变成更简单的图表演示或是其他的重新安排会更好。

开发一个网站地𒐪图或计划来分级排列这些信息。虽然网站地图通常只是一些说明页面的框框，你可以在所有解释站点是如何设置的专门信息上花点心思，包括加拿大预测网-在线预测的快速链接，不同部分可能的联系，还有用户访问网站地图的可能途径。

重新组织以后有很多关于市场的信息，现在我们觉得维基是一个最有效的管理方式。

#p#

2 - 跳出框来思考

复杂度合理的站点可以用很多种方法重新组织安排。我曾经无数次组织重构过一个网站：FlashDen . 我都记不清有多少次我盯着菜单看，然后把它重新排列。在一些例子里我们只是💛把页面放到不同的小组和集合中，那样它们看起来更有逻辑，而在其他方面我们引进更多跳出限制的想法。

例如，几个月前这个菜单变得过于复杂，所以我们去掉了一堆更“蓬松”的菜单项，然后建立了一个博客来存放如今看来充斥着菜单的竞争对手、新闻、子站点链接和其他页面。现在我们发🍨现有很多我称之为“流浪者”──菜单里没有主页──的页面。ඣ从信息设计的角度来说，流浪者是可怕的──即便是我都不记得如何找到他们。这次的解决方案是建立一个维基系统，把最上层的内容顶到最前面的菜单上，然后使用维基自带的搜索、标记和分类功能来放置深层的信息。

我在FlashDen的经历的关键一点，是信息的组织并不一定就意味着要把它放到菜单、次级菜单。你会发现一些信息不该放到站点上，或者它需要一个子站点，或者你该做点儿别的什么。通过FlashDen，我有了一个从三年前至今我依然在寻找的꧙、新的组织方法和解决方案的优势。

作为一个高效率的信息设计师，找到最佳方案经常需要跳出那些框框来思考。当然𒉰我说"跳出框来思考"比做起来容易多了！有时候我们甚至被看不到的框给限制了。前些时候我听说了一个试验：把一堆跳蚤放到一个玻璃盒子里，一段时间内它们只能跳那么高。当把容器移走时，这些虫子依然只跳限制的高度那么高，它们甚至没有意识到他们可以逃走了，如果它们想🎐逃的话。

所以你该♔如何克服你看不见的框子？简单！你需要那些没有被和你相同问题限制住的人的帮助。对于复杂的信息设计来，我会经常询问其他人关于组织的想法，只告诉他们大概的问题而不是站在我的位置上。必须承认的是，一个程序员的想法或是一个用🌳户的观点经常能让你惊喜，因为他们的看法和你自己完全不同，而且不被同一类的思想所阻碍。

如果谁有一个超大网站，那就是Chevron 。你会怎样组织所有的信息呢？

3 - 保持你的结构平衡

当你在从事大量信息的组合时，会出༺现一个显而易见的问题：你的导航该做多深或是多广。深度即分类和子类一共有多少🔯层，广度则是指每一层有多少项。技巧就是去找到平衡。如果单独一个层有太多项──特别是顶层，你就是在冒让用户感到困惑的险。另外如果一个用户必须点击很多层才能进入，你则是在冒失去他们的险。

一个很好的规🀅则是保持每一层的选项数在4-8左右。如果你在顶层有8项，每一个有8层子分类，你就有足够的空间给512个页面的网站了。当然事情很少自动的平衡这么好。所以再次的，你需要注意你不能厚此薄彼。例如一个有100多页网页的站点，如果你把联系放到顶级的某个地方，有可能不会达到8个子类和8个子子类。更可能的是联系会成为一个很简单的部分──即使是对一个复杂的站点来说。

反过来说如果你不把类似联系的东西放到顶层，你可能会有一个更平衡的信息层次，无论如何这将会使如何找到联系信息༒变的更加困难，所以你还是在冒险，使重要的用户任务完不成。对这个专门问题，一个简单的解决方案可能是增加“快速链接”，在加拿大预测网-在线预测的某处你给用户一些选项来跳过通常导航所示深层的结构。

在NETTUS我们决定放置案例和源程序按钮来方便用户的习惯。

#p#

4 - 针对扫描、快速阅读和跳过的设计

我不知道你是怎样，但我确实很少完整的阅读一个网页。不管是𝐆看ꦉ说明、条例和条件还是一些平常的文字，大多数情况下我都是扫描、快速阅读和跳过。假设我不是唯一一个这样做的人，那么把页面设计的易于以这种吸收信息的形式就是说的通的了。

别把重要信息捆绑在一堆文字里──应该强调它。别最后给用户一整段话──把它们用标题、副标题、项目符号、图标或是其他什么分开！想想用户会怎样使用你的站点然后把它设计❀的易于他们使用。

一个很好𓄧的为用户消费而设计的实例是我们的姊妹站点NETTUTS ，一个你们大多数人知道的、发布网络开发主题教程的站点。现在我们注意到，早先NETTUTS上的大部分人第一次会把教程从右扫到尾，试图寻找到一个例子的链接或是源程序代码，然后他们可以决定到底这个教程是不是值得首先阅读。一旦我们意识到这一点，增加特别的例子和源程序按钮然后把它们一致放到教程的顶部是一件💫很容易的事。这个简单的调整，符合我们迎合用户消费模式的设计，而且给我们带来了很多良好反馈。

PatternTap 是一个寻找创意、阅读他人的设计文章和文字信息的好地方。

5 - 设计需要被读到的文字

我不确定我是否𝔉正在变老，或者仅仅是因为我把ও所有的时间花在屏幕前而变得挑剔，但最近当我的确常常为展示给我不吸引我去读的文字而困扰。站点设计的目的通常是去转交信息，而它们大多是书面文字，所以应该优先把精力集中在它的展示上。

使♋用过小的字号、文字和背景色之间的低对比度🐭，或是在深色背景上用很细的文字，这些都是我们（多数情况下是我）都该引以为耻的设计之罪。但是除此之外，有其他方法可以使你设计出真正让访问者去阅读的文字。以这种设计为目标，使用标题、副标题、边界、引用文字和其他吸引眼球的技术布局，让用户关注文字并来吸引他们看下去。

一个指导用户逛遍全站的简单例子-ThemeForest的4个步骤指南。

#p#

6 - 引导用户通过并通读页面

之前我提过用户路径──即用户可能遍历一个站点的路径集合。里面的很多路径会和用户行为有关，但是规划一下，你可以选择引导用户通读单个页面，并且通过多个页面。一旦你🙈知道了特定的路径，你可以通过视觉的引领和链接来帮他们沿着那条路径走下去。

例如FlashDen,当新用户访问时，我们的目的是带着他们注册、寻找文件、打款然后把这些文件买下来。所以我们在加拿大预测网-在线预测上先给他们一个4个步骤过程的说明。在我们的下一步的重新设计中，我希望让这条让网站𓂃得以运作的核心路线更加明ܫ显。注意在这条路径里我没有用4个页面来描述，而是用4个任务。例如找到文件可以包含用户浏览一打页面，但这是一个独立的任务。用户路径并不需要成为通过页面的集合，它们可以仅仅包括一些集合任务！

Steve Krug 的极有价值的书！

7 - 别把事情搞太复杂

简单相对于复杂更利于用户应该是不言而喻的。然而把设计搞的过于复杂实在太容易了。我知道我🦩常常把事情做的看起来更复杂了，因为我在页面上使用了更多视觉元素（坏Collis，坏Collis！）。另外一宗过度复杂的罪过是在按钮上使用不需要的文字然后要求去行动。Steven Krug 在他杰出的著作别♐让我思考中给了一个例子，一个虚拟就业网站使用了如下的按钮：

工作机会
空缺职位
工作机会令拉玛
其中一个很清楚，一个还算明显，还有一个──天知道是什么。

信息可以用文字之外的方法展示！

#p#

8 - 信息可视化

作为设计者，我们比其他人更明白良好视觉的价值。并且有很多把数据🐲、概念、信息表格化或是可视化的机会。本文就是以一个界面设计、信息设计和美学设计的关联，这样一个基本图表开的头，你一定会过目不忘。这些图片不仅分割了文字，而且它们会令我们记得更清楚，同时也给了你一个让页面更生动🧜的机会。

DoshDosh 关于信息可视化、表格和作者所谓的信息图表有一篇有趣的文章非常值得一看，即使它🌠只是看到精彩生动的例子。