小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系统，小到指南针，人类在这一事情上，极具创意。

在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。

在制定解决方案前，先了解他们为什么会迷路：

1、 当人们不能理解信息时，会产生迷惑

2、 人们在查询过程中迷失，不知道下一步该做什么

3、 人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页

图1

比如在图1的这个网站中游走，你容易陷入进退两难的境地。上图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前页面的出口。

4、 人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之《突出重点，一目了然》

图2

图2中的登录页面，可谓琳琅满目，信息的丰富程度毫不逊色于首页，难道设计者的目的，是希望用户放弃登录这个主要任务，去往“更重要”的地方吗？

你也许会想，让用户不要迷路，不是非常简单的事情吗，我只要在所有页面中放入全局导航，使他们能在网站的核心内容之间移动。然后放入面包屑，让他们了解自己所处的位置，一切不就完事大吉了。

但事实上果真如此吗？全局导航也许能帮助用户了解你网站的核心内容，但在具体的任务中，比如图3中的淘宝全局导航，如果放入在挑选商品或支付的页面中，恐怕非但不能指引用户，还会干扰到任务的完成。

小心，别让自己陷入导航系统的过度设计中去。我们所要做的，是使用人物角色和场景作为参考，确定人物角色会选择的到达内容的最佳路线，而不是提供所有线路，更不需要将网站的全部结构复制到每个页面当中，造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时，裁判会做出许多正确的判定，而我们往往忽略他的存在，但一旦裁判员做出了一个错误的判决，就会引来场上观众的一片唏嘘。

那么，我们应该怎样做，才能保证用户不在网站中迷失呢？

首先，我们要帮助用户定向，也就是确定“当前位置”。

即便GPS卫星定位系统如此强大，它都必须随时在地图上标明我们的“当前位置”，才能真正为我们导航。而与现实世界不同的是，在网络世界中没有南北之分，也没有地理位置，我们必须利用导航系统的各种因素，来为用户创造可以判断当前位置的情景：

1、 重视网站的品牌信息

用户应该一直知道自己在浏览什么网站，将组织的名称、标识、和身份识别图放进网站的所有页面中，是达到此目的最显著的方法。

2、 细节创建情景

我们可以通过页面内标题、页面文字，向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态，也是常用的方式。

3、 面包屑

“面包屑”也是标明当前网站位置的好工具。此外，面包屑还能传递网站结构信息，以及记录用户的访问足迹。

4、 逃生舱模式

逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口，无论什么时候，点击这里，都可以回到首页。大部分网站都把逃生舱设置在网站LOGO上，已经成为惯例了。

其次，根据用户需求，确定导航模式。

用户的需求决定了我们应当放置何种导航链接。在不同类型的页面，用户所产生的问题不尽相同。我们需要预测这些问题，然后在设计导航的时候，也问自己同样的问题。

一般情况下，用户会问：“我在哪里？”“我在这里能做什么？”“我还可以去哪里”；在电子商务网站，他们也许会问，我该如何找到想要的产品信息；具体在某一产品，他们也许会问：“我该如何联系客服人员？”“我到哪里可以找到相关产品”。

我们所要做的，并不是想出所有可能发生的问题，相应的，我们也不可能把所有问题的答案都放入页面当中。这个时候，人物角色和场景，将发挥很重要的作用。对于不同的页面，弄清楚每个用户角色要去哪里，放置他们最需要的导航。比如：你的人物角色需要随时从一个栏目跳转到另一个栏目吗？如果是的话，请保证顶级栏目的链接一直可用。

一旦确定了用户想要到达的内容，就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4中，也许你的人物角色需要的，只是一个“下一组”链接。

图4

最后，通过压力测试检验页面的导航能力。

怎么样测试这个页面的导航能力呢?

（1） 随机从你的网站上选择一个页面；
（2） 把这个页面打印成黑白的，并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉；
（3） 假装你是第一次进入这个网站，并试图回答下面的问题(详见下列问题列表)；
（4） 在一张纸上写下你所想的和答案；

问题列表:

1、这个页面是写什么内容的？ 在页面的标题处画一个方形或在纸上写清楚；

2、这是个什么样的网站? 把网站的名字用圈圈起来，或者自己写在纸上；

3、这个网站主要的版块是什么? 用x标识；

4、这个页面中主要的版块是什么？ 用三角形围着x来标识；

5、我怎么样到达这个网站的首页？ 用H标识；

6、我怎么样才能到达网站的顶部呢? T来标识；

7、每一组链接分别代表什么? 把页面上的主要链接圈出来，并写下标识；

D:用来标识更多，详细介绍及这个版块的子页面等；

N:在同一版块的其它相邻页面；

S:在同一网站上但不相邻的页面；

O:离开这个网站的页面；

8、你是通过怎么样的路径到达这个页面的呢？ 请写出你到达这个页面的路径，选择1>选择2>选择3…

让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验，大家象跳伞一样的进入网站中的任意一个页面，然后把回答记在纸上，你就可以看出导航存在的问题。

导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。

说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，它的重要性也常常被忽略。在设计产品时，常会听到这样的话：“这个栏目该叫什么名字？恩。。。先别管吧，把更重要的工作做了再说。”

然而，站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。

标签是访客行为的触发词，好的标签能吸引访客注意力，引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据，紧跟着它的就是导航中的关键点，网页的过渡，所以尤为重要，有歧义的标签逼人猜测它的意图，甚至让用户走错路或迷失方向。

比如这个网站的标签：

这个网站的导航标签比较极端，首先标签之间的互斥性差，“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门；最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。

设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE原则，也就是彼此独立、完全穷尽（Mutally Exclusive,Collectively Exhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。

怎样的标签才能称作好的标签？它应该满足这几个方面：

1、好的标签，应该使用客户的语言，避免使用术语、行话、缩写词等用户难以理解的词语；

2、采用描述性的标签，避免使用“信息”、“细节”等过于宽泛的词语，尽量以某种方式加以限定,如：“给买家的信息”、“交易细节”。

3、标签之间的互斥性要强，尽可能地寻找差异化；

4、使用聚焦地标签，如，能把猫、狗、仓鼠等归纳为“宠物”，就不要用“动物”。

5、在粒度、语法、展现、用法等方面保持标签的一致性；

6、较长的标签往往比短标签更好，但并非越长越好，请尽量控制在12个字以内（这不是一个硬性规定）。

那我们设计标签时的词汇从何而来呢？是凭空想象出来的吗？当然不是啦，你可以从以下几个方面获得词汇：

1、你自己的网站或产品

你的网站和产品，在前期建设中，已经积累了很多标签。我们要做的，就是遍走整个网站，尽可能收集所有标签，然后用表格进行整理。

比如,我们在淘江湖改版时，对现有标签系统进行了一次整理，在表格的帮助下，比较容易看出现有标签系统存在的问题。

2、类似网站或竞争对手网站

如果你还没有网站和产品，那就要去同类型网站或竞争对手网站去收集标签了。相信这一做法，在互联网上，几乎是无师自通的。你可以通过对同类型网站标签系统的观察和比较，得到一些行业类比较通用的词汇，降低用户的理解成本。

你可以用同样的方式，收集同类型或竞争对手网站的标签，以供参考：

3、受控词表或叙词表

这是由图书馆员和特定领域的专家所建立的资源，这些词汇都是专家们付出很多努力的成果，表达方式精确且一致，而且这些资源通常是公开的。其实信息架构的很多理论，都来源于图书馆管理。

在完全没有依据的情况下，我们必须设计新的标签系统时，应该怎么办呢？

你可以对通过对内容进行分析、要求内容的产生者提供、或者象专家或你的直接用户求助。卡片分类法也是比较流行的一种做法。

卡片分类大概有4个步骤：

1、招募志愿者，大部分项目适当的卡片分类志愿者人数是 15 人，大型项目可以达到 30 人。个人觉得如果只是想对自己想法进行验证的话，5-10 人即可。

2、 准备卡片，写上你预先设定好的标签（这些标签必须是你们内部讨论或请教过专家的结果）。

3、 让用户进行分类，你可以观察用户的分类过程，以及对标签的理解。

4、 对卡片分类的结果进行分析，如果数据庞大，你可以借用软件进行分析，推荐工具有 IBM EZSort、CardZort、WebSort 等。

我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

1.什么是“简洁自然，清晰易懂”？

简洁清晰：使信息最简化
“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。

自然易懂：使用用户语言
用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。

2.信息表述的种类与设计原则

在网页交互设计中，用于传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。

1）页面布局

界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。

①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。
②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等
③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。
④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。
⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。

2）交互文本

交互文本指产品界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。

①表述的信息尽量口语化，不用或少用专业术语；
②表述语气柔和、礼貌，避免使用被动语态，否定句等；
③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。
④对于同种操作的交互文本，操作行文字保持统一性。
⑤字体使用默认/标准的字体，大小以用户的视觉清晰分辨为主；

3）界面色彩

人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。

①根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。
②考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。
③避免界面中同时出现3种以上的颜色。
④颜色的对比度明显，如在深色的背景中使用浅色的文字。
⑤使用颜色指导用户关注到到最重要的信息。

4）图像图标

相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。往往表述一种信息，一张图片或者一个标识更能让不同用户理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。

①表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。
②同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性；
③仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。
④尽量与交互文本结合使用。

5）声音

在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。

①表述清晰，语气亲切，不生硬，有礼貌。
②使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。
③使用不让用户反感（如：恐怖，恶心，烦躁）的声音。
④在用户可预知的情况下发出声音。

4.小结

对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。

测试您的页面

测试您的页面是否达到“突出重点，一目了然”，能够让用户在短时间内找到他们所需要的信息，其实可以是个低成本的小型测试。fivesecondtest.com 这个有趣网站是一个专门做5秒测试的站点。测试者上传一张站点的截图，然后被试观看截图5秒，然后说出刚才看到了哪些东西。另外一种方式是被试看到截图，在5秒的时间中，点击他所关注到的所有焦点，最后给出每个焦点他认为的描述。

下图是本文开篇的时候，8个用户的测试结果：

这种测试比起眼动议来说，测试的成本要低得多，而且能够明确得测试出你的页面的浏览者是否能在第一时间发现他们所需要的内容，并且可以比较出，这是否符合你的设计的初衷。
达到“突出重点，一目了然”

那么，如何达到这样的“突出重点，一目了然”呢？据鄙人不完全归纳，可以有以下方法：

为扫描而设计，不是阅读

你几乎需要把每个用户都想象成大忙人——他们没有时间停留在你精心设计的页面上，去阅读每一行你辛苦撰写的问题，去欣赏你精心设计的高光与圆角—— 他们想要的只是尽快地找到有用的信息。如果找不到，互联网上也许有很多替代品，可能是你的竞争对手，用户可以轻而易举地到其他网站上去寻找他们需要的信息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计，不是阅读”时，

给出了几种方法：

1. 尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。
2. 在页面把越重要的东西越突出，建立清楚的视觉层次。
3. 可以点击的地方必须突出，让人明显知道可以点击。
4. 把页面划分成明确定义的区域
5. 省略多余的文字

Yahoo Small Bussiness的页面改版很具有代表性。 改版前：

两次改版后：

我们可以发现，改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮 “Sign Up”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，使用列点和大图的方式传递了相同的信息。“Sign Up”显而易见，而且视觉上有突起的渐变效果也马上让人知道，那是个按钮。

将功能“藏起来”

部分产品经理有一个这样的通病，他们每每作出一个新功能，就爱向用户炫耀新的工作成果。看起来，这样挺好，一来让用户知道本网站还没死，而且还在为他们不断得制作新的功能，二来辛苦开发了数天甚至数月的功能要是没人用，那该多“杯具”啊！于是乎，你就会发现，长期“坚持”下来，界面上的元素越来越多。 假设某一天，这样的产品经理全部被谷歌挖走，那么谷歌的首页将会是一个放满“杯具”的餐桌：

还有一个例子来自于某BSP，它的博客顶端存在着一个工具栏，有30个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。

如果你了解20-80原则，你应该知道：80%的用户只会使用20%的功能。所以，为什么要让那些少人使用的80%的功能总是放在显眼的位置，扰乱那些只需要20%的功能的大部分用户呢？(此句有些拗口，我承认，麻烦看官们可能要反复阅读几次。。)其实那些80%的功能大部分是专家用户所喜欢的，我们应当将这些功能“藏起来”，目的就是不影响新手和中间用户，并等着他们去发现，然后大叫：“哦，居然这个网站有这个功能，太棒了！”我们来看看 Google Reader iPhone/Android 版本最近的小改版：

改版前：

改版后：

大家可以发现，原来占据垂直空间的New items/all items的切换、mark all as read等功能，全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。关于将功能“藏起来”、功能肥胖症是个说不完的话题，《哈佛商业评论》早在06年的时候也详细探讨过这样的问题，这部分内容，我过段时间也整理整理，为大家奉上吧，本文中，就不作深入探讨。

关注于用户的主要任务流

关注于用户想要的，而不要强迫用户查看、理解与操作无关的事情，是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法，解决了什么元素该被 “突出重点”从而达到界面“一目了然”的问题。从用户角色到场景，到任务流，可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业目标，即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子： 这是个书籍的搜索结果页面。

我们能够发现，这个页面觉得凌乱不堪。各种大小，各种颜色，各种粗细的字体混杂在一起，眼花缭乱。就像《气球》这首歌唱的：

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD（或者是其他方式）分析出，这个书籍的结果页，用户需要这些信息：

1. 书籍内容。这本书标题是什么，是关于什么的？
2. 书籍评价。这本书好吗？别人对它的评价如何，这些评论可信么？

根据这个目标，重新设计后的结果如下：

我们可以看到，这本书内容和评价都一目了然，信息结构利于扫描和比较。重要的信息大而具有色彩，次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点，一目了然”。如何测试页面是否“突出重点，一目了然”，以及如何达到“突出重点，一目了然”。 有句话我挺喜欢，作为结局吧。在《What’s Next in Web Design?》中说道的：

“Simplicity is when someone takes care of the details.”

“简单而不简陋！”(谢谢青云给出的翻译！)

我们所追求的界面或者功能做得简单，不是粗制滥造，而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易，但是把东西做好做精难啊！

感谢：ued.taobao.com分享！

在《交互设计实用指南》里，我们认为，交互设计，应当是创造承接人类与计算机之间的界面即人机界面(Human-Computer Interface)(见下图)。交互设计的出发点在于研究用户和计算机交流(dialog)的时候，人的心智模型和行为模型，并在此研究基础上，设计界面信息及其交互方式，用人机界面将用户的行为翻译给计算机，将计算机的行为翻译给用户，来满足人对软件使用的需求。所以，交互设计一方面，是面向用户的，这时交互设计所追求的既是可用性(Usability)，这也是交互设计的目的所在；交互设计的另一个方面是面向计算机实现的，这时我们关注于“软件工程化”。

交互设计模型

面向用户

根据上文中，我们提到的满足人对软件的需求，其目标既是我们所说的“可用性”。可用性指的是一个产品可以被特定的用户在特定的使用情况中，有效、高效并且满意得达成特定目标的程度(ISO9241)。我们认为，其中所诉的有效、高效和满意即为可用性的三个递进的层次：
有效性：有效性是指用户完成特定任务和达到特定目标时所具有的正确和完整度。如果用户不能完成他们的目的，那么无论体验是长时段，容易还是复杂，这个产品可能都没有意义。
90年代的时候，某品牌机厂商推出的台式机都预安装了一个“我的家”的软件。该软件是个系统功能的导航软件，它将你电脑的例如Office、音乐、电影、浏览器、计算器等这样的工具安排在一个充满隐喻的图形化的屋子。例如你要听音乐，那么你必须走到卧室，然后点击那把吉他，如果要使用Word，你可能需要点击你书桌上的文档。这样当时在厂商看来十分吸引消费者的东西——它认为这样能够解决新手使用电脑的问题——却被市场所否定。许多消费者根本找不到相应的功能放在哪儿。于是，当连功能都完不成的时候，软件就缺失了有效性，即使这个充满隐喻的图形化的屋子做得再逼真，软件价格再低也不会有消费者觉得可用，软件也失去了价值。
高效性：高效性是指用户在完成特定任务和达到特定目标的容易程度和时间长短。这可能会牵涉到许多因素。例如，我们的软件启动速度太慢，处理速度太慢，这会影响到软件的高效。再比如，在一个呼叫中心使用一个更高效的呼叫中心系统，可能造成操作员每天能够处理更多的电话数。
对于网站来说，一个良好的信息架构对于高效性的提升是十分有效的。良好的信息架构能够让用户在更短的时间，也更容易地找到他们想要的信息。
Flickr和Picasa都是著名的照片管理网站。Flickr注重的更多是社区化的应用，用户群体相对摄影技术较好。而Picasa注重的更多是个人的相册，用户群体相对摄影技术也较差。他们的首页也迥然不同。Flickr的登录后的首页大部分是社区性的信息，例如最近的活动，你的联系人最近发表了什么照片，还有你参加的小组等等。另外复杂而有条不紊的导航也允许中高级用户造访更多的Flickr的功能。相比之下，Picasa首页基本只是所有的相册的列表。这样的迥异之下，Flickr对于他的用户群是高效的，Picasa对于他的用户群也同样高效。不同的用户在他们的页面之下都容易找到他们自己需要的内容。

Flickr 和 Picasa的个人首页

另外，减少用户的认知负担也是提高软件高效性的有力措施。能不能然用户少些机械的操作？能不能让用户尽少思考？能不能让用户别记着那么多的东西？

满意度：满意度是指用户在使用软件产品过程中所感受到的主观满意度和接受程度。在用户能够有效、高效地使用软件的基础上，给予用户一些更多地“体验”，考虑那些更多内涵。这也是我们交互设计真正的水平所在。例如：我们需要避免用户出错，也同时能够提高方法让他们从错误中恢复；我们需要让软件易学，以便让新手快速成长为中间用户，让需要的中间用户成为专家；我们需要做精美的页面让用户喜欢；我们需要塑造我们的品牌风格，让用户“膜拜”……
交互设计就是设计软件上可提供的交互方式，来满足人对使用软件的三个递进层次的需求。也就是说，首先，应当保证软件的有效性，如非有效，一切皆空。接着，保证软件的高效性，软件虽然已经完成了他的目标，那么是不是可以在这个基础之上，缩短完成目标的时间长度或者是降低认知成本等，最终达到提高生产力的目的。在完成了这两点之后，我们可以继续考虑提高软件的满意度，这里可以通过一些视觉的提升、品牌效应和创造新的体验(苹果一直是这方面的好例子)等方法来提高软件的满意度。

面向实现

交互设计立足于软件工程中的一个环节，所以谈到交互设计，特别是在软件工程中的交互设计，就必须涉及面向实现的部分——也就是我们谈论的“工程化”。“工程化”问题，涉及到三个方面：

标准化：这是指在进行与交互设计的相关工作，我们需要满足相关的标准和规范。标准化有助于提高产品的兼容性、互操作性、可重复性、安全和质量。举个例子，例如我们在制作原型的时候，有可能需要参考UED团队的栅格标准或是垂直栅格。这样，对于视觉设计师，他们可以减轻像素对齐的负担，对于前端工程师，套用相应的代码即可完成标准栅格的摆放。当然，还有很多标准和规范，例如：有些公司拥有交互方面的Guide-line，可以保持整个产品形象的一致性，降低用户认知负担。

可行性：这是指在设计交互的过程中，应考虑到技术上是否可行。可行包括两个层面：第一个是技术可以完成，更高的一个层次则是需要考虑在现有的资源(时间、人力、技术能力等)的情况下时候可以完成。我们可以设计一个拖载的动作，但是，如果这玩意儿告诉你要在山寨非触屏手机的浏览器内实现，那么这显然是不可行的交互；如果告诉你这玩意儿在浏览器中将多加载100kb数据量，平均延长加载时间7s，那么这也很可能不是可行的。交互式设计师需要参与方案的实现，以确保方案实现是严格忠于原来的设计的；同时，也要准备进行必要的方案修改，以确保技术的可行，当然，修改不该伤害原有设计的完整概念。

创新性：其实，具体得说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互方式(《交互设计——超越人机交互》)。虽然说到创新，各位可能很容易想到炫目的交互，大量的动画等等，但是，别忘了“技术驱动创新”：创新应当尽量在上面所述的标准化和可行性的框架内进行。
面向实现的这三点互相制约，相辅相成，也同时约束了我们的交互设计工作需要在一定范围内实现。为用户而设计，考虑实现，一起做一个精明的交互设计师吧！

2.能帮用户代劳的（计算、选择框等）尽量帮用户代劳，要经常把主动权交给用户。

3.注册和登录位置固定，放在顶部是个不错的主意。

4.帮助最好做成示意图+文字。

5.面包屑还是要有的最好做的有新意，不要远离用户操作的界面。

6.随时告诉用户现在的页面情况。

7.用户填写表单信息时即时验证，验证反馈不一定要用文字的形式，有时候一个简单色块提示效果更好。

8.在用户购买过程和成功后除了“最近浏览”和“购买过本产品的用户还买过”还可以提供“您可能还对这些产品感兴趣”“捆绑推荐等”

9.隐藏层可以用的更好。

10.搜索框做的大点长点是好事，简单也是好事。

11.信息量大时候采用tab菜单很不错

12.不要让用户填写重复的信息，不能避免时帮用户copy好。

13.注册、登录采用了集成页面的话需要明显的视觉区分。

14.如果相反义的按钮避免放在一起，不能避免时候用视觉反差区分开。

15.可以适当的对用户公布页面颜色标准。

在一个设计项目中，保存你提出的所有东西。你会很容易忘记将过程归档。当你迫切需要某个东西时，白板上却长期空空如也，没有起到提醒的作用。在每天工作结束时，让工作小组的每一名成员审视一下这个记录，并从中选择一项作为第二天讨论的第一件事情。如果你设计的每一个方面都不能合理地说明这个历史记录的一些相关内容，那么，你得仔细思考你的设计是如何进行的。

时刻关注生活——读一些有关建筑学、人文科学、经济学的书籍和一些最新科学和社会学的调查结果。大量的报刊杂志都会在这方面对你有所帮助——例如：《经济学家》、《新科学家》和《墙纸》。但是要记住，同时精通人文科学和自然科学的人寥寥无几——你周围的其他人将可能补充你的设计。

如果你的设计中没有将现场（如人种学的观察值和在现场的纵向评估）和非现场（如现场后数据分析和实验室试验）放在同等重要的地位，那么你应当考虑矫正这两点的平衡。
把程序设计员纳入设计过程中。这样做不仅是因为你想进行联合讨论，而且还因为计算机科学——它就是关于如何对资源和复杂性进行管理和组织的——会提供很多关于如何构造一个界面的信息。

原文来自Matt Jones和Gary Marsden的《移动设备交互设计》P119

“星号(*)”显示在前面：

“星号(*)”显示在中间：

“星号(*)”显示在后面：

先问下大家：

“*”放在哪个位置相对合理？为什么？

讲下我的看法吧：

首先换个角度看看上面的内容，把过程分成三块：
*＝提醒
用户名、会员登录名、邮箱名称＝说明
文本框＝执行

大多数人的视觉一般是从左往右的方向，所以这三张图的逻辑流程应该是：

第一张：显示在前面
提醒（这是必填的） > 说明（填的是什么内容） > 执行（填写内容）

第二张：显示在中间
说明（填的是什么内容） > 提醒（这是必填的） > 执行（填写内容）

第三张：显示在后面
说明（填的是什么内容） > 执行（填写内容） > 提醒（这是必填的）

===========================================================

显示在前面：一上来就先提示你一定要执行。（这感觉就好像有人先不告诉你做什么事，但先提醒这件事你一定要做。）感觉好吗？！

显示在中间：一上来先说明你要做什么事，然后提示这是你一定要执行的。（这感觉就好像有人先和你说要做什么事，然后提醒你这件事是一定要做，接下去你愿意的话就可以做。）比较尊重用户，也比较符合逻辑。

显示在后面：一上来先说明你要做什么事，然后你愿意的话就执行，执行完后提醒你一定要执行。（这感觉就好像有人先和你说要做什么事，然后你做了，最后才告诉你这是一定要做的。）事都做完了，这时候才知道是一定要做的，对用户来说已经不重要，何况如果不是一定要做的，用户不是可以选择不做吗？

所以我的结论“*”相对来说放在中间最合理！

组织系统
如何组织信息，例如，依据主题或年代顺序。

标签系统
如何表示信息，例如，科学术语（“Acer”）或通俗术语（“maple”）。

导航系统
如何浏览信息，例如，通过等级体系的点击。

搜索系统
如何搜索信息，例如，对索引系统进行搜索的查询。

———————————————————————————————–

分类信息架构的方式

浏览Browsing Aids

这些组件会展现一些预设的路径给用户看，协助他们浏览网站。用户无需清楚地说出查询的内容，而是通过菜单和链接找出他们要的东西。浏览帮手的种类包括：

组织系统
网站内容分类或分组的主要方式（例如，按主题、按任务、按用户，或者按年代），也称分类法和等级体系。标签云图（根据用户产生的标签）也是一种组织系统。

全站导航系统
主要的导航系统，协助用户了解他们人在网站的什么位置，以及在网站中可以到哪里去（如“面包屑”）。

区域导航系统
主要的导航系统，协助用户了解他们人在子网站的什么位置，以及在子网站中可以到何处去。

网站地图/目录
支持主要导航系统的次要导航系统，提供浓缩过的总览以及连向主要内容和子网站的链接，通常是采用概要的形式。

网站索引
辅助性的导航系统，可以提供排序后的链接列表，连向网站的内容。

网站指南
辅助性的导航系统，针对特定主题提供特定的信息，以及连向网站中相关子主题的链接。

网站向导
辅助性的导航系统，可以通过一系列的步骤来引导用户，也有连向网站中相关子主题的链接。

情境式导航系统
用链接统一连向相关内容。通常内嵌在文字内，一般是用来连结网站中高度专业化的内容。

搜索Search Aids

这些组件可以让用户定义查询字符串，然后自动回应一组满足查询条件的结果给用户。可以把搜索帮手当成是动态的、几乎全自动化的一种浏览帮手。搜索组件的种类如下：

搜索界面
输入和修改搜索字符串的方法，通常会提供一些教你怎么改善查询的信息，以及其他设定搜索的方式（例如，从特定搜索区域中选定）。

查询语言
搜索查询的语法。查询语言包括了布尔运算符（如AND、OR、NOT），相似运算符（如ADJACENT、NEAR），或者是指定要搜索哪个字段的方法（如AUTHOR= “Shakespeare”）。

查询构造器
一些提升查询效果的方式：常见范例包括拼写检查器，词干分析、概念搜索，以及从辞典中取出同义词。

搜索算法
是搜索引擎的一部分，决定哪些内容可以满足用户的查询。Google的PageRank也许是最著名的例子。

搜索区域
网站内容的子集合，已经特别做过索引设计，以满足较细致的搜索（例如，搜索软件厂商网站中的技术支持区）。

搜索结果
展示满足用户搜索条件的内容。牵涉到哪些类型的内容应组成为个别的结果，应该显示多少结果，以及结果应如何分级、排序和聚类。

内容和任务Content and Tasks

这是用户最终的目标，以及用户达到目标时所需的个别组件。然而，要从信息架构中把内容和任务单独提取出来是很困难的，因为内容和任务中都会嵌入组件协助我们找到方向。嵌入在内容和任务的信息架构组件实例如下：

标题
为内容命名的标签。

嵌入式链接
文字内的链接，就是连向某些内容的标签。

嵌入式元数据
可以作为元数据的信息，但是必须先被抽取出来（例如，在食谱之中，如果有提到某种材料，这项信息可以索引起来，可支持以材料搜索的功能）。

成块信息
内容的逻辑单元；这些单元可大可小（如节和篇章都是成块信息），而且可以是嵌套的（如章节是在书本之内）。

清单
一群成块信息，或者连向成块信息的链接。这些很重要，因为它们已经按组分类了（例如，具备某些共同特点），而且以特定次序展现（如按年表）。

顺序式帮手
暗示用户在某一流程或任务中所在位置的线索，以及完成任务之前还要走多远（例如，在八个步骤中的第三个步骤）。

标识符
暗示用户在信息系统中的所在位置的线索（例如，标志指出用户正在使用的网站是什么，“面包屑”表明现在处于网站的哪个位置）。

“隐藏的”组件”Invisible” Components
某些重要的组件完全是在幕后执行的，用户很少会和这一类组件交互。这些组件通常会“喂养”其他组件，诸如用来提升搜索查询的词典。一些隐藏的信息架构组件种类如下：

受控词表和叙词表
预先确定较佳的词汇，用以描述特定领域（如赛车，或外科手术）。通常会包含其他的称法（例如，“brewskie”是“beer”的另一种称法）。叙词表是通常包含上位类、下位类、相关关系的叙词链接和优选词的说明（也就是“范围注释”）组成的受控词表。搜索系统可以从受控词表中取出查询的同义词以提升查询效果。

搜索算法
用于对搜索结果按相关性排序；搜索算法反映了程序设计师对如何决定相关性的判断。

最佳猜测（Best Bets）
手动和搜索查询相配的较佳搜索结果；编辑和主题专家会决定哪些查询应该取出最佳猜测，以及哪些文件应有最佳猜测状态。

图1(典型的标签)

这个例子可能会觉的这类标签比较简单，容易理解，但要为一些相对专业性的网站做这类标签就抓狂了，比如：金融，医药，教育，政府（如图２）。

图2(看到这类标签，能想到哪些内容会在相应的标签中呢？)

标签的分类

情景式链接：简单说指定的类中放相关的内容。比如看到挂着[化学品]三个字的仓库，没进仓库前就可能联想到三聚氰酸、苏丹红这类。反过来，如果先进仓库看到三聚氰酸、苏丹红，等走出仓库却看到 [食品仓库]时，一定会让人费解。再比如一个论坛的[股票]栏目和一个财经网站的[股票]栏目，在这两个不同情景下（前一种讨论股票后一种观察股票），一个标签的概念就会更让人容易理解。

标题：比如文章的题目、新闻列表的编号、项目符号(CSS中list-style-type)、图片，这类标签还能区分内容的结构层次。比如注册时的第一步，第二步；读文章时的第一节，第二节。

导航系统的标签：这个比较常见，就是网站栏目名，关键要分类好相应栏目所包括的内容和取好这个栏目的名字，尽量用一些互联网上常见的匹配，比如[公司新闻]就公司新闻，别写什么[大事记]，[搜索]就搜索，别写[寻找]，别玩概念。如果一定要玩概念，书中还介绍了范围批注的一种方法，就是花时间介绍网站各个[栏目名]的意思，不过现在大多网站通过[网站地图]更清楚的分清栏目的所包括的内容。

索引术语：将网站中的内容纯粹通过一个个标签的形式组织并列出来，方便有目的用户找到相关标签或让没目的用户看到推荐标签，比如（图3），不过还有一种意义是通过设计好的标签，方便搜索引擎寻找，说白了就如同在GOOGLE搜索关键字的作用(keywords)。

图3（这就是书中例子的变种）

图标型：通过图形来说明文字表达的内容，这类用法在专业性强的网站上比较受用，所在的情景范围越小就越能突出图形所代表的文字内容。比如你在旅游网站上看到飞机类的图标会想到什么？在一个门户网站上看到飞机类的图标又会想到什么呢？

设计标签

尽量窄化范围：这是通过减少网站所涉及的范围，整理网站栏目概念，甚至减少网站内容。

开发一致的标签系统，而非标签：比如网站首页的栏目和内页的栏目包括命名和顺序都应该是一致的。

一致性会受到很多因素的影响：风格（标点符号，大小写）、版面形式（内容页的文章有一致的风格）、语法（口气一致）、粒度（代表特定内涵）、理解度（帮助用户想到网站能提供的给Ta内容）、用户（为不同的用户独立设计标签系统，即使这些系统说的都是同样的东西）

标签系统的来源

你的网站：做网站时的资料，比如公司要把那些资料，内容放到网上去，按资料属性分分类，按资料格式分分类，按资料作用也分分类，还有，标签＝目的地的标题＝目的地网页的TITLE。

找同行竞争对手：向QPAI学习做BE TO SEE

受控词表及叙词表：这概念就是些专业的人给一些特定领域制定了一些精确的表达方式，并且词汇通常是公开的，而且被广泛使用。比如有“沙发”，“可爱多”，“生男生女都一样”这类也算吧

创建新标签系统

内容分析：分析文章有代表性的内容，现在QQ空间和蓝色在你写完文章的时间，都会提取这类分析标签。

内容作者：让作者或者文章相关的研究人员来定义标签，然后专人来统计分析标签。

用户代言人及主题专家：找用户代表，或者和用户有直接接触的部门、专家，从用户的角度发言。收集资料找出他们认为用户会想在些网站上找到什么。从一小群用户开始，就可以产生足以为网站做索引的标签。我们对用户（外行）有点了解，所以可以做出能适合他们的术语（例如：“种菜”替换“寂寞”）与了解用户需求的人一起工作。

直接来自用户：开放式卡分类：可以为现有内容按主题分成各自的类别，然后，再为这些类别命名标签。

封闭式卡片分类：是根据现有的类别区分主题，然后再将内容排序到这些类别。对封闭卡片分类面言，一开始要询问用户，说明他们认为类别标签所代表的意义，然后和你自己的定义互相比较。

自由列表：选出关键重要的项目或畅销产品，让新用户或者使用者对项目或产品瞬间想出一些字眼予以描述。排列分析字眼，寻找模式和使用频率。

间接来自用户：搜索日志分析：获取用户实际使用的标签信息，通过哪些关键字搜索来本页中。
标签分析：如图（3）

调整和微调

设计的标签系统必须时常调整和改进。标签代表用户和内容之间的关系，这种关系时常变动。进行用户测试，定期分析搜索日志.

感谢：http://www.08show.com/ 分享