UI组件——常用组件二

通用 UI 组件使网站和应用程序更易于使用。通过使用通用组件，用户不必猜测如何与界面交互——他们可以识别每个元素应该做什么。

折叠面板、列表和图表等 UI 组件可以让用户更轻松地消化信息。面包屑和分页等组件将用户定向到他们在网站或应用程序中的位置。还有其他组件，例如选择器或滑块，可以更轻松地与界面交互。 

折叠面板（Accordion）

折叠面板是折叠的内容块堆栈，单击时会显示隐藏的内容。它们通常用于常见问题解答等，其中多个相关内容应包含在同一页面上，但一次显示它们可能会让用户感到沮丧。关闭时，它们仅显示标题（通常是问题）并在用户单击后显示完整内容。

对打开和关闭的部分使用不同的图标。

列表（List）

杂货清单、新年愿望、遗愿清单——如果你能说出它的名字，可能会有一个清单。在设计界，列表有助于排列相关元素，例如文本或图像。

列表可以按字母顺序、时间顺序或数字顺序排列，并用项目符号或图标进行标记。用户喜欢它们，因为它们很容易被扫描以找到所需的信息。

确保对齐列表并在选项之间添加足够的空白以让它们呼吸。易读性是关键！

面包屑（Breadcrumb）

术语面包屑指的是看起来像一排链接的辅助导航元素。就像在 Hansel 和 Gretel 的故事中一样，面包屑会留下痕迹来引导用户并帮助他们回家。

最后一个元素表示用户的当前位置，其余元素表示他们到达那里的路径。如果用户深入到网站并远离主页，面包屑可以帮助他们了解自己的位置并找到返回的路。 

当前页面应该始终是路径中的最后一个碎屑。 

分页（Pagination）

分页是信息架构的基本组成部分。它在网页设计中很普遍，出现在许多网络应用程序中。

分页将内容分成可消化的部分——页面——并帮助用户浏览界面。当页面出现在物理世界中的书籍、杂志和其他书面材料中时，它们很容易被用户识别。期望在电子商务网站或您的收件箱上看到分页。

页面的顶部和底部是最常见的分页位置。 

分隔线（Divider）

线条是设计师用来分隔内容组中不同元素的最常见的视觉分隔线类型。它们支持视觉层次结构并帮助用户扫描相关的信息块。

颜色、空白、图像或阴影是线条的绝佳替代品，线条会产生过多的视觉噪音。

通知（Notification）

通知是提醒用户有关更新或操作的系统消息，例如新消息或成功发送电子邮件的确认。它们采用徽标数、全局提示或覆盖横幅的形式，其主要目的是吸引用户的注意力。

标签（Tag）

在设计界，标签（又名chips）是紧凑的文本元素，可以提供多种功能。它们允许我们标记、分类、选择、过滤或触发动作。

那么为什么是“chips”呢？谷歌的 Material Design 引入了这个术语，现在它可以与“标签”这个词互换使用（尽管“chips”也可以指代标签之外的元素）。

选择器（Picker）

选择器是选择日期范围、时间段或两者的完美工具。单击时，它们会展开为模态框或对话框，并向用户提供一组可供选择的选项。

用户乍一看应该很明显当前日期和选定日期。另外，不要限制用户的选择；允许他们键入日期而不是滚动和选择。有时，打字要容易得多。

禁用不可用的选项——例如，过去或不可用的日期——以防止用户错误和摩擦。 

图表（Chart）

图表是任何仪表盘的重要组成部分，因为它们使我们能够可视化和比较数据。图表有多种形式——堆积面积图、柱形图、饼图等等。

选择正确的图表类型不是品味问题。这取决于您拥有多少数据类别以及图表的用途。例如，饼图不适合比较超过 5 个切片。对于用户来说，它变得过于拥挤且难以阅读。

加载器（Loader）

大多数人在尝试将您的 Instagram 提要加载到 3G 网络上之前都不会考虑太多关于加载程序的问题。加载器是通知用户加载过程的元素。进度条、微调器和骨架屏是向用户指示存在延迟的最常见方式。

为了减少挫败感，请添加对用户需要等待的原因的解释，并指出可能需要多长时间。

文字提示（Tooltip）

文字提示是不能单独存在的简短、信息丰富的消息——它们总是与交互式元素配对，例如图标、按钮或文本链接。文字提示由用户触发，并在鼠标悬停或单击或通过键盘悬停时显示。

不要将文字提示变成唯一的解释来源。它们是提供额外帮助和提供额外信息的好伙伴，但用户应该能够在没有它们的情况下完成任务。

一个好的文字提示简短、简洁且有用。最好的文字提示是您从未真正需要的文字提示。

滑块（Slider）

滑块是用于选择值或值范围的现成解决方案。通过水平拖动手柄（也称为“拇指”），用户可以设置价格范围或选择一个数字。一些滑块包含一个浮动值，该值会随着用户拖动拇指而更新。

在移动设备上使用滑块时，请确保拇指足够大并且易于定位和拖动。

请记住，对于有运动障碍的人来说，滑块可能很难控制。 

进度跟踪器（Progress tracker）

千里之行，始于足下。进度跟踪器向用户显示他们已经采取了多少步骤以及还剩下多少步骤。他们一步一步地指导我们，将大表格分成更小的块，并鼓励我们完成每一步。

向进度跟踪器添加文本以指示流程中的每个步骤包括的内容对用户很有帮助，并鼓励他们继续旅程。

避免超过 5 步的旅程。

本文内容为转载