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

经常与开发同学聊天,他们说有一个详细的说明文档可以帮助他们更准确的进行工时评估,还可以帮助他们提高工作效率,减少多余的思考时间。因此在这里分享一些制作交互说明文档的经验。
我先说说说交互原型包含哪些部分?
版本说明及更新说明
页面流程图
信息架构图
业务流程图
任务流程图
线框图和交互说明(这是我们今天主要说明的内容)。下图为原型
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

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

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

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

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

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

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

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

排序规则

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

比如产品列表,默认的排序规则是根据时间降序排序。
在这里插入图片描述

状态说明

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

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

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

比如登录入口,一般会出现2种状态:未登录状态、登录状态。
在这里插入图片描述
3. 特殊状态一般指非正常情况下的样式、文案以及说明等。比如在刷新文章列表时,手机断网加载失败,这时就属于特殊状态;
在这里插入图片描述

操作说明

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

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

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

在这里插入图片描述

反馈内容

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

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

此外,还需要注明在界面的不同位置以不同手势操作时,会跳转到哪里。
在这里插入图片描述
数据来源

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/335342.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux类似360软件,linux下有什么类似鲁大师查看电脑配置的软

满意答案drqyna2017.05.26采纳率:40% 等级:11已帮助:5455人linux如何查看系统的硬件配置如何在linux系统下查看系统配置?在图形模式下我们可以很方便的利用Linux的图形工具,点击几下就可以查看到Linux系统的的硬件信…

thinkphp json_原创干货 | Thinkphp序列化合总

听说转发文章会给你带来好运最近Thinkphp几个版本都出了反序列化利用链,这里集结在一起,下面是复现文章,poc会放在最后01Thinkphp5.1.37环境搭建composercreate-project topthink/think5.1.37 v5.1.37poc演示截图调用链单步调试漏洞起点在\th…

笔记本能安装联想智能云教室吗_挑战Jupyter Notebook:云协作、云硬件,上云的Notebook编程环境...

对全世界的 Python 高手而言,Jupyter Notebook 是目前最流行的编程环境,但它也有一些令人难以忍受的缺点。为此,一个位于旧金山的小团队开发了一款名为 Deepnote 的笔记本工具,这是一种云协作、云硬件,上云的 Notebook…

在Linux中su和sudo区别,Linux中su和sudo的用法和区别

目录sudosudo:暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码。缺点是每次执行超级用户权限都要在命令前加上 sudo ,优点是在当前终端再使用 sudo 不要再重复输入密码(只对…

python 提升效率_@Python 程序员,如何最大化提升编码效率?

作者 | Enoch CK 译者 | 刘畅 整理 | Jane 出品 | Python大本营 【导语】无论你是一位高级的AI工程师还是学生,你都会在工作或学习过程中需要用到 Python。自 1991 年首次发布后,Python 很快就成为了程序员和技术人员最喜欢的语言。作为一种拥有相对简单…

spring boot rabbitmq_Spring Boot+RabbitMQ 实现延迟消息实现完整版,实用!

本文同步Java知音社区,专注于Java作者:Sam哥哥http://blog.csdn.net/linsongbin1/article/details/80178122概述曾经去网易面试的时候,面试官问了我一个问题,说下完订单后,如果用户未支付,需要取消订单&…

jax-rs jax-ws_信守承诺:针对JAX-RS API的基于合同的测试

jax-rs jax-ws自从我们谈论测试和应用有效的TDD做法以来,已经有一段时间了,特别是与REST(ful) Web服务和API有关的做法。 但是,这个主题永远都不应忘记,特别是在每个人都在做微服务的世界中,无论…

怎么运行aws的示例程序_使Spring Boot应用程序在AWS上无服务器运行

怎么运行aws的示例程序在之前的 几篇 文章中,我描述了如何设置Spring Boot应用程序并在AWS Elastic Beanstalk上运行它。 尽管这是从物理服务器到云服务器的重要一步,但还有更好的可能! 走向无服务器 。 这意味着无需花费任何服务器费用&…

linux useradd 数字,详解linux useradd用户组合权限管理等

1,权限相关概念Rwx任何一个文件都应该由两部分组成,这两部分其实基于文件系统来组织,磁盘分区创建完成后,在高级格式化的时候,就把整个磁盘分区分成两部分,其中一部分是源数据,一部分是来放数据…

junit jndi_使用Spring创建用于JUnit测试的JNDI资源

junit jndi直到最近,我还使用静态方法来设置内存数据库(HSQLDB)。 我在JUnit测试的setUp / tearDown中调用了这些方法。 当我使用Spring时,这对我来说总是有点不自然,并且所有内容都应在其应用程序上下文中运行。 创建…

c语言程序经过编译以后生成的文件名的后缀为,c语言源文件经过编译后生成文件的后缀是什么...

c语言源文件经过编译后生成文件的后缀是什么c语言源文件经过编译后生成文件的后缀是“.obj”。C语言源程序经过编译程序编译之后,生成一个后缀为“.obj”的文件,最后由称为“连接程序”的软件,把此“.obj”文件与各种库函数连接在一起&#x…

通过PL/SQL developer工具访问远程的Oracle数据库_访问数据库_连接数据库_登录数据库

文章目录工具简介电脑没有安装 Oracle 数据库电脑安装了 Oracle 数据库工具简介 PL/SQL Developer 是 Oracle 数据库开发工具,PL/SQL Developer 功能很强大,可以做为集成调试器,有 SQL 窗口,命令窗口,对象浏览器和性能…

xgboost简单介绍_好文干货|全面理解项目中最主流的集成算法XGBoost 和 LightGBM

点击上方“智能与算法之路”,选择“星标”公众号第一时间获取价值内容本文主要介绍基于 Boosting 框架的主流集成算法,包括 XGBoost 和 LightGBM。送上完整的思维导图:XGBoostXGBoost 是大规模并行 boosting tree 的工具,它是目前…

本地 Windows 如何将 Web 工程部署到远程 Windows 主机上

文章目录第一步:先连接远程 Windows 主机:第二步:连接远程 Windows 主机后,把发布包复制到远程主机上并确定有关的目录第三步:删除远程主机的数据库中的旧数据第四步:创建新的用户和表空间第五步&#xff1…

r语言三维柱状图_R语言三维图的绘制

R语言在可视化方面的地位是毋庸置疑的,但是呢相对于MatalabR语言在三维图形的展示上存在一定的劣势。当然,作为大众的免费软件,指定不服,很多人为此也基于R语言开发了一些相应的三维图的绘制包,像rgl,gg3D&…

从事仪表专业学c语言有用吗,测控专业就业方向有哪些 就业前景比你想象中的好...

测控专业就业方向有哪些?这个专业的就业前景好不好?这些问题都是小伙伴们比较关心的问题,下面随小编一起来了解一下吧。主要就业方向1.智能仪器仪表方向,我觉得这个方向主要是从事仪器仪表,电子产品的软件,硬件研发,…

c语言 将url图片存到本地_python爬虫:爬取男生喜欢的图片

任务目标:1.抓取不同类型的图片2.编写一个GUI界面爬虫程序,打包成exe重新文件3.遇到的难点1.分析如何抓取不同类型的图片首先打开网站,可以看到有如下6个类型的菜单在这里插入图片描述点击不同菜单,发现URL显示如下大胸妹&#xf…

c语言编译后找不到exe,在VS 2015命令提示符中找不到c – rc.exe

我刚刚安装了Windows 10 Creators Update(版本10.0.15063).我安装了多个版本的Visual Studio(2012年,2013年,2015年和2017年).我几周前才安装了VS 2017.问题在“VS2015 x64本机命令提示符”中运行时,CMake(版本3.8.1)不再找到C/C编译器(在VS 2017命令提示符下运行时它可以正常工…

tomcat如何通过配置的方式部署web工程

Workspaces 下有很多工程文件,这个 Workspaces 是 Myeclipse 自动生成的,我们通过 Myeclipse 写的工程都在这个 Workspaces 文件夹下。 我们部署工程到服务器上,就是要每个 WEB 工程里面的 context 文件夹,这个文件夹可以放在 t…

python爬虫源码_Python—爬虫:王者荣耀全套皮肤【附源码】

怎么获取全套皮肤?用钱买,或者用爬虫爬取下来~虽然后者不能穿。这个案例稍微复杂一点,但是一个非常值得学习的项目。具体实现思路:分析网页源代码结构找到合适的入口穷举访问并解析爬取所有英雄所有皮肤图片代码思路/程序流程&…