首页 > SEO动态 > 网站技术UI设计进阶干货!盒模型间距设计指南

UI设计进阶干货!盒模型间距设计指南

2024-05-08 08:08:02

UI设计进阶干货!盒模型间距设计指南

引言

互联网飞速发展的这个时代,非常多优秀的用户体验团队,无私地公开了他们的设计规范、UI 组件,供行业有需要的设计团队学习和使用。然而尽管拿到这些优秀的设计指导和组件库,依然不一定能够输出非常有品质的设计,仔细研究发现,其中非常重要的一个原因,我们认为是:不同 level 的设计师对“间距”的把握程度不同,拼凑组件输出的界面信息层次和整体性不好。

>PART 1:UI 间距基本原理

资深 UI 设计师凭借经验和感觉能快速的搭建高质量的模块和页面,而新手或资历不深的 UI 设计师,费了九牛二虎之力搭建出来的页面总是显得有一丝不够完美,要命的是可能他们自己却看不出来。

就拿很简单的一个登录模块,下面两个设计稿对比哪一种更为优雅呢?如果你说右边更好,那我们更有必要一起来继续阅读这篇文章了。

UI设计进阶干货!盒模型间距设计指南

1. 间距与层级关系

在平面设计排版中间距非常影响设计的品质,间距太紧,会感到信息拥挤,难以阅读;间距太松,会显得内容相关度弱,版面太空洞。

一个对象周围的间距越大,就越容易吸引用户的注意力,这是大留白;间距较远的信息区分较大,而间距较小的信息之间联系紧密。这是间距在人的内心最基础的理解和感受。这一规律在 word 的章节排版体现得最为明显:

UI设计进阶干货!盒模型间距设计指南

源自网络截图 https://www.sohu.com/a/396590247_698728

图中 word 排版,保障正文阅读的最小行高是最小间距,段落标题与正文间间距稍大,章节标题与段落标题之间间距更大。当然有的 word 排版章节层级更为复杂,但也是遵循这一基础规律:间距的大小需根据信息层级由大到小来同等变化,也就是更高层级的信息板块需要使用更宽松的间距,间距随层级递减而需要相应减小。当然最低层级的信息为了保障可阅读性应该具备一个最基础的间距。

在 UI 界面中,我们同样遵循该规律,通过间距来区分层级关系,可以很好地帮助用户理解界面信息。

iOS 的扁平化以及 Material Design 推行以信息为主、弱化视觉干扰,减少一些不必要的线框修饰的设计元素,合理控制间距区分层级,提升视觉美感。

UI设计进阶干货!盒模型间距设计指南

我们看一个例子,去掉分割线后,利用间距的变化将界面信息层级简化的效果:

UI设计进阶干货!盒模型间距设计指南

去除分割线,将信息重新分组,组内间距缩小,组间间距放大,更清晰地把信息呈现给用户,界面更加整洁美观。连标题与内容之间的分割线也可以略去,标题下方也留有足够的间距来突出标题文字内容,还可以一定程度上节约纵向空间。

无论是 web 端还是移动端,现在越来越多的设计都尽量减少线条对画面的割裂感,采用间距控制来把握信息层级关系。但是间距在 UI 界面上不能凭感觉给,应该遵循上面所说的层级关系规律——间距的大小需根据信息层级由大到小来同等变化。

2. 横纵向间距协调感

通常 word 的排版只有纵向间距的考虑,也就是行间距,而字符间距是不需要去更改的。但 UI 设计当中,小到一个图标、控件,大到页面布局,都需要兼顾横纵向的间距,否则设计效果都不会好看。

UI设计进阶干货!盒模型间距设计指南

在 UI 设计当中,我们运用各种各样的元素、控件进行组合设计,对于间距的控制没有平面的自由度高。如上图左右对比,横向的边距与纵向的边距相等或接近时,界面布局会显得更加协调,横向间距过大或过小,都显得不自然,这就是横纵向间距的协调感。

在 UI 设计当中的协调感,从一个文字、一个图标,到一个输入框、一个按钮,最后形成弹窗、表单、甚至是页面、产品,应该有一个全局统一的高矮胖瘦的感觉。

通常为了广泛运用,我们所设计的最基础的图标是方形的,产品中运用的文字主体也是方形的,所以在我们最小一级的层级的横纵向间距基本是相同的。那么以此为基础,将文字和图标放在输入框、弹窗等控件当中,也尽量保持统一协调的间距比例。

当我们设计一个长条状的组件,那么其内部左右的横向间距留白会比上下的纵向间距留白更大,反过来就不协调。

UI设计进阶干货!盒模型间距设计指南

3. 间距与文字行高

通常的界面设计当中,一般以文字信息为主,通过不同的布局和图形辅助设计,帮助用户更好地理解系统界面。web 设计当中浏览器中所能识别的最小字号是 12 号字,为了保障中长段文字信息的可阅读性,通常会给文字排版赋予一定的行高,当文字自动换行时会保持一个利于阅读的间距,比如:12 号字 18px,14 号字 20px,16 号字 24px,20 号字 32px……

UI设计进阶干货!盒模型间距设计指南

按上图中我们以同等的纵向间距为 8px 来排版这些文字时,他们之间实际的间距,人眼所能感受到的距离其实是青色矩形块所表示的间距,他们远比 8px 要大,而且各不相同。

我们的原子级控件、组件中,均以文字为主,包括了行高的考虑,所以在组件使用时,不是那么容易控制好间距的协调感。

如同下图中 B 端常见的一些基础的信息板块,组件之间的拼装,几乎没有见到有相关的指导。不同的设计师在页面实施时可能把间距处理得不一样,同一个设计师,在不同批次的设计当中也有可能不一样,并且前端实现出来之后很难肉眼检视是否 100%还原。

UI设计进阶干货!盒模型间距设计指南

4. 间距与盒模型

为了一定程度上解决 B 端产品中常见的这个问题,也为了提高效率,减少设计师在这种间距审美上的纠结,同时也考虑到前端能更好的理解我们的设计,做到高度还原,我们需要理解前端经典的“盒模型”概念。

设计与前端在“盒模型”上达成一致,才能对应赋予盒子准确的内间距和外间距,才能保障设计的准确还原。当设计也把信息拆解成一个个的盒子时,就能记住相同层级的盒子应该赋予的间距。

在“盒模型”中,所有的内容之间只存在 2 种关系:包含和并列,我们界面中也是如此。

如下图,页面标题和它下方模块中的内容属于包含关系,下方模块中,一级标题 1 和一级标题 2 属于并列关系。

UI设计进阶干货!盒模型间距设计指南

从开发的角度来看,所有界面内容都可以按这 2 种方式去实现:

UI设计进阶干货!盒模型间距设计指南

①包含关系

开发通常按下图的方式实现包含关系,内容从属于标题,考虑到排版的整齐性,通常内容的 padding 距离要与标题的 padding 一致。

UI设计进阶干货!盒模型间距设计指南

当然这里如果标题与内容板块之间有明显分隔,如下图,标题盒模型就有另一种形态,此时标题文字到分隔区域之间多一个 padding 距离。

UI设计进阶干货!盒模型间距设计指南

②并列关系

开发实现并列关系可以如下图,两块内容并列,不做标题设定,则通常内容之间会采用 margin 处理距离,margin 值与其父级的 padding 值接近。

UI设计进阶干货!盒模型间距设计指南

这两种方式的设计与实现,都围绕信息内容所占据的视觉区域,遵循间距与层级关系最基础的原则,通过相对协调的间距来处理信息层级。整个产品界面的信息层级都能以这两种关系进行相互嵌套实现。

>PART 2:我们的间距规范

1. 界面层级的梳理

在 UI 设计界面中每一个间距的设置是有逻辑的。首先我们需要了解内容是什么,他们之间的关系是什么,然后利用间距层级递进的方式来规整页面信息,从而得到有节奏感、有呼吸感、能让用户快速理解的页面。

如下图,根据内容的层级关系,最高层级的间距为 64,层级从大到小,间距也同时递减,遵循了间距与层级关系的基本原理。

UI设计进阶干货!盒模型间距设计指南

有关内容的层级关系,请参阅 https://www.uisdc.com/ui-cheat-sheet-spacing ,图取自此文

所以我们在设计时需要优先梳理出界面的信息层级,才能相应设计不同的间距来引导用户浏览界面。

2. 层级间距的基准设定

在 B 端设计中,我们通常定义最小单位为 4px 的网格系统,以 4 的倍数为基准来规范间距。一般我们以 14 号字为基础正文字号,来定义按钮、标签、输入框等原子组件,然后使用这些组件进行界面设计。

按照上文中“盒模型”的介绍,我们可以把界面中的元素都封装到“盒子”当中,赋予他们 padding 和 margin 值来控制间距。

从图中可以看出,在左边包含关系中,内容盒模型内边距 padding 跟标题的 padding 保持协调一致,而右边并列关系中,两个并列子级之间的外边距 margin 与父级的内边距 padding 保持协调一致。

UI设计进阶干货!盒模型间距设计指南

所以不管包含还是并列关系,间距的控制都与父级的内边距 padding 相关。而这个父级的内边距由什么决定呢?

左图中标题所处的层级是父级,它包含下面的内容子级。标题的 padding 大小其实由标题的文本高度决定(上文 2.2 和 2.3 中介绍的纵横向间距的协调感与文字行高的关系),标题字号越大,对应标题盒子的 padding 值需要更大,标题字号越小,则 padding 值越小。

右图中 margin 向 padding 看齐,而 padding 由其父级的 padding 决定,这就是嵌套(他总需要有一个父级包含着这个盒子)。

反过来,两个并列的内容子级里也可以有包含关系的嵌套盒模型,如下图。两个或两个以上包含关系的盒子并列时,其父级如果没有标题,意味着这是一个空盒子,padding 为 0,那么理论上并列的子级之间的 margin 值应该也为 0,所以两个并列内容之间的间距为 padding 值 x2。

UI设计进阶干货!盒模型间距设计指南

当以 14 号基准字号的组件来进行设计时,我们发现最小的层级的 padding 为 20px 与组件的内间距设计最为协调。

UI设计进阶干货!盒模型间距设计指南

当我们设计 14 号标题的上一层内容时,相当于在它的外层再套一层盒子,设定一个更大的字号 16 和更大的 padding24px。我们直接嵌套发现,出现两层盒模型的 padding 值直接叠加,导致空间浪费,并且缩进后的文字排版并不美观。

UI设计进阶干货!盒模型间距设计指南

其实按照上文中“盒模型”的嵌套规则,16 号标题的内容子集 padding 值应该为 0,直接整个嵌套标题 14 号包含关系的整个盒模型。而直接这样嵌套时发现两级标题并没有左对齐,此时需要将父级标题的 padding 调整为 20px。如下图中的效果,通过标题字号也能区分出层级,节省了直接嵌套的空间浪费。

UI设计进阶干货!盒模型间距设计指南

所以我们定义 14 号和 16 号的标题文字,都可以用 padding 为 20px 的间距来进行控制。

在反推过程中,我们发现两个并列内容之间的间距为 padding 值 x2,即 20x2=40,这个间距过大,浪费了太多空间,适当的调整为 32px 后,显得更为协调。所以当并列的两个盒模型同时有 20px 的内间距留白时,并列盒子之间留白距离要适当缩减为 32px(20×2-8)。

UI设计进阶干货!盒模型间距设计指南

在业务复杂的 B 端产品中,层级往往会超过 2 级,这时该怎么办呢?

3. 盒模型嵌套底板空间循环

我们发现,当一个模块空间中出现超过 3 个层级时,再用左对齐的方式,用户的理解难度会变得很大(如下图),虽然下图中通过了多种方式来解释层级关系,如分割线、不同大小的标题、嵌套框,但是整个看上去依然不太理想。

UI设计进阶干货!盒模型间距设计指南

心理学家 SusanWeinschenk 说过:人在识别物体时会寻找规律。所以我们要尽量创建规律来帮助用户快速解读信息。

盒模型的嵌套其实就如同套娃,每层都具备自己一个独立的空间,循环的嵌套。于是我们尝试着采用了更换底板背景来区分嵌套的空间,并限制单个底板空间中出现的层级不超过 2 级,超出则更换嵌套底板,那么嵌套后间距及标题参数则可以重新循环。按照这种规律设计出的结果,非常富有简单清晰的节奏感,用户理解起来更加容易。

UI设计进阶干货!盒模型间距设计指南

若嵌套后只有一层标题时,三级标题优先采用小号标题(14 号),因为它看起来更加协调。

UI设计进阶干货!盒模型间距设计指南

当然这种嵌套也不是无限的,一个页面中出现三个底板的嵌套基本上已经达到了极限,再多时就需要考虑从业务角度去梳理信息层级,通过页面的层级来表达复杂的信息关系。

UI设计进阶干货!盒模型间距设计指南

4. 丰富层级的灵活运用

通过盒模型嵌套底板空间循环的方式,我们可以使用相同的间距来解决信息层级区分设计,并且很容易的保障前端的高度还原。但是 B 端复杂的系统中,往往上述两种标题不足以覆盖全部的场景,我们通常用于包含关系中的标题层级,还有 Tab 选项卡,根据基准的 20px 间距,和 14、16 号两种尺寸的标题字号,我们扩展出 3 种尺寸的标题(大、中、小)和 3 种 tabs(大尺寸线条型、中尺寸线条型、胶囊型)。设计使用时层级由高到低,依次使用,不允许跨级。

UI设计进阶干货!盒模型间距设计指南

大标题(20 号)用于概括整体页面,页面中只会有一个,它的行高(32px)和视觉看到的字高(26px)相差了 6px,根据上方基准 padding 为 20px,那么横纵向的间距会不太协调,我们将左右和下方的 padding 值微调成 24px 后不协调感得到改善。

UI设计进阶干货!盒模型间距设计指南

注意:同一层级容器内,线条 Tab-Bar 不能出现 2 个,容器嵌套时允许出现 2 个

UI设计进阶干货!盒模型间距设计指南

5. 总体规则导出

总结一下规则(以 14 号字为基准):

  1. 梳理清晰全局的信息内容,统一遵循“盒模型”包含和并列关系,基准间距统一为 20px;
  2. 当并列的两个盒模型同时有 20px 的内间距留白时,并列盒子之间留白距离要适当缩减为 32px(20×2-8);
  3. 采用盒模型循环底板嵌套进行层级设计,单个底板只允许两层层级,超出时采用嵌套更换底板。注意:若嵌套后只有一层层级时,三级标题优先采用小号标题(14 号);
  4. 3 种标题与 3 种 Tab 根据层级由高到低,依次使用,不允许跨级。20 号大标题为页面标题,它的子级左右下方的 padding 值为 24。

>PART 3:总结回顾

上述的方式是基于我们产品的特性分析得出的,它的目的是为了减轻设计师在设计过程中对间距的纠结,同时提升整体产品的可读性和一致性,当然不能以一概全。

接下来我们会进一步地在更多的产品和场景中去验证使用,并继续深入研究其中的规律。

参考文章:

  1. https://blog.prototypr.io
  2. https://www.uisdc.com/ui-cheat-sheet-spacing

碧野青风

想了解更多网站技术的内容,请访问:网站技术

本文来源:https://www.youhuaxing.cn/seodongtai/19835.html

免责声明:部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性,不承担任何法律责任。
用我们的专业,做您满意的SEO+高端网站建设服务商!