UI组件——分隔器简介

分隔器用于分隔内容组中的不同元素。

它们支持视觉层次结构并帮助用户扫描相关的信息块。

颜色、空白、图像、线条或阴影都是分隔线的好例子。但是你应该在你的 UI 中使用哪一个呢？了解每种类型和正确使用的建议。

垂直分隔线

沿 Y 轴分隔内容组的细线称为垂直分隔线。看起来很简单。

水平分隔线

水平分隔线是水平展开的线条，创建不同的内容组。让它们突出，但不要太苛刻，以避免界面过载。

全出血分隔线

全出血分隔线延伸到布局的全长。当白色间距不够，并且没有锚元素（例如图像或图标来创建突出的内容组）时，全出血分隔线是您的首选。

记住要谨慎使用它们，因为它们是最突出的分隔线。

内嵌分隔线

内嵌分隔线通常用于分隔丰富列表，尤其是包含视觉锚的列表。它们一起在内容组之间创建了明显的边界，使用户更容易扫描列表。

居中分隔线

居中的分隔线经常被夹在布局的中间。它们提供漂亮优雅的外观，并且在谨慎使用时非常有用，例如在结账时显示订单摘要时。

空白分隔符

如果您需要增强易读性并维护信息层次结构，则空白分隔符应首先出现在您的列表中。这是一个优雅的视觉分隔器，可以组织内容块而不会造成混乱。

仅当空白空间不够或太宝贵而不能浪费时，才应在图片中出现线分隔符。

颜色对比分隔器

如果您想对分隔器采取更有创意的方法，请考虑使用颜色对比分隔。它有助于区分内容组并保持视觉层次结构。

这种分隔使内容脱颖而出，将用户的目光吸引到元素上。

图像网格

图像网格不需要传统的线性分隔线——它们会产生不必要的视觉噪音。具有足够呼吸空间的图像网格在元素之间创建了清晰的视觉区别。图像网格中的空间使每个图像都脱颖而出，界面看起来整洁。 

阴影分隔器

阴影分隔器一石二鸟——它们分隔内容并提供深度感。此外，它们没有线条那么引人注目，并在高度的帮助下实现了平衡和视觉层次。

分隔线颜色

分隔线应该很明显，但不是用户打开页面后首先发现的东西。此外，它们不应该分散用户对更多相关内容的注意力。所以颜色和线宽 要适中。

本文内容为转载