产品设计原则二

设计实用原则

一、 操作入口明确

“操作入口明确”，就是指产品的任何一个功能都要有明确、合理的入口。

“操作入口”，指的是产品内部不同模块之间的转接元素，例如在Web产品中，按钮控件、输入框、文字链等都属于操作入口；

“明确”指的是入口的视觉感是清晰的、可识别的；

“合理”是指入口的出现是符合用户操作逻辑的，适时的。

1、强化重点，弱化周边

2、入口信息明确易识别

增加入口数量虽然在一定程度上有助于提高功能模块的使用率，但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”， 入口越多，选择越多，“过多的选择等于没有选择”，这势必会造成用户使用产品时的疑惑

二、可及

在产品设计应用过程中，应当考虑到特殊人群的使用状况，让这部分用户享受无障碍设计带来的便捷

1.色盲

2.肢体残疾

3.老人，儿童（5～12岁）

4.文盲

5.其他其他对信息使用不擅长的人

1.使用形状+色彩的信息提示

在使用设计元素时，要尽量使用形状+色彩的方式来表现信息，或者使用文字的提示。

2.简化操作方式

比如在设计操作时尽可能地采用“选择”的方式而不是“填写”（避免给手指残疾的用户增加负担）。比如下面这个输入日期的设计：

3.容错和及时帮助

4.使用视觉、听觉，触觉等多元化的手法传达必要的资讯

比如在一些智能手机产品上，点击触摸屏数字键盘时，不但被选中的数字键的底色会发生变化，而且屏幕还有震动的触感提示。

5.使用辅助性的工具

例如：语音朗读、放大镜、手写输入、语音输入、语音搜索等

三、适时帮助

适时帮助，是指在用户使用流程中，在需要的时候能及时地得到帮助，有效减低用户学习成本；反之，在不需要帮助的时候,不要出现信息干扰。

用户在什么时候需要帮助?

一般有以下三种情况：

A.第一次

当新用户使用一个产品的时候需要帮助，或者老用户在使用一项新功能的时候，

由于认知不

足，用户会觉得陌生，不知所措。此时帮助应该及时出现，但不能一直强制出现，应该让用户有选择的余地。

B.已经出错或者将要出错

当用户在流程中不小心与系统现在规则有了冲突的时候应该及时提醒，到最后显示一句“对不起，你出错了”，这样可能会造成用户主动中断流程。

C.遇到不明白的问题

用户遇到不明白的名词或者操作时，应该及时给出解释。用户了解信息主体时候，如果有必要的补充说明也应该及时出现。

如何帮助?

1.帮助信息明显，提示方式灵活。

2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。看案例:

上图针对错误页面的帮助提示，分析用户可能出现的原因，并给出了一些建议。

3.及时补充，信息完整

再看QQ会员页面，在开通会员的大按钮下有一个“QQ会员是什么”的帮助信息，这个帮助就是为了让用户首先在理论上对QQ会员有一个认知。对用户不了解的信息给出了通往答案的道路。

四、简洁清晰，自然易懂

信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

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

简洁清晰：使信息最简化

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

自然易懂：使用用户语言

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

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

1）页面布局

界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。 ①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。 ②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等

③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。

④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。

⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。

2）交互文本

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

①表述的信息尽量口语化，不用或少用专业术语；

②表述语气柔和、礼貌，避免使用被动语态，否定句等；

③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。

3）界面色彩

有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。

①根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。 ②考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。 ③避免界面中同时出现3种以上的颜色。

④颜色的对比度明显，如在深色的背景中使用浅色的文字。

⑤使用颜色指导用户关注到到最重要的信息。

4）图像图标

相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。

①表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。 ②在形式和色彩风格上尽量保持一致性；

③仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。

④尽量与交互文本结合使用。

5）声音

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

①表述清晰，语气亲切，不生硬，有礼貌。

②使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。

③使用不让用户反感（如：恐怖，恶心，烦躁）的声音。

④在用户可预知的情况下发出声音。

五、突出重点，一目了然

一个用户在浏览网页的过程中，只是扫描页面，而不会像是在看书似的阅读每一处地方，每一行文字。一个网页呈现在用户面前的时候，应该在5秒之内，就能理解：这个页面是干什么的？

为扫描而设计，不是阅读

1. 尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必

须的。

2. 在页面把越重要的东西越突出，建立清楚的视觉层次。

3. 可以点击的地方必须突出，让人明显知道可以点击。

4. 把页面划分成明确定义的区域

5. 省略多余的文字。

将功能“藏起来”

如果你了解20-80原则，你应该知道：80%的用户只会使用20%的功能。所以，为什么要让那些少人使用的80%的功能总是放在显眼的位置，扰乱那些只需要20%的功能的大部分用户呢？其实那些80%的功能大部分是专家用户所喜欢的，我们应当将这些功能“藏起来”，目的就是不影响新手和中间用户

六、避免迷路

任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？”

帮助用户确定“当前位置”。

1、 重视网站的品牌信息

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

2、 细节创建情景

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

3、 面包屑

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

4、 逃生舱模式

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

5、根据用户需求，确定导航机制。

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

七、深广度平衡

在网站的信息架构中，网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。

图2

2. 为什么深广度需要保持平衡？

深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。

图3

图3的上图说明了又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6个类别中选择，才能找到6个条目。

我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。

图6

八、一次点击

在互联网产品的交互设计中，尽可能的消除每一个附加工作，做到尽可能一次操作而完成任务。一次操作是个概念，并不是完成任务只能点击一次，而是减少用户操作次数。使之提高工作效率。

1，保证主操作以及用户常用功能的方便展现。

这是用户快速完成任务的核心。比如播放器需要突出播放按钮，而收起了快进功能。ps的滤镜里会第一个展示出你上次应用过的滤镜效果，方便再次应用等。

2，合适的关闭与隐藏新手培训工具

用户不会长期停留在新手状态，所以新手的任务对于中间用户和高级用户来说就是附加工作，需要关闭或者隐藏。

3，平衡好视觉装饰元素对用户操作的干扰

适度的装饰性元素会有助于创造特殊情绪和氛围，以及产品个性便于品牌记忆。但是过度的装饰会干扰用户工作效率，因为用户不得不分析、破解，以区分哪些是关键信息、操作功能等。

4，不要轻易打断用户操作流

用户高效的使用工具会进入一种自然流的状态，这个时候需要一些努力才能打断，例如突然电话响了。错误消息对话框就是如此。一些打断是不可避免的，但另外一些则不是必要的。 5，改善导航

更好的利用导航将保证用户的任务操作，明晰导航里将详细讲述。

下面讲一个关于不要轻易打断用户操作例子：

在windows xp系统以前，用户点击关机后，会弹出一个提示窗口，一定要用户再次确认下关机，这对用户快速关机存在着强行的打扰，很多人甚至按机箱按钮强行关机（非常不好的做法）。

九、别让我思考

不让用户思考过多，原则上就是设计符合用户心智模型。大致可以从下面几个方面来讲： 1文案：需要让人容易理解，快速记忆。根据不同产品定位，找到恰当的切入点，文案过长或者使用用户不理解的情景，如技术用词，营销用词等，都会使人不知所云。

省略多余的文案，比如过分修饰，欢迎语，多余指示性语句，这些罗嗦的词语会影响用户对关键信息的阅读理解和判断，必须干掉。

2图形：好的图形表达是优于文字的，但是图形没有把内容表示明确，反而适得其反，给用户造成理解上的困扰。

3信息：信息其实是文案、图形等形式的混合体。信息之间，是否建立了相应的关联度，不相关联的信息之间是否产生了干扰。

4引导：通过菜单，导航，面包屑等手段有效引导用户行为路径，让用户方便去他想去的地方，回他想回的地方。

5操作方式：充分顺应用户的心理思维，来设计功能的操作，可以使用户快速上手。

汽车方向盘往左打，汽车就往左开；插排电源按下去灯亮；相关内容旁边放置相关操作，操作尖头朝下说明有下拉内容，等等。这些操作方式都是要符合用户心智模型的。

6一致性：设计在同产品（甚至同类产品）中保持一致性，可以大大降低用户理解成本，使用户快速上手，增加用户的使用率。

这里的一致性包括颜色，形状，内容，操作方式。比如红绿灯如果各地都不一样，外地人来了岂不会导致交通混乱。同一个网站也应该有这样的一致性，有些都可以保持行业的一致性，比如页面上使用一样的翻页等，既可以降低制作成本，又对用户的使用有良好的认知帮助。到一定程度，也会提升一个品牌的认知

下面看个例子：这个是某期宝贝传奇的宣传页面，进来以后甚是让人看不懂！没有很好的根据用户心里预知和相关内容的合理放置来设计。这只是一个活动，如果是一个长期产品，用户接受程度可想而知。

十、避免出错

1、问题一，是谁的错？

是的，用户犯错了，但是责任难道在用户吗？ “本来我不会犯错，是你的设计使我犯错，或起码增加了我犯错的几率。”类似这样的错误，系统可能会报错，也可能不会；但真正应该检讨的却是系统本身，即： 用户对界面的理解和本身的系统意图出现误差，系统设计的歧义等固有缺陷导致用户出错。让用户频繁碰壁、产生挫折感的设计，其原因不是用户的愚蠢、而是设计的愚蠢。

2、问题二，这是不是一个错？

用户在人机界面交互过程中的误操作，系统未能通过更好的设计减少和避免用户的误操作带来的损失。

还是以“上传照片”为例（如下图）

:

一个模态的警示框，赫然告诉你，你想在这里上传相片，根本不该使用除了ie之外的浏览器！除了事先不打算通知你之外，同时也没的商量，因为我没有给你提供别的替代性方案和其他选择。

3、问题三、该如何做：

关于容错设计的三个境界：

1、保证不是我们自己的错：屏蔽会引起歧义的设计、本身不合理的设计，不让用户因为系统的设计缺陷而导致犯错。

2、把简单留给用户，把复杂留给自己：通过系统的优良设计约束和指引用户的操作，把出现错误的可能降到最低。

3、减小错误的代价，帮助用户做对：当用户还是犯了错误，通过设计引导用户走向正确的方向。

二、如何做到避免用户出错：

1、给予用户适当的行为约束——为用户封闭掉不正确的道路

通过用户的使用状态，通过有选择性的设置功能项激活、待激活的状态，以及功能项展示、隐藏的状态，是有效避免用户误操作的常用手段。

2、给予用户必要的预判性错误提示——告诉用户，这样走可能会错

当光标定位于密码输入区时，如果此时键盘的大写锁被不小心打开了，界面会提示用户此时处于Caps Lock处于启用的状态，很可能会出现密码输入的错误。

当用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。

3、告诉用户操作所处的状态和正确的操作方式——告诉用户，怎么走才对