App分割线和分隔线 - 设计师的小小盒

文章开始，先下结论：

**"所有一切的努力都是为了让信息拥有秩序感"**

前几天在知乎看到相关话题，关于 iOS 列表分割线为什么不是通栏的疑问，所引发的思考。

其实早在做一些 App 的时候就遇到过同类型的问题，经常在做调研或参考的时候发现，一些 App 的分割线有通栏的，有右通栏的，还有不通栏的，没有意识的时候会觉得很乱，为什么一款成熟的应用连这种基本的规范都没有做好，是设计师的随心所欲还是开发者的疏忽？

后来仔细调研一番后发现，自己果然还是太年轻。

为了方便理解，总结之后的结果可以归在文字上的差异：**割** 与 **隔**，不得不感叹汉字文化的博大精深啊！

### 渊源

要说渊源，还得从 iOS 拟物化时代说起，那个时候的 List，包括 Group 以及 Cell 是长这个样子的：

> 图片来自网络，图侵删

可见层级关系非常明显，Group 与 Group 之间区分明显，Cell 与 Cell 之间通过通栏分割线区分，也十分明显，使整个 List 层级关系一目了然。（有没有觉得像现在卡片风）

从 iOS7 开始吧，扁平化的出现彻底打破了这种设计局面，随之而来的 List 就长成了这个样子：

沿用至今，所以引出了疑问：到底该怎么用？

### 案例

首先我要把下文的名词换一换了，看官请注意，字面意思来理解：分割线即是割断，比如版块与版块的割断；分隔线即是隔开，比如版块内部小版块的隔开。

**一、通栏分割线**

通栏分割线的使用意义等同于留白分割、卡片分割、大间距分割等技法，主要作用于版块与版块之间，每一个版块都是一个整体，强调独立性。其明显特征为：

- 内容关联性不强

- 用户 UGC 产出内容

几种不同的分割案例，其实也是一种演变历程，更有助于大家理解：

**二、右通栏分隔线**

右通栏分隔线的使用场景最多，通常情况下强调元素之间的关联性，也就是 Group 中的 Cell 关联性。其次，人类目前的阅读习惯是从左往右呈 “Z” 字型结构，重要信息从左往右依次排列，那么就会出现视觉重心过度偏左，造成有头无尾的奇怪感觉。

**右通栏分隔线可以有效缓解视觉重心的过度偏移。**

还有比较重要的一点历史由来原因，Cell 中右向箭头的出现无意让移动端的交互简直不能更 Amazing，时至今日，用户已经形成了有右向箭头的 Cell 必定可点击的意识。当然箭头的作用不可质疑，但被忽略的，就是右通栏分隔线所起到的作用：

**右侧贯穿到底而没有终止，代表还有内容。**

这样即使在没有箭头的情况下，仍然具备可点击的含义：

**三、无通栏分隔线**

无通栏分隔线即左右两端都没有顶齐。通常用于视觉重心接近平衡或偏右的布局，做普通的呼吸感控制即可。

**四、Group 头与尾？**

作为一个有思想的 Group，肯定要有头有尾。一个 Group 的开始即为头，结束即为尾。作为从拟物化时代进化过来的产物，圆角矩形包裹的 Group 层次感很清晰且相互独立，演变成通栏式的 Group 后，就可以利用上文所提到的通栏分割线来首尾相接。

对比一下：

### 思考

一、为什么没有左通栏分隔线？

二、为什么大多数 App 的"设置"页面雷同？

三、微信聊天页面用户头像换成圆形后的分隔线应该如何处理？Badge 为何在右侧？

四、iOS Cell 中，分隔线左侧为何跟随文字？