B端产品的交互思维与设计说明

       针对一对一个性化定制的B端产品，鲜有竞品参照，大到行业小到公司个体，业务多少都不一样。这时，只有对业务各个场景有详细的了解，你才能做出符合业务的交互设计，减少开发的返工。即B端产品的交互思维来源于你对业务场景的了解。

       真正让我重视交互设计是我的测试工作，多次的测试失败（测试不全面，上线了用户反馈出新问题），加上师傅的引导，我开始思考为什么测试不严谨。一直被师傅吐槽逻辑感很差（emmm......），逻辑？是的逻辑漏洞，但归根到底还是对用户的使用场景了解的不够全面。用户万分之一会触发的可能情况，我们都要在测试中操作一遍，看是否能正常操作，是否有提醒，界面呈现的结果是否正确。

       那从测试往前推，不难发现，实质对于0-1项目的搭建，一开始的界面交互设计和交互说明文档至关重要， 并且好的交互设计/说明可以大大降低与开发的沟通成本以及开发对该项目的理解难易程度，以便能较准确地预估实施难度，比如需要调取哪些数据表等，从而尽快进入开发环节。

       好的交互对开发来说是逻辑的完整性，对用户来说是体验的流畅性。交互说明是PM前期需求分析、用户调研、界面设计落实到纸质上的一种呈现方式。

那一份完整的交互设计文档该如何实现？我们可以从以下三个步骤着手编写：

一、梳理清楚功能逻辑

1. 梳理业务流程图

       它可以帮助我们站在开发角度，确定功能涉及到数据上的增删改查，包括单页面和多页面间的数据流向。通过和开发沟通业务流程图，提前将技术问题梳理清楚，避免功能设计后技术实现困难或根本实现不了。

2. 明确需求出现的所有场景

       这需要我们运用逻辑思维穷尽需求可能发生的所有情况，这是一个非常考验逻辑完整性的过程，我们可以通过脑图软件帮助我们遍历场景。

二、面向对象分析功能属性

       学习开发思维，使用面向对象思想分析功能属性，帮助我们最大限度的避免疏漏。

1. 列举功能的所有属性

2. 确定修改属性的交互事件

3. 确定修改后的属性

面向对象分析思路

三、输出设计规范文档

1.页面整体说明模块

   a. 页面整体的排版布局（比较直观可不写，特殊点可注明细说下）

   b. 相同的交互方式，比如弹窗、新标签页等

2. 对象

   用户身份和系统功能页面紧密相关。比如某申请流程中的申请者和审批者。

3. 限制

   a.范围值：比如列表超过10项出现滚动条

   b.极限值：比如某个字段文字超过展示极限值才有缺省，hover气泡展示全部

4. 表单校验

   表单校验逻辑：是实时校验还是触发按钮后做校验，还是两者结合，表达清楚逻辑并将相关的提示和反馈描述清楚。

5. 操作与反馈

   a. 操作：

       交互方式：点击、拖动、长按、缩小、放大等

       文本框等：获取焦点、失去焦点，比如输入时出现下拉列表等

       热区范围：比如列表展示形式可将序列标题或者序列某一范围作为可触发操作的区域

   b. 反馈：

       提示内容：系统对用户操作的及时反馈，比如报错提示、失败提示、成功提示等

       提示形式：提示的控件样式，比如警告框、确认弹框等

       跳转：跳转形式是当前窗口/新窗口？跳转到哪里？写清楚标号或者页面名称

6. 状态变化

   a. 默认：

       默认选项选中

       默认显示的文案

       默认排序方式

   b. 正常：

       正常场景下的操作带来的变化，比如点击表格的表头排序

   c. 特殊：

       特殊功能，比如点击查重功能

       特殊场景，比如无数据情况、加载失败、网络错误

最后 配合开发进行业务梳理：

1. 复杂业务逻辑的梳理

2. 所有交互逻辑的梳理

3. 所有文案的梳理

4. 页面流程图的梳理（前提：跨页面设计）

举个笔者最近设计的案例：添加推荐机构及顾问

前言：教育培训行业 学生是由某机构的某顾问推荐而来，本公司课程顾问在录入该学生信息时，需要选择某机构某顾问，结果发现系统没有该机构该顾问信息，需要进行添加。

一、梳理清楚功能逻辑

业务流程图 功能可能出现的场景

共3种场景，整理如下：

场景1：无该机构，无该顾问，要添加机构，添加顾问（该顾问附属于该机构）

场景2：有该机构，无该顾问，要添加顾问（该顾问附属于该机构）

场景3：无该机构，有该顾问，要添加顾问（该顾问不附属于任何机构，是独立顾问或校内顾问）

       场景2：类似于场景1，优化方案是先选择列表里已有的该机构，再添加该机构下的顾问。

       场景3：属于特殊场景，为了让用户准确将顾问定位于对应机构（防止不同机构有同名顾问，不知选择哪个顾问，这也属于查重机制），所以机构类型里添加了独立顾问/校内顾问，需要先选择独立顾问或者校内顾问，再添加该顾问。

二、面向对象分析功能属性

面向对象分析思路

三、输出符合设计规范的文档

参照上述说明，在此举例：

1.页面整体说明模块

   点击“+”,跳出弹窗，添加推荐机构/顾问

4.表单校验

   在选择已有机构情况下，添加顾问时实时校验是否重名

5.操作与反馈

   a. 操作：

       添加顾问未添加机构，点击确定按钮时，弹出警告框，提示：机构名必填。

   b. 反馈：（失败场景的toast文案）

       a. 不填写/不选择已有机构直接点击提交或者清空已填写/已选择机构：机构名必填；

       b. 添加已有机构的同名顾问：该机构中已有同名顾问，请核实；

       c. 选择已有机构不添加顾问：顾问不能为空。

6.状态变化

   推荐机构的下拉列表默认前两项是独立顾问/校内顾问。

小结

       工作上多学习优秀产品和多复盘自身设计，空余时间多读优秀书籍和文章。长期坚持下来，我们的交互设计能力一定能有阶梯式的提升。从表象判定交互思维的提升，大概就是你的设计稿越来越易被开发理解，同时这也让你的设计越易让业务方可接受。

       好啦，本次文章就到这里啦~大家若想了解更多产品知识，欢迎关注我的微信公众号O(∩_∩)O~，让我们一起成长！