兰亭妙微ui设计公司分享：做出来的 UI 界面总是看着别扭、还原实现和设计稿差距大？很多时候问题并非配色、排版，而是忽略了元素背景框这个底层基础概念。

新手在使用 Figma 做设计时，经常会发现图层外层存在一圈看不见的虚框，它和元素肉眼可见的图形边界并不重合，这就是背景框（也叫占位框、视图区域）。它脱胎于前端开发的布局逻辑：页面本质是一个个矩形框架层层堆叠，再往框架内部放入视觉内容。遵循这套逻辑做 UI 设计，能极大缩小设计稿与开发还原效果的偏差，是 UI 从业者必须吃透的基础知识点。

UI 背景框主要分为三类：文本背景框、图标背景框、组件 / 控件背景框。

一、文本背景框

文本背景框是文本图层自带的属性，Figma 选中文本就会显现，分为自适应 Hug 和固定 Fixed 两种模式。

1. Hug 自适应尺寸

   

    

• 宽度：由字符总宽度决定，中文单字符宽度≈字号，英文、数字字符宽度各不相同；
• 高度：由行高 × 行数计算，文本高度看行高，不是字号本身。

  

2. Fixed 固定尺寸 设计师手动限定宽高，需要提前预估内容承载上限。例如姓名输入框要预留足够宽度容纳最多 10 个汉字；简介输入框限制最多展示 3 行，框体高度就要大于「行高 ×3」，避免内容被截断。

   

二、图标背景框

图标并不是画完图形就结束，专业图标会预先预留四周留白，留白属于背景框的一部分，而不是后期额外添加边距。 按使用场景分为三档尺寸：

• 大型图标 36‑80pt：首页入口、核心功能模块，需要强视觉突出；

  

• 中型图标 24‑36pt：页面主流功能图标，兼顾识别度与点击体验；

  

• 小型图标 12‑24pt：次要辅助标识，提示类小符号。

  

拿到现成图标素材，直接修改背景框整体大小，不要单独拉伸图标图形。

三、组件 / 控件背景框

组件背景框是包裹按钮、列表栏、卡片等控件的隐形容器，不一定带有填充底色。

1. 组件高度：44pt 点击黄金基准值 44pt 源自移动端交互研究，是舒适的触控点击高度，iOS 大量原生组件沿用该数值。

   

• 核心可点击元素，优先 ≥44pt；
• 信息密集页面、次要弱化模块，可以小于 44pt。

2. 组件宽度：由父容器和布局规则决定

   

• 撑满模式：宽度继承上级容器，受内边距约束；
• 等分模式：导航、宫格布局，按比例均分区域宽度。

3. 组件自适应高度：内容 + 间距共同撑开 组件高度由内部文本、图标等子元素，加上间距共同决定。

   

注意：模块之间的间距，既可以放在组件外部；也可以直接纳入组件背景框内部，模块之间间距设为 0。两种方式没有对错，以团队统一的设计规范为准。

写在最后

背景框本质就是打通UI 设计与前端开发的一套尺寸规则。看懂看不见的边界，才能把文本、图标、组件放到正确的位置。理清文本、图标、组件各自的背景框逻辑，能解决绝大多数界面排版混乱、开发还原走样的问题。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微ui设计公司分享：选对字体组合只是中英混排的第一步。很多时候字体本身风格契合，版面依旧显得松散、别扭，问题往往藏在容易被忽略的排版细节里。基线对齐、字号倍率、字重层级、间距控制…… 这些看不见的规则，才是拉开质感差距的关键。本篇我们聚焦混排落地调校，拆解实操参数与常见误区。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微设计师真实项目经历，反驳 “只要功能跑通就够，不需要研究用户” 的职场观点，强调做体验设计必须理解真实使用者，同时给出资源有限条件下做用户认知的实操办法。

同样是一段对话，有的AI产品能够查找资料，有的还能生成草稿、调用工具或完成后续动作。NN/g近期由Caleb Sponheim撰文介绍Agent Harness，解释模型周围的软件怎样组织上下文、工具和执行限制。兰亭妙微借这个概念，分享对企业AI助手界面的观察。下文围绕“整理一份设备维护记录并形成工单草稿”的假设任务展开，四张配图均为独立AI概念示意，用来讨论产品如何说明能力、过程与结果。

招聘系统里，同一个人可能同时出现在申请列表、流程看板、面试日历和沟通记录中。页面数量增加以后，设计需要帮助使用者确认自己正在处理谁、处于哪个阶段，以及下一步由谁继续。dpopstudio近期围绕TalentFlow分享了招聘工作台的布局思路。兰亭妙微以原作画面为入口，围绕一组假设的候选人记录展开观察，讨论列表、状态与日程之间怎样形成连续的工作路径。

企业官网里常见一组大数字、几张项目卡片和一个醒目的联系入口。这些内容既要表达品牌，也要方便访问者核对信息。dpopstudio近期分享了FundWise网站模板的设计思路，原作画面以深绿色、明亮重点色和模块化内容为特点。兰亭妙微这次从这些画面出发，讨论企业网站的数据展示与阅读路径。文中的项目资料列表是独立应用示例，配图中的商业数字仅作为原作者视觉展示的一部分。

打开一份需要签署的文件，用户往往同时关心三个问题，文件是不是自己要处理的，哪些位置需要填写，完成以后会发生什么。dpopstudio近期以AItentico为例，讨论了电子签署界面的状态与阅读关系。兰亭妙微借这个主题分享交互设计观察，下面的流程采用假设的企业文件确认场景。原文配图按实际画面说明，补充界面单独标为AI概念示意，具体签署规则与身份要求由真实产品流程决定。

告警后台常常同时出现统计数字、事件列表、趋势图和详情。页面看起来很满，值班人员却仍要回答一个具体问题，眼前哪件事需要先处理。dpopstudio近期围绕GuardianOps分享了安全工作台的设计文章。兰亭妙微这次以原作配图为阅读入口，分享对告警界面信息组织的观察。下文以一个假设的设备运维队列举例，具体事件规则、权限与响应策略需要结合实际业务确定。

兰亭妙微持续关注国内外优秀网页设计作品，分享页面结构、视觉表达与交互思路，进行设计审美积累。

一、案例背景

FurniFlex 是公开展示的家具电商网站设计，涵盖首页导购和商品列表。它把室内搭配场景、家具分类、商品价格与筛选条件放在连续的浏览路径中，适合观察家居品牌如何兼顾生活方式表达与具体选购任务。

图 1  首页 场景导购与购买入口

深青色首屏将品牌文案与室内场景分成左右两区，黄色购买按钮形成清楚的视觉焦点。场景卡片、方向箭头和下方服务信息衔接浏览任务，让用户先理解网站卖什么、如何开始选购。

图 2  品类与热门商品 两种浏览路径

圆形品类图片先提供按家具类型浏览的入口，下方热门商品又按房间设置标签。商品卡片统一呈现图片、名称、价格、折扣与收藏图标，便于在同一网格里比较不同家具。

二、设计策略

首页以深青色承托室内场景图，金黄色集中用于购买按钮和关键入口。信息顺序从房间场景进入品类，再展开商品卡片；列表页改用白底与浅灰图片区，让材质、造型和价格更容易比较。统一的圆角、卡片比例与图标位置维持整体节奏，深色价格条则把首页商品名称和购买动作收束在一起。

图 3  商品列表 筛选条件与商品网格

左侧将类别、价格、材质、颜色和库存分组，右侧以三列商品网格展开结果。排序置于列表上方，分页放在末尾；条件选择与商品比较分区明确，适合观察桌面电商页面的信息密度。

三、浏览路径与操作入口

样稿展示了房间分类标签、轮播箭头和收藏图标的选中样式。列表左侧按类别、价格、材质、颜色与库存组织筛选，右侧保留排序和分页；FAQ 展示一项展开、其余收起的状态，用深色背景区分当前内容。

图 4  常见问题与邮件订阅

FAQ 将选购、材质、配送和退换等问题集中呈现，展开项用深色块突出回答。下方订阅区把邮箱输入与提交按钮合并成一条操作带，配合家居场景图延续整站的生活方式表达。

四、设计启发

家具网站可同时提供按空间和按品类寻找商品的入口，再用材质、价格等条件缩小范围。借鉴时应保持卡片字段顺序一致，并在购买路径附近解释配送、退换与选购问题，让视觉灵感能够接续到具体决策。

如有家具电商、家居品牌官网或商品展示网站设计需求，欢迎联系兰亭妙微。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

本文翻译海外文章，系统梳理 UX 项目全流程可交付物（交付文档 / 产出物），按照研究阶段、UX 设计阶段、界面设计阶段划分，说明每份产出的用途、内容要点，同时说明交付与后续支持的完整流程。