一、交互设计的基本说明
在 UI 设计师的工作范畴中，包含三种紧密关联的设计类型：界面设计、交互设计与体验设计。其中，界面设计聚焦于界面的视觉样式打造，交互设计专注于功能操作方式的规划，体验设计则是围绕用户体验进行的综合优化。
需要明确的是，这三项工作均属于 UI 设计师的本职职责。只不过当团队规模扩大后，为了提升效率会对职能进行细分，但这绝不意味着 UI 设计师只需关注界面设计，而可以忽视交互与体验设计。这就如同一个大型厨房，会细分出宰杀、配菜、摆盘、掌勺等不同岗位，但作为厨师，不能因为自己负责炒菜，就认为其他工作与自己无关。
那么，我们进一步思考，什么是功能的操作方式呢？
以在瑞幸点一杯 9.9 元的 “打工人大力水” 并到门店自提为例，从进入应用到完成下单，需要一系列操作流程。这些操作对大家来说或许早已熟稔，仿佛是与生俱来的互联网产品使用技能。但实际上，这些功能的操作方式并非天生如此，而是经过精心规划与设计的结果，只是由于大家习以为常，才忽略了其背后的设计逻辑。
若想更深刻地体会这一点，可以尝试在星巴克、喜茶、蜜雪冰城等应用中完成一次点单流程。你会发现，虽然都是点单这件事，但操作过程却存在差异，而这种差异正是交互设计细节不同所导致的。
在项目设计中，团队无论如何都绕不开对交互的定义环节，因为没有交互，产品就无法正常使用。当产品较为简单时，交互方案若照搬常规应用的模式，往往不会引发关注和讨论；但当产品变得复杂、功能趋于繁琐时，交互方案就必须被提上日程，进行严谨的分析与规划。
在专业的设计环境中，必然是先确定交互方案，再开展视觉设计。因为功能的操作方式是产品界面的骨架与地基，界面的视觉呈现与地基的稳固程度是两个独立的维度，前者无法弥补后者的不足。
因此，前期需要单独完成交互设计，而设计必然要有产出物。交互设计的产出物主要包括三种：交互原型、流程图与交互说明文档。绘制原型是最为快捷高效的方式，那些以 “项目没时间” 为由，主张跳过原型直接设计界面的说法，本质上是对交互设计重要性的忽视，认为无需为其单独投入时间。
对于复杂的操作流程，往往需要输出多套方案进行对比，从而选出最优解。否则，很可能在第一套方案完成后发现存在缺陷，不得不全部推翻重做。若此时已经完成了界面设计，那么这些设计稿大多也会作废，这才是真正的时间成本浪费。
而且，绘制交互原型并非简单画出几个界面的线框图就大功告成。单一界面的线框图虽能大致体现功能和流程，但许多细节，如操作的判断条件、结果等却无法展现。因此，需要添加流程图进行示意，对于仍无法通过图例说明的逻辑，设计师还需用文字补充，以确保自己能清晰记忆，他人也能准确理解。这些添加了连线和文本说明的内容，便可称为交互文档。交互文档并非一定要采用特定的文档形式，只要能通过图文清晰阐述交互方案与思路的方式，都可算作交互文档。
这些正是交互设计工作的主要产出，也是每位 UI 设计师必须具备的基础能力。掌握这些能力本身并不复杂，但网上的相关分享或书籍往往解释得较为抽象。因此，下面我们将通过一个具体案例，来阐释交互方案的设计思路。
二、交互实例输出的过程
我们以美团神抢手的下单流程为交互设计案例进行说明，相信不少人都使用过这个功能点外卖。我们不分析其原设计，而是直接分享从需求分析到交互设计输出的完整过程。
首先，从业务层面理解神抢手的逻辑：用户进入神抢手模块后，查看商品列表，选中心仪商品并完成规格筛选，最后支付即可完成一次完整的服务。这一流程看似与普通下单操作相似，但需要重点注意的是，神抢手模块中看似是 “商品” 的物品，实际上是兑换券。
兑换券存在特定逻辑：前置购买的是券包，其中可包含一张或多张兑换券（例如两张美式咖啡兑换券）。而一张兑换券又有以下几种情况：
- 包含单一商品（SPU），如鸡腿堡、美式咖啡、猪脚饭等；
- 包含多个固定商品（SPU），如包含鸡腿堡、薯条、冰阔落的套餐；
- 包含多个可选商品（SPU），如奶茶饮品 3 选 2。
此外，最终商品并非完全固定，部分商品还涉及属性选择，例如咖啡的冷热、糖分及小料等。
在完成业务分析后（产品的其他需求暂不展开），便可开始输出方案。
该流程包含 4 个核心页面，对应 4 个核心交互节点，分别是神抢手主页、兑换券详情页、兑换设置页、付款结算页。我们可先将这些核心页面输出：在这个流程中，最关键的组件优化是商品筛选模块，无论券包包含多少兑换券、兑换券内有多少商品，或是商品是否可选，都可通过该组件来实现筛选。
感兴趣的同学可以在线上操作一遍，对比原方案在三种不同状态下的交互方式。在大致确定核心页面后，需补充剩余的主要页面，打通整体操作流程。在交互方案设计中，我的习惯是先搭建框架，再完善细节。完成主要页面的原型并不意味着交互细节的敲定，接下来需要补充各个页面、组件的不同状态和交互反馈。
仍以兑换券商品筛选组件为例，它包含以下条件：
- 商品不可选，无规格；
- 商品不可选，可选规格；
- 多商品可选，无规格；
- 多商品可选，可选规格。
不同条件对应不同的交互状态和步骤。例如，当商品固定且无规格可选时，仅存在默认和选中状态；而当商品可选且可切换规格时，则包含默认、选择商品、完成选择、编辑规格等多个状态。
我们需要设计出每个条件下的不同交互步骤和状态（具体设计结果此处不详细展示）。但仅靠这些图例，能支撑起整个模块的交互方案说明吗？
显然不能。即便是设计者本人，三天后再回看也可能忘记背后的逻辑。因此，只要时间允许，就必须添加交互相关说明，也就是输出交互文档。需要注意的是，交互文档并非可交互的原型演示文件，因为演示文件只能展示既定的交互路线和流程，无法呈现特殊条件下的触发状态和结果。
理论上，交互设计到这一步就已完成，待方案评审通过后，便可进入正式的界面视觉设计阶段。
但对于项目开发而言，最佳的交互说明和示例并非交互原型，而是最终的界面设计结果。因为在界面设计过程中，往往会对细节进行优化和调整，导致最终界面与原型存在差异，此时若仍以原型为说明载体，就会缺乏说服力。
因此，在真实项目中，交互文档的正式输出并非仅在设计开始前，也可先做简单备注，待界面设计完成后，再补充详尽的连线和说明，以确保程序员和测试人员能获取准确的信息。
项目设计是业务、产品、交互与视觉的有机结合，其中交互起着承上启下的作用，它将业务和产品要素转化为界面的骨架，而视觉设计则是在此基础上的进一步呈现。
总之，交互设计始终是 UI 设计的重要组成部分，是 UI 设计师价值的重要体现，也是 AI 无法替代的工作内容。
