交互说明文档格式优化

人人都是产品经理 10-16 91

前言：

当前姐妹们对“超链接修改内容指定内容也修改”大体比较讲究，姐妹们都需要学习一些“超链接修改内容指定内容也修改”的相关资讯。那么小编在网摘上收集了一些对于“超链接修改内容指定内容也修改””的相关内容，希望你们能喜欢，咱们快快来了解一下吧！

在我们提交的文档中，如果细节做得好，能提高工作效率，让团队配合更默契。本文就分享了交互说明文档中可以注意的一些细节，供大家参考。

互联网讲究快速迭代，通常设计改动的地方也不是特别多，我也能得心应手的处理好。

之前经历了一次不能拆分的复杂功能改版，从产品设计到开发上线全面翻车，苹果市场卡了 1 个月才通过审核。项目结束之后团队坐在一起复盘，除了协作流程的问题，也有交互说明文档在复杂项目中写得不够清晰的原因。

基于此，我重新制定了新的交互说明文档格式，目前在团队内使用正常，在此分享给各位读者。

一、界面和交互说明左右布局

以前我们界面和说明摆放位置是参考的大厂的文档，上方为界面，下方为对应的说明。

开发测试同事和我们反馈，因为每个页面的界面都是左右摆放，所以他们习惯用横向滚动条查看同页面屏幕外的内容，根本不会注意竖向滚动条，放在界面下方的说明如果超出屏幕高度根本注意不到。

由于前端/客户端开发同事习惯了 zeplin 等切图标注软件左界面右边对应参数的布局，希望我将界面和交互说明左右布局。

UI 切图标注软件界面

另外，要在交互说明找到界面对应标记的文字很累。

基于以上反馈，我将界面和交互说明改为左右布局，并将交互说明按元素拆分，界面标记和交互说明左右一一对应。

二、更清晰的交互说明1. 交互说明专有名词标点符号规范

交互说明里经常提到某个页面、某个按钮等元素，一旦提到的元素很多，混在说明文字里看起来就特别累。因此我参考了 @叫我vitamin 的《产品文档中，特殊标点符号的使用建议》，对说明中提到的各种术语进行规范：

当描述的内容包含某个菜单页面的时候，建议使用「」（Mac默认输入法中文情况下shitf+{}可以打出这个符号，第三方输入法设置下也可以打出来）或者“”，后面增加名词修饰。当描述的内容包含了某个页面下的 Tab 信息或状态的时候，建议使用「」或者“”，后面增加名词修饰。当描述的内容包含某个新增的字段的时候，建议使用反引号（‘code’）来表示。当描述的内容中需要点击某个按钮或者使用某个功能的时候，建议使用来表示，不建议使用「」是怕直角引号太多，代表的含义太杂引起阅读负担。

举例：先打开用药助手的「会员购买页」，然后点击“专业版购买”tab，选择对应的价格，点击【支付并购买】。需要新增‘次月30月’字段。

2. 交互说明分类

光用对标点符号还不够，同事将交互说明进行分类，不同的内容写到不同的分类下，这样更清晰。

3. 交互说明可视化

即使长段文字写得再清晰，也没有人乐意去看。图像和视频是更吸引人、更容易理解的方式，因此我将一些涉及到逻辑判断的交互说明由文字改成流程图。

对于表单这种形式，每次都必须写输入框占位符、软键盘类型这些，提交按钮也肯定涉及到字段不对的判断，其实这些很重复，也会导致说明文字写得特别长。因此我将此规范成 2 个表格，写的人和看的人都轻松了不少。

推荐大家多看看说明文字里格式重复部分，合理运用图示和表格效果非常显著。

三、页面拆分规则

为了需求拆分评估工期和调整需求（开发砍需求）方便，尽可能地把页面拆细一些。这样突然要调整需求，直接隐藏部分页面就可以了，都不用改。

基于以往经验，为了让交互稿看着更清晰，原则上每个页面尽量不超过 6 个界面，界面只能一个横排展示，禁止多行。

拆分规则可参考如下：

将不同的界面拆成不同的页面：适用于界面本身有很多状态，说明非常多的情况。