界面布局之_关于分割线的思考

2. 分割线设计

在UI设计中，最传统也是最常见的的分隔方式是“线”。它能起到分隔、组织、细化的作用，帮助用户了解页面层次，赋予内容组织性。

而“线”，可以分为：a.全出血分隔线，b.内嵌式分割线。

a.全出血分隔线

“出血”是一种平面印刷中的概念，而“全出血”指的是分隔线横向贯穿整个页面，一般为了区分更加独立性的内容信息。

比如：知乎的“想法”feed流里，就是采用全出血分隔线的形式，让信息分隔的更明显，更加独立性。 

全出血分隔线

比如：google photo，用全出血分割线，来区分上面的默认分类和下面相册的模块内容。

相册的模块内容

b.内嵌式分割线

内嵌式分割线，不同于前者，它一般会在“线”的前面留有缺口，来区分统一模块下的相关内容，目的是为了让用户浏览大量相关内容时，更加高效。

比如：知乎的“更多”页面，卡片内采用内嵌式分割线，来区分同一维度下有关联的内容。

比如第二个模块里，我的创作、我的收藏、我的关注、我的邀请回答，都是“我”操作后的内容信息；而第三个模块，已购内容、我的私家课、我的Live...，都是跟“钱”或“付费”相关的。

内嵌式分割线

所以，采用内嵌式分割线，比较适合这种划分有关联性的内容，同时有提升浏览效率。

其实，采用“线”的分割方式，相对其它两种（卡片式设计、无框设计）是比较保守的解决方案，但是，前提是要处理好“线”的间距、粗细、颜色，等问题。