UI组件——加载器简介

2022-03-24 本文已影响0人嘎嘎开心

加载器是通知用户加载过程的元素。进度条、微调器和骨架是加载程序的一些示例，用于向用户指示存在延迟。

如果使用得当，加载程序会通知用户系统中正在发生的事情，甚至可以让时间过得更快！在本文中，了解加载的基础知识并发现有用的提示和技巧。

圆形加载器是最受欢迎的加载器之一。它们很容易在大多数屏幕和设备上应用，而且它们通常占用的空间很小。

当加载时间很短（2 到 5 秒）时，使用循环加载。

文本加载器是一个短标签，让用户知道加载正在进行中。就其本身而言，它看起来并不刺激，因此您可能想通过添加有趣的动画来增加趣味。

尝试通知用户在加载过程中接下来会发生什么。

确定加载器会显示剩余时间或百分比。换句话说，加载过程有一个明确的结束。

不确定的加载器是没有明确进度指示的循环动画。将此类加载器用于少于 5 秒的活动。避免将它们用于更长的进程，因为更长的循环加载程序往往会让人们发疯。

如果由于某种原因，加载时间比预期的要长，请用琐事或可爱的小猫或小狗图片来打破紧张。它会让用户在 100% 的时间里至少快乐 50%。

进度条看起来类似于传说中的蛇游戏中的蛇。指示器沿着轨道爬行并用颜色填充它，直到进度完成。

避免冻结进度条。相反，通过以较慢的速度移动指示器来掩饰小的延迟。

骨架屏

骨架屏真正改变了加载器。骨架屏不是让用户等待并盯着空白屏幕，而是显示内容的占位符结构。它们的目的是减少加载过程中的摩擦。

浅灰色等中性色非常适合骨架屏。

您是否知道可以将线性进度条放置在其他元素中——例如，在按钮中？在加载完成之前，用户不能单击或点击按钮。

文本骨架屏

文本骨架屏是指模仿真实的矩形占位符，通常包含一些脉冲动画来反映内容加载。

对于图像骨架屏，我们使用传统的虚拟图像，上面有山脉和太阳。它们指示内容的类型——图像——以及它最终会出现在哪里。

内联加载器按字面意思与它所引用的元素对齐。当有一系列文件或消息时使用这种类型的加载器，例如当您将多个项目上传到 Google Drive 时。看到它们一一上传应该可以让用户放心，加载过程迟早会完成。

加载器放置怎么样？通常，加载器在加载屏幕内容时占据屏幕的中心位置。但是，它们也可以位于诸如卡片或输入之类的元素附近，以指示它们的单独加载过程。

本文内容为转载