这样的web端交互设计文档可以提高开发效率

经常与开发同学聊天，他们说有一个详细的说明文档可以帮助他们更准确的进行工时评估，还可以帮助他们提高工作效率，减少多余的思考时间。因此在这里分享一些制作交互说明文档的经验。

我先说说说交互原型包含哪些部分？

• 版本说明及更新说明

• 页面流程图

• 信息架构图

• 业务流程图

• 任务流程图

• 线框图和交互说明（这是我们今天主要说明的内容）。

下图为原型

原型通常分为低保真原型和高保真原型，交互说明文档则是对原型说明的部分。我们在看到交互原型的时候，很难看到原型后面的交互逻辑，即使原型的交互操作做的非常详细，看原型的人还是不能很快知道全部的内容。我们把交互的所有操作全部罗列出来，可以让查看的原型的人能很快的理解你的交互流程。

所以交互说明是原型中不可缺少的一部分。交互说明会让原型看起来更专业，也让开发同学更好的理解。下图为交互说明的一个案例

有的交互设计师喜欢用动态效果来代替交互说明，这样的方式会给开发同学照成一定的困扰。浏览原型的人需要逐一操作才能看见效果，一旦有某个地方没有操作到，就可能会遗漏。

文字说明则可以让开发同学清晰、快速地看到全部的动态说明，各种情况一目了然。

在时间允许的情况下，建议采用交互说明与动态效果相配合的方式，这样也会相得益彰，更容易开发同学理解。

交互说明文档应该说明哪些内容呢？

字段说明

字段说明包含字段长度、字符说明、取值范围。

1. 字段长度主要包括字段的最大长度和最小长度。比如手机号码字段最长为11位。

若字段的最大长度大于界面可显示区域的宽度，则需说明超出区域的样式。比如，最多应该显示多少字数，超过时如何显示，是否折行等。

2. 字符类型主要是指此字段的输入类型。比如手机号码为纯数字，数据库字符类型应为int（不需说明数据库类型）。

3. 取值范围主要指数据的取值范围。比如，界面上出现下拉菜单，交互说明文档需要说明下拉菜单的选项内容，否则会增加一定的沟通成本。

排序规则

排序规则主要包含列表的排序规则。

比如产品列表，默认的排序规则是根据时间降序排序。

状态说明

状态说明包含初始状态、常见状态和特殊状态。

1. 初始状态主要指显示的文字、数据、选项最开始的状态。用户在新打开一个APP时，初始状态是未登录的；在登录后，初始头像是系统默认的；

2. 常见状态主要指某一板块的正常状态。用户对文章进行评论，有评论内容的界面则是常见状态。

比如登录入口，一般会出现2种状态：未登录状态、登录状态。

3. 特殊状态一般指非正常情况下的样式、文案以及说明等。比如在刷新文章列表时，手机断网加载失败，这时就属于特殊状态；

操作说明

操作说明包含常见操作、特殊操作、误操作、手势操作。

常见操作主要指正常操作时得到的反馈状态。比如一个按钮，在鼠标移入和移出时不同的样式。

特殊操作主要指一些极端情况下的操作。

反馈内容

反馈主要指用户操作后得到的反馈动作，包含提示、跳转、动画等。提示主要指操作后，系统反馈给用户的文字说明等。

设计师需要在原型上著名跳转时是“原页面刷新”还是“新页面打开”。

此外，还需要注明在界面的不同位置以不同手势操作时，会跳转到哪里。

数据来源

数据来源主要指列表内数据来源的说明。告诉开发同学根据什么条件从数据库里取数据。

非常感谢您的浏览，如果您有更好的建议，请在下方留言，谢谢。

欢迎小伙伴加微信yw5201a1交流，

更多干货可关注微信公众号：chanpinliu880

作者：Clone    來源微信号：caolonghd

帮你成长

我之前也创立过产品经理学习交流群，那个时候由于人数少，大家讨论也蛮积极的，但是微信群讨论的一大弊端就是无法将谈论的知识提炼出来，干货内容渐渐被口水话淹没，所以我建立了一个知识星球（原小密圈），在这里我会分享自己的思考感悟，你有问题可以随时像我发起提问，同时别人提的问题你也能看到，更重要的是你不论什么时候看这个回答它都在！

同时大大老师以后所有的live，小密圈的同学都可以免费学习。

为了更好的服务知识星球的小伙伴，大大老师将会在知识星球发表一些干货文章和音频供大家学习，当然这些内容公众号是没有的。

知识星球规则：

1、费用：为了保证社群的质量和活跃度，需要先付款99元，签到后会返还。

2、返还费用：连续签到3天返还30元，连续签到5天返还50元，连续签到7天返还70元。

下图是返还凭证：

2、签到形式：可以是你的产品感悟，也可以是你学习中遇到的问题，也可以是你回答别人问题。（把你的感悟记录下来，把你遇到的问题提出来，帮助解决别人遇到的问题，这个过程就是成长，切记不要潜水，好歹你也是付费进来的）。

3、奖励：每周抽取最活跃的用户，（提出的问题+发表的产品感悟+回答别人问题）总数最多，即有可能获得现金红包、PRD文档、面试简历模板、原型文件等不同奖励形式。

奖励凭证：

邀请5个小伙伴加入，则本人加入的费用免除，并同时获赠68元现金奖励，当让为了保证群质量，邀请的小伙伴需要付费加入。

4、广告：社群内禁止发广告，否则即使付费，也要被T出去，如果想发广告，加入上课群，并红包走起，想加入上课群，加微信yw5201a1，拉你入群。

之前付费进入产品经理学习群的小伙伴，可以加微信（yw5201a1），免费拉你入群。

长按下方二维码加入我们吧！

送福利：截至下周一评论区点赞数最多的前5名，可以找我（加微信yw5201a1）领一份私密课干货视频，视频内容任选哦！

往期精彩文章

点击“阅读原文”

即可进行系统的学习