交互设计引擎：一张图表输出设计方案
阅读本文需要10分钟 适宜人群：· 想转岗交互设计的设计师· 经常遇到业务需求不明确的设计师们· 对交互设计感兴趣的人
日常工作中经常会遇到2个问题：
设计师如何准确把握好设计需求？
怎么把需求高效转化为设计方案？
高效输出交互设计方案
我把方法和流程总结为一张图表
自上而下填充内容，过程引导思维路径设计出交互方案
就像一个自转的引擎，不管什么需求都能输出交互设计方案。
为了更好的去拆解设计的过程，
我把它分为三部分来讲：
「需求画布」、「设计白板」、「描述笔记」
故事：
找书体验并不友好，还经常被陈列出来的“畅销书”打乱她的节奏。
小红是一个大学生，经常使用智能手机，如果你是app交互设计师，怎么帮她设计一个方便找到好书的系统？
2.1 需求画布
根据背景故事，我们按图表格式整理相应信息
收集并整理信息，故事就不再是故事，而是具体的需求。
btw：在实际工作中，我们是需要通过不停跟需求方去聊，来获得这些信息，需求方可以是用户，也可以是产品经理或其他业务负责人。
题外话
克制而简约，即简练的语言描述，最后提炼出关键词，这个要求在整个设计过程中贯穿始终。
why：因为克制简练的描述，强迫你聚焦到核心信息和关键问题上，避免过于发散而偏离主要问题。
2.2 设计白板
延续「设计诉求」，我们按照第二张图表继续，正式开始设计交互方案。
为了清晰分解这个过程，我把「设计白板」再拆成两小块：
设计白板 1 _流程
这个过程可以在纸上画草稿，也可以利用axure、omnigraffle、processon等软件。
我个人更倾向于用纸和笔，一来是因为纸上草稿扔了不可惜，所以更有勇气推翻自己，从而做到快速迭代；二来是快速把想法转移到纸上，可以解放注意力，帮助自己想到更多，思考更全面。但纸笔也是表象，ipad+触控笔也能起到同样的效果。
用例图 更细的流程
在这个案例里，还涉及到线下寻找图书，所以流程也可以表示出来，因为线下的体验会反作用于线上的体验。
题外话
如果是产品经理或程序员，还可以用来抽象程序的数据运作流程。通常，我们做交互设计的时候是构思用户的使用流程。
设计白板 2 _界面
根据设定好的流程，梳理核心信息和层级，结合必须的用户操作形成界面。
构思关键信息，包括涉及操作的组件，如「输入框」、「搜索按钮」这类，是可操作组件，而不是单纯展示的信息，都可以先在信息层罗列出来，最后再归类。
定义具体的界面，这里我们可以根据实际需求和用户习惯，去定义新的组件，也可以沿用所在行业沉淀下来的组件，关于什么样的组件是最好的，是另一个话题，不同行业就有不同的场景和用户，标准也不一样，所以这里不过多赘述。
值得注意的是，虽然一屏里需要展示的信息众多（包括操作组件），但在这一步，我们要传达的始终是“用户知道这里可以搜索，并且知道如何搜索”，正如流程图中的关键词——“搜索图书”，所以信息之间的权重和层级都应突出这一关键词，后续的交互线框图以及视觉设计，都作为贯穿始终的原则。
假设一开始去掉「搜索icon」，按钮文案换成「确定」，用户是否能第一眼就明白在这里是要干嘛呢？
剩下的流程转化为界面，方法一致
就不一一赘述了，我们看下初步的界面流程图
其他流程设计
本文主要讲线上的交互设计，导视系统如何设计这里不作展开
实际场景还涉及线下的体验，当设计进度到一半以上后，还发现漏掉「用户如何打开」的问题，所以在流程图中还补充了「打开」的步骤，以及对应导视系统的设计，小程序也应该结合到导视系统里，让用户知道书店有这个功能。
2.3 描述笔记
搜索框点击后会有什么反应？键盘如何出现？输入时，按钮会如何切换状态？输入后界面会如何反馈？这些问题都是交互需要考虑的细节，有经验的设计师在画界面时就同时考虑了，如果是刚入门的同学可以借助第三张图表引导输出，对于有经验的同学，有时候也可以用来避免自己考虑有遗漏。
名词解释
组件：就是出现在界面中的某个“零部件”，如页面中的某个按钮；
触发：就是用户的什么动作怎么触发这个“零部件”后发生什么，如点击下一步按钮，按钮颜色变深然后加载新的页面；
前置条件：是触发生效的依赖性条件，如登录页面，只能输入完整正确的账号和密码后，才能点击下一步；
限制条件：则是触发的动作具有某种限制，如输入手机号时，会限制只能输入11位数字。
这张图表就是辅助考虑更详细的界面交互，包括动作、反馈、跳转、状态、计算等具体的计算机能力要素，最后把这些要素标注在设计文件上，形成交互说明文档。
以搜索页的搜索框为例，大概是这样的
相应的交互细节
以上就是利用一套图表为指导路径，完成交互设计方案的过程。但这是完全基于用户目标为需求的设计方案，如果放到商业环境中，我们还需要考虑些什么因素？
03 商业应用
放在业务环境中的对比
针对日常商业环境，区别主要体现在需求被拆分为「原始需求」和「用户需求」，梳理设计诉求时，需要平衡“商业目标”和“用户目标”，以实现“商业目标”为主。
同时，载体往往是公司已上线的某产品，这时候它是一个app还是一个网页亦或是一个小程序，在业务侧已经是针对投入产出比确定好的，我们需要更聚焦到交互方案，方案本身如何解决目标问题，所以我们会记录这个需求，会在哪个产品平台上的哪个模块做文章，用哪个系统来实现，结合种种条件全面考虑方案。
商业版故事
非会员使用找书系统限制4次/月，从后台数据观察到，大部分用户每个月使用完就算了，等待下个月次数恢复再使用，似乎这个功能并没有直接为公司带来商业转化。为了能提升书店销量，现在需要加速用户消耗可用次数，并刺激其使用找书系统后的购买欲。并且新的市场策略是：若用户当月可用次数已用完，只要购买一本即可恢复1次使用。
以搜索页为例
与无商业目标的界面对比
次数未用完
次数已用完
原型很粗糙，确实上面只是我用来快速表达意图的，具体要做到多细？当然是越接近上线预期的样子越好了，甚至是可交互高保真原型，因为在设备上实际体验会发现更多问题，这些问题是在全局视角的界面流程图里容易忽略的。
我个人以为，交互设计的价值是，一方面是帮助业务和技术团队描绘产品样貌，一方面是跟视觉设计师高效协作，帮助团队了解产品体验的意图，从整体上提升产品的易用性，更重要的是，结合业务目标通过用户体验转化商业价值。
- End -
祝大家设计愉快
