常见交互说明整理

在交互设计师的输出的交互设计文档中，除了流程和原型图外，另外很重要的一部分就是交互说明。本文想通过19年的工作整理一些常见的交互说明来提高工作效率和后续检查标准。

笔者主要将交互说明分成三类：页面元素说明、交互逻辑说明和特殊状态说明。

一、页面元素说明

页面元素主要是页面的内容元素，如：字段、列表、按钮输入框等等，其交互说明是对显示规则进行定义。

1.1字段

（1）截断规则：按宽度截断，最多n行，超过指定宽度用...表示；按字数截断，最多n行，超过指定字数用...表示。

（2）数字类型字段显示规则：常见的数字字段主要是时间、数值（如阅读量），针对这两种类型的有统一的规则。

如时间显示规则：0=<t<=1min:刚刚；1=<t<=60min：t分钟前（t取整）；1=<t<=24小时：t小时前（t取整）；1=<t<=30天：t天前（t取整）；1月=<t：YYYY-MM-DD（年月日）。

如数值（如阅读量）显示规则：n=0，不显示数字；0=<n<=9999，直接显示数字；n>=10000，x.x万，如：3.2万、2387.4万。

（3）字段因操作而变更的显示规则：如按钮文案，默认/未操作时文案为「新增」；操作成功后变成文案为「编辑」；

1.2列表

（1）显示规则：无数据时如何显示；列表数量存在限制，超过限制时更多内容是当前页面展开还是跳转页面。

（2）排序规则：按热度排序；按时间排序。

（3）加载规则：加载形式标明：常见加载形式有滚动加载、懒加载、被动点击加载等；加载数据量标明：如1次加载n条数据；

1.3按钮

（1）显示规则：默认状态是隐藏还是未激活；如何激活；

（2）操作规则：点击后跳转说明；点击后文案是否变更；

1.4输入框

（1）缩放规则：高度自适应；高度固定，超出使用滚动条；单行文本框，超出变5行文本框，再超出使用滚动条，删除多行，文本框不会变回单行文本框；

（2）唤起键盘标明：文字键盘还是数字键盘标明；

（3）显示规则：未输入时——描述文字（如极值标明，不能超过24个字符）；激活-输入时——掩码/明文输入（如密码输入）；显示清除按钮，点击可清除关键词并隐藏按钮；输入后——输入错误时提示（如手机号不存在）；超过输入限制提示（如已超过字数上限、不能超过N个字）

1.5浮层

（1）出现形式：从下方往上滑出

（2）高度规则：高度自适应；高度固定，超出使用滚动条；存在最大高度（ui规定），未超过该高度根据...数量自适应高度，超过该高度使用滚动条。

（3）关闭操作交互形式：点击关闭按钮可退出浮层；点击蒙层区域也可退出浮层。

1.6tab

（1）操作交互形式：tab切换时锚点定位；手势左右滑动时，tab跟着切换；

1.7toast

（1）显示规则：显示2秒，2秒后自动消失

二、交互逻辑说明

交互逻辑主要是用户在界面进行操作时，产品对于用户操作的逻辑说明。主要总结为触发、反馈

操作手势等。

2.1触发：触发其实也可以看成是下一步的操作反馈，主要交互说明可以是：如何被触发；出现形式是什么；如何消失等。如点击xx按钮，从页面下方向上滑出浮层，操作后浮层消失；

2.2反馈

（1）跳转页面说明：前进跳转至哪个页面；返回，若前有多条路径可到达该页面，则返回时标明应返回至调用功能页；

（2）状态变更说明：文案变更，如按钮文案，默认/未操作时文案为「新增」；操作成功后变成文案为「编辑」）；页面变化，如删除某一条目时，该条目消失，后面的条目上移；

（3）操作提示说明：操作成功/失败/错误提示说明；内容为空的提示说明；

（4）页面加载说明：加载形式标明：常见加载形式有滚动加载、懒加载、被动点击加载等；加载数据量标明：如1次加载n条数据；

2.3操作手势：常见的手势为点击、滑动，当出现如双击、长按、夹捏等其他手势时要标明。

三、特殊状态说明

3.1异常状态

（1）二次确认：如删除时需要进行二次确认。

（2）服务器错误/网络异常/执行时间过长等说明。

3.2空状态

（1）空页面样式说明：如空页面文案说明「暂无#内容#」；如无搜索结果「没有找到结果 请简化搜索条件或确认数据是否存在」。

3.3极值

（1）极值标明：如不得超过24个字符，0/200；

（2）超过极值提示：如最多选择9张照片；已超过字数上限；

四、其他规则说明

4.1点击热区标明：如删除操作的点击区域；

4.2按钮置顶/吸底标明：如划出屏幕时控件吸顶；

4.3动效/音效标明；

本文仅列举了一下笔者在19年工作中一些常见的交互说明整理，希望对大家有所帮助，end～