UI设计师必须懂的「隐形骨架」！背景框设计完全指南

一、全文速览图

在 UI 界面设计过程中，会创建一些透明的背景区域来辅助我们进行排版，即使没有这种操作经验，也可以在各类专业的设计源文件中发现它们的身影。

这个知识点看似边缘，但在实际项目设计过程中却能发挥异常重要的作用。这几天正好有学员在咨询这个问题，所以我们就围绕这个知识点，做一篇新的详细说明。

二、UI 中的隐形边框来源

UI 设计不是纯粹的平面设计，也是工程（软件工程）设计中的一种，需要应用规范化的制图标准，才能确保后续工程实施能顺利展开。

设计制图的标准，是由工程的实施方法决定出来的，所以要理解 UI 制图的标准，就要认识界面前端开发的一些基本逻辑和概念。

前端开发就是对用户所使用的客户端程序、网页进行编程的总称，与之相对的后端开发则是面向服务器端的程序和数据库进行编程的总称。

前端工程师需要开发用户可见的界面与交互，所以需要设计师提供设计稿作为开发的依据，也是设计师需要高频进行协作与工作成果交付的对象。

虽然不同前端系统类型会应用不同的编程语言和开发特性，但实现界面样式的开发逻辑却是大体相同的，我一般形容前端界面样式的开发模式为 —— 矩形堆叠的布局模式。

简单来说，就是软件界面是由若干矩形模块进行排列、拼接、组装而成的，用户看见的视觉元素都要先“装”进这些矩形模块内，才能进行后续的拼装环节，而不是以图形本身的轮廓作为排版的依据。

比如下图的界面前端布局示意：

这种矩形模块在网页前端一般叫 Div，在移动端前端一般叫 View，虽然叫法不同（不止这几种），但它们的用法是一致的。前端工程师要给这些模块设置尺寸（Height/Width）和位置参数（Position），才能完成视觉界面的布局。

这些模块还具有上下嵌套的层级关系，下级元素被置入模块以后，这个模块会被置入到上级模块，而上级模块还会被置入到更上级的模块。

我们用下面这个简单的模块举例：

UI 最基础的元素就是几何、文本、图标、图片，它们都会有自己的边框轮廓。

1. 几何：在图中就是有背景色的圆角矩形，它们都包含一个没有圆角的上级模块。
2. 文本：自带矩形模块，文本框的区域就是矩形模块的应用。
3. 图标：图标图形虽然不规则，但会做成包含完整矩形区域的格式再进行排版。
4. 图片：图片格式本身就是矩形的，需要置入图片格式的矩形模块内才能展示。

这些模块形成后，还需要再使用上级模块进行编组，比如右侧信息区域上方是一个组，左下方是一个组，右下方是一个组，它们又会合并成完整的信息模块。

右边信息模块和左侧图片模块又可以组合成单个完整的商品卡片模块，多个商品卡片模块进行组合又可以形成完整的卡片列表模块。

如果有一定的 UI 设计经验，那么应该能感觉出来这不就是用 Figma 设计这个组件的过程吗？

恭喜你，你的感觉是对的，因为 Figma 规划的设计操作逻辑，就是尽可能还原前端开发界面的方式。不管是图层编组的结构，还是 Frame 矩形画框、Auto Layout 自动布局，都源自前端界面布局的标准。

虽然两者不会完全一致，但如果设计输出的设计格式越接近真实开发的标准，那么前端实现起来也就越容易且误差越小，反之则越困难且偏差越大。

让设计稿贴近真实前端布局结构，就是我们在UI设计过程中要多此一举绘制不可见矩形模块的原因。

三、背景框的设置逻辑

既然 UI 设计过程中要添加背景框，那么什么时候用，怎么用就是接下来要讨论的话题。我们先从底层元素开始说起，再逐步向上级延伸。

1. 基础元素的背景区域设置

UI 基础元素上面就提过，包含几何、文本、图标、图片四种。几何和图片因为本身就有固定的矩形区域所以不用多做介绍，我们需要了解文本和图标两种元素的背景框应用逻辑。

文本元素的矩形边框就是文本区域，而文本区域主要受排版类型和行高两个因素影响。排版类型即 Figma 文本 Layout 模块中的那三个选项，向右排列、固定宽度、固定尺寸。

在前端的文本区域设置中，只有文本很少的情况下可能使用向右排列的模式，而多数情况下文本显示空间是有限的，所以都会添加固定的宽度或高度。比如一个商品标题，可能字数非常多，如果不限制文本的显示区域是根本放不完的，所以会使用固定宽度的模式。

还有文本本身自带行高，单行文本中行高决定了文本区域的高度，而它们默认大于文本的字号，形成了文本区域内上下的留白。新手很喜欢将行高设置成和字号相同的高度便于排版，实际上这是错误的，即使文本区域大于文字的轮廓，专业的设计与前端开发也是以文本区域作为排版对齐的标准。

图标元素的矩形边框则是我们对图标大小的制定标准，可以把图标等同于汉字，每个汉字就像被置入在一个隐形田字格内，所以字形占位空间是完全一致的，我们不会因为 “一” 比较扁就认为它在同字号下比 “囊” 小。 图标同理，我们也需要给相同规格的图标添加尺寸一致的矩形边框，且图标也是以这个边框进行排版，而不是使用图标的轮廓。

2. 上级模块的背景区域设置

接着我们来认识上级模块的背景区域设置，包含固定尺寸和自适应尺寸两个大类。

先说固定尺寸模块，即开始创建模块前尺寸参数就是确定好的类型。比如常见的顶部标题栏、工具栏、底部导航栏、操作栏等等，都有固定的尺寸数值。

这些模块的尺寸参数通常来自于官方组件，虽然我们在实际设计过程中不一定会引用官方组件，但功能、形态和官方类似的组件，我们都会尽可能沿用它们的尺寸，避免创建新的尺寸出来。这是行业在发展过程中形成的共识，可以提高同一系统下不同应用之间的整体性。

应用固定尺寸模块的另一个作用，就是作为下级元素的对齐对象。比如我们创建了顶部标题栏，那么置入元素后就可以作为进行顶部或垂直居中对齐的依据，而不是根据上方的其它组件添加间距。

在UI设计过程中，固定尺寸的模块类型并不多，我们更多创建的模块是自适应尺寸的类型，也就是模块的大小是根据内容尺寸决定的。

比如创建一个动态卡片，卡片本身的内容就无法统一，可能有视频，可能有图片，可能有不同行数的文本，那么这个卡片的高度就不应该统一，要跟随实际内容的高度变动。

还有一种情况就是内容可以固定，但我们没有设计完内容之前无法决定最终模块的尺寸。比如下面这种复杂的信息模块，我们很难一开始就能确定应该创建多大合适，所以会先完成里面内容的设计和布局，然后再加上间距来计算出最终的尺寸。

在这里，我们看到的模块案例都是自带背景色的，但不代表矩形背景只应用在有色彩的环境中，那些没有背景色的模块、列表同样需要我们创建矩形背景进行排版，而不是只用最上和最下方元素的边缘作为间距的依据。

因为页面本来就是由组件拼装而成，所以模块背景边框的有效创建可以极大地提升组件设计的质量，提高页面的排版效率和视觉统一性，这也是后续进行项目组件库搭建的重要依据。

至于在 Figma 中要使用 Frame 还是一般编组+矩形图层的模式就看自己的个人偏好，这反而是最不重要的一环。

四、结尾

矩形边框的应用和平面设计的操作是完全不同的，会更改我们的操作习惯，需要花一定的时间通过练习来适应。而这也是UI设计最基础的基本功之一，不能因为可以指挥AI生成界面就忽视这部分。

还有什么别的疑问可以在下方或社群留言。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」