你所在的位置: 首页 > 正文

Web端交互文档结构总结

2020-02-26 点击:915

一个优秀的交互式文档有什么样的基本框架和基本元素?如果你没有一个明确的答案,那么这篇文章将为你提供详细的答案。

前言:在整理文件的过程中,我看到一篇总结了18年的文章。本文主要总结了在网上后台产品设计中输出交互文档时应该考虑的9个方面。虽然结构现在看起来很简单,考虑的覆盖范围也不完整,但它仍然值得在结构上学习。

如果你不想读长篇演讲,你可以跳到文章的结尾,看看结构框架。

在交互式设计中,标准的控制库是“技能”,既能接触到操作员,也能接触到操作员。标准控件库是一种交互式设计技巧和可重用技术。然而,统一的交互式文档指导方案是“达摩”,它可以用来指导技术的改进。达到佛法的人也可以达到中国的标准。最终形成一套具有交互设计、用户体验和信息结构的知识库,即“道”,达到道,达到顶。

从“技术方法”的角度来看,随着业务需求的增加,即使有可以重用的标准化控件库,在不同的场景中也会有不同的交互规范。然而,交互式文档的结构可以被总结。交互式设计人员可以随时总结交互式文档的结构,以便在未来的工作中根据不同的适用场景快速给出解决方案,并在业务逻辑和流程排序上花费更多的时间。

本文以XX后台管理系统为例,结合自己的经验谈一谈我总结的互动方案。它包括以下9个部分:限制条件、状态、页面切换、信息验证、系统提示、界面、浏览器兼容性、用户角色、数据嵌入点等。

在输出交互式描述文档的过程中,需要考虑以上部分。当然,没有必要包括上述部分。这取决于具体的产品要求、功能模块和规格。

Part1: Limit

1.1是或否

是或否,0表示1,允许或不允许。例如,内容的复制和粘贴分为私人信息和非私人信息。私有信息不支持复制和粘贴,通常使用密码,非私有信息支持复制和粘贴。

1.2范围值

索引值的值范围。例如,列表页面上显示了多少条数据记录?

通常在后台管理系统中,统一的数据列表是显示10条数据,你可以翻页查看更多,或者你可以选择每页显示的数据量,有“10,20,50,100”可供选择。

购物中心的商品列表显示适用于不同分辨率的浏览器,允许用户使用主流笔记本电脑和电脑在浏览器的可视区域浏览商品,不会产生视觉上的误导(如果商品的最大数量为每页30个,如果每行显示7个商品,如果有多页,商品的数量为2个以上4行,有5个空的商品位置,这似乎被误认为是数据加载问题)。

我们最终的产品展示计划是:每个页面列表显示多达60种产品,适应不同的浏览器分辨率,并自动调整为每行显示4、5或6种产品。分辨率越高,每行显示的产品越多。

1.3 limit

指数据的显示限制。例如,最多可以显示多少个字符,如果不能显示怎么办?数字输入框是否有上限和下限等。

分别举两个例子:

例如1,在XX后台管理系统表中,如果单元格超过宽度,用“…”结束,鼠标悬停显示全文。

在设计承载列表、卡片、面板、弹出窗口等内容的载体时。应考虑内容的携带限制。例如,在材料商店卡和购物车卡中,商品的描述内容是多少,内容区域的宽度是固定的,因此有必要在视觉显示器上显示行数。

图1。(左)购物中心商品卡描述内容限制(右)购物车卡描述内容限制

示例2。在物资中心,每种商品都有一个库存号,那么在前端购买的商品的最大数量就相应

2.1默认状态

列表、副本、选项等。以默认状态显示。

例如,XX后台管理系统中的许多模块都是纯列表显示。有必要考虑默认显示的列表数据量是否会影响加载速度。较长的装载速度意味着增加用户的等待时间成本。在这种情况下,可以采用“第一次打开时不加载,提示用户点击搜索按钮后加载”的方案,避免等待时间过长。

图3。列表输入查询条件指示用户正常使用时遇到

2.2正常状态

状态。例如,当商品上架或下架时,数据会动态更新。

以XX后台管理系统材料库为例。货物背后有复杂的库存管理逻辑。如果货物缺货,应该及时下架。

然后有一个场景,某个商品在被添加到购物车之前通常处于货架状态。添加到购物车后,商品已从货架上移除。如果移除的商品隐藏在购物车中,这种粗暴处理的结果是用户会想,“我的商品是如何从购物车中丢失的?难道我没有加入购物车吗?”。

根据易用的“有效反馈信息”原则,我们可以将货架上的商品标记为无效商品,并与货架上的商品区分开来,以便用户快速识别。

图4。商品加入购物车的不同状态示例(左:顶架,右:底架)

2.3特殊状态

特殊状态通常出现在某些特殊场景中。有两种状态:一种是无数据(空白页),另一种是数据异常、分割数据异常,可能包括数据加载失败、网络错误、系统更新等。

以XX后台管理系统的材料商店为例,数据为空:商店的某个分类项目列表中没有项目,我的购物订单列表为空,我的购物车为空。

图5。材料库数据的空占用图示意图

对于特殊状态,在同一功能模块下,可以使用一套相同样式和复制样式的占用图进行占用处理。

第3部分:接口切换

接口切换分为两部分,包括链接跳转和弹出窗口。

3.1链接跳转

链接跳转考虑在跳转到新页面后是在此窗口还是在新窗口中打开链接。如果只有一个级别,您可以添加“返回”。如果层次较深,用户需要快速切换到上一个浏览界面,可以考虑添加“面包屑”。

3.2弹出窗口

XX后台管理系统目前使用两种形式的内容弹出窗口,一种是弹出到浏览器窗口的上方位置,另一种是以侧滑的形式弹出。

弹出窗口/侧滑弹出窗口您可以根据不同的浏览器分辨率选择不同大小的弹出窗口。如果界面中有更多内容(高度超过浏览器的可见高度),最好选择侧滑弹出窗口,并通过垂直滚动条查看更多内容。

第4部分:信息验证

4.1正常运行

指正常运行。例如,当所需的数据帧获得焦点时是否提示。

4.2错误操作

当操作不正确时,用户需要给出正确的反馈。例如:重复输入密码是错误的。

结合4.1和4.2,XX后台管理系统中表单验证的处理方案如下。在下表中,提示复制可以重新调整,而验证元素、对应场景、提示与否和提示样式相对统一。

表1。4.3特殊操作中的表单元素验证场景描述是指极端情况下的操作。例如,如果用户输入特殊字符,一些特殊字符在传递到后台时会产生错误,这可能会导致sql注入。

因此,后台需要考虑是否有对策(特殊字符的转义),前端是否需要做清空处理和相应的反馈提示等。

第5部分:系统提示

结合场景选择适用的提醒。此外,有必要考虑提示的副本是否足够情绪化。

5.1祝酒提醒

祝酒提醒是一个弱提醒,将在3秒后自动消失,不会影响用户当前的操作。

图6。xx后台管理系统全局吐司提醒

5.2提示对话框

适用用户需要进行二次确认

产品在网络侧的交互方式相对单一,常见的操作有暂停、点击和键盘切换。另一方面,手机端产品的交互方式会更加丰富,有点击、按压、长按、滑动等动作。

网络产品,一方面,考虑控件的风格在不同的动作下会如何变化,另一方面,考虑是否支持键盘快捷键。例如,制表符是否支持换行,回车是否支持提交,按退格/删除是否清除,下拉选项中的“↓”是否支持向上选项,“↓”是否支持向下选项等。

6.2对齐

列表中数据的对齐主要取决于数据类型。XX后台管理系统列表中常见的数据类型如下:

表2。列表数据的对齐

第7部分:浏览器兼容性

在第1部分范围值中提及商品列表中每页显示的商品数量应与浏览器兼容性一起考虑。另一方面,当谈到函数优化时,有必要考虑新旧版本之间是否兼容。

第八部分:用户角色

在后台管理系统中,需要考虑不同角色对应的权限以及不同用户角色的权限级别。

业务流程中涉及许多角色。不同的角色拥有不同的使用权限,同一角色在不同的链接中执行不同的操作。例如,在电子合同签署过程中,销售顾问可以在其草拟状态期间编辑和删除合同。在提交合同草案进行确认的过程中,销售顾问可以查看合同或撤回提交。合同确认后,可以发起并签署合同,而上述三个环节的销售助理只能查看。

因此,对于不同状态的合同,对应于相同角色的操作是不同的。对于处于相同状态的合同,不同角色对应的操作也不同。

图8。电子合同列表(销售顾问)不同状态对应操作示意图

不同的用户角色有不同的权限级别,例如,一些功能按钮和一些角色是“完全未授权”的操作,不能让他们知道该功能的必要性,所以隐藏更合适。当某个角色拥有“半权限”时,相应的操作按钮会变灰。例如,在绩效管理-任务管理模块中,数据操作属于“半权限”。销售运营总监只有打开权限后,才能进行任务调整。

因此,对于数据操作角色,任务修改按钮是灰色的,并给出一定的提示,告知用户后续的操作以获取权限,如下图所示。

图9。按钮灰色化示意图

第九部分:对于数据嵌入点

C端的产品,产品上线后需要对用户行为进行统计分析,通常会进行数据嵌入点,这里不详细展开。

结构框架

作者:辛萧中;成长中的互动设计师,公开号码:鑫萧中。

这篇文章最初是由

辛萧中发表的。每个人都是产品经理。未经许可,根据CC0协议,Unsplash禁止重印

-

徐闻信息网 版权所有© www.mjsxy.com.cn 技术支持:徐闻信息网 | 网站地图