​有趣的交互，不只是画流程图

* 本文内容来自 艾体验|李婧Amy 在 6th DEX-Sketch Meetup 成都现场的分享

本次推送篇幅略长

推荐搭配「小提纲」食用，口味更佳

小提纲

● 对于交互设计师，最主要的三个技能

- 设计、人因学、计算机科学

● 有趣的交互设计的三个方面

1、场景带入

- Case 1: Linkin 注册登陆页面

- Case 2: 手游的注册登陆页面

- 方法论：场景分析方法

- 2、信息可视

- Case 2.1: 检验视觉图的三个小方法

- Case 2.2: iPhone 拨号界面的隐藏功能

-3、逻辑完整

- 逻辑思维心流

- Case 3: 分享、提醒开启通知的交互逻辑

● 插播一则招聘

- 产品体验、视觉设计、用户研究

---

艾体验AIUX 正在做的事情 一个走心的暖场提问

除了台下同学提到的一些烦恼，比如：

「阳光下无法看清屏幕」

「有线耳机的线会对跑步造成干扰」

「戴VR装备后在real world中遇障碍规避不便」

……

从人机交互的角度再补充几个不友好体验：

「想摁亮iPhone屏幕结果指纹解锁进入主页面」

「跑步时想把乱入的舒缓轻音乐切换为劲爆歌曲时连摁三次话筒并不是不方便」

「戴上VR眼镜后发现交互场景在脑后」

（注:人眼视野范围为120°，小于VR提供的360°环景）

---

而所有这些问题

都不是流程图可以解决的

交互设计师需要掌握什么样的技能

对于交互设计师，最主要的三个技能：

● 设计（Design）：更好表达、传递信息的能力

（如制作流程图、线框图）；

● 人因学（Human Factor）：去做一个更好的usability research（类似于用研分析）的能力；

● 计算机科学（Computer Science）：可引申为视觉设计、工业设计、动效设计等方面的能力。

这点有三个方面的是需要大家去关注的：

第一个方面就是信息的框架，在做事情的时候，需要知道信息的框架。艾体验AIUX在招人时，就会关注应聘者的逻辑分析能力；

第二个是系统的框架，在移动端设计的时候，起码要知道在设计的时候能够调用的组件有哪些，比如iPhone里的Wallet组件，用户在创建付费以后，可以将电影票、小票等添加到里面；

第三个是要接受新科技、新技术的push，去学习新的交互方式、制作工具等。

另外的一些能力，比如市场（Marketing） 要求交互设计师具备对产品定位相对应的心理学、社会学、认知学习的知识库。

这次的分享更倾向讨论技术纬度的能力

而图中右下角的Communication属于另一重要维度

这次先把结构抛给大家，细节上暂不谈

---

什么是有趣的交互设计

分享对有趣的交互设计一个理解

「有趣的交互，将真实世界中人们的操作过程，转化成线上产品的功能逻辑和流程设计，并符合用户心智，可以自然无意识地流畅操作」

---

有趣的交互设计的三个方面：

老板：「xx 帮我画一个注册登录的图！」

这个听起来如此具象的任务

真的……有那么轻松吗？

Amy分享说她面试时拿出这道题，可谓屡试不爽

大多数人拿纸过来就开始画

而他们画出来的，常常是这样：

Q：问题在哪里呢？

A：设计注册登录时

还需要考虑产品定位和验证码的逻辑

比如希望用户更多用手机登陆

还是用更快捷的第三方登陆

在这里暂不抠逻辑的细节点

先回归到注册登录时的用户场景进行分析

---

Case 1: Lindkin 注册登录页面

有的人会问

「用户会不会被注册步拦住了？」

「会不会一看这么多，摔手说我不想填了？」

回答这些都需要回到用户场景，即：

「用户来这个应用是为了什么？」

对于招聘、社交、婚恋等强需求的应用，

为了推荐符合用户需求的内容，把这类型的注册表单适度延长，

在注册步骤获取更多用户详情，对用户留存率有非常好的提升

所以需要多花三到四步，去收集用户信息

---

Case 2: 手游的注册登录页面

以大家最熟悉的两款热门手游为例

还回忆得起刚打开时的注册登陆页面吗？

从下面两款游戏的注册登录页面的截图里

可以发现，两款手游都有设置「游客登陆」入口

《王者荣耀》甚至为游客准备了「游客专区」

手游在注册登录的时候，并不会死缠你

根据游戏心理学，用户玩一款游戏超过一定时间后，倾心于这款游戏的可能性就更大

因此游戏会帮助你更快的跨过新注册这道坎

所以大家在收到注册登录这种需求后

一定要反问老板一句：

「老板我们这注册登录想达到什么目的？ 」

即我们在做交互设计之前

一定要先问老板，功能的目标是什么？

比如注册登录是给用户推荐更准确的内容

还是想让用户更快地开始使用？

当需求到达后开始绘制原型时还需要注意些什么，点击查看艾体验AIUX上期推送：《4.5|动手画图前，交互设计师都要想些什么？》

---

方法论：场景分析方法

限于时间，这里先简略地分享四个常用方法：

（这块Amy在馒头商学院是做过更详细的专题分享，要是大家够热情的话，可独家放送哦～）

● 故事版：将用户的使用场景，用小故事画出来

● Wizard of Oz：为了测试可用性，在具体功能技术上尚未实现时实施的一种假态的模拟，如右上角里用人工模拟AI回答用户问题

● 原型图：对交互过程先用草稿式的手绘表现，交给朋友用用看

● 按钮触发的前置条件：如右下角所示，在「预约课程」的按钮触发前，设置每期的预约目标

大家在用的时候可能没有想到某个具体方法

可以回过头来后再做一个系统的了解

---

这里也是先跟大家分享一个小故事

因为工作，Amy微信上加有好些交互设计师

有时候对方会突然扔来一页交互图：

「Amy  帮我看下我这个设计有什么问题？」

Q：这页交互图的问题究竟在哪里呢？

A：设计师在绘制时首先需要明确的是：

「这图里，想给对象看到的第一个东西是什么 」

而这页图，放眼望去全是框

---

检验视觉图的三个小方法

这里的三个小方法均来自「格式塔效应」

「格式塔效应」里的原则有很多条

这里先分享对交互图设计最有用的三个规则

● 相似性：将主要信息区隔出来，用反色的方式在交互图内向产品呈现

● 接近性 ：如上图所示，人会将靠近的线分为一组，所以若不从距离上对交互图内各部分进行区隔，展现出来的就是一大坨

● 连续性 ：我们会将上图右三看作两个圆环而不是两个月牙，因为人类更倾向于简略地、连续性地去理解页面的构成原理

---

现在再用三个原则去检验这页交互图

交互图里之所以放眼望去都是 框

是因为没有把信息按照原则进行整理

应该把思维逻辑里具有连续性的放在一起

而不是满屏散落地都是入口

如在思维逻辑里，「挂完号去干嘛？」

当一个页面全是让用户选择的入口的时候

页面一定是错的

（我艾的生产和交付上一定不会出现这个问题✌️)

---

Case 2+: iPhone 拨号界面的隐藏功能

来，一起念：

在交互里，若非必要，勿增实体

在交互里，若非必要，勿增实体

在交互里，若非必要，勿增实体

比如case2交互图里的数值分析不需要首页入口

一个更好的示例是：

在iPhone 拨号的界面

能找到「添加联系人」+「删除号码」在哪里吗

当在拨号页面输入「12345」后

「添加」和「删除」键出现在了数字的两侧

可以看出iPhone在扁平界面化后

把「添加」和「删除」键放在了第二逻辑层

因为扁平化后，用户对所有界面事物的认知一定会有一个转化过程

在以前 iPhone拟物化的时期

用户在界面上看到什么就是什么，更容易读懂

而现在，用户对界面读懂的可能性降低了

可能需要一些转换

提供给用户的信息一定是经过删减的

这个case的分析在Amy合著的新书《触人心弦：设计更优秀的iPhone应用》也有提到

【京东、亚马逊现已发售】

---

这里Amy分享了第三个小故事

有次她去另外一个公司开会

该公司的一个小助理准备好了会议室

在向Boss汇报投影仪、小白板已放置妥当时

Boss却用三个问题问住了她：

「底下投影仪是什么接口的？」

「投影仪是否偏色？」

（展示线框图的时候需要切换显色模式）

「下面的小白板有笔吗，笔有油吗？」

小助理的问题在于没有考虑一个连续性逻辑

对于某件事只看到一个「点」

但没有看到「点」后续的其他的「点」

在我们考虑注册登陆的时候

其实已经运用了正确的思维方式

即对于用户而言：

在完成填表这个「点」后

用户登陆后立刻能看到他们所期待的内容

---

逻辑思维心流

即一种层级式逻辑分流的思考方式：

我通过一个点，我可以演变出多个问题，再由这些问题切割成更多的问题

在这种思维下，首先将事情拆解为一个个「点」

拿上个小故事里的白板为例

把白板作为第一个「点」发散出去：

「有没有准备好笔？」

「准备了几种颜色的笔？ 」

「需不需要提前画好一些界面框？」

在整理交互设计师能力的时候

Amy就是按这样的逻辑，一层层去发掘要干什么

最后做出了「交互设计师能力树」

交互设计师能力树

艾体验AIUX在培养员工的有个方式就是

要求每位员工，坚持使用新app、收集新的新闻

有时候Amy会进行突然的抽查：

在不准偷看原稿的前提下，

「告诉我你这期收集的信息中，哪几个是重点」

大家可能也常常会遇到这种情况：

我们阅读过很多东西，但就是想不起来

这是一个学习上的小误区 ：

在头脑里零散地构造出一些小点，无法在大脑的沟壑中刻下印子来，所以再回忆的时候很难

最简单的方式是「结构化信息」

一定要去信息／事物间找规律

世间万物之间一定是有些必然联系的

找到15条信息的时候，尝试这些信息结构化

这是一个最好的方法

当你的15条信息结构化为5条以后

就会开始习得一种构造结构化思路的方式

---

Case 3: 分享、提醒开启通知的交互逻辑

注意交互行为逻辑上的联系

大家分享链接时是什么场景？

分享到微信后，链接显示的小图、文案是什么？

目的是拉新还是促活，需要在链接里附带直接注册的入口吗？

链接打开以后，是否要跳回到原来的界面？

提示开启推送时，需要结合用户使用场景

而不是弹出以一个简单的对话框

对于新闻类、电商类app ，推送很重要

推送这个交互行为，需要遵循怎样的设计逻辑？

开启推送：

以什么样的频率给用户发送推送更有效？

推送的样式（字数限制／配图／声音）

关闭推送：

提醒用户再次开启推送的场景设置

（免费／快递时）

是否没有在推送前给用户足够的信息

（为什么开启）

Amy的话：

分享会的时间比较有限

分享能讲的点很少

更希望能用一些提纲挈领的点引发大家思考

---

插播一则招聘：

加入艾体验，一起玩出更酷的产品

产品体验设计师 （2-3名）

视觉设计师        （1-2名）

用户研究分析师（2-3名）

简历和作品集请发送至 hr@aiux.cc