Web交互设计方法概论 - UCD大社区

信息构架的若干原则 (第一部分)

人仔 — 2010-05-11 23:22:15

本文不准备重复讨论Web信息构架过程中的细节（比如，搜索框应当放什么地方），这些细节很多文章都讨论过了。我们把重点放在与网站信息构架的相关核心原则和方法上。适当的使用这些原则可以简化从互联网认知信息的过程，且使呈现的信息更容易被获取。

为了能顺利理解并恰当运用这些原则，我们首先要理解什么是信息构架，信息架构的目标、核心理念、组件和构架的一般过程是什么。

了解信息构架

什么是信息构架？
Information Architecture（简称IA）是美国建筑师沃尔曼(RichaId SaMl wMMan)先生在1975年创造出的一个新词语。

IA的基本定义：
IA是组织信息和设计信息环境、信息空间和信息体系结构，以满足需求者的信息需求，实现该目标的一门艺术和科学，他包括调查、分析、设计和实施过程，涉及组织、标识、导航和搜索系统的设计。

为什么需要信息构架：
由于互联网上的信息种类繁多、内容特征多种多样的多媒体信息，信息存储分散无序，加之超链接技术的广泛使用，互联网具有非常复杂的信息空间，用户在其中很容易迷惑和迷失方向。因此，互联网网尤其需要信息构架成为信息序化和优化的思想和工具，以帮助人们在异质的信息空间中管理和获取信息。

信息构架的目标：
1）获得和理解信息内容。将信息组织好。
2）优化信息结构。
3）面向用户传达信息内容。
4）提供一个清晰的易于信息获得的界面。

核心理念：
信息架构的核心理念是以用户为中心。信息构建是信息用户、信息内容与信息组织三者的交集，信息生态在其中起着很重要的作用，而用户、内容和组织构成了信息构建的三个生态环。

The Three Circles of Information Architecture by Peter Morville

信息构架组件：
信息架构的核心组件包含：组织系统、标签系统、导航系统、搜索系统四个方面。

信息架构的一般过程：
概念设计→组织信息内容→生成信息结构→设计信息界面→提供信息导航→信息展示和信息发布。

在对信息架构有了初步认识的基础上，我们来进一步理解李钊在《互联网产品的交互设计方法（UPA2008讲稿）》中提到的指导信息构架的若干原则：

1. 对海量信息提供多种检索方式

一个网站最根本的框架由众多属性相同的信息基本单位组成。因此对信息的组织和检索是我们进行信息架构的核心内容，设计信息组织系统也是建立信息构架导航系统的基础。而如何让用户从网站的海量信息资源中便捷、准确地检索到所需信息已成为我们关注的焦点问题。常见的信息组织及检索方式有：

1）数据库检索方式（即搜索）。
以数据库方式组织信息资源，并通过对数据库的操作实现使用和更新。这种组织方式，使用户对信息的查询效率提高，对信息的管理和更新方便，有效，但在使用时需要用户有较明确的搜索关键词，对用户的使用要求较高，检索的精确度受关键词影响。

比如提供一站式搜索功能。Google爆炸式的业务增长便充分说明了搜索的重要性。Google通过实践证明，人们在处理大量信息时，会非常注重搜索工具的效率。

2）等级菜单（目录）引导方式。
采用菜单式界面向用户提供浏览检索服务，服务器中的所有信息都以目录或文件的形式表达。即通过多级菜单分类细化，最终找到所需信息。这种组织方式使用户对信息的检索和使用非常的简单，方便，但其检索效率较低，而且对信息的分类和组织的依赖性较强。

比如Amazon提供的购物分类，建立了一套系统的、多维度的分类目录，是优化用户获取信息的重要途径之一。

3）信息排序
一次标准的 Google Web 搜索会在 Internet 的无数网页中找到几千乃至几百万个匹配项。如果不提供某种形式的导航或排名就将这一结果集呈现给用户，找到有用信息的概率可谓微乎其微。

4）超文本链接方式。
使用超文本传输协议将internet上的资源集成为一体，形成信息的网状结构，以适应人类思维的非线性特点，方便人们查找。最典型的就是目前最常用的应用超链接的信息检索方式。这种方式使用户在查到一篇文章后，可根据链接关系查到许多相关文章或内容，而且可以非线性跳转，但其检索效率较低，用户容易在查找信息的过程中迷航。

比如Amazon中利用商品的相关性，使用超文本链接的形式让顾客能够迅速找到他们可能想买的目标商品：

5）社会化标签（Tags）。
用户使用自由定义关键字的方式进行协作分类的活动。简单理解这个概念就是Tags(标签)。Tag作为一种自由而有序的信息分类技术，Tags最早出现在一些社会性分享网站当中，比如社会性书签网站del.icio.us，照片分享网站Flickr，目标分享网站43 things以及Technorati等等。

2. 贴合用户的心智模型
从电影观众的角度来说，在观看一部引人入胜的电影时，很容易忘记影片齿孔间的细微差别和瞬间的光线打断。很多看电影的人，实际上根本不知道放映机如何工作，或是它工作的方式与电视有什么不同。在观众的想像里，放映机只不过是发射出在大屏幕上移动的图片而已。这就称为用户的心智模型
–摘录自《交互设计精髓》

心智模型是符合用户以往社会生活经验的，（比如：805会议室是在8楼的一间会议室，不应该出现在其他楼层。）符合人本能认知的且尝试的更容易，（比如，方向盘是圆的，圆的是可以转动的。）等等…

在进行信息架构的时候，应尽力使信息的组织和展现更加贴合用户的心智模型，让用户更容易熟悉和使用你的产品。也就是说，让用户在使用的时候能更快的形成心智模型。

1）与生活经验相符合：
当用户打算预订机票，通常希望找到期望时间中成本最低的航班。因此机票预订系统的搜索工具会根据输入的旅行日期、出发地点、目的地找到航班可用项目的匹配集。用户首先关注的是我计划的出发的日期是否有航班？如果有，哪个时间段的航班最便宜？我可以从哪家票务公司订最优惠的机票？
以去哪儿（qunar.com）订票流程为例：

- 搜索机票

- 搜索结果（按最低报价排序，同时提供时间、航空公司、方式等筛选）

- 选择最低报价的票务公司

- 最后跳转到预订支付页面

2）提供一致性的体验：
用户的心智模型是主要是基于经验。无论信息的内容是什么，结果应当总是显示在相同的位置，并采用相同的信息布局。信息的显示效果一致性程度越高，用户就越容易理解特信息的相关性。

如上图，在Gmail中对邮件列表的展示：灰色的项表示的是已读的邮件，白色的相表示的是未读的邮件，而黄色高亮的则表示选中的。与Google大全的其他产品，如google reader是一致的。

相关话题：Web交互设计方法概论源地址：http://isd.tencent.com/?p=1769

页面表达原则

臭鱼 — 2010-04-20 22:23:45

《页面表达原则》是整个“web交互设计方法”中的一部分：

页面表达原则概述：
1.更少的信息量更好。
2.不提供多余的功能。
3.结构化更易于理解。
4.信息的表达应该清楚、明确、直接。
5.操作可识别。
6.操作前，结果可预知。
7.操作时，操作有反馈。
8.操作后，操作可撤销。
9.让用户知道身处何地。
10.避免内容看上去象广告。
11.同一功能在不同页面上位置相同。
12.措辞统一。

详细描述：
1．更少的信息量更好。
用户不是在阅读网站，而是在浏览网站。他们浏览与自己目标匹配的文字和图片，冗长的链接、说明和消息只能减慢用户的速度，并且“隐藏”重要信息。

实例一.

公告栏有“详情”，那么这个页面中只需要简略的写出最重要的一两句话：
近期个别不法团伙利用自定义代码窃取网友QQ密码，转载广告。为保障广大网友的利益，出现类似行为的QQ空间将被永久关闭。了解详情

实例二.

左侧的文字过多，这些文字完全是可以精简的。以左下角的“温馨提示”为例：

关于上传照片的说明，温馨提示之前已经有的专门的说明。这里不必要再说了。此处的温馨提示可以直接简化为：

再进一步来看，这个页面是注册成为城市达人的页面，这段信息本来也不必要出现在这里。也就是说，整段温馨提示都可以删掉。

2. 不提供多于的功能，减少出错。
提供尽可能多的功能并不意味着会有更多的用户喜欢。提供过多的功能，过大的自由度不仅不会使产品的功能更强大，反而会给用户造成很多错误的引导。

实例一.QQ空间商城中的导航

为了让用户预览到自己空间中的导航换上皮肤的效果，这里显示出了用户个人空间中的导航。显然这里并不希望用户通过它离开商城。但是，这里的“主页、日志……”却是可以点击的。
为了挽留用户，且避免误操作，不得不弹出一个对话框：

实例二.Photoshop CS2中，一个工作窗口可以拖动的范围更大了，如图：

以前的版本只能这样：

与以前的版本相比，最顶部的80px也可以用作显示工作窗口了。PhotoshopCS2提供了更大自由度的操作。但是，如果把工作窗口拖上去，菜单栏、辅助工具栏就会被遮挡住。在遮挡住的状态下，要想点击“显示变换控件”这个复选项，又不得不再把工作窗口拖下来。更糟糕的是，也许有些用户会根本就找不到这个功能了。

虽然遮挡住菜单栏是用户自己的操作导致的，但是这并不能说明这个设计是没问题的。用户在遮挡住菜单栏的时候并不总能意识到操作将产生的全部后果。

在photoshop CS3中，这个功能被取消了。

实例三：

当用户在Qzone商城中将播放器放在上图这个位置时，很可能没有意识到“装扮空间”、“自定义”、“信息中心”三个链接将会被挡住，无法点击了。
允许用户在页面上任意位置摆放装扮物，这样强大的功能并没有建立在“不出错”的基础上。

不提供多余的功能的观点来自于alan cooper的“以目标为导向的设计理念”。

“以目标为导向的设计理念”首先区分了用户的“目标”与“任务”这两个概念。
目标是用户需要最终做到的；任务是为了完成目标而不得不完成的操作。任务不是用户的需求。如果可以完成更少的任务就达到目标，是更好的。一个产品是在帮助用户实现目标。用户使用产品的过程是借助产品完成自己目标的过程。因此，在帮助用户实现目标的前提下，产品要求用户进行的操作越少越好。

3. 结构化更易于理解
结构化是指：将信息归纳、整理成若干条，以条目的形式展示的做法。类似下图：

将较大信息量的文字信息逐条展示可以提高读者的阅读速度，提高阅读效率。

显然下面这样一段说明文字是很难阅读的：
请您务必填写个人真实资料，如果因为您的个人资料填写错误所导致无法成功办理中信QQ信用卡及无法获赠QQ会员，腾讯及中信将不承担任何责任。QQ用户点击“下载申请表格”，（下载申请表后，不要修改文档，直接点击打印，否则无法进件。请务必完整打印出申请表与申请合约，并寄回信用卡中心。）打印后并填写好申请表，准备好身份证复印件（必须），以及其他备选财产证明文件：其他信用卡的复印件、车产证明复印件、房产证明复印件、收入证明复印件、交易额等证明复印件，装到信封内，即可邮寄到“深圳邮政028-222信箱”，或者快递到“广东省深圳市罗湖区笋岗路12号中民时代广场B座29层进件室”，邮编518029。中信银行信用卡中心在收到申请资料后，即开始审核信用卡的申请，申请的注意条款、申请进度查询，详见网址http://bank.ecitic.com/cards/，或者咨询中信银行信用卡客服中心40088-95558。选用此方式办卡的用户可获得价值120元QQ会员礼包（12个月会员资格）。QQ用户在申请成功并获发信用卡后10个工作日内，将开通该用户的QQ会员资格6个月，成功激活后，再延长该用户6个月的QQ会员资格，注：QQ会员服务由中信银行购买并赠送给QQ信用卡客户。之前通过手机、小灵通、宽带、电信付费开通会员的用户，此次暂无法享受赠送。申请用户必须是中信银行的新用户，才可以享受赠送会员服务的优惠。如果您已经拥有中信银行的信用卡，则再申请中信银行QQ信用卡不享受赠送的QQ会员服务。

将这些文字分成若干条，阅读起来就容易多了：
A、申请用户必须是中信银行的新用户，才可以享受赠送会员服务的优惠。如果您已经拥有中信银行的信用卡，则再申请中信银行QQ信用卡不享受赠送的QQ会员服务。
B、如果因为您的个人资料填写不准确而导致无法成功办理中信QQ信用卡及无法获赠QQ会员，腾讯及中信将不承担任何责任。
C、下载申请表后，请勿修改文档，直接点击打印，否则无法进件。
D、请务必完整打印出申请表与申请合约，并寄回信用卡中心。
E、邮寄材料：打印后并填写好的申请表、身份证复印件（必须）、其他信用卡的复印件、车产证明复印件、房产证明复印件、收入证明复印件、交易额等证明复印件。
F、邮寄地址：深圳邮政028-222信箱。或者快递到：广东省深圳市罗湖区笋岗路12号中民时代广场B座29层进件室邮编518029。
G、中信银行信用卡中心在收到申请资料后，即开始审核信用卡的申请，申请的注意条款、申请进度查询，详见网址http://bank.ecitic.com/cards/，或者咨询中信银行信用卡客服中心40088-95558。
H、选用此方式办卡的用户可获得价值120元QQ会员礼包（12个月会员资格）。QQ用户在申请成功并获发信用卡后10个工作日内，将开通该用户的QQ会员资格6个月，成功激活后，再延长该用户6个月的QQ会员资格，注：QQ会员服务由中信银行购买并赠送给QQ信用卡客户。之前通过手机、小灵通、宽带、电信付费开通会员的用户，此次暂无法享受赠送。

4. 信息的表达应该清楚、明确、直接。
清楚、明确、直接是信息表达的一个基础要求。但是这也是做不容易做到的。
实例一：

问题1.副标题表意不明确

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。

问题2. “脱掉”按钮不易找到

“脱掉”按钮在框的右下角，很多时候会出现在预览区以外，看不到，并且文字超小，无法阅读。

实例二：

“您还没有登录”所以“请先登录”。这是很清楚的逻辑关系。

“原因可能是长时间未操作而失效，谢谢合作！” 是什么事情需要解释？其实这是在说另外一个事情：“您很奇怪刚才登录过，现在为什么又要登录吗？我告诉您：原因可能是长时间未操作而失效…”

这里的表述过于追求文字上的简练了，把两个问题混为一谈，没有表述清楚。

5. 操作可识别
链接应该象链接，按钮应该象按钮。蓝色、带下划线的文字是目前链接文字通用的表现方式。按钮应当是有立体感的，看上去就感觉像是可以点击的。
操作可识别原则是为了保证用户触发操作的有可能性。

QQ空间中有个不好的例子：

有输入框，但却看不到验证码图片。 “没看到图片我怎么知道要输入什么？”“不知道要输入什么，我就不去不输入啦。”操作前表达的不够清楚，会影响触发操作的可能性。
（上面那行温馨提示算是个补救措施，但并不能解决问题。如果都靠提示就可以了，那么就不需要设计师了，有作家就够了。）

6. 操作前，结果可预知。
未进行一个操作之前，应该让用户大致能猜测到操作后会是什么样的结果。或者说，操作的设计应该和用户的期望相同。那些只写成“返回”“上一步”“下一步”的链接，如果可能，最好还是写清楚些为好。比如写成：“下一步进入购物车”、“返回首页”…

实例一.

如果将右上角的链接直接写做：更多品牌专区，用户则不需要纵观整块内容，直接就能看懂这个链接指向哪个页面。更快、更容易的看懂这个链接，会使得更多用户去点击，类似下面这样：

实例二.

两个按钮都叫“复活Ta”，但其实操作后的效果并不一样，前面一个按钮是打开另外一个页面，而后面一个按钮是真的实现“复活”操作。用相同的按钮表示不同的操作，使得用户更不容易猜到操作的后果。

还有些时候，让结果变的不可预知是设计者故意的：

点击标题，不是进入这篇文章，而是进入“图领风骚”栏目，如下图：

这篇文章属于这个“图领风骚”栏目，并且在第一屏看不到这篇文章。

7. 操作时，操作有反馈。
进行了一个操作后，需要页面上有反应。

应该引导用户将挂件放在页面比较靠上的位置，所以item的默认位置在第一屏，为了确保用户点击了一个item后能看到这个item出现在了页面上，QQ空间商城的页面很短。

QQ秀商城左侧固定，右侧可滚动，确保了用户能看到点击一个item后的变化—左侧预览图上出现了变化。

确保操作有反馈还应当避免链接指向当前页。
指向当前页的链接，点击后，只是页面刷新，并没有明确的告知用户刚才的点击操作产生了什么样的后果。（除非链接就叫做“刷新当前页”。）

不好的例子：个性域名

之前的问题：当输入的个性域名不合要求时点击“查询”，页面没有反应。

现在的设计：

当焦点进入第二个输入框后，变红。

当时现在仍旧存在问题：

此时点击“查询”页面还是没有反应。

8. 操作后，操作可撤销。
执行一个操作后，应当允许撤销，允许用户反悔。

实例一：

不想进去了，怎么办？

实例二：

要不想发表回复了怎么办？

9. 让用户知道身处何地—页面标题、导航

让用户知道自己当前身处何地是个很基本的诉求。清楚的表明当前页面是什么，在哪里，可以很大程度上降低用户的恐惧感。
目前能实现这个要求的方法主要有两个：页面标题和导航

页面标题是整个页面的说明，可以最直接的表示出当前页面是什么。

其中的“World News”是页面标题。

其中的“Audio, TV & Home Theater”是页面标题。

页面标题写在一个页面的最上面，并且通常是一个页面中最大字号的文字。

在web界面中，使用 “层级式导航”（路点）可以很清楚的说明当前页面在整个网站中的所处的位置。

其中的“Home / Products / Acrobat family /”清楚的表明了当前页面“Adobe Acrobat Connect Professional”在整个网站中的位置。（“Adobe Acrobat Connect Professional” 是这个页面的标题。）

10. 避免内容看上去象广告

用户会在阅读网页的时候，会“有选择的”阅读，既，并非单传按照从左到右，从上到下的顺序阅读；也并不是单纯的按照视觉规律阅读，色彩显眼的、能运动的图形很容易引起视觉上的注意，单如果看上去象广告，那么，用户会跳过那一部分内容阅读的。网页的阅读顺序不仅遵循常规的阅读规律，也受网页阅读习惯的影响。

所以，网页上的正文内容不要表现的象广告一样。并非更大的展示形象的图片就能更突出内容；内容的中元素能动起来，也不意味着更能吸引用户；类似“马上注册！”“免费获取”之类的说法也不单纯意味着能吸引人。这些表达方式都有可能让用户误会。

11. 同一功能在不同页面上位置相同。（一致性）
同一功能在不同的页面上出现在相同的位置上可以减少用户寻找的时间。

实例一.

返回yahoo首页的链接：yahoo！始终出现在页面的左上角。

实例二.

Google中个人帐户的相关链接总显示在页面的右上角。

实例三：

Amazon中左侧栏始终是用来展示分类索引的。

12. 措辞统一（一致性）

●表述中避免使用“用户”，而使用“网友”、“朋友”、“访客”等。
●第二人称用“您”，而不使用“你”。
●“登录”而不是“登陆”。登陆一词也确实会用到，比如：登陆qq.com，发现更多精彩…这种情况下，尽量避开“登陆”一词，用“访问”、“浏览”之类的词代替。
●腾讯的产品中，“好友”一次有特殊的含义，指“QQ好友”。所以，在通常的表述中应避免使用“好友”。

避免混乱措辞的一个有效方法：为产品建立措辞库
为各个产品建立措辞库。例如：

措辞的不一致除了工作的不规范，缺少统一的标准，另外一种情况是由于产品在定义概念的过程中本身没有定义清楚，在具体到页面上时反应成为措辞的不一致，例如：

“心情秀预览”暗示出，“心情秀”是指外框+文字内容。
“换心情秀”功能只是换外框。这意味着“心情秀”是指外框。
如果按照第一个定义来理解，“心情秀是指外框+文字内容”，那么点击“下一个”后，其中的文字内容是不是也会变化？

缺少对文字内容、外框的单独定义，使得“心情秀”概念被滥用，造成概念上的混淆。概念上的混淆给操作带来困扰。

这个例子中，同一个词有着不同的含义。“措辞统一”原则要求同一个事物用同一个词来描述，这同时也是在要求：不同的含义使用不同的词。

相关话题：Web交互设计方法概论源地址：http://isd.tencent.com/?p=1893

页面表达常用方式

丽君 — 2010-05-05 20:55:13

《页面表达常用方式》是整个“web交互设计方法”中的一部分：

设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。

一、页面的浏览顺序

对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。

从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：

这样的排列也可以，仍是从左至右、从上到下：

按钮要放在右边：

左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：

从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。

所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。

对齐

在内容排版的设计中，把内容右对齐，会形成一种良好的双重边界，该边界沿着这一组对象的中间向下延伸（利用了格式塔原则——连续性原则），这样带来的好处是加强了边界引导读者的眼光平滑向下延伸，有助于形成良好的视觉流。如下图：

在表单设计中，也是如此。能够使操作区域对齐，将大大提升用户的完成任务的效率。但是对齐是以左对齐还是右对齐也要引起注意。据研究表明，标签和输入框之间的空白区域加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线：

操作过程中，用户更关注输入框本身，而不是标签。用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。但人们习惯于从左至右的书写，所以这种右对齐的布局给用户造成了细微的阅读障碍：

而以下这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框，而且不用担心用户阅读标签带来的额外负担：

二、大字更突出

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好、更有效的传达作者的意图，表达设计的主题和构想意念。

在页面文字的处理上，层次关系很重要。我们的眼睛常常被吸引到厚重而又对比强烈的图形上面，同时大的、加粗的字体表现了它的重要性和主题思想。字体对比中，字体越大越粗，就表示该部分内容越重要。对标题来说，一般都使用一种突出的字体和其他内容区别开来——加粗、加宽、加大字号、强烈的颜色等（白纸黑字，黑色字体与白色页面对比是最强烈，反之亦然）。其次是普通字体，这些字体是对主题进行进一步的说明。而指示和注释部分的小字重要性更次之，告诉了我们：你也许想阅读这些内容，但是没有看到也没关系。同时要注意，所有图片中的文本都应该清晰易读。

三、图形更吸引人

界面需要一定的图形辅助，这将使产品更具吸引力。图形能够传达各种产品的个性，例如：安全可靠、令人激动、好玩、充满活力、舒适愉快、冷静、有力、紧张等，这是情感诉求。Donald Norman（（唐•诺曼）认为，产品设计中一个非常重要的因素，那就是“愉悦”(Enjoyment)成分，让人喜欢这个东西——让人觉得高兴、有趣。他说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少。”“积极的情感能让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”一定层度上，不影响人们在界面上完成任务效率的前提下，适度的装饰、漂亮的细节会影响人们使用产品的心情，引导人们再次逗留和探索多点时间，甚至推荐给别人。

图形需要减少认知负担。其实文字最早来源于图形，取材于自然形态，所以相比之下，简化的、顺畅的、示意性准确的图形能够减少认知负担，让用户不需要一个个文字阅读，所以比文字更便于用户识别、理解和记忆。但图形设计一定要遵循简洁规则：你想要你的用户注意到你站点上所提供的产品、服务和信息，而不是你站点的精美设计。过多的装饰将干扰用户操作。

四、动画会被误以为是广告

页面中动态的FLASH非常吸引人们的注意力了。Adobe公司的这项动画技术让互联网变得更为强大，从Nike公司非常夸张的首页动画到众多广告商使用的网页Banner。但是这项动画技术现在已被滥用，使得用户默认看到动画就误以为是个广告，一个只对页面内容感兴趣的人、或者常常浏览网页的人，可能会简单快速地跳过动画部分。所以在页面设计中，应该尽量少地使用FIash动画，过多的动画不仅没有实用性而且还会拖慢用户的网页浏览器。尤其是一个充满广告的页面，那样会使你的目标客户无法阅读弃你而去。

五、内容逻辑：并列关系、从属关系

人们往往喜欢有条理的视觉信息，逻辑清晰、层次分明、严谨的内容才能有助于便捷快速地阅读。这里主要介绍“并列关系”和“从属关系”。

并列关系：并列关系就是把同等重要的信息依次罗列，彼此没有层级关系。逻辑上相关的部分在视觉表达上也相关。例如，把相近的内容分成一组，放在同一个标题至下，采用类似的方式显示信息，并把它们全部放在一个定义明确的区域以内。

在表现的形式上，常常用到的方法有：内容缩进、位置或留白、线框或分组（线条、方框、颜色条）。

内容缩进：

位置或留白：

线框或分组：（线条、方框、颜色条等等）：

从属关系：从属关系表示A信息全部包含在B信息之内，或者表示A信息依附于B信息。就好比如标题和正文的关系，所以A信息是B信息的一个子集。如下图中，“空间热点”就包含“日志精选”，她们之间就是从属关系。而“日志精选”里又包含6条文章名称，它们之间也是一种从属关系，这就是我们所说的正文和标题的关系。

在这里，B信息里面也可以是好几条并列关系的内容组构成。如：

六、多项并列的信息

多项并列的信息，由于视觉的连续性，混在一起容易产生混淆。我们可以用一些小技巧将其区分。比如，在并列的信息内容前面加上小图标，或者区分排序：

七、不同的排序方式VS筛选

这里需要先说明两个名词的含义。“排序方式”——指的是将文件中的各个信息按数值（如参与人数、点击数等）、或者某种特性（如热度）的递升或递降次序重新排列成为一个新的记录序列。而“筛选”是指一个以多个信息中按预定目标就某种特定性质进行精选的操作过程。它们都有“进一步”的关系，但是排序不会有数量的变化；而“筛选”因为是进一步针对特定条件精确挑选所剩，有可能导致数量的减少。如：

排序：

筛选：

相关话题：Web交互设计方法概论源地址：http://isd.tencent.com/?p=1903

信息架构中的常见模型

丽君 — 2010-05-11 22:26:06

《信息架构中的常见模型》是整个“web交互设计方法”中的一部分：

本期的内容目的是分享和总结信息架构中一部分基本的交互模型。信息架构需要考虑内容和功能的建构, 首先需要考虑怎样组织内容和功能的关系，也就是切分内容，如何把一些动作和对象跟主题顺畅的结合起来；第二步就是考虑怎样引导用户通过界面达成他们的目标,也就是用”物理结构”把内容用页面\窗口\面板等元素将信息表达出来,交互模型正是针对第二个步骤来说的，这些模式帮助我们在表达信息的时候能够有一些常用的思路和出发点。

1. 双面板展示（Two-panel Selector）

【形式】把两个相邻的面板放在界面上，在第一个面板显示一组对象，用户可以从中任意选择，在第二个面板上显示选中对象的内容。

【优点】

这种模式由于两个面板相邻摆放，用户可以很快把他们的注意力换来换去，一会看着列表的整个结构（比如图中显示了哪些是最新的应用），一会查看一个对象的详细信息（这个应用是做什么的，有哪些内容等等）。与单个窗口相比，这种紧密地集成有几个突出的好处：

减少体力开支，两个面板距离很近，用户的眼睛不需要进行长距离的穿梭，可以通过用一次鼠标单击或按键来改变选择的项目，而不是首先要在窗口和屏幕之间选择；

减少了可视化的认知负担，当一个窗口弹出到最上面，或当一个页面的内容完全改变时，用户就得花额外的注意力到现在要看的东西上，如果窗口本身一直不变，用户就可以把注意力集中在一个较小的变化范围内；

它也减少了记忆负担，这里左侧的列表充当了“路标”的角色，因此用户完全明白自己当前是在哪个应用下。

【用法】

整体布局：把可以进行选择的列表放在上面或左边的面板上，显示详细内容的面板放在下面或右边，这样做利用了绝大多数用户的视线流动方向，根据用户从左到右的语言阅读习惯让用户方便找到自己需要得到的信息。

列表的布局：一般有四种布局方式：线性列表，通常是排序的；二维表格，可以排序，也可以让用户通过列或行的标题进行过滤；空间组织方式，如地图、图表以及类似桌面的区域，让用户可以按自己的需要放置对象。

操作：当用户单击列表中的一个对象时，在第二个面板中立即显示它的内容或详细信息。同时最好能支持键盘操作以改变选择的方式，如上下箭头键；

视觉：让已经选中的对象在视觉上突出显示，如给选中的列表对象换一种颜色和亮度。

【例子】

Qzone中的双面板应用，当从左侧列表选择出信息以后，右侧会显示该对象的详细内容，并且采用了主题类别的信息切分形式，如果从常用模式的基本应用模式来看，当用户选中左侧列表对象后，如果在视觉上能够对该对象进行突出显示，可能会更友好一些。

2. 画布加工具条（Canvas Plus Palette）

【形式】

用于图形编辑器上，把一个带图标的工具条放在空白画布旁边，用户单击调色板工具条上的按钮，在画布上创建对象。通常工具条用来创建对象，画布用来摆放对象。

【优点】

这个模式来自于人们的日常生活经验，画布、调色板，就是这样的样式，因此用户在使用时容易理解；同时画布加工具条也利用了可视化识别的好处，最常用的图标（画笔、手型图标、放大镜等）在各种不同的应用系统中一次又一次的得到重用，而且每次都是同样的用法，减少了用户记忆和学习的成本。

【用法】

工具条本身应该是一个图标按钮或者看起来像按钮的网格，由于中文本身词汇的表达比较强，所以工具条里用图标加文字的形式会更容易理解。

工具条放在画布的左边或者上面，当工具比较多时，可以吧工具条的图标分成几个小组，比如用（card stack）模式的TAB来表示这些分组。

【例子】

QQ秀泡泡日志的编辑框正是一个画布加工具条的用户，通过Icon加文字的形式组成了工具条，并用分割线将工具进行了分组。

3. 向导（Wizard）

【形式】

在界面上一步步引导用户按预定的顺序完成任务，把任务分成一系列步骤，在每个步骤里让用户集中处理一件事情。如，Qzone个人空间的注册页面：

【优点】

对于较长的任务，在设计用户界面时如何让用户明白操作的步骤，向导的优点正是让用户按照预先规划的路线图来组织这项任务，而不用了解整个任务的结构，用户要做就是按顺序执行每个步骤，相信他们如果遵循指示，就会成功完成。

【用法】

把组成任务的操作分成几个部分或几组操作，各个部分的次序排列可能必须是严格限制的，也可以是能够由用户选择的。

Qzone的的注册过程包括选择风格样式、填写个人信息、补充资料和完成四步，用户必须依次填写，而不能先填写后面的步骤再回来写前面的；而对于一些在线支付类的流程，从产品挑选、支付信息、支付地址、送货地址等步骤，它们的顺序并不重要，因为后面的选择并不依赖前面的选择，把相关的选择放在一起只是简化了人们填写表单的工作。

任务拆分后步骤的数量和粒度往往需要很好的权衡，如果只有两步，那会显得很傻，如果有十五步，就会显得乏味枯燥；但是每个步骤也需要保证不能太复杂，不然失去了向导的意义。

【页面表现】

1）多页面表现形式

从页面表现上来看，最简单的实现方式就是将每个步骤放在一个单独的页面上，用前进和后退按钮进行控制，但这种形式也有缺点，每个独立的界面不能显示上下文，用户不知道前面和后面分别显示的是什么，因此这样的形式最好能够允许用户在进行过程中能够随时向前或者向后移动。因为如果不能让用户可以改变前面的选项而必须重新开始那就会让人受不了。从这点来说，如果是多页面的向导，它的标准的配置应该是：

或者结合双面板选择模式：

2）单一页面表现形式：

第一种带标题的栏目：标题上有固定编号，因为一眼就可以看到所有的步骤，所以这个模式适合用在分支不多的任务上。

第二种响应式允许或响应式展开：在用户完成前面一个步骤之后才把后面的步骤显示在页面上，如果向导的步骤不多,采用这样的方式会让页面更简洁一些。

总结：

以上三种常用的模式：双面板选择、画布加工具条以及向导是我们经常会在网页设计中见到的模式，平时的使用中我们已经在不知不觉中认识并习惯它们了，通过这些基本的模式，在设计加以变形和创新就可以创造出更有趣和方便的交互方式。下面的例子是一个综合了以上三种交互模式的例子：

（网址：http://www.mrpicassohead.com/create.html）

显而易见的，这个工具运用了画布加工具条的模式，由两组工具条和一个画布组成。同时，这个网页工具还结合了双面板选择模式，通过TAB把工具条进行了分类，当单击“face”、“noses”、“lips”时，工具条一次变化，并显示这些对象：

并且在操作步骤的提示上，采用了向导模式的响应式展开：当用户第一次选择TAB中的类型是，会提示用户从工具条中选择合适的元素到画布当中，而当用户作出选择之后，则会显示下一个步骤的提示：

相关话题：Web交互设计方法概论源地址：http://isd.tencent.com/?p=1894