目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中，建立在这个认识基础上，交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息，但是，交互设计工作到底应该怎么做才能提高产品可用性？通常的互联网产品研发中，交互设计工作是处于没有方法的状况。

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么，互联网产品的交互设计应该怎么做？

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品，我们总结出了几个较为有效的设计方法：
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法，全面普查产品，包括对交互细节和信息构架。

这三个方法的思路，是基于对交互设计工作内容如下的分类：
1. 信息构架
2. 交互细节

但，严格来说，这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而，上面提到了互联网产品快的特点，更多的研发步骤显然更容易将研发周期拖的更长，把信息构架工作和交互细节合并起来，减少一个环节，更适应互联网产品的研发特点。
“为什么不把信息构架工作交给产品经理来做呢？”如果说交互设计工作的核心是表达（这个观念，最后还会提到），那么，信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品，怎么谈得到表达的清楚、明确呢。所以，交互设计的工作包含了两部分：信息构架和交互细节。

那么，下面我们就开始具体介绍这三个方法：

方法一. 自然语言法

使用自然的语言来表达页面信息。
这是一个设计界面交互细节的方法。
界面表达的要求是：清晰，明确，简洁，得体。
想象着用面对面的交流来传达信息，再将面对面的传达变为书面表达，再用界面语言翻译书面表达。

除了思路，我们还需要必备的原则、常用的表达方式和具体操作步骤。

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

常用的页面表达方式：
1. 从左到右，从上到下。
2. 大字更突出。
3. 图形更吸引人。
4. 动画会被误认为是广告。
5. 内容逻辑：并列关系；从属关系。
    
6.多项并列的信息用

7.不同的排序方式VS筛选内容

具体操作
第一步. 概括待表达的信息
第二步. 将概括好的信息排序
第三步. 使用界面语言翻译

实例：中信银行卡

第一步. 概括信息：
描述应该是概括的，尽可能简短。例如：
● 您选择了回邮方式办卡，概括解释这个办卡方式。
● 接下来您应该 下载申请表
● 回邮办卡的全过程是这样的…
● 一系列注意事项。

第二步. 排序：
就是上面的顺序，没有变化。
有些时候排序会遇到困难，需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值，它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时，记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 翻译：

与之前界面对比：
● 开头几句信息顺序需要整理，使上下文关系更清晰。
● 对过程的描述可简化。
● “说明”应更结构化。

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型，而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式，也许是简单的页面原型，也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计，尤其需要小心。

我们有了一种成型的方法，但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路，或许这是更好的方案：
1. 您选择了回邮方式办卡，概括解释这个办卡方式。
2. 第一步. 下载、填写申请表并回邮给中信
3. 第二步……………………..
4. 第四步……………………..
这样的信息概括和排序页面表现将是什么样子？你可以自己试着画画~~

练习：QQ空间黄钻催费页面

说明：
黄钻贵族是QQ空间中的VIP用户，黄钻贵族用户可以免费适用空间中的装扮，另外还可以享受到日志信纸、超大容量相册等诸多特权。
当用户的黄钻贵族身份即将到期的时候，从QQ聊天主面板上的“我的钱包”提示：“钱包”闪动，点击后用一个490*300px的小窗口告知用户续费的详情。
左侧图片在实际页面中是一个flash动画，若干张图片切换，显示黄钻用户可以装扮出的更好的空间效果。
右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式，直接显示出来（就是现在页面上的“家庭、网吧”两种方式），方便用户。同时提供“支付中心”链接（http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home），让用户可以在全部续费方式中选择。

请使用上面介绍的自然语言法重新设计这个界面，让信息表达的更高效、清晰、明确。

参考方案
需要表达的信息：
● 某某某，您的黄钻要过期了。
● 黄钻贵族很棒滴~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

更好的信息：
● 某某某，您的黄钻要过期了。
● 您要是不再是黄钻了，就有XXXXX损失啦~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

总结“自然语言法”
自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的，相对更容易，这个技能也更容易提高。
这里涉及到的两个例子都是比较偏向于信息表达的，对于操作较多的界面，这个方法仍旧适用。

方法二. 结构图法

这个方法的思路：抛开页面细节只考虑信息的组织形式。抛开页面细节，是的，就是上面讨论的那些具体的页面细节，只考虑信息的整体构架，而页面的细节留在确定了信息构架之后，用自然语言法来解决。

信息构架的原则：
1. 一个页面一个主要内容。
2. 个人信息&公共信息。
3. 网页基本内容有两种：列表和文档
4. 更少的信息更好
5. 一个用户自己生成内容的document页，有两个状态：浏览状态&编辑状态。
6. 信息树应该尽量窄而浅，并且尽量保持平衡。
7. 与现实生活经验相符
 ● 页面在网站中需要有一个固定的位置。
 ● 同等级的内容应表现成并列的样子。
     ……

信息构架的常见模型：
1. 列表+详情页+列表聚合页
2. Wizard模式。第一步->第二步->第三步…
3. 主页+若干个“临时”页面。例如：google帐户

具体操作
第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。
第二步. 画树状图。
第三步. 用纸画各页草图。草图中需要包含的关键元素：页面标题、导航、重要的链接和按钮。
第四步. 模拟演示网页操作行为。

实例：黄钻等级



第一步. 总结归纳内容：
● 用户个人的的黄钻等级信息
● 等级介绍
● 黄钻功能特权介绍
● 黄钻贵族可免费领取的道具
● 黄钻活动

第二步. 树状图：
如果单纯的按照上面概括的信息罗列，则可以规划出一个黄钻贵族的网站，树状图如下：

然而，信息构架的设计往往要建立在对现有产品深刻的理解基础上。


Qzone的现状：一个社区，成千上万个个人空间。如何在现有的基础上设计新的黄钻等级？
我们的方案是这样的：

第三步. 草图：

这里需要强调：纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮，而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系。

最后，第四步. 手握原型，演示页面间的跳转，确保整个流程的顺畅。

练习：QQ空间日志、心情、私密记事本

参考方案
总结归纳内容：
1. 日志
2. 心情
3. 私密记事本

树状图：
方案一：
● 主页
● “大日志”
    ■ 日志
    ■ 心情
    ■ 私密记事本
● 音乐盒
● 留言板
● 相册
……

方案二：
● 主页
● 日志
● 心情
● 私密记事本
● 音乐盒
● 留言板
● 相册
…

根据上面两种不同的树状图方案，接下来的页面草图也会是不同的，你可是试着画画…

方法三. 任务走查法

这是一种优化现有产品的方法。成本低，见效快。对产品整体上影响小。

以用户任务为线索，以可用性准则为依据。是的，这个说话很好记，类似“以事实为依据，以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中，需要操作者依据主观判断制定用户任务，而不是通过用户研究。这虽然有可能造成更大的误差，但同时节约了时间成本。实际工作中，参与这个产品设计的同学坐在一起讨论一下，通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指：页面表达原则、信息构架原则、视觉表现规范，这三部分。页面表达原则和信息构架原则就是前面提到的，视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品，因此，不同于产品原型，更多了视觉表现这一环，在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范
1. 滚动条看上去应该象滚动条
2. 表单的对齐方式
3. 重要的内容显示在第一屏
4. 导航应出现在第一屏上半部分
5. 尽量避免使用装饰性的图标
6. 避免内容看上去象广告
7. 光标样式
8. Tab需要有三种状态而不是两种
9. 红色表示警示，绿色表示ok，黄色表示提示
10. 灰色通常表示“暂不可用”（disabled）

具体操作
第一步. 分析并总结所有任务
第二步. 根据任务进行评估

评估中需要注意：
1. 不影响任务的问题不记录
2. 被记录的缺陷是有根据的（根据可用性准则），而不是根据自己的感觉。

实例：QQ秀快速换装

第一步. 任务列表：
● 换一套新形象
● 换表情
● 换心情
● 随便逛逛
● 换一个自己以前的形象

第二步. 评估。以“换心情”任务为例：

问题1 副标题表意不明确
描述：

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

问题2 “请输入心情秀”表意不明
描述：

“请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题3 拖动心情秀时，光标使用不正确
描述：

光标在框中的是link的手型，实际上应该是十字箭头。现在会被误解为有点击操作。
依据：视觉表现规范：光标

问题4 “心情秀”概念不清
描述：

“心情秀预览”暗示出，“心情秀”是指外框+文字内容。
“换心情秀”功能只是换框，这意味着“心情秀”是指外框。
措辞上的含混使得同一个名词出现两种不同的定义，不易于理解。“既然心情秀是指外框+文字内容，那么当我点击“下一个”后，其中的文字内容是不是也会变化？”
依据：页面表达原则：措辞统一

问题5 换心情秀外框操作不便
描述：

“上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。
依据：页面表达原则：操作结果不可预知

问题6 “预览”按钮视觉效果不佳
描述：

预览按钮视觉样式比较象disabled
依据：灰色通常表示“暂不可用”（disabled）

问题7 “脱掉”按钮不易找到
描述：

“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

练习1：QQ秀照相馆

练习2：Qzone滔滔心情

总结任务走查法：
为什么要强调是“按任务”。因为，类似“保存形象按钮太难看啦~~”之类的问题是不应该提出来的。因为用户在实际使用的时候，这个问题是远远不如“误以为预览按钮不能点击”重要。“按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的，但是按任务的优点在于：
1. cover到了各个栏目之间跳转可能出现的问题。
2. 抓住了重点的问题，而放过了无关紧要的问题。比如：“申请红钻”按钮。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后最后的总结

从狭义的交互设计的定义来看，交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。
互联网产品的交互设计应该怎么做的问题，就演化成了：互联网产品应该如何去表达。
以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。

那么，
let’s talk
let’s talk
let’s talk
……

( 注：本文是UPA user friendy 2008中由我主持的一个同名工作坊的讲稿。
另附PPT文档：互联网产品的交互设计方法.ppt )

为什么在facebook交友会更容易？facebook与传统的BSP（Blog Service Provider）到底有什么不同？是因为它有横竖两个导航吗？是因为它有个主人信息的聚合页面吗？ Facebook为什么成功？又有哪些不足？Facebook商业上的成功使得它混乱的设计成了皇帝的新装，即使觉得看不懂也不敢去说。让我们拨开网页上那些纷繁的视觉表现，来看看藏在网页背后骨架—信息构架（IA Information Architecture），我们将获得一个全新视角，这种种疑问将迎刃而解。

传统的博客服务提供商（Blog Service Provider，简称BSP），比如：Qzone、新浪博客、网易博客…他们提供的博客服务，不仅仅是为每一位注册用户提供了一个属于自己的blog空间，还有用于bloger间彼此交流的平台。也就是说，信息构架是：个人空间+社区平台。

“个人空间+社区平台”是什么样子的？
一个个的blog彼此独立存在，再由一个社区平台将这些blog聚合一起，通过内容聚合在一起。

左上角的第一个表示主人态，主人可以看到BSP提供的所有服务，其中的B、D、E是他自己已经使用了的。
而下面一个个的是其他人的blog，其他人的blog包含的内容各不相同，有的用了相册，有的用了日志，有的用了视频…目前多数的BSP都是简单的把ABCDEF都简单的呈现给客人，不管主人用不用。
图中右半部分是社区平台，以内容为维度，展示内容，进而展示用户。比如，A代表日志，社区平台上会有个日志栏目，其中展示出很多有意思的日志，要看这篇日志，就到达另外一个人的blog了。交流实现了，所谓平台，价值也就在于此。

Blog原本就是一个个独立的，有了BSP提供blog服务后，才出现了社区平台，让用户能更方便的找到其他人。不仅仅是自己写给别人看，更可以用方便的找到志同道合的人，让众多bloger形成一个社区。

这样的结构有好处：
1.结构清晰。这结构我一说，你就明白了。估计我不说，你也能明白。
2.扩建容易。这是针对BSP来说的。要添加一项新的服务，可以分成两个步骤来进行，在个人blog中提供功能是一步，在社区平台上提供交流是另外一步，如果开发资源有限，可以不必同时做。比如，要提供一个视频服务，可以先在个人空间中提供给每个用户上传、展示视频的功能，暂时社区平台上没有视频方面的聚合内容也没关系，等有精力了再做不迟。

这种“个人+社区平台”模式的缺点：
各个blog之间的沟通比较困难。每个blog都属于个人，要从一个blog进入另外一个blog有两条路：
1. 通过blog中的好友、留言作者名称。我在一个blog中留了言，阅读到这个留言的人就可以通过这个留言的作者名进入我的blog。
2. 页面最上面的类似“进入社区平台”的链接。
这两个渠道的能量都很有限。空间中的好友是主人自己添加的。这个空间主人要是人缘差，没好友，没人留言，那第一条路就没了。“进入社区平台”链接只是个链接，点之前啥都看不到，我干嘛要去点？点了能有啥有意思的？

上面说的这种是传统BSP的信息构架。搞清楚了这个我们再来看另外一种比较新鲜的构架—facebook、myspace…的构架。

facebook的构架和“个人+社区平台”有个显著区别：主人信息是打散到社区平台的各个栏目中，因为这个区别，我在这里姑且给这种构架起个名字—“一体式”。

来看看“一体式”的结构：

既然主人页面中有个“日志”，社区平台也有个“日志”，那就合并成一个好啦。“我自己”就没啦，全部的构架就只剩下一个按内容分类的结构了。因为主人的信息是打散到各个ABCD…栏目中，这就需要给主人一个自己有关所有自己的聚合页面—主人的首页。方便用户查看所有与自己有关的所有信息：

真是页面是这样的：

打开网站中的一个栏目，比如，打开C，会显示为：

真实的网页是这样的：

进入到某一个人的空间中，别人的这个空间也不再是一个独立的小网站了，而是只用右侧来显示某个人的信息。左侧的内容分类导航则固定不变：

真实的网页是这样的：

这种信息构架的好处：
优点一.我自己的信息和别人的信息联系的十分紧密，当我查看我的相册时，直接就看到了其他人相册的一些信息。要了解其他人不再需要跳到单独的社区平台上了。这显然增进了互相的交流，所以在类似facebook这样的网站交友更容易。

优点二.提供了专门给主人的主页，于是可以提供更多专门给主人看的信息：谁最近又上传了照片啦，谁要加我为好友啦，谁又和谁成为好友啦…东家长西家短，可以向主人唠叨很多八卦。这些信息显然也有助于用户之间的沟通。

“一体化”模式的缺点：
缺点一.展示其他人的空间信息变得很受局限。
只有右侧栏可以显示当前空间的内容。当前空间（某个客人空间）的信息不能再做页签式的导航了。也就是说，不能显示成下面这样：

因为在左侧已经出现一套ABCDEF了，再在右侧出现当前空间主人的ACD，就混了，“要看这个人的A栏目内容，到底要点哪个A？”
关于这个主人的信息有很多很多，又不能用页签式的导航，要展现这么多信息自然吃力。当前主人的空间的二级栏目就只能加个“返回首页”的链接了，象下面这样：

这种“返回首页”类型的导航没有明确的展示出当前页面在网站中的位置，用的多了，看着就比较晕了。

缺点二.给主人自己的导航比较混乱。
上面提到需要给主人一个首页，用于显示所有和他相关的信息。除此以外，主人还需要知道别人看自己会是个什么样子。Facebook就给这两个页面分别起名叫：home 和 profile ：

看到的效果就是我有两个主页，一个是给我自己用的，另外一个是别人看到的样子。也就是，主人模式首页和客人模式首页。

主人模式或客人模式又有很多共同的功效，比如：有好友在我的相册里写了一条评论，我可以在 home页中查看到，点击后进入相册：

也可以在profile中主动点击进入相册发现这条新评论：

这两个主页再加上上面提到的“返回首页链接而不页签”，实在就是够乱的了。在这里面转经常感觉像是在酒吧中灌下若干喜力后找洗手间的情形：东撞西撞的一眼看到了“洗手间”的牌子走进去就对了。下次再去还是不知道洗手间在什么地方。

对比两类构架：
对比两类比较典型SNS的信息构架模式，可以看出，第一种“个人空间+社区平台”模式，结构简单，但交流不畅。在越来越强调用户间互动的大潮下，这样的结构显得心有余而力不足。第二种 “一体化”模式，个人信息与公共信息浑然一体，在用户交流方法提供了更多的引导，但也是因为这个“浑然一体”，使得导航起来比较痛苦，结构看上去混乱，用起来迷糊。我相信，即便是除去英文这个语言因素，也没有谁敢说自己一上来就能很顺手的使用这个网站，总是得要学一阵子，还不见得能学明白。

在交互设计中有这样一个观念：“产品设计者不是用户”。作为产品的设计者，虽然会试图为用户着想，但产品的设计者不是用户，设计者和用户的立场是不同的，更准确的说，“目标”是不同的。

这个的观念可以用下面的例子来解释：

一个软件公司要设计一款专门供财务人员使用的软件，产品的设计者会有很多想法，想象着用户会要XXX功能，如何如何的功能归类会很方便用户使用… 但是通过实际调查发现，真正的用户—财务人员，想要的原来根本不是这些，他们更需要的是快速的完成任务，让自己显得不那么笨（能顺利的操作此款软件）…

要想单纯的通过主观判断就能做出真正的财务人员满意的软件，需要设计者能按照财务人员的方式来使用这个软件。如果你真能按照一位财务人员那样来使用这个软件，那…那你基本上就得改行了，显然，同时作为一位合格的财务人员和一位交互设计师是不太现实的。

这个例子说明，产品的研发者不是产品的用户，要设计出好的产品，需要进行科学严谨的用户研究，于是才出现了“人物角色”、“情景描述”等等方法用于避免出现类似上面的错误。

我参与的一些项目中会有这样的情况：有些参与者会说：“用户需要…”,“这是有用户需求的…”这样的说法很多时候会被交互设计师之类的有UCD思想的同学质疑，我就是这些同学中的一个。我的质疑通常是：“为什么用户需要XXX？”“你怎么知道的？”“谁是用户？”… 这些质疑是本着UCD的思想，更是寻着上面具体例子思路的。这几个问题一出，对方基本上就哑火了。能有这样的质疑与哑火，双方都是建立在这样的基础上的：设计者不是产品的用户。

然而这种疑似把自己主观意见当作用户意见的情况却总是出现。害得我不得不总是重复上面这几句质疑。为什么会总是出现，又总是被质疑，被质疑后又总是哑火？仅仅是因为这些同学缺乏基本的UCD常识？不懂得“产品设计者不是用户”这个基本观念？另外一种可能的原因是：把自己当用户一种尚未被充分认识到的正确思路。或许我们也应该来质疑一下“产品设计者不是用户”这个观念。

来看看具体情况：我所从事的工作都是互联网产品的设计。互联网产品通常是针对最广泛的互联网用户的。这不是否定“一个产品为一类特定用户服务”的观点，而是在强调互联网产品没有专业鸿沟。一个网络相册，是对一类特定用户服务的，想用网络来储存、分享照片的人嘛。你是想上网查天气预报的，是用不着网络相册的。但是，网络相册却是谁都可以用的，不象上面提到的财务软件，就是给财务人员用的，有专业门槛，有特定工作需要的门槛。网络相册是给普通老百姓用的。

说清楚了这个区别，问题也就解决了。对于网络相册这个产品，任何上网的人都可能会成为它的用户，这个产品也应该为所有想用网络相册的人服务。那么，我是设计网络相册的设计师（或产品经理），我为什么不能用？只要我不是本着测试产品的目的，不是想着商业目标来用的，准确点儿说，我就是象一个正常的用户那样用的，经常会来上传新的照片，期待着看到网友对照片的评论，有时还会把照片引用到其他地方，比如：日志中，视频中。如果我是这样在用的，那我就是一个用户，用户会遇到的问题我也会遇到，我的需求为什么不是真正的需求？

产品设计者作为用户，会有这样几个好处：
一．自己成为用户，为自己设计，想法会更多，设计起来会更主动。如同给自己买衣服会比给别人参谋更上心一样。
二．可以减少一些用户研究工作。互联网行业开发周期短、更新频率高，软件公司中的流程很难直接应用，想必应该有不少同学有体会。自己是用户，研究自己，比起打电话约用户，当面访谈、测试，之后总结要快的多了。而且可以避免沟通中的误解、分析用户意见时的误差。
（应该还有其他的好处，暂时没想到。）

交互设计在软件行业相对成熟些，在这个背景下形成了很多的观念、理论，“产品设计者不是用户”就是其中之一。交互设计在其他领域相对更加稚嫩，比如互联网行业，这个时候，拿来主义就比较多，以至于缺少必要的分析、理解，简单、被动的拿来就用。

在本文最后的最后，不得不再次强调一下观点：对于没有专业鸿沟的互联网产品，产品的设计者可以是自己产品的用户，象处理用户意见那样处理自己的想法，但必不可少的前提是：在作为用户使用产品的过程中必须放弃掉作为一个研发者的身份，否则将是产品设计观念的倒退。

想象一下，早上起来，厨房里摆放着一盘子吐司面包（方形的面包片），旁边是吐司机(烤热面包片的机器)，你是否会觉得太麻烦而不去吃呢？再想象一下，午后，你面前摆放着一个咖啡壶，下面有电磁炉以保证里面的咖啡不会变凉，旁边放着一个杯子，里面是牛奶，还有一个小盘子，里面放着袋装的砂糖。空的咖啡杯就摆在旁边。你会因为嫌麻烦而不去喝吗？

面对这两个情况，恐怕大多数人都不会嫌麻烦，反而应该觉得服务的太周到了。能得到这样的服务，想必是有位贤惠的老婆吧。

然而，就是这样的服务，在另外的条件下，却有着出人意料的结果。

不久前，去某个酒店参加了一次培训，早餐、午餐都是自助餐。早餐中就有刚才提到的吐司，旁边放着吐司机，和各种各样其他的食物放在一起。在整个培训的三天中，我所观察的时间段内，没有一位客人去碰它。午餐的时候，有上面提到的咖啡壶，同样是和各种各样其他的饮料、食物放在一起，同样是没有人问津。

为什么没人问津？因为其他的食物相对更“易得到”。吐司的旁边有小馒头、炒河粉、奶黄包…咖啡壶旁边有橙汁、酸梅汤，还有各种广东靓汤。这些食物都更加容易得到。操作吐司机恐怕还得学习一阵子，必定多数人家里没有这玩意儿。倒咖啡还要自己调配，适量的奶和糖，如果嫌麻烦，只倒上一杯纯咖啡，对于多数中国人来讲，那基本上就等于自己给自己找罪受了。

相对的不易用，使得吐司和咖啡无人问津。

我们来看一个网页上的例子：

搜索器和热门搜索关键词放在一起。这里的四个热门关键词会有很高的点击量，但如果拿这四个词的搜索量与用户在输入框中输入的关键词相比来判断哪个词更热门，显然就不准确了。实际上在搜索器旁边放上这些热门关键词一定程度上也会搜索器的使用量。因为摆出来的热门关键词更加“易得到”，或者说，点击热门关键词的操作成本更低。

在一个界面中，某个功能是否够易用，不仅仅取决于功能设计的本身，也与它所在的页面中其他功能的易用性有关。当其他功能操作成本更低时，相对操作成本更高的功能使用量会降低。

由这个结论我们还可以推导出更多的结论：
● 当希望引导用户使用某个功能时，应当减少它周围操作更为简便的功能。
● 要提高某个功能的可用性，将其表述的比其他功能更为直白是一种好方法。即，让这个功能更容易看懂，比使用其他功能的学习成本更低。
……

表示文字链接最清楚的方式是“蓝色文字+下划线”，这是在浏览器发展过程中形成的。这个问题大家都说过很多次了，我也曾经说过。然而，这样的规范却总是难以实行。视觉设计师会把文字颜色作为一个表现视觉风格的元素，完全出于视觉表现的需要来配色，而不顾及这个规范。在埋怨视觉设计师的同事，我也在考虑，规范之不行，问题恐怕并不全在执行者。这如同交通规则不允许骑自行车带人，但是交警也不能见到骑车带人的都拦住罚款。

显然，这个规范对视觉设计的局限是比较大的，所以视觉设计师才不愿意去遵守。在网页的开发流程中，留给视觉设计的时间是很有限的，并且往往要求有比较绚丽的视觉表现。这样的条件下，再要视觉设计师顾及这个规范确实也比较难。

那么，我们来设计另外一个规范，让文字链接同样能表现的很清楚，做到“操作可识别”，同时，又让视觉设计比较容易做。
(more…)

如果说交互设计师的工作内容是使用界面语言进行表达，那么，好的表达需要注意尺度。

贴在屏幕上的工具栏是过分的。页面上闪动的广告也是过分的。这些设计超越了表达的尺度。

在设计这个页面的时候，设计者考虑的往往是：怎样才能让用户注意到这个功能。偏执的考虑让用户用着顺手（用着顺手本身并不是错误的观念），主观的认为这样做才够方便，用户用起来效率才会高。在这个时候往往不会去考虑用户是否乐于接受。这如同做父母专心于把最好的食物给孩子吃，但却不考虑孩子是否饿。
(more…)

碘酊，一种棕黄色澄清液体，颜色很深，是由乙醇溶解的碘溶液，用于皮肤感染和消毒。俗称：碘酒。红汞，主要成分：红溴汞。红色溶液。用于外用消毒及表浅创面。俗称：红药水。这两种药水小时候就经常用，哪里长了个小包，就抹点碘酒，能消肿。外伤抹红药水。对这两种药水的气味、颜色我都很熟悉，。红色瓶子的是红药水，棕色瓶子的是碘酒。一向如此。
(more…)

看这个标题，大概你会觉得耳熟，很多网站都会提供类似的推荐内容。是不是可以用这种形式做广告？推荐是不是就是广告？根据item的相关性做的推荐是不是一定是有益于用户的？

不是用户主动找的内容，而是设计者有意推送给用户的内容，假设这些信息都称谓推荐信息，那么，这些推荐应该怎么推？当然，简单的说，推荐的信息应该适度，适时。怎样才算适度？

北京的前门有个历史悠久的自行车商店，大概是我在上高中的时候，有一次去那里买自行车配件，买一个后轮上的挡泥板。这次购买经历，我至今仍记得很清楚。

进了商店，找到了卖配件的柜台，跟售货员描述了我要的配件：26车后轮用的挡泥板。开票儿，付款，拿货，一切正常。举着挡泥板我问售货员：能不能给安装上？“出门，右转，胡同里有个门儿，是我们店的维修门市部，那有人专门管安装。”我推着车，举着刚买的挡泥板，转到小胡同里，维修门市部很好找。“师傅，给我装一下这个挡泥板啊。”“啊，成。哎？你没辐条啊？”（注：辐条是指连接挡泥板与后轴的电镀铁条。）“啊？噢。店里有卖的吧？”于是我跑回店里，再买两根辐条。开票儿，付款，拿货。临走时，我问了售货员一句：“安装的时候，螺丝要自己带嘛？”“你要几个？”我太聪明了！差点儿又多跑一趟。
(more…)

导航是个大问题。如果说交互设计的两个主要任务是：信息构架和交互细节设计，那么，几乎所以信息构架的问题最终表现都反应在导航上。一个网站能把导航做好，已经基本做好一大半了。具体操作行为上的设计，页面表现上的设计并不难了。一个链接到底是鼠标经过时就浮动一个层出来，还是点击之后才浮出来？“提交”按钮是应该左对齐，还是右对齐？这些问题不是不重要，也不是太简单，但至少，类似的问题有的可参考，并且可以通过制定一些标准来统一，如果条件允许还可以通过用户测试快速的验证。而导航问题通常比较复杂。
(more…)

这是一个对页面操作权限进行设置的功能。

让我试着解释一下这个设置功能：
区分两类人：所有成员和部分特权成员。操作分为：读操作和写操作两类。可以先给这两类用户分配不同的权限，然后再在下面选定特权成员。
写操作是比读操作更高级，有写操作权限的成员显然是可以读的。即，如果“可发文章、评论”项选中，则对应的“可阅读”变为选中的不可操作状态。
特权成员是成员中更高级的一部分人，权限只会比普通成员高，不会比普通成员低。如果对所有成员都开放写权限，那么特权成员就没什么特权了。第二行特权成员的选项应全部选中并且不可操作。如果普通成员有读权限，那么特权成员自然也应该有读权限。实际上此时特权成员只有读权限就没什么“特”的了，应该同时还有写权限。
把上面这种种规则都表现出来后，这里四个复选框的操作就变得很复杂了。假设现在是四个复选框全未选中的状态，第一个操作如果勾选了左上角的复选框，则四个复选框将全部变为选中，并且不可操作。如果第一个操作是勾选右上角的……
我实在不想说了，太累了。恐怕我有耐心写，你也没耐心�