设计干货：一篇文章带你搞定全局组件的使用

绘制交互流程原型时，会出现一些组件被频繁使用的情况。

如果每次都将这些组件在原型上面展示出来，会给交互文档带来冗余，不够简洁，且增加交互和视觉的工作量。解决这些问题的方法就是使用全局组件。这样可以减少文档的冗余，提升文档的简洁度，减少交互设计师/产品经理的工作量。

全局组件大致有以下4种，分别为：Loading 加载、Default pages 缺省页、Toast 吐司、Alert 对话框。

本篇文章大纲如下所示：

1. Loading 加载；
2. Default pages 缺省页；
3. Toast 吐司；
4. Alert 对话框；
5. 全局组件在交互文档使用

01 Loading 加载

1. 全屏加载

这种加载比较简单，一般使用在页面内容比较单一的情况下，所以一次性加载完所有数据后再显示内容。

但这种一次性加载完后，再展示出来，给用户感觉加载时间较长。

用途：

1. 从上一级界面进入到下一级界面时使用。
2. 在等待过程中，给用户提供页面加载动画的反馈，防止用户以为界面卡住出bug了。
3. 能保证内容的整体性，全部加载完才能够阅读和操作。

使用说明：

1. 原生界面，多使用toast样式的加载loading，左右居中对齐。
2. 非原生，H5界面，使用进度条的样式展示，位置处于导航栏下方。

组件样式：

3. 下拉加载

用户下拉时，出现loading动画，对整个页面重新加载刷新。现在很多的产品重新设计loading加载动画，使得加载过程更加具有情感化，人性化和品牌化。

用途：

方便用户刷新当前界面，获取最新数据。

使用说明：

1. Loading展示动画，一般停留1-3s。
2. 现在很多的产品重新设计loading加载动画，使得加载过程更加具有情感化，人性化和品牌化。
3. 因业务需求，有时候加载完毕后，会通过toast告知用户更新多少条内容。

组件样式：

02 Default pages 缺省页

1. 空数据

由于产品处于初始状态或者因为操作删除而清空状态产生的空数据。

用途：

1. 提示用户无法正常展示内容的原因
2. 提供一个入口，给用户可以去其他地方的入口

使用说明：

是否提供其他入口，可根据具体业务情况来定。

样式：

3. 服务器异常

服务器异常是小概率事件，但是也偶尔发生。

当服务器异常时，且用户在操作过程中，出现这种情况，一般可设计为对话框提示，明确告知用户，服务器出现问题，让用户稍后重试。

当服务器异常时，且用户进入下级页面时，则通过缺省页面提示给用户。

用途：

告知用户当前界面出现异常的原因，提供用户刷新操作。

使用说明：

服务器异常，非页面跳转，常见的通过对话框提示。跳转页面通常通过缺省页面提示

样式：

4. 内容被删除

文件或者页面内容被删除，由于文件或者页面内容的上一级页面有缓存亦或用户获取链接进入，则会出现文章/文件被删除的情况。

用途：

用于提示用户，出现当前异常页面的原因。

使用说明：

常见的设计是用户进入新页面出现对应的插画和标题提示。

样式：

5. 暂无权限

不符合查看/操作规则，导致无权限。

常见的一般为非同一组织架构的员工无权限观看，这种情况，用户点击进入一般给出对应的提示。

用途：

1. 提示用户无法正常展示的原因
2. 给予对应的解决方案

使用说明：

最好的方案是在App上面过滤掉无法查看的内容，但是存在员工间的转发行为，这时候无权限的员工，点击进入，则显示暂无权限查看的提示页面。

样式：

03 Toast吐司

用于对用户的轻量级提示，一般出现1.5s到2s后消失。通过反馈告知用户。

用途：

1. 对于用户操作后给予的即时反馈
2. 对应用当前存在的状态反馈，多用于断网情况下。

使用说明：

处于界面居中位置。根据不同状态展示不同的toast样式。

组件样式：

04 Alert警示对话框

通过对话框提示用户，需要用户进行二次确认、选择或输入信息的弹窗。

用途：

1. 重要信息的提示
2. 二次确认
3. 提交内容

使用说明：

用户只能点击对话框，对话框才消失。文案和按钮都居中对齐。

组件样式：

05 全局组件在交互文档使用

在做交互文档时，将全局组件进行汇总，在需要使用全局组件时，只需要在交互标注上进行标注即可。

如下图所示，单独一个站点地图汇总全局组件说明。并将组件标上对应的序号方便查找核对。

在交互文档中，通过标注说明出现的组件序号和对应的文案。如下图所示。并且点击标注上的组件名称跳转到对应的站点地图页面。

以上就是关于全局组件在交互文档的用法。

#作者#

UX。前美团点评高级交互设计师。微信公众号：Echo的设计笔记，后台回复：全局，获取文中的全局组件的axure源文件。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！