兰亭妙微ui设计公司分享：做 UI 设计时，我们常会绘制一些看不见的透明背景框辅助排版。即便你没有主动做过这类操作，打开成熟项目的源文件，也总能发现它们的踪迹。

这个知识点看着不起眼，却是落地项目里至关重要的底层能力。不少学员都曾为此困惑，本文就系统拆解 UI 背景框的设计逻辑与实操方法。

一、UI 里的隐形边框，从何而来？

UI 设计不等同于纯平面创作，它属于软件工程的一环，必须遵循标准化制图规范，才能保障设计方案顺利交付开发。

制图规范不是设计师凭空制定，而是由前端的实现逻辑决定。想要吃透 UI 制图规则，就要先理解前端基础工作逻辑。

前端工程师负责实现用户可见的界面与交互效果，设计师输出的稿件，就是前端开发最核心的参考依据，二者需要高频协作交付成果。不同开发平台语言各不相同，但界面渲染的底层逻辑高度统一，我把它概括为：矩形堆叠布局模式。

简单来说：整个软件界面，是无数矩形模块排列、嵌套、拼接组装出来的。所有视觉元素，都要先收纳进矩形容器内，再完成页面拼装；排版对齐的依据是容器边界，而非图形本身的外形轮廓。

网页端这类容器叫 Div，移动端称之为 View，名称有差异，但核心作用一致。前端会为容器定义宽高、定位等参数，完成界面布局。容器支持多层嵌套：子元素装入父容器，父容器再归入更高层级的容器，层层构建完整页面。

UI 四大基础元素：形状、文本、图标、图片，全部拥有对应的容器边界：

• 形状：例如带圆角的色块组件，外层会包裹一层无圆角的父级矩形容器；
• 文本：文本本身自带矩形容器，文本框区域就是它的占位边界；
• 图标：哪怕图形轮廓不规则，排版时也会套入固定尺寸矩形容器；
• 图片：本身就是矩形资源，需要置入图片容器完成渲染展示。

元素完成之后，再通过父容器完成分组。譬如卡片内部，把上方信息区、左下模块、右下模块分别编组，合并为完整信息模块；信息模块搭配左侧图片模块，组成单张商品卡片；多张卡片再组合，生成完整的卡片列表。

有 Figma 使用经验的同学会发现：这和我们搭建组件的流程一模一样。Figma 的图层编组、Frame 框架、Auto Layout 自动布局，本质都是在模拟前端真实的布局逻辑。

当然设计工具和开发实现不会 100% 对等，但设计稿的结构越贴近前端容器逻辑，还原度越高，开发成本越低；反之则容易出现视觉偏差，增加沟通改稿成本。

这就是为什么我们要在稿子里绘制这些看不见的矩形背景框：对齐开发逻辑，缩小设计与落地之间的鸿沟。

二、背景框该如何设置？

理解了来源，接下来讲落地规则，我们从底层基础元素，向上延伸到父级模块。

1. 基础元素：文本与图标的背景框规则

形状和图片本身自带矩形边界，无需额外处理，重点关注文本、图标两类元素。

文本

文本的占位容器由排版模式和行高共同决定。对应 Figma 文本 Layout 三种模式：自动延展、固定宽度、固定尺寸。

实际开发中，只有极短文本适合自动向右延展；绝大多数场景，都要给文本设置固定宽高约束。举个例子，商品标题字数不可控，如果不限制容器宽度，文字会无限横向延展，破坏页面布局，因此必须设置固定宽度。

另外很多新手会踩坑：为了视觉对齐，强行把行高设置成和字号相等。这是错误做法。单行文本里，行高决定文本容器的整体高度，容器天然会在文字上下留出留白。不管文字本身轮廓多大，设计和前端对齐，都以文本容器边界为准，而不是文字笔画本身。

图标

图标的容器逻辑，可以类比汉字的田字格。 同样字号下，汉字 “一” 外形扁，“囊” 笔画繁复，但二者占位空间完全一致，不会因为字形大小改变排版位置。图标同理，同规格图标，必须统一外层矩形容器尺寸，排版对齐参考容器边框，不能按照图标图形本身轮廓去对齐。

2. 父级模块：固定尺寸 vs 自适应尺寸

父容器分为两大类型：固定尺寸模块、自适应尺寸模块。

固定尺寸模块

在设计之初宽高就已经确定，典型代表：顶部标题栏、工具栏、底部导航、操作栏。

尺寸大多参考官方组件规范。即便不直接复用官方组件，功能相近的模块，也尽量沿用既定数值，避免随意新增尺寸。这是行业沉淀下来的共识，保障整套产品视觉体系统一。

固定容器还有一个核心价值：作为子元素对齐基准。比如设计顶部标题栏后，栏内所有元素，直接依托这个容器做顶对齐、垂直居中，而不是靠元素之间的间距去推算位置。

自适应尺寸模块

UI 项目里占比更高，容器大小由内部内容决定。 比如动态内容卡片，内部可能嵌入图片、视频、多行文案，内容长度不可预知，卡片高度就不能写死，要跟随内容自动伸缩。

还有一类场景：模块功能确定，但内部内容还没设计完成，无法预先定义容器大小。面对复杂信息模块，我们一般先完成内部元素排布，再叠加内外边距，反推容器最终尺寸。

重点提醒：容器不一定需要填充背景色。无底色模块、列表组件，同样需要绘制隐形矩形容器做排版基准，不能直接拿最上层、最下层元素的边缘来计算间距。

页面就是组件不断拼装的结果。合理搭建背景框容器，能够提升组件质量，优化排版效率，保证视觉一致性，也是搭建项目组件库的重要基础。至于 Figma 选用 Frame 框架，还是普通编组 + 矩形图层实现，属于个人习惯，并非核心问题。

转载：优设

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

兰亭妙微ui设计公司分享：UI 设计里，图标是界面信息传递的核心载体。很多设计师会直接套用图标库、依赖 AI 生成图标，但想要做出一套风格统一、适配业务、可落地交付的图标，就必须吃透底层绘制参数与设计规范。本文基于 Material Design 体系，整理一套可直接上手的图标设计完整参数，帮你避开图标绘制常见坑。

一、UI 图标三大核心分类

界面设计偏向排版布局，重在元素组合，入门门槛较低；而图标设计属于图形创作，需要手动绘制图形，学习曲线更陡峭。不同类型图标，设计逻辑、绘制技法差异巨大，首先分清图标类型，才能选对对应的规范。

UI 图标主要分为启动图标、工具图标、装饰图标三类：

1. 启动图标：应用入口标识，也就是手机桌面 App 图标。一般由背景底板 + 图形主体构成，主体可以是品牌 Logo、图形符号、插画、特殊字体等，不同操作系统有各自严格的尺寸与裁切规范。

   

2. 工具图标：产品内部高频使用的功能符号，例如关闭、收藏、点赞、设置、播放等，以线性、面性样式为主，是 UI 设计师必须掌握的基础能力。

   

3. 装饰图标：用于烘托页面氛围，提升视觉表现力，常使用 3D、毛玻璃、插画、拟物等复杂视觉效果，多用于空状态、运营活动页面。

   

学习建议：遵循由易到难，优先吃透工具图标，再进阶学习装饰图标、启动图标。

为什么不能只靠图标库与 AI 生成图标？

不少新人会有疑问：网上现成图标库资源丰富，AI 也能快速出图，为什么还要手动绘制图标？

1. 图标库存在同质化，无法匹配品牌需求 开源图标库被大量项目复用，辨识度过高，很难贴合产品独有的品牌调性；项目中还经常出现库内没有的定制图标，现成素材无法覆盖全部业务场景。

   

2. AI 生成图标落地缺陷明显 AI 擅长复杂创意图形，但基础功能图标往往细节崩坏；并且输出大多为位图，很难得到干净可用的矢量源文件，无法给到开发进行迭代交付。

   

真实项目中，定制图标需求是常态，素材库与 AI 只能作为辅助，掌握手绘图标能力，才能从容应对多变的业务需求。

二、工具图标核心设计规范

提示：工具图标规范属于行业参考建议，并非强制约束。不同设计系统会有各自的标准，下面以接受度最高的 Material Design 规范作为基准讲解。

1. 画布、内间距与格线系统

画布尺寸

常用画布区间：12‑48px，优先选用 4 的倍数；24px 是工具图标最通用画布尺寸，项目可根据组件场景定义多套图标尺寸。

内间距（出血边距）

作用：给图形预留呼吸空间，避免图形撑满画布，视觉上拥挤失衡，类似写字不能写满田字格。

• 24px 画布：内间距 2px，有效绘图区域 20px
• 小于 24px 画布：内间距 1px
• 大于 24px 画布：内间距 3‑4px

   

视觉基准格线系统

格线由圆形、正方形、垂直矩形、水平矩形组成，用于统一整套图标视觉重量，避免图标大小观感参差不齐。 以 24px 画布举例：

• 圆形：20px（与绘图有效区域一致）
• 正方形：18px
• 垂直矩形：16×20px
• 水平矩形：20×16px

其他画布尺寸，可按照这套比例逻辑，等比缩放建立专属格线。绘制图标时，参考格线校验图形大小，保证整套图标视觉均衡。

2. 图形核心参数速查表

✅ 线性图标

1. 描边粗细：1 / 1.25 / 1.5 / 1.75 / 2px；以 0.25px 作为递进档位，不必局限整数，解决线条要么过粗、要么过细的痛点。
2. 描边位置：统一居中描边 描边分为外描边、居中描边、内描边。内、外描边仅适合闭合路径，图标大量存在非闭合路径，全局居中描边兼容性最好。
3. 外圆角：0.5‑4px；整套图标圆角档位保持统一，保证外轮廓圆润感一致。
4. 内圆角（阴角）：0‑0.5px；内侧转角优先锐角，最多给到 0.5px 圆角，禁止和外部圆角数值相同，否则图形结构会臃肿变形。

✅ 面性图标

镂空线条：1‑4px，直接取整数设置。镂空属于反向挖空，视觉感受和普通描边不一样，不要直接套用线性图标的描边参数。

转载：优设

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

兰亭妙微ui设计公司分享：小屏幕并非筛选体验的原罪，合理的交互设计，可以在有限空间内兼顾效率与易用性。本文将从痛点、布局选型、刷新策略、优化技巧四个维度，完整拆解移动端筛选的设计思路。

一、移动端筛选，到底难在哪？

移动端筛选的困境，不只是物理屏幕的尺寸限制，而是多重问题叠加带来的体验损耗：

1. 浏览迷失问题：筛选条件繁多时，用户需要反复滑动面板浏览全部选项，很容易丢失上下文，担心退出后找不到原本浏览的内容。

   

2. 状态感知缺失：移动端页面空间紧张，已生效的筛选条件很难直观展示，用户常常搞不清「现在到底开了哪些筛选」。
3. 触控适配短板：筛选项控件尺寸偏小，手指触控容易误触，点击命中率低。
4. 环境差异：原生 App vs H5 原生 App 可以完整掌控页面手势、弹窗、滚动逻辑；但浏览器内的 H5 页面会受浏览器控件干扰，上下导航栏随滚动忽隐忽现，手势冲突多，流畅度大打折扣。

二、4 种主流筛选布局，按需匹配业务场景

不同的抽屉 / 浮层布局，适配不同的业务目标，没有绝对的优劣，关键看用户任务与筛选条件量级。

1. 顶部下拉抽屉

筛选入口放置页面顶部，符合用户自上而下的浏览习惯，和列表表头天然契合。 适合：筛选条件少、快速轻量筛选； 不足：面板高度有限，不适合条件极多的复杂筛选。

2. 底部上拉抽屉

悬浮在页面内容之上，筛选按钮固定在底部热区，手指更容易触达；背景可保留原有列表内容，用户不会完全脱离上下文。 适合：绝大多数移动端列表场景，消费端、轻量 B 端都很常用； 要点：抽屉不要完全遮挡全部背景内容，保留一点页面预览。

3. 侧边栏浮层

筛选面板从屏幕侧边滑入，背景页面部分保留可见，用户可以对照原有数据做筛选决策，完整保留页面结构认知。 适合：筛选条件多，用户需要对照原始内容进行选择的场景； 不足：会占用横向屏幕空间，小屏下内容展示会受限。

4. 全屏筛选

把筛选面板铺满整个手机屏幕，给到充足操作空间，用户完成全部条件勾选后，点击「确定」再返回结果页。 适合：B 端企业级产品、需要一次性叠加大量筛选条件，用户目标明确、目的性强的查找场景； 不适合：边筛选边浏览结果的探索式查找模式。

选型小结： 轻量快速筛选 → 顶部 / 底部抽屉；需要对照原数据 → 侧边浮层；多条件批量勾选的 B 端业务 → 全屏筛选。

三、筛选结果什么时候刷新？3 种刷新策略对比

选完条件后何时拉取、更新列表数据，直接影响性能和操作体感，分为实时筛选、单项筛选、批量筛选三类模式。

1. 实时筛选 Live‑Filtering

每改动一个筛选项，立刻请求并刷新结果。

案例：Google Fonts，勾选、拖动滑块就即时更新内容。

移动端谨慎使用：每一次操作都触发页面重渲染，容易打断用户操作、意外退出筛选面板。 仅推荐：数据量小、性能极强，且筛选抽屉保持不关闭，后台静默更新结果的场景。大数据、B 端业务不建议采用。

2. 单个筛选 Per‑filter

关闭当前子下拉面板时，才触发结果刷新。

• 单选场景：选中选项自动收起面板，直接刷新结果，一步完成；
• 多选场景：子面板内部增加「确定」按钮，用户确认本维度选择，关闭面板后更新列表。

优势：减少无效请求，交互流畅；代价是对后端性能有一定要求。

3. 批量筛选 Batch filtering

全部筛选条件挑选完毕，用户点击面板「确定」按钮，统一提交请求，一次性刷新结果。 企业 B 端移动端首选方案。 用户可以从容浏览、叠加多个筛选条件，不会频繁触发接口请求； 局限：不适合漫无目的、边试边看的探索式浏览场景，更适配目标明确的数据查询任务。

四、6 大实操技巧，提升移动端筛选体验

1. 复杂条件采用渐进式披露，善用折叠分区

筛选项过多时，切忌把所有选项全部平铺展示，会造成严重信息过载。

• 将大类筛选做成折叠模块，点击「+」展开；
• 面板顶部回显已选择的筛选标签，让用户随时看清当前生效条件；
• 「确定 / 应用」按钮必须吸顶或者吸底固定，不要跟随面板滚动消失，保证随时可点击。

2. 做快捷控件，减少下拉嵌套层级

不要什么选项都塞进下拉菜单：

• 如果一个筛选项只有 2‑3 个固定取值，直接使用横向 Tab 标签切换，省去点开下拉的二次点击；
• 数值区间条件，优先使用滑块组件，节省纵向屏幕空间；

补充：如果数值跨度很大，滑块很难精准定位，建议增加关键数值自动吸附，同时支持手动输入数字，弥补拖拽精度缺陷。

3. 提供全选 / 反选，加速批量勾选

当可选项数量多，逐个勾选效率极低。提供「全选」能力，支持「先全选，再取消少数不需要的选项」，大幅降低操作成本，打车、工单、订单类 B 端产品非常适用。

4. 放大触控热区，适配手指操作

移动端以手指触控，不要照搬 PC 端细小复选框。放大选项点击区域，采用大按钮、大卡片形式，降低误触概率。

5. 支持筛选条件保存预设

面向重度高频使用用户，支持把常用筛选组合保存为预设方案，一键调用。B 端业务中，运营、业务人员会反复使用同一套筛选规则，该功能可以显著提升效率。

6. 优先复用系统原生组件，拒绝盲目造轮子

很多团队会完全自定义下拉、弹窗、选择器组件，但往往会和浏览器、系统手势发生冲突，出现滚动异常、浮层错位等 bug，同时增加前端开发负担。

iOS、Android 原生控件经过大量打磨，适配系统手势、握持逻辑，用户学习成本最低。非特殊业务诉求，优先使用系统原生组件，避免重复造轮子。

写在最后

移动端筛选体验的好坏，从来不取决于能塞下多少筛选项，而在于是否贴合用户真实使用场景。

做好触控点击目标、选对刷新请求逻辑、合理选用布局模式、善用系统原生能力。越理解用户的查询目标与使用习惯，筛选功能就越顺滑好用。

转载：优设

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

一、产品定位：先回答系统替谁解决什么问题

• 桌面端/网页端：承担全局洞察与复杂任务处理（如创建发票、管理客户、查看现金流趋势），主要面向财务人员与运营团队。

• 移动端/平板端：承接高频的审批、快速查看余额与交易状态，主要面向创始人及外出办公的管理者。

• 核心价值：通过“单一工作台”解决企业在多个工具间切换的痛点，将分散的金融数据整合为可执行的商业洞察。

二、信息架构：把功能转译为用户的工作顺序

• 全局层：首页以“Total Balance”和动态曲线图为视觉锚点，确立资金安全感；左侧导航栏清晰划分了 Home, Tasks, Transactions, Payments 等核心模块。
• 执行层：将 Invoicing, Bill Pay, Reimbursements 等高频工作流独立归类，减少操作路径。
• 用户分层：设计充分考虑了不同角色的需求——创始人关注宏观趋势（20%用户群），财务团队关注精准报表（30%用户群），而运营团队则关注日常支付与发票效率（50%用户群）。

三、关键交互：从浏览报表走向即时决策

• 数据可视化：不仅仅是展示数字，而是通过红绿双色条形图直观展示“Money In”与“Money Out”的比例，并通过悬浮提示框（Tooltip）展示具体的收支明细，让趋势一目了然。
• 流程简化：在创建发票（Create Invoice）环节，采用分步引导或侧边预览模式，让用户在填写信息的同时能看到发票的最终样式，减少认知负荷。
• 组件化设计：底部导航栏和核心按钮（如 Continue, Send）采用了高度统一的胶囊型设计，配合清晰的选中态（蓝色高亮），确保用户在深色模式下也能准确识别当前所在位置。

四、视觉系统：品牌表达必须承担信任语义

• 色彩策略：主界面采用大面积的白色背景建立清晰、理性的SaaS感；而在数据卡片和装饰元素上，使用了高饱和度的渐变色（蓝紫、橙红），既打破了财务软件的沉闷，又通过颜色区分了不同的账户或数据类型。
• 深色模式：在营销页和部分功能模块中使用了深邃的黑色背景，配合高亮文字，营造出高端、专注的科技氛围。
• 图标系统：使用了线条流畅的 HugeIcons 图标库，风格统一且识别度高，无论是导航图标还是状态图标，都保持了视觉语言的一致性。

五、面向产品与设计团队的可复用价值

六、专业审视：仍需补齐的体验边界

结语：设计的最终判断标准是业务与使用价值

本文讲解交互经典的席克定律（希克‑海曼定律 Hick’s Law），结合大量 B 端产品实战案例，讲解理论来源、落地方法与适用边界。

雅各布定律提到，用户会把过往大量产品使用经验迁移到新的产品当中。对于交互设计师而言，持续体验各类线上产品，沉淀成熟的交互模式，是提升方案质量的重要途径。兰亭妙微在长期政企、C 端项目实践中，也会大量拆解优秀产品的交互细节，把经过市场验证的交互方案结合业务场景落地。今天从手势交互、按钮交互、输入框交互三个维度，分享一批可复用的交互设计思路。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

一、产品定位：先回答系统替谁解决什么问题

• 桌面端/网页端：承担品牌信任构建、技术文档展示（API）与复杂合规流程的可视化，主要面向开发者与企业决策者。
• 移动端：承接高频的账单审批、支付状态监控与即时通知，主要面向财务人员与管理者。
• 核心价值：通过“invisible API”（隐形 API）将复杂的跨境支付逻辑简化，解决传统支付中摩擦大、透明度低的问题。

二、信息架构：把功能转译为用户的信任路径

• 开发者视角：首页直接展示代码片段（JSON/API Request），将抽象的技术能力具象化，降低开发者的认知门槛。
• 企业视角：通过六宫格图标矩阵（Onboarding, Custom Build, FCA Check, SLA等），将复杂的合规与安全流程结构化，建立安全感。
• 操作视角：移动端界面以“Bill Payments”为核心，清晰展示待办事项与资金流向图，优先级高于次要功能。

三、关键交互：从阅读文档走向确认执行

• 代码即文档：在营销页面直接嵌入可滚动的代码块，让“集成简单”这一卖点通过交互直接被验证，而非仅靠文字描述。
• 流程可视化：在介绍合规性时，使用带有编号（01-06）的网格系统，配合线性图标，将漫长的审核过程拆解为清晰的步骤，减少用户的焦虑感。
• 资金流向图：移动端不仅显示金额，还通过节点图展示资金从“Supplier Bill”到“Crezco”再到“Bank”的路径，让黑盒般的转账过程变得透明可见。

四、视觉系统：品牌表达必须承担信任语义

• 色彩策略：摒弃了金融科技常用的纯蓝或纯黑，转而使用深森林绿（Juniper Green）作为主色，传递稳健、生长与财富的暗示；搭配鲑鱼红（Salmon Red）作为强调色（如按钮、关键点），既保持活力又不具攻击性。背景大量使用浅薄荷绿（Tranquility）与网格线，营造精密仪器的秩序感。
• 字体选择：使用了 Aeonik 字体，这是一种带有几何骨架的新怪诞风格字体，既有现代科技的理性，又在圆角处理上保留了亲和力。
• imagery：背景中若隐若现的自然纹理（如草叶、织物），中和了金融产品的冰冷感，暗示产品像自然生态一样无处不在且运行顺畅。

五、面向产品与设计团队的可复用价值

六、专业审视：仍需补齐的体验边界

• 自然纹理的干扰：虽然草地/织物背景很有质感，但在某些光照下可能会影响文字的可读性，尤其是在移动端小屏幕上，需确保对比度符合 WCAG 标准。
• 代码块的门槛：对于非技术背景的财务决策者，首页大篇幅的代码可能会产生距离感，建议增加“无代码模式”的切换入口或更通俗的业务流程图作为并行展示。
• 移动端图表复杂度：资金流向的节点图在手机上如果节点过多，容易造成拥挤，建议增加缩放或分步动画引导。

结语：设计的最终判断标准是业务与使用价值

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

兰亭妙微ui设计公司分享：不少设计师做设计方案时，会把大量精力投入界面绘制与版式搭建，却忽略配图的价值。即便 UI 本身完成度很高，一旦配图选择不当，整个页面依旧容易显得廉价杂乱。配图绝非单纯的装饰元素，而是整套视觉体系中不可分割的组成部分。本文结合真实落地案例，梳理配图的评判标准、高频踩坑问题，分享 4 套可以直接复用的配图实践技巧，帮助提升设计方案的整体完整度。

一、配图的三项基础合格准则

选图不能单一评判图片本身的美观度，要结合页面整体环境综合考量，满足主体突出、风格统一、色彩均衡，才算得上适配页面的配图。

1. 主体突出

画面拥有明确核心主体，背景元素不宜繁杂喧宾夺主。 即便图片画质精良，倘若背景信息冗余、元素堆砌，嵌入页面后就会产生视觉噪音，干扰阅读重心。合格配图可以让主体一目了然；劣质配图会分散视线，造成页面臃肿混乱。

2. 风格统一

同一页面内的全部配图，在画面类型、构图方式、材质质感、拍摄视角、色调气质上保持协调一致。 配图风格割裂会带来强烈的违和感；统一的视觉调性，才能构建完整和谐的页面观感，这也是方案评审过程中，会被下意识捕捉到的审美细节。

3. 色彩均衡

适配性不只体现在图片自身，更要看置入 UI 界面之后，和周边组件的色彩兼容程度。 图片属于页面配色体系的一部分，不能孤立看待。当图片色调和界面元素互相冲突，就会打破色彩平衡，观感别扭，拉低整套设计方案的完成质量。

二、设计配图四大常见误区

达到基础标准只能做到不出错，下面四类是设计工作里高频踩坑的配图类型，除非项目定位与之匹配，建议尽量规避。

误区 1：滥用 AI 生成图像

AI 生成的摄影素材普遍存在模板化、脸谱化的问题，缺少现实真实质感。 套路感过重的 AI 图辨识度很高，容易让设计成果显得悬浮虚假。除非项目主题围绕 AI 展开，优先选用实拍素材或是原创绘制图像，减少 AI 配图的使用。

误区 2：图片内嵌大量文字

配图内部自带大段文字，字体粗糙简陋，类似文档直接截图粘贴的效果。 图片内部文字清晰度有限，还会和页面原生文字产生层级冲突，既阻碍信息阅读，也显得专业度不足。配图应当承担视觉载体的作用，不要用来承载文案输出。

误区 3：过度抽象、玩梗类配图

抽象图形、趣味涂鸦在营销场景可以活跃氛围，但用于正式设计项目风险较高。 过于抽象的配图会模糊项目表达，让设计意图难以传递。仅当项目本身偏向趣味娱乐属性，才适合选用这类素材。

误区 4：生硬套用二次元形象

二次元插画、角色形象，很难和常规 UI 项目的视觉体系兼容。 如果产品赛道并非二次元方向，强行插入对应配图，会产生严重风格冲突，破坏界面整体性，降低阅读体验。

小提示：想要提升配图审美，不必局限于设计参考案例。多观察主流线上 App、小程序的商业配图，对比优劣实例，是训练选图判断力十分高效的方式。

三、4 种进阶配图思路，拔高设计方案质感

避开常见问题之后，运用这 4 套实操方法，能够让配图成为加分项。方法均来源于成熟商业产品真实落地逻辑，并非空想概念，可以直接复用在各类设计项目。

思路 1：统一化背景处理

成本最低且见效明显的手段。列表、多图模块全部采用一致底色或者同款背景，将多元内容收纳进统一视觉环境。 有效消除多张图片之间的割裂感，模块整体规整高级，十分适配商品列表、卡片流界面展示。

思路 2：氛围图运用

选用氛围感摄影素材，搭配品牌 Logo、标语，烘托品牌气质。 多用于品牌页面、首页、启动页、横幅板块，不靠繁复元素堆砌，依托光影与环境渲染项目调性，强化品牌氛围感。

思路 3：跨模块视觉串联

使用一张大图跨区块填充，把页面中相互独立的模块在视觉上关联起来。 弱化模块之间生硬的分割边界，塑造页面视觉流动感，强化整体感，适合详情页、店铺首页这类多区块页面。

思路 4：主体聚焦与镂空裁切

图片四周预留留白，把视觉主体收拢在画面中心；或是采用不规则镂空裁切。 留白放大主体表现力，赋予画面呼吸空间，摆脱矩形卡片的呆板感，丰富整体版式层次。

四、写在最后

成熟品牌都会反复打磨配图，配图直接决定用户对于产品的感知。放到设计评审场景，审阅者同样会借助配图，判断设计师的审美能力与细节把控力。

与其一味搜罗炫酷参考图，不如多研究手机内真实产品的配图逻辑。从商业实例积累素材与审美认知，产出的方案才会落地务实，脱离脱离脱离空想式设计。

转载：优设

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

一、开篇：被低估的侧边导航，正在拖垮团队协作效率

兰亭妙微ui设计公司分享：在从零搭建 B 端后台管理系统的项目中，我最初选择将侧边导航封装为组件，希望解决菜单后期频繁增删改查、全局样式同步的痛点。

但落地后却发现：仅仅简单封装组件，并不能实现预期效果 —— 无法做到全局一键同步更新，展开收起状态、菜单数量、图标、文字内容也很难灵活调整。

大厂设计系统的导航组件完全可以实现这类能力，于是我翻阅大量资料排查问题，最终找到症结：组件修改没有在母组件源文件操作，副本无法同步变更。

这里有一个关键认知：全局同步不等于机械复制粘贴。很多设计师的笨办法就是每一页设计稿重复复制、手动修改导航，一旦后期迭代，维护成本会成倍上涨。除组件同步之外，多端响应式适配也是 B 端导航的高频难题，背后隐藏着大量看不见的维护成本。

本文以 MasterGo 工具为例，围绕 B 端后台侧边导航，完整讲解设计系统组件搭建思路。

二、需求溯源：为什么导航必须做系统化设计

1. 日趋复杂的多端业务场景

如今设备形态越来越丰富，除传统 Web 桌面端，折叠屏手机、平板设备越来越普及。设计师不能只输出单尺寸设计稿，必须重视响应式导航的自动化适配。统一的导航结构、流畅的适配逻辑，直接决定产品整体体验。

Web 端同样对响应式能力有强需求。例如 Arco Design 将侧边菜单宽度限制在 160‑400px，支持拖拽调整导航栏宽度；小红书网页版会根据浏览器视口自动切换布局，宽屏状态侧边导航搭配五列内容，窄屏时切换为底部固定导航。

✨基础概念区分 响应式布局：依靠流式布局 + 媒体查询，一套布局适配全部设备，随屏幕实时调整元素位置、尺寸。常见实现方案：流式布局、Flex 弹性布局、Grid 网格布局、媒体查询。

• 流式布局：使用百分比定义宽度，高度由内容自适应，元素随屏幕按比例缩放。

  

• Flex 弹性布局：一维布局模型，擅长元素对齐与空间分配；Figma 依靠 Auto Layout、

  

  MasterGo 依靠自动布局换行实现。
• Grid 网格布局：二维布局，划分行列，精准摆放元素，适合复杂页面排版。

  

• 媒体查询：CSS 能力，根据设备特征加载不同样式规则。

  

自适应布局：为手机、平板、桌面等不同设备预先设计多套固定布局，检测设备后加载对应版本。实现方案包含固定布局、流体布局、弹性布局、混合布局、栅格系统。

• 固定布局：像素定义固定宽度，特定分辨率下效果最优，常搭配媒体查询适配多设备。
• 流体布局：百分比定义宽度，保持页面相对比例。
• 弹性布局：依靠相对单位，跟随字号缩放元素大小。
• 混合布局：组合多种布局方案，不同区域选用最合适的模式。
• 栅格系统：将页面切分为均等行列网格，约束元素摆放位置。

核心差异总结

• 响应式：一套方案，实时变化，一个布局适配所有屏幕。
• 自适应：多套预设方案，检测切换，不同设备加载独立版本。

2. 动态导航：B 端后台的协同刚需

动态导航，即支持交互反馈与自适应变化的导航组件。针对 B 端侧边导航，普遍面临 4 大痛点：

1. 权限管理：B 端角色体系复杂，不同用户可查看菜单不同；角色变更时，侧边栏需要实时渲染对应菜单，保证更新及时、渲染流畅。
2. 多级菜单：后台功能繁多，导航经常出现多层级菜单。要做好展开、收起、定位能力，建议前期就采用模块化设计，方便后续新增菜单。
3. 交互体验：菜单展开收起的过渡动画需要兼顾流畅度，保证操作响应迅速，不能出现卡顿。
4. 主题定制：企业客户常有定制化需求，除颜色、字体，部分场景还需要改动布局、图标，要保证多套主题下导航可用性不受破坏。

2.2 设计走查：避开侧边栏高频坑点

即便使用组件库，交付后依旧需要做设计走查，从四大维度校验样式一致性，修改源组件就可以实现全局同步。B 端侧边导航常见问题：

• 界面布局：空间利用率差，间距失调，多屏幕适配异常。
• 色彩视觉：色彩繁杂杂乱，对比度不足，识别困难，配色违和。
• 交互操作：同类场景交互不统一，操作热区过小，提升用户学习成本。
• 信息呈现：菜单层级太深、分类混乱；重点功能不突出；不同分辨率下内容错位。

三、设计系统核心底层要点

1. 原子化组件设计

原子设计理论将界面拆解为最小不可拆分单元，通过拼装原子得到复杂界面，实现高复用、易维护的组件体系，分为 5 个层级：

1. 原子 Atoms：最小基础元素，不可拆分，例如图标、文字、色值。
2. 分子 Molecules：原子组合而成，具备独立功能，例如单个导航条目。
3. 组织 Organisms：分子 / 原子组合成复杂模块，例如完整登录模块。
4. 模板 Templates：搭建页面骨架，只定义结构，不填充业务数据。
5. 页面 Pages：模板填入真实业务数据，最终交付给用户的交互页面。

概念辨析 组件化设计：将界面切分为多个独立可复用模块，范围更广。 原子化组件设计：是组件化设计进一步精细化，遵循：单一职责、高内聚低耦合、高复用、可自由组合、易维护、语义化、遵从设计规范。

拓展：原子设计由 Brad Frost 提出，相关参考资源

• Brad Frost 官网：https://bradfrost.com/
• 演讲视频：https://vimeo.com/109130093
• 模式实验室：https://patternlab.io/

2. 自动化布局 Auto Layout

自动化布局依靠约束规则自动管控元素尺寸与位置，是实现响应式设计的基础。Figma、MasterGo、即时设计原生支持自动布局；新版 Sketch 也已上线该能力。

嵌套逻辑：先给最小元素设置自动布局，再把多个子组件放进父级自动布局容器，形成层级约束。

实操小技巧：设置约束前，先预判增删内容之后页面期望呈现的效果；也可以先建立固定容器，再开启自动布局。 举个例子：按钮高度固定，宽度跟随文字变化，则设置高度固定，左右内边距定值，水平属性设置为适应内容。页面级自动布局可以套用相同思路。

3. 变体 Variants

变体是同一个基础组件，修改尺寸、状态、颜色等属性生成不同形态，兼顾统一性和场景多样性，是设计系统灵活复用的关键。

通俗理解：基础组件是篮子，变体就是篮子中不同品类的蛋，按需直接取用，无需重复制作。

变体核心作用

• 兼顾统一与灵活：统一底层规范，同时适配多样化业务场景；
• 提升效率：直接调用预设变体，避免重复造轮子。

变体设计原则

1. 一致性：全部变体遵守系统间距、圆角、字体等基础规范；
2. 可维护性：变体集中在源组件管理，一处修改全局生效；
3. 场景导向：只做业务真实需要的变体，拒绝无意义冗余，避免组件库臃肿。

四、标杆拆解：大厂设计系统的导航实现逻辑

1. Arco Design System 2.5.2

官网地址：https://www.arco.design/react/components/menu 组件分类：导航‑Menu 覆盖形态：顶部导航、深色导航、折叠内嵌菜单、悬浮菜单等；侧边菜单宽度区间 160‑400px，支持拖拽调整宽度。

基础原子图标组件 菜单折叠、展开图标，子菜单向下 / 向上 / 向右箭头图标。

变体组件划分 垂直一级菜单项、垂直收起菜单项、垂直分组、垂直二级菜单项；弹出一级 / 分组 / 二级菜单项；总菜单组件，支持切换垂直侧边、悬浮、水平顶部三种类型；每一类变体都可配置选中、悬停、禁用、子菜单展开、文本替换等属性。

设计逻辑 侧边导航由菜单条目、子菜单、图标、文本构成；整体分为展开、折叠两大模式；单条菜单包含默认、悬停、选中、禁用状态；同时支持亮色 / 暗夜主题。

B 端侧边栏大多承载 2‑3 级导航，功能模块多时建议做逻辑分组；一级导航普遍图标 + 文字，二级缩进展示文字，三级导航业务场景较少。菜单条目过多，可借助分割线、留白区分模块，高频重要菜单置顶展示。

2. Ant Design 5.0

导航规范文档：https://ant-design.antgroup.com/docs/spec/navigation-cn 布局组件文档：https://ant-design.antgroup.com/components/layout-cn

设计规范要点 侧边垂直导航扩展性更强，适合层级复杂、高频切换的后台系统；菜单数量大于 6 项优先选用侧栏导航，建议层级控制在 1‑3 级。

• 顶部导航高度公式：48+8n；侧边导航宽度公式：200+8n；
• 导航常用字号 12px、14px；
• 组件 Sider 为侧边栏容器，嵌套在 Layout 布局内，浏览器宽度不足时支持收起。

侧边栏采用左右分栏布局，主导航固定左侧，辅助操作放在顶部。优点是层级展示连贯，方便定位当前页面；缺点是会占用横向内容区域。同时定义完整响应式断点：xs:480px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1600px。

3. 组件命名规范深度解析

合理命名方便团队检索、维护组件库，大型项目建议使用前缀区分组件属性。

3.1 前缀法则

• Base：基础原子组件，无业务逻辑，跨项目通用；
• Web：Web 端专属，适配浏览器交互；
• App：移动端通用；iOS / Android 区分平台特有组件。

3.2 语义化命名模板

命名结构：组件类型_位置层级_特性修饰词

常用关键词

• 组件类型：Nav 导航、Header 头部、Footer 底部、Sidebar 侧边栏、Card 卡片、Modal 弹窗、List 列表、Form 表单、Button 按钮
• 位置层级：Top 顶部、Bottom 底部、Left 左侧、Sub 子级
• 特性修饰：WithSearch 带搜索、Collapsible 可折叠、Responsive 响应式、Fixed 固定

示例： Nav_Side_Collapsible → 可折叠侧边导航 Nav_Top_WithSearch → 带搜索顶部导航

3.3 主流命名格式对比

1. 大驼峰 PascalCase：每个单词首字母大写 UserProfile
2. 小驼峰 camelCase：首单词小写，后续大写 userName
3. 蛇形命名 Snake_case：下划线分隔，全部小写 user_name；全大写蛇形MAX_LENGTH多用于常量。大厂设计规范文档高频使用。
4. 烤串命名 Kebab‑case：连字符分隔、全小写 user‑profile，CSS 广泛使用。
5. 匈牙利命名法：前缀标记数据类型，现代 UI 组件库已较少使用。

命名四大原则

1. 一致性：全局统一分隔符与前缀，同类组件前缀保持一致；
2. 最小必要：拒绝冗余词汇，善用行业通用缩写；
3. 可搜索性：命名表意清晰，规避 Widget、Util 这类模糊词汇；
4. 对齐架构：命名与文件目录结构一一对应。

五、实战落地：从零搭建一套侧边导航设计系统

1. 前期需求分析

1. 和业务方沟通，梳理全部业务场景，梳理业务流程，明确导航需要承载的全部模块；
2. 梳理不同用户角色权限，明确不同身份可见的菜单范围；
3. 基于业务输出的信息，确定导航视觉风格，开始搭建组件库。

2. 组件库分层搭建

2.1 搭建原子属性库

先定义整套系统底层基础 Token：

• 颜色：主色、辅助色、状态色、文本色，完善色阶体系，做好语义化 Token 命名；
• 字体：字体族、字重、字号、行高；
• 阴影：弹窗、浮层所需阴影参数；
• 圆角：按钮、卡片统一圆角，嵌套组件遵循同心圆原则；
• 图标库：统一线条粗细、视觉重量，保证识别性；
• 交互状态：定义默认、悬停、点击、选中、禁用反馈样式；
• 布局间距：全局间距规范，统一页面留白逻辑。

2.2 拼装分子组件

基于原子，组合出导航完整模块：

① 基础导航组件

• 导航条目 Navigation Item：核心单元，图标 + 文字；状态覆盖默认、hover、点击、激活、禁用。
• 分组标题 Group Title：对菜单分类，仅做视觉划分，菜单数量少时可以省略。
• 折叠展开按钮：控制子菜单分组的收起展开。

② 辅助功能组件

• 导航搜索框：菜单数量庞大时，快速检索菜单；
• 用户信息区：放置头像、用户名，下拉承载个人中心、退出登录；
• 快捷操作按钮：高频功能直达入口。

③ 交互状态组件

• 分隔线 Divider：模块分割；
• 徽章 Badge：未读数量、消息红点；
• Loading 骨架：菜单异步加载时占位。

④ 响应式适配组件

• 侧边栏切换按钮（汉堡按钮）：窄屏、移动端唤起抽屉导航；
• 响应式折叠菜单：视口变小时自动转为抽屉、下拉。

2.3 构建多套响应式模板

按设备尺寸划分模板

1. 桌面端 ≥1024px｜完整展示模式 固定 / 可折叠侧边栏，完整展示图标文字分组；支持手动折叠为纯图标模式；hover 唤出子菜单。
2. 平板端 768‑1023px｜精简模式 缩小侧边栏，隐藏次要分组标题；子菜单默认收起，点击父级展开；支持手势呼出收起侧边栏。
3. 移动端 ≤767px｜抽屉 / 底部导航 默认隐藏侧边栏，点击汉堡按钮唤起抽屉弹窗；也可直接替换为底部 Tab 导航；抽屉宽度建议占屏幕 80%，增加关闭按钮，优化触控热区。

按交互逻辑划分模板

1. 固定‑折叠切换模板：适合后台管理系统；大屏完整侧边栏，中屏折叠为图标，小屏切换抽屉。
2. 自适应宽度模板：适合文档、博客类产品；导航栏随视口连续缩放，空间不足隐藏文字保留图标。
3. 混合导航模板：复杂 CRM、电商后台；桌面：左侧侧边栏 + 顶部导航；平板：可收起侧边栏 + 底部高频 Tab；移动端抽屉 + 底部 Tab 联动。

响应式模板关键要点

1. 功能优先级：移动端优先保留高频核心功能，次要入口收拢至「更多」；
2. 交互一致性：跨设备激活态、点击反馈逻辑保持统一，降低用户学习成本；
3. 过渡动画：展开收起增加平滑过渡，避免生硬跳转。

六、结语

这篇笔记前后历时两个月完成，整理资料过程中了解到 Brad Frost 提出的亚原子设计（亚原子语义 Token），后续还会继续深入学习研究。 导航组件体系庞大，仍有不少知识点有待实践沉淀。

转载：站酷

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

文章针对行业常见争议：设计到底该理性还是感性，提出不能简单理解为 “两者兼顾”，要区分设计决策过程与最终设计表达两个不同层面。