用美团神抢手的案例，帮你快速掌握交互方案的设计思路

一、交互设计的基本说明

在 UI 设计师的工作中划分了三种相关设计类型：界面设计，交互设计，体验设计。其中，界面设计就是界面的视觉样式设计，交互设计是设计功能的操作方式设计，体验设计就是围绕用户体验做改进的综合设计。

先明确强调这三件事情都属于 UI 设计师的本职工作，只不过当团队变大以后需要细分工作职能才会拆解开，但不代表作为 UI 设计师只需要关注界面就可以忽略交互和体验。就像一个大的厨房，会拆出宰杀、配菜、摆盘、站锅的不同岗位，但不代表作为一个厨师只需要炒菜就认为其它工作不在你的职责范围里。

而我们再进一步理解，什么是功能的操作方式？

比如我们要在瑞幸上点一杯 9.9 的打工人大力水去门店自提，从进入应用以后就要完成下面这些操作：

这种操作大家都很熟悉了对吧，感觉是打娘胎里就已经点上的互联网产品使用技能。虽然已经用得很熟练，但不代表这些功能天生就该设计成这样。操作的步骤是经过规划和设计以后的结果，只不过大家用习惯了，就会忽略它的存在。

想要再深刻点的感受，就可以打开星巴克、喜茶、蜜雪等，完成一遍点单流程，你就会发现虽然做的是一件事，但是操作起来就是有差异，而这种操作的差异，就是交互设计细节上的差异。

在项目设计中，团队无论如何都无法回避对交互的定义过程，因为没有交互产品就没办法正常使用。如果产品非常简单，交互方案照搬常规应用的方法就不会引起讨论和注意，但当产品开始变复杂，功能变繁琐以后，那么交互方案就必须摆到台面上做认真的分析和规划。

在专业的设计环境中，必然要先完成交互的方案，再开始视觉的设计。因为功能的操作方法是产品界面的骨架和地基，外立面设计成什么样和地基打得好不好是两回事。

所以前期就需要单独完成交互的设计，而既然是设计就肯定要有产出物，交互相关的设计产出物包含三种内容：

之所以要画原型，是因为画原型是最快最便捷的。所有说项目没时间不能画原型一定要先出界面的说法，说到底就是你们认为交互不重要，不需要单独花时间去处理。

对于复杂的操作而言，往往需要输出多套方案做对比，选出最佳的那套。否则往往也会在第一套方案完成以后发现不理想，全部推翻了重做。这个时候你们要是先出设计了，那么这些设计稿也就大多作废重来，这才叫真正的时间成本的浪费。

而画交互原型又不是简单画出几个界面的线框图就结束了，单一界面的线框图可以表示功能和流程的大致交互，但是还有很多细节是欠缺的，比如操作有不同的判断、条件、结果，所以想要表达的完整还需要添加流程图示意。

即使添加连线，很多背后的逻辑仅通过图例也说不清，所以设计师就需要对这些信息用文字做补充，确保自己能记住，其他人可以看懂。而这些添加了连线和文本的交互说明，就可以理解成交互文档。

交互文档不是真要用文档形式去表现的，只要能用图文把你的交互方案、思路讲明白的方式，都可以叫交互文档。

这就是交互设计工作中主要要输出的内容，也是任何 UI 设计师需要具备的基础能力。掌握它们本身不算复杂，但看网上的各种分享或是相关书籍，反而解释得很抽象。所以，下面我们就要再用个具体的案例来解释交互方案的设计思路。

更多美团交互分析：

二、交互实例输出的过程

这次我们要输出的交互案例是美团的神抢手下单流程，相信不少同学没少用这个功能叫外卖。

具体的原设计我们就不做分析了，直接分享从需求分析开始到交互设计输出的过程。

首先我们要从业务层面上理解神抢手的逻辑，首先用户进入神抢手模块，查看神抢手包含的“商品”列表，选中自己想要的“商品”并做出规格筛选，完成支付即可完成一次完整的服务，可以用下面的图例表示。

看起来和普通下单操作没什么区别，但我们要重点理解神抢手内添加的看起来像“商品”的东西不是最终的商品本身，而是 —— 兑换券。

而兑换券还有个逻辑，即前置购买是个券包，里面可以是一个兑换券也可以是多个兑换券（类似两张美式兑换券）。而一个兑换券下，又包含两种情况：

1. 包含单一商品(SPU)，比如兑换鸡腿堡、美式、猪脚饭
2. 包含多个固定商品(SPU)，比如作为套餐还包含鸡腿堡、薯条、冰阔落
3. 包含多个可选商品(SPU)，比如奶茶饮品 3 选 2

而最终商品本身也不是完全固定的，因为还有部分商品包含属性的选择，比如咖啡选冷还是热，加糖还是其它小料等。

理解完我们就可以做一个表格，从左到右就是它的级别，下方则放它的状态（粗略总结，不代表完整的真实情况）：

以上的分析就是业务分析，了解完业务，然后还要再分析产品的其它需求（暂时略过），然后就可以开始做方案的输出。

首先流程包含 4 个核心页面代表 4 个核心交互节点，分别是神抢手主页，兑换券详情页，兑换设置页，付款结算页。可以先将他们输出出来：

这个流程中，最核心的组件优化就是商品筛选模块，不管是一个券包下包含几个兑换券，兑换券内有几个商品，还是商品可选，都支持使用这个组件来完成的方案。

感兴趣的同学可以去线上操作一遍对比原方案应对三个不同状态下的交互方式：

大致确定好核心的页面，就可以先补充剩余的其它主要页面，跑通大致的操作流程。

在我的习惯中，做交互方案一定是先框架后细节，完成主要页面的原型并不代表完成了交互细节。所以接下来就要对细节做补充，也就是各个页面、组件不同的状态和交互反馈。

还是以这个兑换券商品筛选组件来说，它包含了下面这些条件：

1. 商品不可选，无规格
2. 商品不可选，可选规格
3. 多商品可选，无规格
4. 多商品可选，可选规格

不同条件还会包含不同的交互状态和步骤，比如商品固定且不能选规格时，只有默认和选中状态。而商品可选且可以切换规格时，就有默认、选择商品、完成选择、编辑规格等多个状态。

我们需要将每个条件下的不同交互步骤和状态都设计出来，大致结果如下：

了解这个逻辑即可，其它页面、组件的状态就不做演示了。有了样式的设计，最终靠这些图例能支撑起整个模块的交互方案说明吗？

肯定不行！即使是我自己做的，可能三天后回来看就会忘了背后的逻辑。所以但凡有时间，就必然要添加和交互相关的说明，也就是输出交互文档。

交互文档不是做个连线可交互的原型，这种演示文件只能演示一些既定的交互路线和流程，但无法呈现需要特殊条件才能触发的状态和结果。

理论上交互的设计是到这步结束，评审通过验收以后，下一步就可以开始正式的界面视觉设计了。

但是！对于项目开发而言，最佳的交互说明和示例并不是以原型为载体，而是最终的界面设计结果。因为在界面的设计过程中，往往会有细节上的优化、变动，导致最终界面和原型不一致，导致前面的交互文档缺乏说服力变得鸡肋。

所以在真实项目中，交互文档的正式输出并不仅限于设计开始之前，而是可以先做简单的备注，在完成设计后再做详尽的连线和说明进行输出，确保程序员、测试看到的是最终的准确结果。

做交互的核心目标是确保产品功能在交互层面上可以被正确的实现出来，并能被用户接受，形成尽可能好的操作体验。但具体要用什么方式表现和输出，则根据项目的实际需要判断，不要被固定的思路还是流程限制我们的思维。

结尾

项目的设计就是业务、产品、交互、视觉的衔接和组合，交互起承上启下的作用，将业务和产品要素转化成视觉的骨骼，而最后的视觉设计才进入真正由我们主导和发挥的部分。

总之，交互一直都是 UI 设计的职业组成因素，是我们工作中最重要的价值体现之一，也是 AI 完全无法替代的工作。