App分割线和分隔线
2019年04月18日 09:32:42
2957
文章开始,先下结论: **"所有一切的努力都是为了让信息拥有秩序感"** 前几天在知乎看到相关话题,关于 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 中,分隔线左侧为何跟随文字?