不止是划条线！移动端UI中常见的视觉分隔设计技巧

在UI界面中，最传统、最常见的分离方式是线，用横向或纵向细线区分视觉或内容需要区分的内容，帮助用户了解页面的层次结构，赋予页面内容组织。

乍一看，许多应用程序的布局并不复杂，我觉得你可以自己设计，但当你真正开始设计这样一个应用程序的原型时，你会发现事情并不是那么简单。看别人已经设计设计可能不难，但当自己开始时，特定元素的选择和设计很容易陷入困境，这次意识到困难不在于工作量，设计师经常陷入监狱的细节，这是它的困难。即使是元素和元素之间的分离也可以随意使用整篇文章进行讨论。

传统的分离方式

在UI界面中，最传统、最常见的分离方式是线，用横向或纵向细线区分视觉或内容需要区分的内容，帮助用户了解页面的层次结构，赋予页面内容组织。

1、全出血位分隔线

全出血位原本是平面印刷的概念。这里提到的全出血位分隔线通常用来突出和强调不同的内容和块，就像电子邮件中不同的电子邮件之间有一条细线贯穿整个屏幕一样。

以下是Android 在Gmail邮箱的UI中，使用的分隔线被视为全出血分割线。这些分隔线给人一种“停止”的感觉，让用户清楚地知道界限在哪里。

全出血位分割线将每个部分分开。

2、内嵌分隔线

与前者不同，嵌入式分隔线通常用于区分相关内容，如联系列表中不同字母的开头。它通常用作视觉线索，方便用户浏览大量相关内容。当用户浏览时，它们将作为路标存在，以便用户快速浏览页面。视觉上，与全出血位分隔线不同，它们通常更短，并为其他区分元素留下一定的空间，如联系列表中分隔处的首字母。

替代分隔线

传统的分隔线在桌面端的用户界面设计中有着悠久的历史和良好的效果，但它们在移动端用户界面上有致命的缺陷：占用空间。事实上，一条线能占用多少空间？但事实上，通常有很多内容需要分隔一个屏幕，而且有很多分隔线。如果参考传统用法，界面元素较多的移动终端页面可能会充满由分隔线组成的视觉噪声。值得注意的是，用户现在越来越倾向于简单的界面，这也使得今天的用户界面设计将尽可能多地剥离次要元素，而只保留基本元素。这种转变背后的真正关键是设计重点转移到内容和功能上。这种设计自然会使界面看起来更简单。

这样，在分隔界面元素时，使用空白比使用分隔线更合适。使用较少的线使界面看起来更干净、更现代、更紧张。

1、留白

上一篇：做绿色包装设计时我们应该考虑到哪些？