低调的分隔线

随着ios12规范 “轻量级” 设计理念的广泛使用,分隔线的出现频率变少，颜色也越来越浅,但它在界面中仍然有着重要的作用,它可以帮助用户区分信息层级,理解信息,使得我们的界面井井有条。分割虽小,却也有分类

分隔线的分类

全分隔线

全分隔线顾名思义就是将整个页面全部分隔，全分隔线的分隔视觉效果比较强烈。 

内嵌分隔线

内嵌分隔线是一种弱分隔的方式，也是我们在页面设计中最常用的一种分隔方式，不同于全分隔线将页面拦腰截断,内嵌分隔线的两端或者某一端会和页面的最边界留有一定的距离。

分隔线使用方法

区分不同功能模块

界面都有目的地将不功能模块组合在一起,当需要强调两个完全模块不同时可以使用全分隔线。

下图中“综合排序”部分属于导航模块,下方的列表部分属于信息内容展示模块,两个模块的功能完全不同,所以在两个部分使用了全分隔线。 

区分不同内容

界面中展示的内容多种多样,当需要将两个具有相关性,却又不同的内容区分开来,则可以考虑使用

内嵌分隔线。内嵌分隔线可以将不同的内容有效的区分开来,又不破坏界面的整体连贯性。

下图首页的 “少年头条” “泉灵的语文课” “学科” 都是针对用户推荐的一些相关内容,但每个部分的内容又不相同,所以使用了两端距离页面最边界同等的距离的内嵌分隔线,有效的将内容区分开来,又保证了页面的整体。

区分相似内容

不同小信息条组成了信息块,这些信息块可能具有相似的结构,可以使用内嵌分隔来区别这些信息块。当这些信息块没有明显的锚元素（如头像或图标）时可以考虑使用到两端距离页面最边界同等的距离的内嵌分隔线,如果它们具有明显的锚元素时,则需要根据视觉平衡,适当的选择留部分距离的内嵌分隔线。

微信页面的左边由icon和文字组成,右边仅有一个向右的icon,在视觉上,左边偏重,所以分隔线留出了左边icon的,右端紧靠右边界,以此来平衡视觉。

注意

分隔线的目的是辅助用户理解信息，在设计时不宜抢了主要信息的注意力，所以分隔线一般都是细而浅。Material Design中建议分隔线 为1dp（在750x1334的界面中约为 2px） 的粗细，在亮色中为黑色降低透明度到12%，在暗色中为白色并降低透明度到12%,此数值仅供参考,具体情况还需具体分析。

欢迎关注公众号：七七的设计手札