作者/整理:71net.cn 来源:互联网 2015-12-28
交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。
交互文档,写给谁看交互文档可以看做交互设计师输出的”产品”,它面向的”用户”是下游的同事——视觉设计师、测试工程师、开发工程师。他们会根据文档中的线框图、交互细节说明等等,来输出视觉设计稿、写测试用例、用代码实现产品设计方案,并以此为依据完成验收测试等工作。
交互文档,写什么内容最初写交互文档时,很多人会有疑惑该写些什么内容。我的看法是,开发同事在写代码时需要考虑的与界面显示逻辑、用户操作相关的内容,几乎都要在交互文档中体现,建议越全面越好。
如果有遗漏的内容,开发可能会找你讨论,也可能懒得费时间沟通直接按照自己的理解去实现。最终,验收测试的效果不如意,你也不能全赖开发。所以尽量将交互文档写的全面些,别消费开发同事对你的信赖值。
那么,到底交互文档中,需要写哪些内容呢?
1、页面流程(界面之间)
页面流程图,可以表达产品的整体结构,帮助同事了解界面之间的关系。在撰写交互文档时,也可以以任务、子任务为模块来详细介绍界面如何跳转、何时跳转。
2、内容布局(界面内)
正在加载状态、加载完成有内容的状态、加载完成无内容的空状态、失败状态(比如网络异常/权限未开启)、不同角色的用户看到的内容是否一样、不同状态的文案图标变化
内容的加载方式,何时加载、何时显示、何时刷新
其他 …
3、交互操作与反馈(界面内)
根据用户与界面之间发生的交互操作,提供相应的反馈,可能是提示内容,也可能是界面内或界面之间的跳转。
刚入门的交互新人,喜欢把重心放在界面之间的跳转,而遗漏了界面内的内容布局和交互操作。对此,我的小技巧是,先整体看界面全局,再review界面上的每一个元素,思考各种不同场景下这些元素是否变化、如何变化。
以登录界面为例,看看怎么写交互细节说明下图,是一个简单的登录界面,我们试着先整体后部分的方式,看看这个界面的交互说明需要考虑哪些方面。
1、登录界面的跳转流程
什么情况下,从哪些界面可以进入登录界面
登录成功后进入哪个界面
取消登录后回到哪里
界面转场方式,比如从下向上进入界面,从上往下离开界面
2、账号输入框
字段格式要求,字段长度、字段类别(汉子、字母、数字、手机号)
是否有默认提示文案,如果上次登录过是否显示上次的账号
光标是否置入此输入框,键盘是否显示,键盘用哪种视图
何时检测用户填写的是否正确,填写正确的提示,填写错误的提示,反馈提示何时显示、何时消失
输入框中的内容是否支持一键清除
3、密码输入框
字段格式要求
何时检测格式是否符合
光标置入后显示键盘的哪种视图
输入框中的内容是否支持一键清除
是否支持密码可见、如何切换可见状态
4、登录按钮
按钮是否有可用不可用之分,何时可用状态、何时不可用状态
点击按钮之后提示正在登录的方式
登录成功如何提示、跳转进入哪个界面
有哪几种登录失败的场景(比如账号未注册、网络异常等),不同失败的情况下如何提示
多次登录失败提示方式是否变化
5、注册按钮
点击进入哪个界面
界面的转场方式是怎样的
6、关闭按钮
点击进入哪个界面
界面的转场方式是怎样的
以上只是抛砖引玉,给大家打开思路。虽然只是几个输入框,但其细节比大多数界面都要复杂。你可以找一款优秀的APP,去研究它如何设计这些细节,是否还有我没有提到的点,研究透了下次自己设计才能做到更加全面。
当然,交互细节说明,只是方案的表述,每一个小点都有好几种设计方案。如何权衡选择体验更优的方案,才最是考验交互设计师的能力。你可以对比研究几款优秀产品,看它们在细节设计有何不同,分析其中的缘由,想想是否有更好的方案,学无止尽。
如何提升交互文档的浏览体验交互设计师的目标是提升产品的体验,我们输出的文档本身也应该有上佳的浏览体验。为了达到这个目标,我也在不断优化文档的撰写方式和排版。下面聊聊我尝试过的几种方式。
方式1:一页纸表示所有的线框图,配上箭头+简单的文字说明