Web产品的交互说明文档应该怎么写?

本文是作者的一篇随笔,适合交互设计师阅读,希望能给正在学习交互的朋友一些帮助。也希望朋友们,可以提出更多很好的建议。


本文是作者的一篇随笔,适合交互设计师阅读,希望能给正在学习交互的朋友一些帮助。也希望朋友们,可以提出更多很好的建议。

Web产品的交互说明文档应该怎么写?

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

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

  • 版本说明及更新说明
  • 页面流程图
  • 信息架构图
  • 业务流程图
  • 任务流程图
  • 线框图和交互说明(这是我们今天主要说明的内容)。

下图为原型

Web产品的交互说明文档应该怎么写?

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

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

Web产品的交互说明文档应该怎么写?

Web产品的交互说明文档应该怎么写?

Web产品的交互说明文档应该怎么写?

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

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

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

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

字段说明

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

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

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

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

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

排序规则

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

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

Web产品的交互说明文档应该怎么写?

状态说明

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

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

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

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

Web产品的交互说明文档应该怎么写?

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

Web产品的交互说明文档应该怎么写?

操作说明

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

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

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

Web产品的交互说明文档应该怎么写?

反馈内容

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

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

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

Web产品的交互说明文档应该怎么写?

数据来源

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

Web产品的交互说明文档应该怎么写?

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

 

本文由 @clone 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29239/

(0)
CatherineCatherine
上一篇 2017-05-23 15:33
下一篇 2017-05-23 17:22

相关推荐

  • D1-交互设计入门

    一阶段:1.交互设计基本原则2.平台特性及其设计规范3.做交互设计的方法,工具4.掌握交互设计的基本流程二阶段:1.特定控件设计,2.特定界面设计3.独立常用功能设计三阶段:1.多项功能设计2.方法研究,总结3.竞品和优秀产品分析4.最新的系统和产品分析5.了解前段技术四阶段:1.产品架构2.设计趋势3.产品发展趋势Windows 用户体验交互设计规范http://www.uxguide.net/wiki/windows:HomeiPh...

    微信热点 2018-04-07
  • 精髓干货!一组精挑细选的用户体验设计网站和书目

    精髓干货!一组精挑细选的用户体验设计网站和书目 学校可以为你传授很多知识,但是有些职业学校教不来,产品经理、用户体验设计师、交互设计师、程序员鼓励师这样的职业都在此列。这样的职业通常都有几个显著的特性…

    2015-11-14
  • 从设计指南说起,详解Material Design体系组件

    iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
    一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

    2017-04-28
  • 设计师如何具有工程师思维?

    常常在提 design thinking, 让工程师有设计思维,但作为一个设计师,很多时候工作处理的都是交互层的东西,那如何像一个工程师一样理解一个项目呢?或者说如何具有工程师思维? 这个问题的简单回答是:根本没有“工…

    2015-05-24
  • 交互设计的那些事儿

    作者:柳强  

    2016-01-22
  • 【to 交互新人】交互小白别踩这4个坑

    作者: 负如来不负卿   交互设计小白刚踏入这个领域时总会走进一些误区,为了防患于未然一起看看过来人的经验分享吧。   一些经验分享前言 作为一个交互新人,难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过…

    交互专题 2017-08-07
  • 大产品小细节!5分钟带你了解经典的费茨定律

    金蝶云之家体验部交互设计 师-王梓铭:大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律 。

    2017-09-25
  • 新媒体人员年薪十万怎么做到的,真的难以想象

    新媒体人员年薪十万怎么做到的前些日子,和我互联网专业的师兄聊了一下,他说他们公司干活轻松,工资还高,而且公司福利还好,什么六险一金,什么妹子很多啦......卧槽,居然这么爽(我可能就听见了那句妹子很多,哈哈哈)搞得和我一起的朋友立马拍板,问我师兄你们公司还招人不,(厚颜无耻啊)我就静静的看着他,厚颜无耻的他还在继续介绍着他,说我是211硕士,之前也在世界五百强企业工作来着(看着着厚颜无耻之人,我真想立马一脚踹飞他)真的嚣张到了极点是吧...

    2018-03-13
  • 设计人员和开发人员:不要再四分五裂

    作者:阿西 前言:随着网络的飞速发展,摩尔定律的快速传播,传统的设计和开发之间的分歧越来越多地凸显。 “学会代码”运动是设计师中获得新能力的渠道,但是在其他IT的部门找到类似跨专业的学习其他业务技能的运动不常…

    2015-05-11
  • 【笔记】设计师与产品经理该如何高效地进行团队协作?

    2017年5月14日,UXRen北京分舵在北辰泰岳大厦主办了《设计师与产品经理该如何高效地进行团队协作》的分享活动,本文基于分享嘉宾朱峰现场分享整理而成。   分享嘉宾: 朱峰(现任 “蓝湖”产品负责人&联合创始人…

    交互专题 2017-08-07