ui设计的分隔线

一、传统的分隔方式

在ui界面中，较传统和较常见的分隔方式是线条，用横向或者纵向细线来区分视觉或内容，帮助用户理解页面的层次结构，并赋予页面内容以组织性。

1.全出血位分隔线

全出血位较初是平面印刷中的一个概念，完全出血位分隔线通常用于突出和强调不同的内容和区块，就像电子邮件中不同邮件之间会用一条横贯整个屏幕的细线来进行分隔。

2.内嵌分隔线

内嵌分隔线不同于前者，它们通常用于区分相关内容，例如联系人列表中不同字母的开头部分，它们经常被用作视觉线索，以便用户浏览大量相关内容，当用户浏览时，它们将作为路标而存在，以便用户翻页和浏览。视觉上，与全出血位分隔线不同，它们通常会较短一点，并为其它元素留出空间，例如联系人列表中该线的*一个字母。

二、分隔线的替代方案

传统分隔线在桌面端ui界面设计中有着悠久的历史和良好的效果，但在移动端ui界面中却有一个致命的缺陷:占用空间。如果参考传统用法，一个界面元素较多的移动端页面上，可能会充隔线构成的视觉噪音，值得注意的是，现在用户越来越倾向于简单的ui界面，这也使得现在的ui界面设计尽可能多的剥离次要元素，只保留基本元素。

1.留白

界面中的留白区域通常不包含任何可视元素，大量的留白可以让凌乱的界面看起来简单而有吸引力——它让界面周围的所有元素都空出来，让这些元素更加引人注目和突出，留白使界面更加生动简洁。

2.色彩对比

色彩对比是较强大的设计方法之*，如果使用得当，它会给你带来醒目和帅气的设计。创造性地利用色差来区分不同的内容，关键是控制两种颜色之间的对比度。它不仅在视觉上容易区分，而且不让人感到突兀，产生戏剧感。如果色彩对比度得到很好的控制，用户可以更快、更方便地获得信息。

3.阴影和高度

阴影和高度都可以在ui界面上创造出“深度”，这相当于使元素在Z轴高度上产生差异，较典型的例子是Material Design 的设计，谷歌日历的设计展示了如何使用阴影和空间来区分不同的部分。