交互设计流程思考范围层结构层框架层

由于部门近期要形成各职位任务流程规范，故根据我所了解的和正在执行的在此整理一下，会不定期进行补充完善。

公司性质为互联网金融外包公司，故在此不讨论战略层上的相关问题，但是不讨论不代表不思考，如果能直面客户希望能多向客户询问他们在战略层的思考，有助于把握设计方向，也能确保整个产品的体验与客户需求相一致。

本文讨论框架

范围层

范围层确认某个特性、信息或者功能该不该纳入我们的产品中，纳入产品中的重量级如何。

很多时候，客户的需求文档里并不是“需求”，而是直接的解决方案，比如“增加XX按钮”，“添加一行XXXX介绍”。此时，交互设计师要做的不是急着按照客户要求做出原型，而是仔细阅读客户需求后，问问自己：

why？用户为什么会有这样的需求？

what？这个需求实质上客户是想解决什么问题？

how？如何解决客户的实质需求？

这里说一句，很多时候客户虽然发现了问题，但不会表述需求，而是给出解决方法，这样对客户来说更加容易，也显得更加直观。但作为交互设计师，不能被客户牵着走，无论在什么氛围中工作，都不能丧失思考的能力。

回到正题，当弄清楚客户真正需求后，需要对这些需求进行优先级排序，这里推荐两种方法：

四象限法

适用场景：需求优先级基本排序

四象限法

将需求分布在象限中，根据需求分布情况确定优先级：重要且紧急＞重要但不紧急＞不重要但紧急＞不重要不紧急。

通过四象限法将不重要的需求剔除，保留重要需求后，用kano模型进一步将需求分类：

kano模型

适用场景：哪些需求能显著提升用户满意度

kano模型

根据kano模型，我们能找出大幅提升用户体验关键需求，但是kano模型不讨论一个需求是否有存在价值。

结构层

结构层是用来设计用户如何达到某个页面，离开这个页面以后还能到哪，还能做什么。结构层将所有页面合理的串联起来，确定各种特性和功能最适合的组合方式。

明确了需求并确认优先级后，我们将这些需求进行分类。分类时要保证分类合理，方便用户容易寻找。

信息架构

信息架构研究的是人们如何认知信息的过程。

给对信息架构还不是很了解的宝宝推荐一篇文章：怎样理解信息架构？

* 偷偷说一下，这部分我一般用XMind做，配上快捷键（enter+tab）速度简直逆天~

信息架构样式

对于一些不知道如何分类的功能可采用“卡片法”完成对功能归属的确定。

关于卡片法这里推荐一篇翻译的文章：用卡片分类法提升信息架构：入门指南

用户历程

用户历程指的是用户解决问题，达成目标的过程。通常展现形式为一个接一个步骤。

在制作用户历程过程中需注意：

基于任务的需求：我们除了预测正常的历程外，还要考虑每个步骤节点可能发生的异常情况，每一个历程都需完整，形成闭环。（如基金购买）

异常情况（可能不全，后续会再补充）： — 信息输入错误 — 信息未输入 — 操作时网络中断 — 网速缓慢、超时、无网状态 — 服务器无反应 — 页面加载为空白

基于内容的需求：需预测出浏览路径，可到达的所有页面，可返回的操作。（如基金资讯）

框架层

框架层用于优化设计布局，以达到按钮，文本，图片等元素的最大效果和效率，使用户能尽快找到他们所要的/完成任务。设计过程中需要时时提醒自己按照设计原则（16个）与设计定律（8个）进行设计。

设计原则（16）

这个设计原则是看了网易大神的一篇分享后摘录出来的，其中包含了尼尔森十大可用性原则和一些新增的原则。个人觉得还蛮实用的，就整理出来作为以后界面设计的准则。

16个设计原则分别为：一致性、可见性、高效、预知需求、简洁法则、反馈、易用性、易学性、状态可知、减少延迟、隐喻、导航可见、情感化、自主控制、容错&防错性、默认值。

对于一个app的交互流程与界面的分析也可以以此作为评判标准。

一致性原则

同一用语、功能、操作保持一致。

知乎有一个答案：交互设计中，什么是“操作”的一致性？哪些地方需要保持操作一致性？

从三个维度：宏观维度、界面与流程维度，元素维度进行一致性的探讨。

状态可见原则

高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

与二八定律目的一样，弄清最主要功能与任务。

预知需求

洞察用户操作行为背后的需求，是提升用户体验的捷径。（这原则没找到定义，我就自己定义一下233）

很多App在这方面做得越来越好，举两个栗子：

1、淘宝在早些时候想要查宝贝看物流的必须路径：进入”我的淘宝“页 — 点击”待收货“ — 找到对应宝贝点击”查看物流“ — 物流展示页面。经过改进后：进入”我的淘宝“页，直接看到最新物流进展；

2、早前想要分享一个有趣的宝贝时：点击详情右上角菜单栏 — 点击”分享“ — 点击”复制链接“ — 进入手机进程 — 打开想要分享的软件 — 点开分享人聊天界面 — 粘贴链接。经过改进后：截图 — 选择分享软件 — 点开分享人聊天界面 — 粘贴链接。

简洁法则

同奥卡姆剃刀原理（后面有），将不需要的东西剔除，留下最重要的。

这里与”交互设计四策略“联系一下。交互设计四策略：删除（删除不需要的）— 组织（进行分组）— 隐藏（不重要功能隐藏）— 转移（只在主要界面保留最基本功能）

反馈原则

这里的反馈与状态可见性的反馈不同，这里的反馈指的是

易用性

易学性

状态可知

用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

比如点击底部导航中的icon，icon颜色变为主题色，页面进行切换，就是状态可见。

减少延迟

隐喻

导航可见

情感化

自主控制

容错性&防错性

通过网页的设计、重组或特别安排，防止用户出错。

这里与新乡重夫防错原则（后面有）意思应该相同，目的都是预防用户出错，举例说明：

容错：用户在输入日期时，各种格式的输入都应该被识别，如：2017-11-29，2017年11月29日，2017/11/29，2017.11.29；

防错：限制输入字段数防止用户输错，比如手机号码最多只能输入11位数字。

默认值原则

如果之前有获取到这个信息，就把它当成默认值，别让用户重复输入。（这原则也没找到定义，我也就自己再定义一下）

比如手机号，性别这样的基本信息，获取过一次以后再有需要输入时都自动填写。但也要注意，对于银行卡密码这样的私密信息无论输入多么频繁都需用户输入。

设计定律（8）

设计定律包括：费茨定律、席克定律、7+/-2法则、接近法则、泰思勒定律、新乡重夫防错原则、奥卡姆剃刀原理、二八定律。

费茨定律

费茨定律

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的D与W），用数学公式表达为时间 T = a + b log2（D/W+1），其中a，b是经验参数，它们依赖于具体的指点设备的物理特性，以及操作人员和环境等因素。

理解：指点设备的当前位置和目标位置相距越远，我们就需要越多的时间来移动；而同时，目标的大小又会限制我们移动的速度，因为如果移动得太快，到达目标时就会停不住，因此我们不得不根据目标的大小提前减速，这就会减缓到达目标的速度, 延长到达目标的时间。目标越小，就需要越早减速，从而花费的时间就越多。特别地，边界的W是无穷大的。

启示：

1、按钮等可点击对象需要设置合理尺寸；

2、屏幕的边和角很适合放置经常需要点击的元素；

3、出现在用户正在操作的对象旁边（最好是右边）的元素操作起来更方便。

Hick's Law / 席克定律（希克法则）

席克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+b log2（n）。

启示：在交互中界面中，选项越多，意味着用户做出决定的时间越长。但是又不能剥夺用户的选择权利。支付宝在这里的解决方法可以参考：

支付宝的“更多”

用户在“更多”中可自定义编辑选项，将常用放在首页，不常用的隐藏起来。

7+/-2法则

人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

启示：

1、导航或选项卡不要超过9个，尽量能够控制在5个及以内；

2、如果内容超过9个，可用层级结构进行展示，但需注意深广度平衡。

接近法则（格式塔原理之一）

接近法则：会把左边的看成一组，右边的看成另一组

物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近（相对于其它物体）的物体看起来属于一组，而那些距离较远的则自动划为组外。

其实格式塔原理还有挺多其他法则，但接近法则是交互运用最多的。剩下的要是有时间可以去看看。

启示：接近法则对于引导用户的视觉流及方便用户对界面的解读起到非常重要的作用，通过接近原则对同类内容进行分组，同时留下间距，会给用户的视觉以秩序和合理的休憩。 设计者们可使用分组框或分割线将屏幕上的控件和数据显示分隔开。

Tesler's Law 泰思勒定律（复杂性守恒定律）

每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。

对于泰思勒定律还不太能弄清楚，以后有想法了再补充进来（要是有大神能够点拨一下就么么哒了）。

新乡重夫防错原则

放错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。

拉勾登录页面

启示：不让用户出错或是尽量控制住用户出错的地方

1、输入数字信息时可限制输入数量（拉钩验证码最多只能输入6位）

2、当条件没有满足时，常常通过使功能按钮置灰，防止勿按（只有输入6位验证码后“进入拉勾”按钮才会变为可点击状态）。

Occam's Razor 奥卡姆剃刀原理（简单有效原理）

“如无必要，勿增实体”，即“简单有效原理”。正如奥卡姆在《箴言书注》2卷15题说“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。”

启示：

1、只放置必要的东西（如google、百度的首页，只有一个输入框）；

2、减少点击次数；

3、减少选项（与席克定律相辅相成）。

二八定律

在任何一组东西中，最重要的只占其中一小部分，约20%，其余80%尽管是多数，却是次要的。

启示：80%的用户只会用到20%的功能，这些功能为常用功能，是我们应该关注与优化的重点。

交付的交互稿需包含的内容

1、版本号、修改人姓名、修改日期、变动详情

2、需求分析、人物模型、信息架构

3、页面

4、页面跳转（带箭头的线）

5、内容输入

6、交互样式（iOS与安卓）

7、特殊状态

8、动效说明

9、手势说明

10、提示文案