这是一篇关于界面视觉分割的文章，布局元素有助于清晰地分辨屏幕上的内容。检查它们在UI中的工作方式以及类型。

 

视觉分割在 Web 和移动 UI 界面中对内容能进行很好的视觉设计引导，对于扩大产品的实用性和可用性意义重大。这些分隔元素有助于整理屏幕上的内容一目了然。让我们看一下视觉分隔的工作方式以及它们的类型吧。

什么是视觉分隔

视觉分隔符是一种布局元素，有助于将内容分成清晰的部分。并可帮助设计师根据典型的视觉感观来布局页面，并使整体更易于用户理解。

视觉分割与页面上的其他设计元素一样至关重要。例如，用户可以更轻松地定义内容之间的关系。视觉分割对于实用性也很重要：在许多情况下，分割会使内容看上去是可点击的，这对于移动界面尤为重要。

视觉种类的分隔线

谈到分隔线，我们可以从分隔线的外观和功能来分析。从外观，有五种常见 UI 界面中划分内容的方法：

• 线

• 颜色

• 负空间

• 阴影/体积

• 图片

线

无论是在什么情况下，“线”都属于分离内容的主流方式。线可以让内容简单易识别，因此用户无需三思。

另一方面，这种类型貌似超简单。因此，设计人员通常会努力寻找其他分离内容的方法。此外，建议仅在无法以其他方式有效分割内容的情况下使用。太多的线条会导致屏幕严重视觉噪音，并产生不必要的视觉疲劳。

    

     低碳生活网站的产品页面使用水平线作为视觉分隔，以清晰地布局有关商品的不同信息。

 

       

       科学平台的网页使用水平线分隔不同的内容块，并使内容结构易于浏览。

 

       

       某电商网站使用不同层次的内容可视化分隔，从水平分隔定价和CTA元素，到网格滑动布局查找有关物品的信息

 

负空间

负空间 （又称空白）是指元素周围屏幕上（通常是元素内部）的空白。然而，空白并不意味着浪费空间资源，与屏幕上的任何其他元素一样，它也可以支持用户体验。负空间是最流行的视觉分隔之一，尤其是在以极简主义的界面中。负空间充分体现了“格式塔”视觉感原理（例如，接近性和相似性原理），从而成为有效的视觉分隔，它还使界面避免视觉混乱。

      

       旅行 APP 将列表中的项目分隔开，而没有任何其他视觉元素，仅带有空白

 

       

       Health Blog文章列表基于印刷层次结构和负空间，使内容看起来清晰了然

 

色彩对比

视觉分隔的另一种有效类型是颜色对比度。UI 设计中的颜色选择和组合具有很大的心理暗示：它们能够增强网站消息和内容，从而营造适当的氛围。对比度是影响页面或屏幕的可浏览性和视觉层次结构的关键因素之一。通过这些，颜色对比度可以有效地分割不同的内容。这就是近年来分屏如此流行的原因。

 

       

       移动菜单概念基于颜色对比，使项目清晰可见

 

       

       即使在像这样的柔和元素中，颜色对比的作用也很明显。另外，请注意用作菜单项可视分隔的垂直线：与略微可见的图像一起，还可以作为方向提示可引导继续下拉浏览

 

       

       GNO毛毯的网站设计中，颜色对比有助于将较长的网页划分为易于消化的精美内容块

 

阴影和体积

阴影和体积一般可以通过可视化部分内容达到视觉效果，也可以有效地用作与分隔线。它们营造出一种深度的层次感。另一方面，它看起来不像线条那样显眼，因此这种方法可用于项目的平衡和易读性，而不会产生过多的视觉疲劳或干扰。

 

       

       展示库存商品的目录以这种方式使用了阴影，从而使布局更加渗透，并清楚地将卡片彼此分开

 

       

       订花的 APP 通过从背景中突出显示的卡片来划分目录中的位置

 

插图

各种插图提供了一种非常有效的视觉分隔。插图在带有大量文本内容的界面中特别适用，例如博客，在线媒体和基于文本的登录页面。照片，插图，3D图形以及动画图像有助于平衡文本内容，提高可浏览性。

 

       

       某金融网站页面使用动画效果的“了解更多”CTA标语的3D图形块。这样，主题内容也可以清楚地分开

 

       

       餐厅 APP 的菜单屏幕将图像用作划分选项的关键元素

 

平铺分隔

平铺分隔是用于分隔界面每个部分并跨越屏幕布局整体长度的分隔线。

 

       

       画廊 APP 使用水平线作为艺术家目录中的分隔线

 

       

       食谱 APP 使用平铺分隔线来分割食谱

 

       

       财务 APP 使用了很少见的平铺分割线来分隔费用列表中的项目

 

       

       电影 APP 在结帐屏幕上使用平铺分隔线

 

嵌入式分隔线

嵌入式分割线将与相关内容的项目分开，并与 APP 标题对齐。

 

       

     该结构的网站上的零件带有使用水平线作为嵌入式分割线

 

带子标题的分隔线

在某些情况下，可以将分隔线与子标题搭配，来标识出分组的内容。在这种情况下，分隔线应放在子标题上方，使子标题与内容的连接更加明显。

 

中间分隔线

这些通常是放置在布局中间某处的分隔线，用于分隔相关内容，例如收据上的价格。

 

       

     

某电商网站的产品页面带有中间分隔线，将交互区域与描述产品的文本内容清楚地分开。

 

要考虑的要点

为设计的布局选择视觉分隔的类型，需要考虑两个基本因素。

• 细节：分隔线不能过度醒目，不可让用户从内容本身中分散注意力。分隔线的目的是让布局整洁，而不是引起注意。

• 适当的出现：如上所述，太多的视觉分隔会产生视觉疲劳。因此，使用分割类型，三思而后行。在恰当的地方使用空白而不是线条；不要夸张的颜色；保持和谐与一致。

—— END ——

喜欢的童鞋可以关注我们

— 来自 PxCook 官方团队 ，专注多年设计研发 —

 效率协作工具