移动用户界面设计中的视觉分隔器

来源：Medium网站

作者：Nick Babich

翻译：奥创

阅读时长：5min

乍看之下，设计应用程序似乎很容易，但是当您真正开始进行原型设计时，事情就会变得复杂。当您意识到选择如何设计特定元素并不是那么容易时，一开始看起来很简单的事情开始变得复杂。对于两个或多个内容块，即使是视觉分离的简单且最常见的任务也开始变得复杂。

传统分频器

您可以使用水平（或垂直）线在内容的相关部分之间创建任何必要的可视分隔线。它们通过在页面上建立节奏和层次结构来帮助用户了解内容的组织方式。

分隔符是一个轻量级的细法则，用于将列表和页面布局中的内容分组。

全血分频器

全出血分隔符强调需要不同视觉分隔的单独内容区域和部分。 它们在列表和页面布局中将不同的内容部分（例如，联系信息中的传记详细信息）或不同的内容元素（例如，电子邮件列表）分开。

在下面的示例中，请查看Android版Gmail应用中的收件箱视图。您会注意到，每个电子邮件项目都由一个全血分隔符分隔。跨界的感觉就像是一个停顿—它以硬停顿的方式将项目明显分开。

全功能分隔符分隔电子邮件摘要。

嵌入式分频器

插入分隔符分隔相关内容，例如联系人列表中的部分。插入式分隔线可帮助用户直观地查看项目并将其显示为相关集合：整个项目集成为连续的流程，从而邀请用户进行滚动。缩短分隔符还可以为状态项，标志或锚定元素（例如字母）提供更多空间。

 

 插入分隔线的示例。

画线的其他方法

传统的分隔符可能会很好地分解桌面屏幕上的内容，但是它们对移动应用程序具有一个很大的缺点-它们占用了移动屏幕上的宝贵空间。大量使用分隔线还会导致视觉噪音和密集拥挤的界面。随着用户的偏好转向更简单的界面，将UI剥离到非常基本的必要元素是成功的关键。进行此更改的真正意义在于，它是将重点转移到了内容和功能上，同时消除了多余的元素。

因此，请尝试按元素和间距（而不是线）进行划分。更少的线条和分隔线将始终为您的界面带来更清洁，更现代，更实用的感觉。

空白

空白是设计人员没有放置元素的设计区域。宽大的空格可以使某些最混乱的界面看起来很吸引人且简单—它在设计中的元素周围创建了空间，以帮助它们脱颖而出或与其他元素分开。自由空间创建了必不可少的呼吸空间，并使UI看起来更整洁。

利用空间而不是绘图线有助于以非干扰性的方式定义不同的部分。图片来源：Goutham

色彩对比

色彩对比是您最强大的设计工具之一，熟练使用它，您将拥有醒目的设计。通过巧妙地使用颜色，创意必将伴随着内容的分离。基本上，您所需要做的就是找到两种颜色之间的对比度非常好-流行的色彩将用户的注意力吸引到屏幕的特定区域，而无需费力地费力地进行操作。结果，用户可以更快，更轻松地访问信息。

 

除了真正明亮的东西（例如红色或橙色）以外，还可以用白色或接近等价的颜色来制成流行色。图片来源：很棒

阴影和高程

阴影和高程能够在UI中创建一些深度，并在视觉上分隔内容部分。Google的日历应用程序很好地说明了如何利用空间和使用阴影而不是绘图线来帮助以非干扰性的方式定义不同的部分。

 

阴影还有助于识别不同项目之间的关系，并引起对某些项目的注意。

对于基于图像的内容，您不需要分隔线

网格列表中基于图像的内容不需要分隔符。由于网格本身会产生视觉上的区别，因此网格列表不需要分隔符即可将子标题与内容分开。在这种情况下，空格和子标题将各部分充分分开。

网格使用空格和子标题列出了足够分开的内容。

结论

虽然最终目的是简化我们的界面，使它们更实用，更可用，但在用行和分隔符分隔内容时，我们应该三思。开发更简洁的UI设计还意味着删除任何不必要的元素，并且可以做很多事情来改善移动用户体验，而无需添加仅占用空间的线条元素。

谢谢！