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

相关推荐

  • 尼尔森交互原则,讲的到底是什么?

    这几天,脑海里面一直回绕着一个声音,尼尔森,尼尔森交互,尼尔森交互十大原则。blues老师的讲解至今让我记忆犹新,如果真的让我选择一款产品进行尼尔森交互分析,我想应该就是简书了。

    2017-06-01
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 如何让你的设计方向不跑偏:Vision in Design方法解析

    作者:肖又歌( frog 交互设计师)   很多时候,在设计项目的初期,设计团队只有一个设计的大方向和一些关键词,但是整理不出来思路。抑或是脑子里已经有一个新的点子,但是论据不足,无法充分支持设计的合理性。这…

    交互专题 2017-08-07
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 创先争优|张迪:创业艰难,但梦想会让你永远保有对生活的热爱

    争先创优为全面贯彻党的教育方针,鼓励研究生勤奋学习、自强不息、积极实践、勇于创新,促进优良校风学风建设,培养德、智、体全面发展的高层次复合型人才,学校结合实际,研工部于2017年10月-11月组织开展了重庆大学2016至2017学年度研究生“争先创优”评选。为响应学校号召,UMD研究生网络文化工作室根据工作安排,特推出重庆大学“争先创优”优秀研究生人物志系列活动,从中挑选一批先进研究生代表,通过微博、微信、网站、电子显示屏等网络宣传平台...

    2018-03-01
  • UI设计案例分析:现代互联网和移动应用中出现的一些优秀的用户界面模式

    在这篇文章中,来自UXPin(一款用户体验设计的应用程序)的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式,并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

    2017-06-05
  • APP设计:那些打动人心的设计点(二)

    上周写了一篇文章《APP设计:那些打动人心的设计点》,总结了八个APP的小设计点,这些小设计点不是针对APP的核心业务和功能的设计,但会给用户带来一点小便利和小惊喜,就像电影最后的彩蛋,让人期待而心动。紧接着上篇,我们继续说说那些打动人心的APP设计。

    2017-05-05
  • 称职的用户体验设计师必须注意的九件事情

    “不论你即将开始的设计项目是怎样的,你都需要预先对你的目标用户有清晰的勾画。”“如果你所设计的系统需要解释才能让人明白,那么这个系统本身就是崩坏的。如果你的用户需要通过你提供的系繁复的说明才能玩转这个产品,那么这个设计明显是不合格的。”“我们喜欢将UX视作科学,然而现实世界中它更接近于艺术。过去15年的经验告诉我们,用户与整个系统的交互依然是难以预测的。用户依然会每天给我们惊喜。某个你觉得超级好用的东西,在某些人眼中依然是反人类的设计。”“在互联网时代之前,人们通过遥控器上真实的按钮来操控设备。在设计中充分借鉴和模拟之前的交互体验是很有必要的,因为人们习惯于这样的操作,这样他们会明白如何使用你的产品。”“让真实的用户尽早参与到测试中来,而不是等到产品已经开发结束并耗费了大量资源之后积重难返。”“用户并不想被选择所轰炸。”

    2017-05-28
  • 从这几个案例入手,学会设计APP注册流程

    从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。

    2017-05-25
  • 10种交互设计小技巧抓住用户注意力

    如今,设备的屏幕正变得越来越小。主要的挑战在于在有限的屏幕范围内提供优秀的用户体验。 简单来说2015年的移动设计趋势将是在传递更多信息的同时,尽量保持设计的简单。让我们来看看这些应用是如何抓住用户的注意…

    交互设计 2015-09-02