- 设计理论 -

关于分割线的一些思考

作者:青山 原文出处:海盐社
2019-03-26

640.jpeg

目录


一、分割线的作用

二、分割线的颜色

三、常用位置

四、贯通与非贯通

五、总结



屏幕快照 2019-03-26 下午12.09.41.png


1.分隔和组织

分割线主要起到分隔和组织的作用,分隔就是增强各模块之间的对比,组织就是让同模块里的内容更加亲密,便于用户理解页面的层级。如下图:

640.png

2.视觉平衡

分割线还可以起到保持页面视觉平衡的作用,有些页面的结构中,左边放头像、icon 再加上文字,占了很大一部分的面积,右边只放一排简单的角标,视觉重心会偏向一端,给人头重脚轻的感觉。而分割线在分隔页面的同时,可以增加一些视觉上的重量,起到保持页面平衡的作用。如下图:

640-1.jpeg

以 QQ 为例,左图是原本的样子,右图是去掉分割线的样子。明显能感觉到去掉分割线页面中的视觉重心都偏移到了左侧,而有分割线的页面看起来会比较平衡。


屏幕快照 2019-03-26 下午12.12.01.png


分割线颜色往往都比较浅,这是因为分割线作为一个装饰,如果它的颜色太深会和页面形成强烈的对比,影响到用户对内容的浏览。

不同的页面会用到不同的配色,这时分割线也要跟着页面的配色进行对应的调整。分割线的颜色通常使用和背景色接近的颜色,而有一些 APP 在分割线中融入了自己的主色,这样做的好处是既可以保持颜色规范上的统一,而且单纯的灰色看起来会比较脏、比较死板,融入进一些颜色会看起来更干净和活泼一些。如下图:

640-2.jpeg


以 QQ 为例,我吸取了动态页面中的分隔线,它在灰色中融入了一些蓝色。


下面我们再来看一组对比,其中一组是带蓝色的灰,另一组是纯灰色,如下图:

640-1.png

有没有感觉“融入蓝色”组的圆形相比“纯灰色”组的更干净、活泼一些?


屏幕快照 2019-03-26 下午12.12.10.png


现在很多的 APP 页面都使用背景栏、卡片和留白来分隔页面,越来越少用到分割线,下面列举几个分割线仍然常用的位置。



1.底部 tab

tab 栏为白色时,如果遇到同样颜色的内容容易混在一起,分割线把 tab 栏分隔成一个单独的模块,增强 tab 和内容的对比。如下图:


640-3.jpeg

2.标题栏

和 tab 栏类似,同样是遇到相似的颜色不容易分辨,如下图:

640-4.jpeg

3.模块之间

用于不同的模块之间,分隔不同的内容,可以帮助用户理解页面层级,如下图:

640-5.jpeg


4.列表页面


常出现我的、消息页面中,主要由 icon+文字或头像+文字组成的列表页面。分割线占用面积小,可以大大提高页面的使用率,如下图:

640-6.jpeg

屏幕快照 2019-03-26 下午12.12.17.png


分割线可以分为贯通和非贯通两种。



1.贯通

贯通指的是分割线横穿了页面,两边都没有间距。常用来分隔不同的内容模块,使它们更具独立性。如下图:


640-7.jpeg

以微信为例,微信的朋友圈页面就使用了贯通的分割线。因为朋友圈里的发布的内容非常复杂,有可能是文字,有可能是图片,还有可能是视频,如果不加分割线页面会显非常很杂乱,把不同的内容分隔开非常重要,所以微信使用了贯通的分割线。



2.非贯通

非贯通指的是分割线和页面有间距,间距通常留在页面左边。常用来分隔同一模块中有关联的内容,可以提升用户的浏览效率,如下图:


640-8.jpeg

以支付宝为例,在我的页面中,首先用背景栏分隔了不同的模块,然后用非贯通的分割线分隔了有关联的内容。



屏幕快照 2019-03-26 下午12.12.30.png


今天主要讲了关于分割线的一些思考,我总结了4个点是:

1.分割线的主要作用是对内容进行分隔和组织,还有保持页面平衡的作用;

2.分割线的颜色通常使用和背景接近的颜色,在分割线中融入进一些颜色可以看起来干净、活泼一些。

3.贯通分割线常用来分隔不同的内容模块,增强它们的独立性;

4.非贯通分割线常用来分隔同一模块中有关联的内容,可以提升用户的浏览效率。



参考引文:


《关于分割线的思考》http://t.cn/EIlThtG

《关于卡片设计、分割线、无框设计的思考》http://t.cn/EIlTZlI

《贯通与非贯通? 详解app UI中的分割线。》http://t.cn/EIlT2yO

《关于界面分割的这件小事》http://t.cn/EIlTyQ5


海盐社.png

喜欢就分享
精选评论