教你画原型之——看似平平无奇的交互设计

俗话说的好，懂交互设计的一定会画原型，但是会画原型未必懂交互设计（可能是我瞎掰的~）。

这就是说明啊，交互设计是画原型的基础，也是作为产品经理的必修项之一。真正懂交互那一定是站在业务和使用者角度去思考，而非搬公式硬套，同一套交互设计，在不同的系统可就未必好用。

说了一大堆，我们先来认识下什么是交互设计。

交互设计是什么？

先给小白科普几个基础概念：

Ul: User Interface 用户界面

UE: User Experience 用户体验

IXD:Interaction design 交互设计

交互设计是两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计就是让用户在使用产品或服务的过程保证可用性，提高易用性。

交互设计的最终目的主要是？

1、让用户使用产品更加顺滑、便捷、愉悦；

2、更方便找到，以更短的路径操作产品；

3、让用户可以遵循通用的规则去培养使用习惯。

交互设计中的基本原则有哪些？

1、用户心理

把本来很复杂的事情设计的符合用户日常生活中的浏览方式或操作习惯，贴近用户的人性需求，需要具备同理心。

由于产品经理在设计系统的时候，往往会过度关注研发的实现，或者是产品结构的底层逻辑。尤其是当产品处于3-5年时，在设计产品时会忽视用户心理。

产品经理往往会站在开发实现的角度给出解决方案或体验路径，那些其实用户根本不关心。比如大家用的手机，用户只知道看到屏幕画面变化，有声音，并不会关注底下有多少硬件支撑。

2、希克法则

希克法则简单来说就是：当一个人面临的选择越多，所要做出的决定时长越长。

用方程表述为RT=Klog2(N+1)，其中RT表示反应时间，K为常数，N为可能选择的个数。

那么针对这样的一个法则，我们在做交互设计的时候需要注意什么呢？

（1）尽量少给用户做选择（探索类、游戏类的除外）

如果你想要提高某些操作的转换率，可以尝试削减按钮数。比如以下几个运营活动弹窗，他们的取消按钮就可以放在不显眼的位置，甚至去掉：

（2）选项没法删除，则考虑收起合并

如果你面临选项太多的问题，我建议：

结合业务考虑，是否可以去除部分非必要路径功能，或者转移、合并某些功能。确实需要用到某功能时，也能够根据合理的路径点击使用，从而节省一次性的判断花费。

实在不能去除功能，需要重新梳理一下产品的信息架构。将不同选项分类重组，尽量减少用户单次判断所花的时间。

（3）用户选择的复杂程度除了与选择数有关，也与单位选择难度有关

举个例子来说明下：

A：用户面临3个按钮，但用户在点击任何一个按钮前，都需要阅读大段大段的内容。

B：用户面对10个按钮，但只需要用户随便选一个即可。

如果按照希克法则来看 ，A所花的时间应该更短，但是实际上 A 花的时间更长一点，因为时间都花在阅读上了。所以希克法则最适合用在简单的判断场景，比如宣传弹窗、菜单分类等。

3、接近法则

在进行页面布局规划时，相似的内容和功能尽可能放在一起，使得用户更利于理解使用场景，更快速地定位内容。

4、防错原则

大部分意外都是由于设计的疏忽所造成的，而不是使用者操作疏忽。当出现大规模的使用失误时，产品需要关注下是否是设计上出了问题。

典型的就是二次确认的设计，当出现关键信息删除，或尚未保存时退出等场景下，需要提示用户，避免出现由于没注意而发生的误操作。

5、操作可预期

我们需要在产品交互上，给到用户某个操作后，预期一致。

（1）在B端，尤其是在流程化的表单场景下，需要很明确的告知用户，你完成第一步后，第二步将会需要你做什么，提交后你会得到什么样的反馈结果。

（2）C端也是同理，当用户在电商平台上购买完商品后，线下一般是会开具一个发票。那线上也是一样，一般会给一个订单购买完成的结果页，并给出购买信息，有效的给满足用户一种核对购买结果的预期。

6、贴近认知

最直接的案例就是我们在系统上设计的icon是否能不写文字，用户也知道是什么功能。如果可以做到，那是比较优秀的。

现在日常生活中这块做的最优秀的我认为是这个：

7、状态可感知

当用户所处的状态产生变动或更新，需要给用户一种可感知的反馈。

（1）当收到新消息时，入口icon右上角会出现小红点；

（2）当文章阅读过，在瀑布流看到他的文字颜色会变浅，做出区分；

（3）当下拉刷新数据时，刷新小图标会有一个加载的效果。

8、一致性

我们需要在一个产品体系中，规范所有的字段名称，呈现样式和交互方案。避免出现在A模块是这样的，在B模块又不同。

不仅会造成用户的困扰，也会让用户觉得你非常的不专业。

所在在交互设计之前，规范需要先制定下来，便于后续的展开。

那么交互设计该怎么去落地执行？

我们一般是去分3步去执行交互设计：

1、概括待表达信息，理清需求点

产出物：需求池、功能清单

2、信息排序，需求点按一定的规则进行分类

产出物：信息架构图、业务流程图、功能结构图

3、界面语言翻译，开始画交互稿

产出物：交互原型

手把手实践案例

应用：某直播工具产品

定位：只给有直播权限的用户用于直播

基本功能：登录，选择节目发起直播 (节目在后台已配置好）

其他信息：由于每个节目一个单独的直播流，所以若未终止直播，这个节目还可以进去续播。(即意外断开或者误操作等情况均可续播)

需求：

有场景用户需要临时发起直播，为这个功能设计交互流程

第一步：概括待表达信息，理清需求点

（1）用户可以选择节目发起直播；

（2）用户可以随时发起直播；

（3）选择节目需要查看节目列表；

（4）发起直播时需要填写本次直播的相关信息；

（5）直播意外中断后，再次发起或进入仍可以接着之前的续播；

（6）考虑退出后，用户不想续播，则可以重新发起直播；

（7）无直播权限的用户发起直播按钮灰置，并引导用户去开通资格。

第二步：信息排序，需求点按一定的规则进行分类

（1）获取直播资格；

（2）发起直播操作：在节目列表选择后发起or直接发起

（3）直播进行流程：创建信息填写->发起成功->直播进行->直播完成

（4）中断逻辑：异常退出or故意退出，异常退出后，直播间的呈现变更，断线重连后续播功能；故意退出，多少时间不重连后，视为默认关闭直播。

第三步：界面语言翻译，开始画交互稿

1、涉及到的页面进行绘制

（1）直播入口页面（按钮位置，按钮状态等）

（2）资格申请页面

（3）节目选择列表页

（4）直播发起信息填写页

（5）直播页面；

（6）直播关闭或异常页面；

（7）重新续播二次确认页面。

2、页面相互之间的信息涵盖和跳转逻辑梳理

3、查漏补缺，先从技术实现角度看是否涵盖全面，再以用户视角体验功能顺滑度，避免出现交互死角。

学习交互思维可以从身边的日常着手，柚子哥也建议大家平时有空可以多刷刷大厂做的产品，培养一些交互使用的感觉，说不定平时工作中就会运用得到。

也需要自我思考下，为什么他们要这么设计这个交互流程，对提升交互设计非常有帮助。