界面设计中的分割方式( 三 )


所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(格式塔原理接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。
界面设计中的分割方式
文章插图
利用亲密性原则的留白分割
如上图所示,当纵向间距增加1.5倍后,信息被分为上下2组,当横向间距也增加1.5倍后,信息被分为上下左右四组,这就是留白分割。具体产生原因可以了解一下格式塔原因的相关内容。
值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,段落之间,间距留白是区隔单一信息元素的默认选择。
界面设计中的分割方式
文章插图
2)使用原则
单个元素之间默认使用留白分隔,随着元素的增多,多个元素按照特定的信息组合形成信息组块,组块与组块之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点iOS和Android系统中差异较大。
界面设计中的分割方式
文章插图
在iOS中,线性分割是条目间默认的分割方式(参见iPhone 通讯录和设置),当多个信息组块成组后,为了区分不同组别,则会采用更高层级的卡片分隔方式。
在Android系统,留白分割是信息组块间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见Pixel 5的通讯录和设置)
从2014年Material Design发布后“卡片式设计”的风靡,再到2019年前后“去线化设计”盛行,结合设计趋势,再对比上图中iOS和Android的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队Google,在设计Android OS时也并没有滥用卡片)。使用线条分割视觉效果很多线条,反而不够简洁。
3)使用场景及分类
留白分割的实际设计执行,需要定义留白间距大小的设计规范,信息共有多少种层级,每种信息层级之间有多少种间距,每种间距适用于什么情境。
在设计任务中,UI视觉设计师在设计页面或者模块时经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。
界面设计中的分割方式
文章插图
理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。
而且每增加一个视觉层次,要求其间距至少要是上一层次间距的2倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果,造成信息层级区分不清信息混杂。
三、总结根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目内容之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分隔方式做一个简单的小结,如下:
界面设计中的分割方式
文章插图
简而言之:
1、当信息条目复杂度较低时,优先采用留白分隔,视觉清爽无干扰。