兰亭妙微ui设计公司分享：做出来的 UI 界面总是看着别扭、还原实现和设计稿差距大？很多时候问题并非配色、排版，而是忽略了元素背景框这个底层基础概念。
新手在使用 Figma 做设计时，经常会发现图层外层存在一圈看不见的虚框，它和元素肉眼可见的图形边界并不重合，这就是背景框（也叫占位框、视图区域）。它脱胎于前端开发的布局逻辑：页面本质是一个个矩形框架层层堆叠，再往框架内部放入视觉内容。遵循这套逻辑做 UI 设计，能极大缩小设计稿与开发还原效果的偏差，是 UI 从业者必须吃透的基础知识点。
UI 背景框主要分为三类：文本背景框、图标背景框、组件 / 控件背景框。
一、文本背景框
文本背景框是文本图层自带的属性，Figma 选中文本就会显现，分为自适应 Hug 和固定 Fixed 两种模式。
- Hug 自适应尺寸
- 宽度：由字符总宽度决定，中文单字符宽度≈字号，英文、数字字符宽度各不相同；
- 高度：由行高 × 行数计算，文本高度看行高，不是字号本身。
- Fixed 固定尺寸 设计师手动限定宽高，需要提前预估内容承载上限。例如姓名输入框要预留足够宽度容纳最多 10 个汉字；简介输入框限制最多展示 3 行，框体高度就要大于「行高 ×3」，避免内容被截断。
二、图标背景框
图标并不是画完图形就结束，专业图标会预先预留四周留白，留白属于背景框的一部分，而不是后期额外添加边距。 按使用场景分为三档尺寸：
- 大型图标 36‑80pt：首页入口、核心功能模块，需要强视觉突出；
- 中型图标 24‑36pt：页面主流功能图标，兼顾识别度与点击体验；
- 小型图标 12‑24pt：次要辅助标识，提示类小符号。
拿到现成图标素材，直接修改背景框整体大小，不要单独拉伸图标图形。
三、组件 / 控件背景框
组件背景框是包裹按钮、列表栏、卡片等控件的隐形容器，不一定带有填充底色。
- 组件高度：44pt 点击黄金基准值 44pt 源自移动端交互研究，是舒适的触控点击高度，iOS 大量原生组件沿用该数值。
- 核心可点击元素，优先 ≥44pt；
- 信息密集页面、次要弱化模块，可以小于 44pt。
- 组件宽度：由父容器和布局规则决定
- 撑满模式：宽度继承上级容器，受内边距约束；
- 等分模式：导航、宫格布局，按比例均分区域宽度。
- 组件自适应高度：内容 + 间距共同撑开 组件高度由内部文本、图标等子元素，加上间距共同决定。
注意：模块之间的间距，既可以放在组件外部；也可以直接纳入组件背景框内部，模块之间间距设为 0。两种方式没有对错，以团队统一的设计规范为准。
写在最后
背景框本质就是打通UI 设计与前端开发的一套尺寸规则。看懂看不见的边界，才能把文本、图标、组件放到正确的位置。理清文本、图标、组件各自的背景框逻辑，能解决绝大多数界面排版混乱、开发还原走样的问题。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
