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

在计划进程中，组件能辅佐我们节减因一再计划发生的事变时刻，让我们更专注于用户体验和对产物的创新。本篇文章对计划师常行使的全局组件举办了梳理总结，，供各人一同进修和参考。

绘制交互流程原型时，会呈现一些组件被频仍行使的环境。

假如每次都将这些组件在原型上面展示出来，会给交互文档带来冗余，不足简捷，且增进交互和视觉的事变量。办理这些题目的要领就是行使全局组件。这样可以镌汰文档的冗余，晋升文档的简捷度，镌汰交互计划师/产物司理的事变量。

全局组件大抵有以下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界面，行使进度条的样式展示，位置处于导航栏下方。

组件样式：

2. 上拉加载

用户在赏识界面的进程中，对付未加载的信息，通过手势上拉，信息自动加载。

用途：

把用户代入无尽赏识模式，让用户一向向下转动，不必要手动点击加载，服从高。

行使声名：

1. 对付机关沟通的机关，可行使上拉加载模式加载数据。
2. 必要配置默认一次性加载几多条，可按照现实环境设定，一样平常常见的是20条。加载过多挥霍流量，加载过少，必要频仍加载。

组件样式：

3. 下拉加载

用户下拉时，呈现loading动画，对整个页面从头加载革新。此刻许多的产物从头计划loading加载动画，使得加载进程越发具有情作用，人道化和品牌化。

用途：

利便用户革新当前界面，获取最新数据。

行使声名：

1. Loading展示动画，一样平常逗留1-3s。
2. 此刻许多的产物从头计划loading加载动画，使得加载进程越发具有情作用，人道化和品牌化。
3. 因营业需求，偶然辰加载完毕后，会通过toast奉告用户更新几多条内容。

组件样式：

4. 占位符加载

当有笔墨和图片时，图片会比笔墨加载的慢，这个时辰每每笔墨先加载出来，图片在加载进程中行使占位符，直到图片加载乐成。

当加载的页面内容有牢靠的框架时，可以先加载框架，再加载框架内的内容。

用途：

1. 通过先加载页面框架，计划占位符等情势可以提前让用户知道整个界面的架构，进步产物的体验感。
2. 这种加载给用户感知，加载不变且速率快。

行使声名：

占位符加载最好让占位符的样式机关和真实加载数据机关保持相似可能沟通。

组件样式：

02 Default pages 缺省页

1. 空数据

因为产物处于初始状态可能由于操纵删除而清空状态发生的空数据。

用途：

1. 提醒用户无法正常展示内容的缘故起因
2. 提供一个进口，给用户可以去其他处所的进口

行使声名：

是否提供其他进口，可按照详细营业环境来定。

样式：

2. 收集非常

当移动装备收集非常时，导致无法上传和下载数据，从而无法正常的行使产物。这时辰会呈现收集非常场景计划提醒用户。

用途：

1. 奉告用户当前界面呈现非常的缘故起因
2. 提供办理当前界面的非常的方案

行使声名：

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源文件。

本文素材来自互联网

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!