交互设计详细说明文档

时间：2012-08-01 来源： 阿里巴巴良无限UPD团队  做者：阿里巴巴良无限UPD团

　现状分析

　　目前交互设计师产出的原型图缺乏详细的说明文档，易形成沟通成本大及质量风险，这也是咱们去作这件事的初衷。

　目标及收益

　　1.专业输出物，提高自身专业度

　　2.与开发团队合做更默契，减小沟通成本且尽可能避免信息遗漏与理解误差，开发团队可共同参考

　　3.界面验收时的清单(前端开发的demo评审\项目功能预演\项目测试)

　　4.项目改版或换设计师时便于查阅

　说明具体内容?

　　1 复杂页面间逻辑操做与复杂单页面的操做逻辑

　　2 字符限制(必填选填 \ 字符显示数量)

　　3 连接与按钮指向

　　4 交互细节说明

　　5 校验

　　6 文案

　　7 需求调整

　举例

　　1 复杂页面间逻辑操做与复杂单页面的操做逻辑

　　(1)复杂页面间的逻辑关系

　　(2)复杂单独页面的逻辑

　　2 字符限制

　　(1)页面必填字段应标注说明，统一在字段前标注“*”，选填无需特别标注

　　(2)为提升空间利用率，某些表格单元格内仅显示预览字段，更多信息须要滑过以tips的形式显示全。

　　说明需传达清楚：1.是否作限制2.若是限制，多少字出现截断3.截断后是显示为省略号仍是不显示

　　3 连接与按钮指向

　　(1)你须要将页面上的每一个关键连接事件或每一个按钮事件标识清楚。它们有的指向你安排的某个页面，有的操做产生了一个结果反馈……(page flow—页面流是交互设计师的职责)

　　(2)注意操做有时受状态影响，也须要将其对应关系标注出来

　　4 交互细节说明

　　你能够在这里说明任何你想要的效果。你的合做者也只需用10分钟时间阅读完毕，标注出与他工做相关的重点。找不到你人时随时可作参考。(图片来源于hedi alibaba国际站交互说明图)

　　5 校验

　　表单或列表里经常会出现校验，它一样起到引导用户的做用，有没有特殊格式限制?字数限制?这里的触发需不须要联动校验?如“请输入正确的邮件格式“等

　　6 文案

　　(1)操做提示信息文案，如操做成功，弹出“选品表提交成功“;或引导提示类信息，如：

　　(2)字段的名称需推敲，特别注意产品里相同释义字段需统一;但也不能一律而论，如什么时候叫“货品”，什么时候叫“商品”

　　7 需求调整

　　请标注修改提出人、修改缘由、详细修改内容及波及到的相关全部页面，好比一个字段的调整可能会波及到相关不少页面的调整

　　一些重要的事

　　●完美的标注文档，永远没法取代面对面的沟通

　　●文档是为解决问题

　　●标注形式你们看明白便可，或者你有什么更好的经验，记得分享

　　●小项目或小需求，针对交互交付物规范，我的以为不能仅仅由于时间而折扣，敏捷永远不能以损失质量为前提

　　两种解决方案：

　　1.交互设计师评估更多时间用来我的完善说明文档

　　2.与前端同窗根据实际状况面对面沟通落地规范取代逐一标注

　　●两个角色，交互是主要撰写者及维护者;前端开发是意见提出者与修订者，可以有效解决设计和前端可行性的冲突