从UI到交互入门，不妨试试这些

从UI到交互入门我是如何做的

应该很多UI/视觉的小伙伴们都有一个想转交互的一个职业规划方向，当然我也一样。纠结了很长一段时间，想了很多比如做纯视觉/UI未来的路是不是会更窄、交互是不是在设计中就能说上话了、交互是不是更不容易被淘汰了、可是转交互我该如何入手做......

我带着这些迷茫和问题一边做视觉一边开始入门做交互，慢慢摸索到了一些方法，很庆幸我是有一个实战项目作为交互入门的第一步。

先讲讲刚开始我是如果入门的吧（现在也还是在继续学习的一个交互萌新）

刚开始我以为的交互以为就是帮产品看看页面哪些地方有用户触点说说如何点击如何跳转就可（小丑是自己，把一切想的太简单了），刚开始需求澄清会时也还只是对着原型看如何转化为视觉搞，不会思考也不知道以哪个为切入点对需求进行提问。会后也不太愿意看长篇的需求说明，所以对需求的了解只限于那几个规范控件如何使用而已。

这个时候我看了大量相关的文章和书籍，以及请教交互的同事们。慢慢的有了一些自己的想法和观点；

慢慢的知道交互是一个不简单的活儿（工资没那么好拿）， 你需要了解整个项目的背景、业务场景、受众、价值等等这些还都只是做交互设计之前的一些基础知识。

那我是如何拿到一个陌生项目进行背景这些一系列操作的了解的呢？

一、基础认知

经过我第一次做交互的沉淀和学习，我总结了一套自己的做交互流程和一些方法；

我自己管这个叫填空题，做任何需求/项目之前先把填空题填好再进行下一步。也许大家都会想拿到一个陌生的项目我上哪里去找这些填空题的答案呢？有一个现成的就是问产品经理追着让他把业务背景给你讲透，没有关系哪怕在别人眼里你就是一个抠图再一个美工问那么多干啥，当你能够为项目为他解决实际业务痛点的时候他们自然而然的就会尊重你了。

1、产品定位：为谁在什么样的环境下为谁解决了什么问题

2、目标用户：给谁用的

3、使用场景：用户基于什么目的在什么情况下基于什么样的目的去使用

4、用户目标：用户来想要解决自己什么问题或者希望帮助达成什么结果

5、业务/用户痛点：用户使用时遇到了什么阻碍/无法实现自己最终想要的结果

例如：

定位：为客服在接听/呼出电话时提供信息记录及查询的语音系统平台

用户：一线客服（用户量1000+）

使用场景：与用户沟通接打电话，帮助用户查询答疑问(场景可有多个)

用户目标：希望能够以快速便捷的操作来建立与用户的语音通话

业务/用户痛点：提高客服操作效率，优化操作路径（可以来源于业务/产品方、也可来源于专家走查的发现）

带入自己的项目把这些填空题做完了以后，相信你也会对整个项目的背景也有了基本的了解。基于这些基础背景的输入才能对设计的目标和思路有更明确的方向；(我之前有看过一本叫刻意练习的书，因为在这本书得到的一些启发适用了我很多学习方面比如之前刻意练习的插画再到现在刻意练习的交互，它讲的内容大概就是针对某一件事情可以去做有意识刻意的练习，以及不断的重复最后就可以达到自己想要结果；放在这里也同样适用，把这里的填空题作为一个刻意练习，练习得到一定程度后那么以后碰到新的内容相信也就可以驾轻就熟了)

二、纸上草图

2.1 先大后小

基于对项目有了基础认知以后就可以开始梳理框架结构了，可根据做的需求范围大小来框定整理的范围。先大后小的整理，先了解大体系统/平台是如何做的

例如：这是我在了解某一个B端产品时对它的功能架构梳理，先了解它大的框架是如何搭建的，包含哪些内容，平台都有哪些能力

然后再聚焦到我比较关注一些功能模块具体的产品能力有哪些，可包含单点功能和整个业务逻辑的整理

2.2先粗后细

尝试过用了很多方法来帮助自己理解整理需求流程和要点，最终发现最原始的纸和笔才是最好用的（毕竟入职半年就写完了三支笔的墨水写完了两个笔记本）。我也有过刚开始一上来依然按着之前做UI的习惯就打开软件准备要大干一场，建好画布打开需求文档，糟糕！交互脑袋空空～～～我是谁～～我在哪儿～～我要干啥......

粗-梳理整个业务逻辑

我一般先采用的是手画流程图、流程图可以很好的让自己知道整个链路中的关键节点有哪些，对于陌生的项目需求给自己脑海里能形成一个大体上的逻辑思路。先正向把逻辑闭环理顺、再去梳理分支。

那什么叫一个闭环的逻辑呢?比如我们平时在网购它的一个购物关键节点的闭环的流程。

细-整理思路和疑问

有了大体的流程思路以后，复杂的需求我还会细看一遍需求文档，看看需求文档的需求说明可以细化到字段的说明上。这时将自己的想法和疑问整理出来，方便后续与产品沟通时自己遗漏了。

梳理完以后能做到在脑海里可以回忆串联起来整个功能逻辑。

方法一：默写（我还记得我做的第一个交互需求虽然很小但是因为记不住，下班地铁上还在默写各种状态，以图为证👇）

方法二：形成一个经过自己整理优化后与产品业务达成共识的功能流程图，方便自己后续出方案的时候出对应的设计稿或者设计外审的宣讲的时候可以帮助听者更快速的理解本次宣讲的大概内容（如果有项目汇报KPI这就作为了一个很好的PPT沉淀素材）

方法三：如果时间允许或者也会碰到一些产品只给了需求文档没有原型的情况下，还可以自己先大致画一个低保真；自己动手走一遍就不会漏掉所有该考虑功能场景。

以上三个方法，也可以作为三个步骤，我平时也会根据需求的难易程度以及排期时间选择性的用；复杂一点的需求理解比较费劲时我可能三种方法都会用上；看似步骤多又重复，但是对于理解陌生和复杂的需求这样几遍走下来做到了心中了然会一点也不嫌多；需要做到百分之百的了解需求才能给出更符合当下场景的设计方案。

其实了解需求的路径也不限方法和形式，能达成最终的理解并正确的梳理好功能逻辑、明确了交互设计的目标都是好方法，按自己习惯的方式来做即可。

三、交互思考

梳理完整体的功能结构和业务流程以后，也能更全面的把控整体的设计。同时设计目标和方向也非常明确了。有哪些流程节点需要思考，有哪些拿不准的方案也可以定向的去找参考；也能更好聚焦于单点内容的思考。

如果是是迭代需求可先挖掘问题，再对问题逐一的去解决。

比如带入用户的角色去看当前流程是否清晰、体验是否有可提升的空间，信息层级设计和信息传递是否准确到位。带着找问题的目的去发现问题。找到问题并罗列出来再定向的去思考对应点的解决方案。

如果是新需求可以先看做竟品分析，总结竟品的优点用于自己的设计中

新需求可能整体功能设计或流程都不是完善如果是较大的项目可能竞品分析都需要一个月以上。根据实际需求情况来竞品分析可大可小，在实际难点或者自己拿不准的都可以做竞品分析。

例如：需求是说明描述需要支持快捷输入和手动录入（我们举个小例子）

首先想到的就是以标签的形式，可找参考类似反馈评价这类的功能看看是如何做的；找参考后，第一可以肯定自己的思路是否有偏差，第二可以更加明确清晰的知道交互的触发形式

这里只需要想清楚，点击标签后快捷输入文字是否可编辑删除，删除后标签的状态，以及标签是否支持取消，取消后输入框内点的状态是如何展示；可根据业务场景定义合适的场景

四、输出方案

最后根据需求输出完整的交互设计方案，包含页面跳转、交互说明（包含同一个场景的各个状态）等等；同一个需求多场景可根据一个闭环流程横向排列连线，防止业务场景状态太多页面连线太乱，不方便理解和查看；输出方案后在跟产品和业务评审。（如果是在较大的UED团队交互设计的评审可有2轮左右的内审，然后才会到外审的环节）

输出的软件的选择上看自己吧，如果团队有要求那就按团队到的统一规范输出，如果是自己一个人奋战用sketch很方便，axure或者其他自己熟悉的都是可以的

五、沉淀、总结

尽量做到自己每做一次方案都能有所收获，沉淀的内容可以是思路和方法，也可以是设计规范或者控件等等

将好的思路和方法沉淀下来、也许就在下一次或者某一次方案中受用。万事万物都有迹可循，只要找到其中适合自己的方式即使是一个陌生的项目做起来也会变得轻车熟路；甚至这些方式的沉淀和经验的总结会在你整个职业生涯中受用。当然这些沉淀也会帮助你大大的提高工作效率和产出

最后

针对想转交互的小伙伴们，不管你是否想好要踏上交互这条路，都建议一定是需要掌握一定交互设计的能力，因为有交互的这种思维方式和逻辑理解能力才会让你的设计思路和想法更有深度，输出点的方案更立得住。无论是对业务的需求的理解和对用户场景的正确识别判断都非常重要；一份好的设计它的评判标准除了视觉表现以外，更多的是看大到是否考虑背后的业务目标、用户场景；小到功能逻辑、信息层级梳理等等。设计需要深挖业务需求背景，才能帮助你做好选择更适合当下业务的设计方案

最后最后，如果不想自己只是一个无脑到的画图机器的话先不要着急打开软件忙着完成任务，调整一下先留给设计思考的时间多一点吧！！！