这是一篇关于界面视觉分割的文章，布局元素有助于清晰地分辨屏幕上的内容。检查它们在UI中的工作方式以及类型。
视觉分割在 Web 和移动 UI 界面中对内容能进行很好的视觉设计引导，对于扩大产品的实用性和可用性意义重大。这些分隔元素有助于整理屏幕上的内容一目了然。让我们看一下视觉分隔的工作方式以及它们的类型吧。
什么是视觉分隔
视觉分隔符是一种布局元素，有助于将内容分成清晰的部分。并可帮助设计师根据典型的视觉感观来布局页面，并使整体更易于用户理解。
视觉分割与页面上的其他设计元素一样至关重要。例如，用户可以更轻松地定义内容之间的关系。视觉分割对于实用性也很重要：在许多情况下，分割会使内容看上去是可点击的，这对于移动界面尤为重要。
视觉种类的分隔线
谈到分隔线，我们可以从分隔线的外观和功能来分析。从外观，有五种常见 UI 界面中划分内容的方法：
· 线
· 颜色
· 负空间
· 阴影/体积
· 图片
线
无论是在什么情况下，“线”都属于分离内容的主流方式。线可以让内容简单易识别，因此用户无需三思。
另一方面，这种类型貌似超简单。因此，设计人员通常会努力寻找其他分离内容的方法。此外，建议仅在无法以其他方式有效分割内容的情况下使用。太多的线条会导致屏幕严重视觉噪音，并产生不必要的视觉疲劳。
负空间
负空间 （又称空白）是指元素周围屏幕上（通常是元素内部）的空白。然而，空白并不意味着浪费空间资源，与屏幕上的任何其他元素一样，它也可以支持用户体验。负空间是最流行的视觉分隔之一，尤其是在以极简主义的界面中。负空间充分体现了“格式塔”视觉感原理（例如，接近性和相似性原理），从而成为有效的视觉分隔，它还使界面避免视觉混乱。
色彩对比
视觉分隔的另一种有效类型是颜色对比度。UI 设计中的颜色选择和组合具有很大的心理暗示：它们能够增强网站消息和内容，从而营造适当的氛围。对比度是影响页面或屏幕的可浏览性和视觉层次结构的关键因素之一。通过这些，颜色对比度可以有效地分割不同的内容。这就是近年来分屏如此流行的原因。
阴影和体积
阴影和体积一般可以通过可视化部分内容达到视觉效果，也可以有效地用作与分隔线。它们营造出一种深度的层次感。另一方面，它看起来不像线条那样显眼，因此这种方法可用于项目的平衡和易读性，而不会产生过多的视觉疲劳或干扰。
插图
各种插图提供了一种非常有效的视觉分隔。插图在带有大量文本内容的界面中特别适用，例如博客，在线媒体和基于文本的登录页面。照片，插图，3D图形以及动画图像有助于平衡文本内容，提高可浏览性。
平铺分隔
平铺分隔是用于分隔界面每个部分并跨越屏幕布局整体长度的分隔线。
嵌入式分隔线
嵌入式分割线将与相关内容的项目分开，并与 APP 标题对齐。
带子标题的分隔线
在某些情况下，可以将分隔线与子标题搭配，来标识出分组的内容。在这种情况下，分隔线应放在子标题上方，使子标题与内容的连接更加明显。
中间分隔线
这些通常是放置在布局中间某处的分隔线，用于分隔相关内容，例如收据上的价格。
要考虑的要点
为设计的布局选择视觉分隔的类型，需要考虑两个基本因素。
细节：分隔线不能过度醒目，不可让用户从内容本身中分散注意力。分隔线的目的是让布局整洁，而不是引起注意。
适当的出现：如上所述，太多的视觉分隔会产生视觉疲劳。因此，使用分割类型，三思而后行。在恰当的地方使用空白而不是线条；不要夸张的颜色；保持和谐与一致。
喜欢的童鞋可以关注我们
— 来自PxCook 官方团队 ，专注多年设计研发
效率协作工具
