一、全文速览图
相信刚开始学 UI 设计的时候，不管是从 Figma 社区获取界面素材，还是使用官方组件库，里面的图层往往会有一个外边框，而这个边框和视觉元素的可见边缘并不一致。
这就是 UI 设计中的元素背景框（占位框 / 视图区域），是 UI 设计中最基础且最重要的知识点之一，也是很多新手初期阶段的主要疑惑点。
所以今天我们就围绕这个问题，做一次最简单易懂的分享。
二、背景框的认识与类型
背景框是 UI 设计中进行视觉元素排版的关键要素之一，和平面设计有很大的不同。这种差异源自前端开发界面样式的逻辑，要使用矩形框架进行堆叠并确定排版位置，随后再置入视觉元素。
使用相同的布局思路做设计，就可以让设计稿和前端实现的框架保持一致，大大提升后续的开发效率和还原度。更具体的价值我们就不在这里展开，下面我们重点解释背景框在设计中的使用场景，主要包含三个大类：
- 文本背景框
- 图标背景框
- 控件 / 组件背景框
类型 1：文本背景框
文本背景框就是文本区域，在 Figma 中添加文本图层后选中它就会展示出来，是文本自带的属性，一定会有。
文本框的尺寸定义包含两种模式，一种是自适应尺寸 Hug，一种是固定尺寸 Fixed。下面分别解释它们的尺寸定义逻辑。
1）文本背景框的自适应宽 Hug Width：字号 * 字数。
中文一个字符的宽度和字号相同，假设设置 14pt 的字号，那么一个字和一个全角的中文标点就是 14pt 宽，假设 5 个字就是 70pt 总宽。如果出现数字和英文，那么它们的字符宽就各不相同，但最终的文本区域总宽就是所有字符宽的总和。
2）文本背景框的自适应高 Hug Height：行高 * 行数。
在界面中，一个文本的高度由行高决定而不是字号，所以一行文本和行高等同，多行文本那么高度就是 行高 * 行数。比如 14pt 的字号，24pt 的行高，那么 4 行文本框就是 96pt 高。
3）文本背景框的固定宽 / 高 Fixed Width / Height
固定宽就是设计师自己定义宽度和高度了，但它和自适应模式也有很大的关系，因为我们先判断每行最多支持几个字、最多显示几行。
如设计一个输入框，往往会根据输入的字数来决定它的宽度，比如输入姓名时最大支持 10 个中文字符，字号是 16pt，它的宽就必须要大于 10*16pt。如果是设计一个简介框，我们只想支持最多 3 行内容的显示，行高是 28pt，那么这个输入框的最小高度就要大于 3*28pt。
类型 2：图标背景框
第二类图标背景框，则是决定图标尺寸大小的要素。图标和中文非常类似，一个图标一个坑（框），且四周会预留一定的边距，这是在图标绘制初期就决定的，而不是后期自己加。
所以置入的专业图标素材都会自带背景框，我们要做的就是根据图标的使用场景直接决定它的大小。
1）大型图标 Large icon：36 - 80pt
主要是应用于快速入口、重要分类、功能上的图标，要足够显眼，所以尺寸一般较大。
2）中型图标 Medium icon：24-36pt
应用内最主流的示意型图标或功能图标，既要能被清晰看见也要便于点击和操作。
3）小型图标 Small icon：12-24pt
小型图标一般用在一些比较次要的位置上，用户不会主动盯着它看，勉强能看见即可。
类型 3：控件 / 组件背景框
第三个就是控件 / 组件的背景框，这里先做个区分，我们讨论的是隐形的背景框，但不是填充了背景色，比如有背景色的按钮、动态卡片。
1）组件背景框的固定高度：x < 44pt < y
固定高度的组件就是我们设计时直接设置了这个背景框的高度，比如画顶部的标题栏、一个大组件内部的工具栏、一个列表中的选项等等。
组件的数量非常多，靠硬背是没用的，而我们要设置它的高核心要关注的数值就是 —— 44。因为早年用户体验的研究中给出 44 是最适合用户点击的“黄金”尺寸。所以早年 44 就成为按钮和列表栏的最佳高度，时至今日 iOS 还有大量官方组件在使用这个高度尺寸。
但这个尺寸其实并不小，在信息密集的页面中是无法全部应用的。所以当我们设计横栏时，就可以用 44 作为一个分水岭，大于等于 44 就是舒适或偏大的尺寸，次要的或需要刻意弱化的元素就要小于 44。
2）组件背景框的自适应宽度：上级组件与分布决定
组件的背景框的宽度通常由上级的环境决定，比如组件要全屏宽或撑满上级组件，那么它的宽就由画布或上级组件宽（如果有内间距也会影响）决定。
第二种情况就是由比例决定，在一个等分的环境下，比如有 5 个按钮的底部导航栏中，每个导航按钮的宽度是页面的 1/5。或是分类页面中，每个分类选项的实际背景框是这个区域的 1/3。
3）组件的自适应高度：元素 + 间距
大多数组件的宽和高是为了包裹、容纳、定位下级元素的，但还有一种特殊的情况，就是用来辅助自身或整个页面的排版。
比如在首页中的典型设计之一就是模块是由大标题 + 内容组成，不同模块之间使用间距分隔。
但在组件化设计的过程中，部分设计是会将这个间距直接合并成组件的一部分。换句话说，间距也会成为背景框的一部分，而在排版中模块和模块之间就是 0 间距。比如苹果官方组件库的样例中，就是这么做排版的。
模块间距要不要加到组件内容成为背景框的一部分就看设计规范是怎么定的，不是非用不可。如果看到使用这种模式也不用觉得惊讶，了解背后的机制即可。
三、结尾
以上就是背景框定义的相关逻辑了，它是 UI 整体尺寸定义中的一部分，和其它元素尺寸定义有很大的联系。掌握好更基础元素的尺寸定义方式，再牢记上面提到的思路，就可以很快掌握应对它的技巧。