行业内关于设计师能力分级的标准体系层出不穷，初级、中级、高级设计师的能力清单随处可见。但兰亭妙微深耕 UI/UX 设计十六年，服务金融、工业、教育数百企业后发现，单纯靠标准化能力表划分层级存在明显局限：不少设计师单项专业技能达标，却缺少上下游全局思维，难以独立操盘完整项目。真正的设计进阶，不能只打磨视觉、交互基础技能，更要补齐前置调研、数据研判、项目推动、战略思考等综合能力。结合公司多年落地实战经验，我们梳理六大核心进阶能力方向，为设计从业者提供可落地的成长路径。

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

一、全文速览图

1. 为什么 AI 没有按照我的规范生成页面？
2. 为什么它明明知道有组件库，却还是没有用？
3. 为什么我已经有 Figma 组件、规范文档，甚至前端工程，AI 生成出来的页面还是很乱？

背后其实是同一件事：AI 时代，设计系统的使用者变了。

过去我们讲设计系统，主要是在服务设计师、研发和团队协作。

设计师通过它统一视觉语言，判断界面质量，维护设计一致性。

研发通过它复用组件，实现页面结构，保证代码可维护。

团队通过它建立共同语言，知道用什么、怎么用、怎么保持一致。

所以，传统设计系统里通常会有三类内容

1. Foundation：颜色、字体、圆角、间距、阴影、动效这些底层视觉规则。
2. 组件：按钮、输入框、图标、导航、弹窗、表格这些可复用界面单元。
3. 规范说明：组件适用场景、使用限制、注意事项和协作方式。

这些内容对团队协作当然非常重要。 但 AI 进入工作流之后，设计系统多了一个新的使用者：AI Agent。

它不只是“看规范”，而是要进一步去 读规则、选组件、拼页面、辅助检查。 它需要知道：

1. 规则在哪里；
2. 组件在哪里；
3. 当前页面该用哪个组件；
4. 页面结构应该怎么组合；
5. 生成后又该按什么标准验收。

所以，传统设计系统给人协作够用，但给 AI 执行还缺几层。

二、传统设计系统，为什么给 AI 还不够

我现在会把这个缺口概括成四件事。

1. 经验没有显性化

很多判断原本是设计师凭经验完成的。比如：

1. 什么场景用表格，什么场景用卡片；
2. 危险操作怎么处理；
3. 筛选条件很多时怎么组织；
4. 页面里哪些区块应该先出现，哪些可以后置。

这些对人来说是经验，对 AI 来说却不是默认知识。

你不写出来，它就不知道。

2. 规则没有集中化

有些规则在 Figma 里，有些在文档里，有些在组件说明里，还有一些藏在团队习惯里。

人可以靠上下文补齐，AI 很容易读漏、读散、读不完整。

最后看起来像“它知道一点，但又没完全知道”。

3. 组件没有索引化

很多团队其实已经有组件库了，但 AI 不一定知道：

1. 组件在哪里；
2. 各自适合什么场景；
3. 有哪些替代方案；
4. 同类组件之间应该优先选哪个。

它可能知道“这里有 Button”，但不知道什么时候用 Primary，什么时候用 Danger，什么时候还要加二次确认。

4. 结果没有可检查化

AI 生成页面之后，如果没有统一的验收标准，它也不知道：

1. 哪些地方算符合规范；
2. 哪些地方算生成偏差；
3. 哪里只是长得像；
4. 哪里才是真的调用了正确组件。

所以很多时候，AI 生成页面缺的不是灵感，也不是提示词不够好，而是缺少一套明确的执行依据。

它缺：

1. 上下文
2. 资产入口
3. 组件选择依据
4. 页面组合模式
5. 执行顺序
6. 验收标准

三、所以这件事，其实要拆成两步

到这里，这件事其实可以拆成两个层面来看：

第一，AI 先读什么。第二，AI 再怎么用。

第一步：搭底座

先让 AI 有东西可读。

这里包括：

1. 大规范
2. Token
3. 基础组件
4. Design MD
5. 初始 Skill

它们解决的是：AI 先理解这套系统的风格、命名、变量、组件和基础规则。

第二步：用底座

再让 AI 知道怎么调用这些资产。

这里包括：

1. 组件索引
2. 节点地图
3. 截图参考
4. 关键词
5. 组件映射
6. 页面模板
7. 选型规则
8. 执行顺序
9. 验收回填

它们解决的是：

AI 怎么找组件、怎么选组件、怎么组合页面、怎么检查结果。

所以前两个模块合在一起，其实是在补一套 AI 执行层。

这一层让设计系统变得：

1. 可读取：AI 能读大规范、Token、基础组件和 Design MD
2. 可检索：AI 能通过组件索引、节点地图和关键词找到组件
3. 可映射：AI 能理解 Token 到组件属性、Figma 到代码组件、Variant 到 Props 的关系
4. 可选型：AI 能根据页面区域和业务意图，列出候选组件、推荐组件和选择理由
5. 可执行：AI 能按顺序读取规则、判断类型、匹配模板、生成页面，并验收回填

四、几种常见咨询场景

说完背景，再回到大家最常来问我的几种情况。

1. 只有 Figma 组件，想让 AI 直接拼页面

很多设计师会说：

我已经有一套 Figma 组件库了，能不能让 AI 直接读取组件，然后帮我拼页面？

这个方向当然可以尝试。 但 Figma 组件更多描述的是 视觉结构、图层关系和基础状态，它不一定告诉 AI：

1. 这个组件适合什么业务场景；
2. 页面区块应该怎么组合；
3. 组件之间有什么优先级。

所以这种场景最容易出现的问题是：AI 看起来用了组件，但页面结构还是很散。

这时要补的往往不是更多单个组件说明，而是：

1. 组件索引
2. 页面模板
3. 区块规则
4. 组件选型规则
5. 生成后的验收标准

比如后台列表页，不只是 Button、Input、Table 的堆叠。

它还包括页面标题、筛选区、工具栏、表格、分页、批量操作、空状态和异常状态。

AI 需要知道这些区块怎样组成一个页面。

2. 已经有规范文档，但 AI 还是不按规范

还有一些团队已经写了规范文档，甚至整理了 Design MD，但 AI 生成结果依旧发散。

这通常是因为：文档只有描述，没有连接到真实资产。

比如文档里写：

1. 危险操作需要二次确认
2. 主操作使用主按钮

但 AI 并不知道：

1. 二次确认应该用哪个组件，是 Popconfirm 还是 Modal；
2. 哪个 Figma 组件对应主按钮；
3. 代码里应该引入哪个 Button；
4. type 应该怎么写。

所以 Design MD 不能只是说明书。

它还需要继续连接到：

1. Token
2. 组件索引
3. 页面模板
4. 组件映射
5. 验收清单

否则 AI 只是“看过规范”，但没有办法稳定执行规范。

3. 有前端组件库，但 AI 仍然自己写一套

也有团队已经有前端组件库，但 AI 生成页面时还是会：

1. 自造组件
2. 重复写样式
3. 绕开已有组件

这通常不是因为组件库没用，而是 AI 不知道怎么调用。

它需要知道：

1. 组件从哪里 import
2. 什么场景适合用
3. 什么场景不能用
4. 当前页面应该优先使用哪些组件
5. 生成后如何检查有没有自造组件

这种场景下，最重要的是：不要让 AI 一上来就直接生成页面。

一个比较稳定的顺序通常是：

1. 先读 Design MD
2. 再查组件索引
3. 判断页面类型
4. 匹配页面模板
5. 输出组件选型
6. 设计师确认
7. 生成页面
8. 验收并回填规则

只有这样，AI 才不是凭感觉写页面，而是在按照组件库规则生成页面。

4. Figma、文档、代码都有，但三者没有串起来

这是最常见、也最容易混乱的一类。

团队手里有：

1. Figma 组件
2. 规范文档
3. 前端工程

但它们之间没有明确关系。

比如：

1. Figma 里的 Primary Button，对应代码里的哪个组件？
2. Figma 的 Variant，对应代码里的哪个 props？
3. Token 对应哪些组件属性？
4. 页面模板在设计侧和代码侧是否一致？
5. Design MD 里的规则，最后落到哪个真实组件上？

如果这些关系没有整理出来，AI 会看到很多材料，但不知道该以哪个为准。

这时候不是继续堆更多文件，而是先建立连接：

1. 规则和组件的连接
2. Figma 和代码的连接
3. Token 和组件属性的连接
4. 页面模板和业务场景的连接
5. 生成结果和验收清单的连接

五、最后

AI 时代的设计系统，不只是多写几份规范。

它更像是在原有设计系统之上，补一层 AI 执行层。

当这些问题被补齐之后，设计系统才会真正从“给团队协作看的规范”，变成“AI 可以参与执行的工作流”。

转载自优设网

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

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

一、全文速览图

二、先看调用图标库前后的差别

这个页面 Codex 已经能做出来。

但你看截图时，可以重点看图标，粗的细的面性的...会感觉有点乱。

不指定图标库时，AI 一般会默认用 Lucide 图标库。不是说它丑，但会让页面一眼有「AI 生成」的味道，就像Ai同样喜欢生成蓝紫色渐变的页面。

同样的页面，只是统一了图标，精致感就会上一个台阶。

三、让 AI 出图标更专业的方法

这件事可以分两种情况：还没生成页面时，先把图标规则写进去；页面已经生成后，再用一条 prompt 把图标统一回来。

方法一：页面生成前，把图标规则写进主 prompt

如果你还没开始生成页面，可以把规则直接写进主 prompt 里：

图标使用要求
界面中的图标默认使用 [Hugeicons] 图标库：
[https://hugeicons.com]
请优先选择与参考图含义和视觉风格最接近的图标。
如 [Hugeicons] 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。
这就是最常用的调用方式。

核心不是让 Codex「推荐图标」，而是提前告诉它：图标从哪里选、怎么替代、线宽圆角和颜色要怎么统一。

方法二：页面生成后，追加一条替换图标的 prompt

如果页面已经生成好了，可以直接补这一句：

请检查当前 Dashboard 页面里的所有图标。
统一改成 [Hugeicons] 图标库，请优先从 [https://hugeicons.com/] 里选择语义最接近的图标。
所有图标保持线性风格，尺寸按使用场景统一：导航图标约 20px，数据卡片图标约 24px，消息提醒图标约 16px。
图标颜色跟随文字或卡片主色，不要混用其他图标库，也不要手写 raw SVG。

这一步做完，页面的变化会更明显。

图标会被拉回同一套视觉语言里。线条、圆角、粗细都统一以后，页面会少很多临时拼的感觉。

方法三：用企业自己的图标库

如果企业有自己的图标库，可以这么用：

帮我安装 @our-company/icons，这个项目所有导航和按钮图标都使用公司图标库。请从包里引入 React 组件，不要临时手写 SVG。
最后小一句话：别让 AI 自己猜图标。
你给它一个图标库、一条选择规则、一组样式约束，它做出来的页面就会少很多临时拼的味道。

四、哪些图标库适合让 AI 调用

选图标库时，不要只看数量多不多。

如果你真的在意外观，我建议先避开两个“坑”。

四、哪些图标库适合让 AI 调用

选图标库时，不要只看数量多不多。

如果你真的在意外观，我建议先避开两个“坑”。

lucide-react：太容易有 AI 味

它确实轻、稳、好调用，和 Shadcn UI、Tailwind 这些 AI 常用组合也很顺，所以模型特别爱用。

但也正因为太常见，那种细线、圆角、默认尺寸组合已经很容易被识别成「AI 默认图标」。如果你想要你的图标有特色一点，我不建议选它。

react-icons：方便，但容易风格杂

它把很多流行图标库都封装在一起，选择面很大。

问题是，AI 一旦从大集合里自由挑，可能这个来自 Feather，那个来自 Material，另一个来自 Font Awesome。语义对了，视觉语言却散了。

我的建议是：先选一个主风格库，再允许 AI 在找不到时做语义接近的替代，但必须保持线宽、圆角和视觉统一。

Hugeicons — 想提升质感，可以先试它

如果你想找一个覆盖面广、视觉质量也比较稳的图标库，Hugeicons 是很适合先试的一套。

它的优势是场景覆盖比较全，风格也适合拿来做完整界面：Dashboard、SaaS、产品官网、移动端页面，都比较容易找到合适的图标。

Heroicons — Tailwind 项目可以用，但别滥用

Tabler Icons — 后台系统菜单多的时候好用

Tabler 的优势是数量多。

做 ERP、数据平台、管理后台时，菜单经常一排十几个：订单、库存、客户、财务、权限、日志、工单……这时候大多数小型图标库会不够用，Tabler 更容易补上。

它个性不算强，但很适合「东西很多、还要整齐」的项目。

Phosphor Icons — 想做层级，可以选它

Phosphor 比较适合你想控制视觉层级的时候。

同一个图标有 Thin、Light、Regular、Bold、Fill、Duotone 等版本。比如普通状态用 Regular，重点入口用 Fill，空状态插画旁边用 Duotone，页面会有更细的层次。

这种库适合有一点设计控制欲的人。你愿意多说几句规则，它回报你的细节也更多。

Radix Icons — 小尺寸组件更稳

Radix Icons 数量不算最多，但它在小尺寸 UI 里很舒服。

按钮、弹窗、表单、Dropdown、Toast 这种组件里，图标太花反而烦。Radix 的 15×15 网格很规整，适合做设计系统里的小图标。

如果你的项目偏组件库、B 端工具、内部系统，它会比很多大而全的库更稳。

补充选择：Remix Icon / Material Symbols / Feather

Remix Icon — 企业工具和通用 Web 产品可以用

Remix Icon 很中性，适合企业工具、内容平台、通用 Web 产品，所有图标均免费供个人和商业使用。

Material Symbols — 做 Google / Android 风格时再用

Material Symbols 更适合 Google / Android / Material Design 体系，普通项目不要为了「看起来专业」硬上，参数太多会增加控制成本。

Feather — 干净经典，但别默认选

Feather 很经典，也很干净，但数量相对少一点。它和 Lucide 的视觉气质很接近，如果你已经觉得 Lucide 有 AI 味，Feather 也要谨慎使用。

五、如果你平时用 Figma 做设计，也可以这样用

Step 1：准备图标库

在 Figma 社区 找个图标库，或者把自己画的图标整理成组件页，顺手把名字改成 icon-home、icon-message 这种语义名称。

Step 2：整理到同一个区域

把这一页要用的图标放到同一个 frame 或组件区里，别让 Codex 在一堆图层里乱找。

Step 3：把链接交给 Codex

把 Figma 链接交给 Codex 的 Figma 插件，并补一句：

[figma链接] 请优先使用这个 Figma 图标区里的图标。如果没有完全匹配的图标，可以选择语义接近、风格一致的替代图标。

转载自优设网

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

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

二、选色就要干净

很多人在暗部选色时，就容易选的很脏，尤其是黄色，比如下面这种：

如果暗部颜色本身就选脏了，拿出来的最终质感就是这样的：

但如果你选择色相本身没那么脏：

这时候出来的效果就是这样的：

你可以对比下，脏不脏，一目了然：

这里选黄色暗部颜色的时候，有个小技巧，如果你实在不知道怎么选，你可以将亮部的颜色直接再叠加一层，把新的一层变成正片叠底模式，出来的新颜色，就可以作为暗部的颜色！

是不是非常简单，这样你就不用自己去选颜色了，在这个颜色基础上，微调就可以了！

可以看下面两个黄色暗部的对比，很明显左侧的就很脏，右侧就很通透：

三、环境边缘光弱化脏感

有时候如果我们增加暗部颜色，加过了，导致整体质感有点脏，这个时候，你只需要加一层边缘光，就会提亮不少，减少脏感。

哪怕是刚才那么脏的暗黄色，增加边缘光之后，都会好很多：

其实原理就是在边缘打了个灯光，你想想，那能不亮堂点吗！

实在案例中，也是非常好用，像这个左侧不加边缘光，就显得很脏，加了之后就清透很多：

再比如下面这个，加了边缘光，包括头部，手指等地方，也会通透很多：

所以，加边缘光真的可以减弱很多脏感！

四、大量融入黑白灰

左侧为什么那么显脏，其实除了颜色用的脏以外，很重要的是右侧除了红色和少量绿色，大部分面积都是黑色！

而左侧的图几乎没有黑白灰，连面部都是肉色。

当然，倒不是说颜色用多种就一定脏，而是容易用脏，所以我们现在会很好的控制黑白灰的面积。

你仔细观察，其实我们做的很多画面，都融入了大量的黑白灰，所以颜色就不容脏：

反倒是刚毕业的时候，不知道这个窍门，不管是做平面海报、吉祥物还是图标，都是各种颜色搭配，完了还用不好，最终显脏：

希望大家现在都能记住这个点！

总结起来，我认为减少颜色脏的技巧有3点：

第一，选色时就不能在颜色中融入过多的黑色，不然你选的颜色就很脏了。

第二，利用边缘光去提亮整体的亮度，减少脏感

第三，多增加黑白灰的面积比例，而不是多彩色去搭配，因为黑白灰比较保险，这样可以减少颜色用脏的风险！

转载自优设网

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

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

 一、项目定位与行业现存痛点
产品简介
Momentum是面向中大型企业团队的一站式AI赋能生产力协同SaaS，覆盖PC网页工作台、手机随身客户端、智能手表轻量化终端三端设备，配套明亮浅白、深色暗调两套完整界面主题。平台整合项目更新总量、迭代次数、会议时长、KPI绩效、任务完成率、周工作量热力看板六大类数据指标，内置团队消息会话、文档素材、待办清单、原生AI助手四大办公模块，适配办公室精细化项目管控、外出移动处理工作、碎片化手表速查数据全场景办公需求。

传统团队协同工具四大行业痛点
1. 多终端视觉割裂：电脑、手机、穿戴设备界面风格、组件规范不统一，团队切换设备学习成本高；
2. 缺少深浅完整双主题：仅提供浅色模式，夜间加班办公强光刺眼，无适配深色主题；
3. 数据指标分散杂乱：迭代、会议、绩效、工作量数据拆分多个页面，管理者无法单屏汇总团队产能；
4. 品牌视觉记忆点薄弱：多数协同后台采用灰蓝常规配色，无高辨识度主色，产品同质化严重。

二、产品完整团队效率管理闭环
三端数据实时同步，形成全局数据总览→项目进度管控→移动端随时处理事务→手表碎片化速查完整办公闭环
1. PC端Dashboard全局总览层：顶部个性化欢迎入口，一站式陈列项目更新、迭代次数、平均会议时长、团队KPI、任务完成率核心数字，搭配条形图表、周工作量热力色块看板，直观展示团队产能负载；
2. 左侧全局导航栏：分层通用功能（仪表盘、模板、产品、文档、消息）、待办清单、AI助手、团队会话联系人，层级清晰高频操作触达便捷；
3. 移动端轻量化精简面板：保留核心数据图表、日历日程、待办消息，底部极简导航栏适配单手触控操作；
4. 智能手表极简表盘：只展示项目更新总量与核心趋势图表，抬手快速读取关键业务数据；
5. 深浅双主题完整体系：同一套组件、图表、卡片分别适配浅白明亮、深色氛围感两套基底，满足昼夜不同办公环境。

 三、核心页面模块设计拆解
模块1：PC端全局数据仪表盘（深浅双版本）
左侧固定侧边导航，右侧多卡片网格轻量化布局，以活力暖橙为统一品牌识别色
1. 顶部全局操作栏：搜索框、月度时间筛选、通知、个人头像快捷入口；
2. 顶部欢迎引导区：个性化用户问候，搭配流体渐变橙抽象视觉Banner传递提效产品定位；
3. 六大核心数据卡片：项目更新总量柱状图、迭代次数、周均会议时长、团队KPI得分、任务完成率、周工作量热力色块表，全部采用橙系渐变填充；
4. 右侧日程与预约卡片：当月日历、团队待办日程，一键发起会议预约；
5. 左下角升级专业版醒目橙色行动按钮，清晰引导付费转化。

模块2：移动端轻量化首页
1. 顶部月度筛选、消息通知、个人头像；
2. 精简版核心数据图表，压缩冗余参数适配竖屏；
3. 日历日程模块展示当日团队任务；
4. 底部五图标极简导航：首页、模板、文档、待办、消息，单手即可点击全部高频功能。

模块3：智能手表表盘组件
极简无冗余布局，保留项目更新数字、简化趋势条形图，复用品牌橙色配色，小尺寸屏幕信息不拥挤。

模块4：深浅双主题统一组件体系
进度条、热力色块、数据卡片、按钮、输入框一套设计规范，仅切换基底与文字色值，视觉风格完全统一，降低开发维护成本。

四、视觉设计体系：活力暖橙现代商务生产力风
1. 色彩系统
- 双基底体系：纯净哑光浅灰白（日间办公）、深棕近黑深色基底（夜间加班）；
- 品牌主识别色：高活力暖橙色，用于按钮、图表填充、高亮指标、品牌Logo，辨识度极强，区别于行业常规蓝灰配色；
- 辅助区分色：浅灰用于次要边框、辅助文字，纯白/深灰承载卡片面板；
- 数据状态色：同橙色深浅渐变区分工作量低/中/高/饱和四级负载，直观易懂。

2. 图形与可视化规范
1. 轻量化柔和图表：条形趋势图、色块热力看板统一暖橙渐变，线条柔和无生硬棱角；
2. 大圆角悬浮卡片：极低柔和阴影，大量留白，多卡片同屏排布整洁不拥挤；
3. 流体渐变抽象视觉图形，作为页面装饰强化科技提效氛围感；
4. 纤细线性极简导航图标，三端完全复用，视觉体系统一。

3. 文字层级规范
纤细无衬线现代商务字体，三层清晰信息层级：产能/任务超大加粗数字→模块板块标题→日程、参数辅助小字，远距离快速抓取团队核心绩效数据。

五、产品商业与团队落地价值
1. 电脑/手机/手表三端统一视觉规范：一套设计系统覆盖全设备，降低团队多设备切换学习成本；
2. 完整深浅双主题适配全时段办公：白天浅色舒适、夜间深色护眼，覆盖全天办公场景；
3. 一站式汇总全部团队产能数据：单仪表盘看完迭代、会议、绩效、工作量，管理者高效评估团队负载；
4. 高记忆点暖橙品牌色打造差异化：跳出行业千篇一律蓝灰后台，视觉辨识度高利于产品品牌传播；
5. 轻量化移动端与手表终端：碎片化场景快速查看数据，不用打开电脑也能掌握项目进度，提升团队响应效率。

图片来自Behance

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

互联网行业增量时代已成过去，单纯堆砌功能、迭代页面很难拉动业务增长。如今设计师常面临灵魂拷问：界面优化、交互改版究竟带来了多少真实收益？用户体验是主观感受，仅靠 “好用、流畅” 无法支撑业务决策，体验度量模型就是把模糊体感转化为可量化、可追踪、可复盘指标体系的核心工具。兰亭妙微结合多年 ToB、ToC 设计落地经验，梳理主流行业成熟度量框架，拆解一套可落地、轻量化的自建度量模型搭建思路。

作为深耕 UI/UX 全案设计的团队，兰亭妙微始终坚持持续拆解主流产品交互细节，沉淀可落地的设计思考。长期复盘各类产品体验，既能补齐设计逻辑短板，也能跳出模板化思维，真正做到以用户情绪、操作路径为核心做设计。本文选取餐饮、招聘、地图、短视频、电商直播五大赛道产品，结合竞品对比，拆解细节背后的设计策略。

语言学习向来枯燥、易半途而废，但多邻国仅凭一套贴合人性的 UX 设计，积累超 5 亿全球用户。兰亭妙微深耕用户体验设计多年，结合行为心理学拆解这款产品背后 9 个核心设计技巧，拆解可复用的用户留存思路，为教育、工具类产品提供落地参考。

一、组件基础认知：什么是商品卡片

兰亭妙微ui设计公司分享：商品卡片是电商类 C 端产品的核心基础组件，适用范围不局限于实物商品，课程、旅游服务、游戏道具、会员套餐等全部可交易虚拟 / 实体品类，都依靠它承载核心信息，帮助用户快速抓取商品关键属性、完成浏览决策。

电商 App 内通用两套卡片展示视图，二者布局逻辑、信息承载上限存在明显差异，也是我们设计时需要重点区分的核心形式：网格视图、列表视图。

下文将拆解两种视图的排版规则、视觉规范、信息取舍逻辑，帮你标准化落地商品卡片组件。

二、核心设计要点（全文重点）

1. 两大基础布局：网格布局 & 列表布局

（1）网格布局

网格布局分为等距规整网格、瀑布流网格两类，二者都需要统一商品主图尺寸，避免画面杂乱无序。

• 瀑布流网格：允许卡片高度错落，但图片长宽比例需统一，错落幅度严格控制，视觉更轻盈；排版细节可参考往期《UI 组件瀑布流设计科普》。

  

• 规整对齐网格：行业最常用方案，固定图片、文本区域高度；针对标题长短不一的问题，提前预留多行文本空间，保证整行卡片视觉对齐。

网格视图受屏幕宽度限制，展示空间紧凑，不适合堆砌大量文字信息，复杂规格、长标签类内容建议省略。

（2）列表布局

列表采用「左图右文」横向排版，图片宽度统一，右侧文本区域高度灵活，分 3 种适配方案：

1. 大信息量等高方案（京东类） 文本区域高度可超出图片高度，容纳规格、评价、店铺、满减等全量信息，适合搜索结果、商品分类页。

   

2. 中等信息量等高方案（主流电商） 图文区域底部对齐，信息精简，视觉整洁均衡，是淘宝、拼多多搜索页通用规范。

   

3. 极简短信息方案 仅保留图、标题、价格，强行对齐底部会造成卡片内部留白远大于卡片间距，破坏视觉亲密性；优化方案：卡片之间增加分割线，弱化对齐约束。

   

2. 卡片 3 种基础视觉形态

根据边框、背景、图片裁切规则，分为全包式、半包式、开放式，覆盖市面 99% 电商产品：

① 全包式（低频使用）

完整底色容器包裹商品图与全部文字，卡片四周统一圆角，整体感强，但视觉厚重，多用于品牌专题、活动会场。

② 半包式（行业主流）

商品图顶边、左右撑满卡片边界，仅底部文字区域在底色容器内；圆角规范重点：图片下方两个内角不做圆角，仅卡片外框设置圆角，避免视觉断层。

③ 开放式（轻量化首选）

无独立卡片底色，图片 + 文字自成一组信息单元；文字区域左右向内缩进，和图片形成层次区分，可单侧缩进、也可双侧缩进，清爽简约，适合极简风、出海电商。

3. 卡片标准信息层级（8 类模块）

不同品类、不同平台可按需删减模块，但商品主图、商品标题、售价是三大必选基础元素。

1. 商品主图：视觉第一优先级，吸引用户点击
2. 主标题：活动标签 + 商品全称，核心识别信息
3. 辅助副标题：销量榜单、好评率、用户评价数
4. 价格模块：现价、划线原价、已售人数
5. 优惠标签：运费险、7 天无理由、满减、分期免息、优惠券
6. 规格参数：尺寸、材质、型号、适配人群（网格布局优先删减）
7. 店铺信息：自营 / 旗舰店标签、店铺名称、进店入口
8. 交互按钮：收藏、加入购物车、快速购买

信息权重设计技巧

• 国内电商：价格、标题权重最高，优惠标签作为强视觉辅助；
• 海外品牌电商（ASOS、SHEIN）：放大价格字号，弱化标题，突出品牌简约调性；
• 网格 / 列表信息统一原则：两套视图核心字段保持一致，网格视图仅删减长文本规格类内容（如小米有品）。

4. 场景决定信息取舍：4 类高频场景差异化设计

卡片展示页面不同，用户核心诉求完全不同，信息模块需要针对性增减：

1. 首页推荐流卡片 用户浏览目标泛、需要一屏展示更多商品，仅保留图、标题、价格、1 个核心活动标签，删除规格、店铺、评价等次要信息，降低单张卡片高度。
2. 搜索结果 / 分类页卡片 用户有明确购买意向，信息完整展示，包含评价、销量、店铺、满减、规格，辅助用户对比筛选。
3. 购物车卡片 用户已认知商品基础信息，核心需求：核对规格、修改数量、查看实付差价；新增规格选择器、数量加减框、单品优惠、凑单提示模块。
4. 服务类商品（酒店、旅游） 区别实物电商，新增评分、距离、配套设施、入住日期、房型等专属字段，代表产品：马蜂窝、飞猪酒店列表。

5. 差异化商品卡片案例参考

（1）海外极简服饰电商：ASOS / Massimo Dutti / SHEIN

品牌调性克制高级，卡片极度轻量化，仅保留主图、售价、短标题、收藏按钮，无多余营销标签，适合出海国货 App 参考。

（2）本地生活服务卡片：马蜂窝、飞猪

服务类商品和实物商品字段体系完全区分，核心展示评分、地理位置、配套权益、起售价，是虚拟服务类组件的典型参考。

三、样式拓展：线上实战案例汇总

市面上成熟电商的商品卡片都基于以上规则做变体设计，可根据产品定位、运营需求调整圆角、留白、标签样式、色彩权重，搭建专属组件库。

结语

商品卡片是电商 C 端复用率最高的 UI 组件，设计核心逻辑永远围绕用户场景 + 信息优先级展开：先确定展示视图，再选择卡片视觉形态，最后根据页面场景增减信息模块。掌握这套标准化设计思路，就能快速完成全平台统一、可复用的商品卡片组件规范。

转载：优设

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

前言

兰亭妙微ui设计公司分享：当下国内 C 端产品竞争白热化，为抢夺用户注意力，界面视觉愈发繁复花哨，极简设计仅少量头部工具类产品在用。这套审美倾向也直接影响设计师求职评审 —— 作品集更偏爱能驾驭复杂视觉的方案，简约风格反而不占优势。

配色是 UI 设计的核心难点，也是初级设计师最容易卡壳的环节。本文抛开晦涩理论，用落地化、标准化的完整逻辑，拆解一套可直接复用的 UI 配色全流程，从色彩底层原理到完整落地案例一次性讲透。

一、先搞懂色彩基础：RGB/CMYK/HSB 适用场景

想要做好配色，第一步要分清三种主流色彩模式的用途，UI 设计优先掌握HSB。

1. RGB（屏幕显色模式） 屏幕由像素发光成像，依靠红 (R)、绿 (G)、蓝 (B) 三种光源混合出万千色彩，手机、电脑、APP 界面全部使用 RGB。 三色数值区间为 0-255，组合逻辑抽象，肉眼很难预判混合后的最终色彩，不适合手动选色调试。
2. CMYK（印刷实物模式） 用于纸质印刷、物料喷绘，依靠青 (C)、品红 (M)、黄 (Y)、黑 (K) 四色颜料叠加显色。 屏幕自发光与印刷颜料反光视觉差异极大，VI 印刷色不能直接照搬给 UI 界面使用。
3. HSB（UI 设计师首选调色逻辑） 将色彩拆解为三大维度：色相 H、饱和度 S、明度 B，是所有设计软件取色面板的底层逻辑，也是 UI 配色的核心工具。

• 色相 H：360° 环形色环，取色面板横向色条就是色环拉直后的形态，首尾均为红色；
• 饱和度 S：色彩纯净度，S=0 时无彩色倾向，只剩黑白灰中性色；
• 明度 B：明暗深浅，B=0 纯黑、B=100 纯白，数值越低颜色越深。

实操建议：打开 Figma/PS/ Sketch，优先把取色面板切换为 HSB 模式，调色遵循「先定色相→再微调饱和度、明度」的顺序，拒绝随机拖拽取色。

二、UI 界面五大色彩体系（新版标准化分类）

传统设计只划分主色、辅助色、中性色，无法适配当下复杂运营、多内容场景，现统一分为品牌色、功能色、中性色、装饰色、内容色五大类，覆盖界面全部用色场景。

1. 品牌色：产品视觉识别核心

品牌色是区分产品的视觉锚点，分为品牌主色与品牌辅助色。

• 品牌主色：一款产品仅设 1 个核心主色，绑定品牌记忆点。例：美团黄、肯德基红、星巴克绿；多用于按钮、导航、LOGO、核心弹窗、重点标签等高频视觉位置。 选色规律：成熟互联网产品主色普遍落在 HSB 面板「高饱和、高明度」的右上区域，鲜亮通透，屏幕显示不发灰，更容易抓住用户视线、加深品牌记忆。
• 品牌辅助色：搭配主色丰富视觉层次，可设 1 个或多个；如麦当劳主色金拱门黄，搭配红色强化识别。 避坑提醒：无成熟 VI 规范的新产品，不建议新增辅助色，容易稀释主色权重，造成视觉杂乱。

2. 功能色：传递信息的标准化语义色

功能色承载明确信息语义，用户已形成固有色彩认知，设计时优先顺应大众习惯：

• 电商：红色代表优惠、降价、活动价；
• 工具类：绿色代表成功、完成、通过；
• 国内金融：红涨绿跌；数字货币行业相反，绿涨红跌。

实用技巧：若品牌主色刚好匹配功能语义，可直接复用品牌色，无需新增色值。例：京东优惠价、支付宝确认按钮均直接使用品牌主色，减少色值冗余。

3. 中性色：界面视觉骨架（占比最高）

中性色即黑白灰，是整套界面的基底，页面背景、正文、次要文字、分割线、图标全部依赖中性色，整体页面中性色占比远高于品牌色。

中性色落地规范

1. 分级阶梯：一套 UI 至少设置 5 档以上灰度，依靠明度 B 值区分信息层级；数值统一取 5 的倍数（10/20/40/60/80/90），方便团队统一规范。
2. 拒绝纯黑：避免 B=0 的纯黑色，OLED 屏幕下纯黑与周边色彩反差极强，视觉割裂、刺眼。
3. 微色相优化：专业项目的灰度不会是完全无倾向的纯灰，会混入极淡蓝色相，弱化生硬感；颜色越浅，混入的色相饱和度越低，肉眼几乎察觉不到。

4. 装饰色：运营 / 组件专属灵活用色

品牌色、功能色、中性色属于项目固定规范色，装饰色是脱离规范的补充色彩，多用于运营活动页、装饰图标、营销瓷片区。

• 痛点：运营场景为适配节日、专题需求大量新增装饰色，极易和产品基础色冲突，导致整体界面割裂；作品集评审中，装饰色杂乱是扣分重灾区。
• 作品集优化方案：装饰色优先选取和主色色相差异大的色系，避免同色系混淆，提升页面丰富度且不破坏品牌统一感。

5. 内容色：图文素材的可控配色

内容色指商品图、用户头像、广告 banner、资讯封面等素材自带色彩，分为两类场景差异化处理：

1. 大图场景（占页面 1/2 以上）：大图直接决定页面整体色调，优先选用底色干净单一的素材，画面主色调和产品品牌色协调，避免高饱和杂色堆砌。
2. 列表小图（多图平铺）：弱化图片色彩存在感，优先白底、低饱和背景素材；高饱和、色彩杂乱的小图大量堆叠，会让页面廉价、刻意，是 “飞机稿” 典型特征。

补充：美妆、服饰、茶饮等自有内容素材的品牌，会统一规范拍摄、修图色彩标准，从源头保证页面配色统一。

三、UI 配色 vs 平面配色：三大核心区别（很多设计师踩坑）

不少设计师照搬平面配色逻辑做 UI，最终效果违和，二者底层逻辑完全不同，核心差异分为三点：

1. 载体：静态固定 VS 动态可变

平面海报、包装定稿后画面永久固定，设计师能完整把控所有色彩搭配； UI 页面内容、模块会持续迭代更新，动态内容极易破坏原有配色平衡，设计时必须预留容错空间。

2. 显色原理：反光印刷 VS 屏幕自发光

平面 CMYK 依靠颜料反光显色，高饱和荧光色大面积使用也不会刺眼； UI 屏幕 RGB 自发光，高饱和、强对比色大面积使用会造成视觉疲劳，部分艳丽色彩直接需要舍弃，因此行业老话 “没有丑颜色，只有烂搭配” 不适用于 UI 设计。

3. 品牌目标：长线渗透 VS 瞬时记忆

传统品牌 VI 通过门店、包装、物料长期渗透，色彩调性温和舒缓； 互联网产品依靠手机小屏幕和海量竞品争夺注意力，品牌色需要视觉冲击力更强，快速让用户形成记忆。

四、标准化 UI 配色落地流程（分五步操作，高效不出错）

不建议边画界面边填色，配色独立作为完整设计阶段，按「中性色→品牌色→功能色→内容色→装饰色」分层填充，每一步可单独校验调整。

Step1：搭建中性色灰度阶梯（第一步！基底优先）

完成页面原型后，先定义全套中性色分级，用灰度区分标题、正文、辅助文字、分割线、卡片背景，搭建完整信息层级。 优势：提前理清页面轻重关系，后续叠加彩色不会出现层次混乱。

Step2：填充品牌主色 + 辅助色

中性色基底稳定后，再铺品牌色，品牌色是整套配色的约束标准，后续所有色彩都要和它和谐适配。

• 成熟品牌：基于官方 VI 色微调明度、饱和度，适配屏幕 RGB 显色；
• 全新产品：在 HSB 面板高饱和高明度区域选定主色，无 VI 规范不额外加辅助色。

Step3：梳理并填充功能色

梳理页面内所有特殊语义模块（价格、收藏、成功提示、警告、会员标签等），主色无法承载语义时，新增独立功能色，数量尽量精简。

Step4：置入内容配图

根据图片占比选择适配素材，大图协调品牌色调，列表小图弱化色彩冲击，规避杂乱色块。

Step5：点缀装饰色

最后补充图标、运营模块装饰色，此时中性色、品牌、功能色已全部定型，装饰色可选范围被大幅缩小，更容易搭配和谐。

五、进阶：设计风格前置 —— 配色的底层方向指引

熟练掌握五步基础配色流程后，想要方案具备深度，需要在配色前先确定整体设计风格，情绪版是前期核心工具。

1. 新手阶段：优先吃透标准化配色流程，保证色值层级不出错，方案自然具备基础品牌调性；
2. 进阶阶段：先通过情绪版定义产品风格（简约 / 活力 / 轻奢 / 商务），再反向约束色相、饱和度、明度取值，让配色贴合品牌定位，设计方案拥有完整逻辑，不再单纯堆砌颜色。

很多初级设计师认为情绪版、品牌分析只是作品集包装，实则是专业团队统一视觉语言的核心环节；积累足够实操经验后，才能理解风格分析对配色的指导价值。

六、完整实操案例演示（捷安特品牌 APP）

项目原有问题

1. 自定义主色和捷安特官方 VI 严重不符，品牌识别断裂；
2. 内容配图色彩杂乱，和界面基础色冲突；
3. 选用深色模式，明暗对比度把控难度高，不适合新手练习。

浅色模式分步优化

1. 中性色搭建：重构页面原型，优化布局结构，设置 6 档灰度阶梯，区分导航、标题、正文、辅助文字、分割线、卡片背景；
2. 品牌色适配：沿用捷安特官方深蓝色为主色，浅蓝为辅助色；主色用于 LOGO、底部选中导航、核心按钮、重点标签，辅助色点缀次要操作组件；

   

3. 功能色填充：单独区分价格、评分、收藏、热门标签等特殊模块，使用低饱和语义色，不抢品牌主色视觉重心；

   

4. 内容配图替换：首页大图选用带浅蓝底色的产品图，贴合品牌色；商品列表小图统一白底，降低杂色干扰；

   ,

5. 装饰色收尾：瓷片区、装饰图标选用和蓝系反差较大的低饱和彩色，丰富视觉且不破坏整体统一。

   

    

补充深色模式说明

深色模式中性色逻辑相反，底色使用高灰度，文字用浅灰；品牌色需要同步降低饱和度，避免屏幕高亮度刺眼，明暗对比度严格遵循无障碍阅读规范，新手不建议优先尝试。

七、文末总结

UI 配色逻辑相比平面设计更加标准化、模块化，五大色彩各司其职，选色区间存在清晰规律，依靠固定流程就能稳定输出合格方案。

1. 基础阶段：牢记五步配色流程，先中性、后品牌、再功能、内容、装饰，分层管控色彩；
2. 进阶阶段：前置风格定位，用情绪版约束整体色调，让配色贴合产品品牌定位；
3. 作品集避坑：严控装饰色、素材内容色，避免多色堆砌导致视觉割裂；新手优先做浅色模式，降低明暗把控难度。

配色没有玄学，本质是给不同界面元素匹配对应规范色值，结合大量案例临摹与落地实操，就能快速形成成熟的色彩审美与搭配能力。

转载：站酷

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