首页

用了3年AI,终于知道怎么去掉AI味!

之晨

 

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

一、全文速览图

image.png如果你用AI生成的图有一股AI味,那今天你有福了,我来给大家介绍几个方法,去掉你图片的AI感。

二、质感太平

很多同学用AI生的图,质感过于平,尤其是白色,比如下面这个晴天娃娃的创意形象,白色就非常平:

image.png

主要原因就是缺少暗部重色,这个时候你只需要和AI说,加强质感,加重暗部:

image.png

然后你就可以得到一个质感饱满的效果

image.png你可以对比下效果:

image.png

一下子就从一个纸片变成了饱满的立体效果!

三、颜色泛黄

有时候用AI生出来的图泛黄,导致AI感特别重,比如一片叶子:

image.png

这时候我们可以给他加一点色彩平衡,然后把颜色往蓝色调整,黄绿就会变成蓝绿色:

image.png

这样质感就舒服很多。

还有AI生出来的白色,也容易泛黄,我们也可以加入蓝色,比如下面这个图标,绿色和白色都进行加入蓝色的处理:

image.png

质感就舒服很多!

四、暗部饱和度太浓烈

这一个点是最最最致命的,也是80%AI感的来源。

我们都知道,一个画面里有暗部和亮部,按照正常逻辑来讲,应该凸显亮部,弱化暗部,如果暗部过于抢眼,那这个画面就会非常的扎眼、油腻。

比如下面这个杯子,很明显,他的杯子暗部饱和度就有点高:

image.png

如果你觉得没看出来,那你再仔细看下杯子的投影部分,那个地方饱和度就更加的高,整个视觉焦点都被投影的高饱和给吸引了:

image.png

所以这个时候,我们就需要去给暗部加入灰色,比如杯子的暗面,以及杯子的投影部分,使其暗部颜色没有那么浓烈,这样你再对比下:

image.png

是不是AI感就消失了很多!

我总结下来,造成AI感的三个主要点就是:平、黄、油!

  1. 平就是质感平,解决办法就是增加重色,增强质感。
  2. 黄就是颜色泛黄,解决办法就是增加蓝色,对冲黄色。
  3. 油就是暗部饱和度过高,解决办法就是在暗部颜色中增加灰色,弱化暗部颜色的抢眼程度!

 

转载自优设网

 

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

 

image.png

为什么AI不按规范生成页面?你缺少这个方法!

之晨

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

一、全文速览图

 

image.png

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

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

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

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

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

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

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

image.png

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

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

image.png

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

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

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

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

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

1. 经验没有显性化

image.png

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

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

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

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

2. 规则没有集中化

image.png

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

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

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

3. 组件没有索引化

image.png

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

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

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

4. 结果没有可检查化

image.png

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

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

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

它缺:

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

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

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

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

第一步:搭底座

image.png

先让 AI 有东西可读。

这里包括:

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

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

第二步:用底座

image.png

再让 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 直接拼页面

image.png

很多设计师会说:

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

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

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

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

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

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

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

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

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

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

image.png

还有一些团队已经写了规范文档,甚至整理了 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 仍然自己写一套

image.png

也有团队已经有前端组件库,但 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、文档、代码都有,但三者没有串起来

image.png

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

团队手里有:

  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。

 

image.png

用AI生成的图标不高级?试试这10个大厂设计师私藏图标库!

之晨

 

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

一、全文速览图

image.png

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

image.png

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

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

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

image.png

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

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

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

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

image.png

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

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

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

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

image.png

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

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

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

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

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

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

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

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

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

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

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

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

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

lucide-react:太容易有 AI 味

image.png

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

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

react-icons:方便,但容易风格杂

image.png

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

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

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

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

image.png

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

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

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

image.png

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

image.png

Tabler 的优势是数量多。

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

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

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

image.png

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

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

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

Radix Icons — 小尺寸组件更稳

image.png

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

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

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

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

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

image.png

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

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

image.png

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

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

image.png

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

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

Step 1:准备图标库

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

Step 2:整理到同一个区域

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

image.png

Step 3:把链接交给 Codex

把 Figma 链接交给 Codex 的 Figma 插件,并补一句:

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

image.png

 

转载自优设网

 

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

 

image.png

兰亭妙微ui设计公司分享:金融配色有雷区,五大设计失误深度拆解与落地解法

清阳

引言:金融配色,从来不止 “好看” 这么简单

兰亭妙微ui设计公司分享:不同于电商、文娱类产品,金融界面承载用户资金交易、风险判断、资产决策,色彩是传递安全感、专业度、可信度的隐性语言。一处配色疏漏,不止拉低视觉质感,更会造成用户误操作、信任崩塌、跨区域市场舆情危机,甚至触碰无障碍合规红线。

本文梳理金融 UI 设计中最高发的五大配色雷区,拆解失误背后的底层逻辑,配套可直接落地的标准化解决方案,帮助设计师在视觉创新、品牌表达、交易安全三者间找到平衡,打造兼顾专业、易用、合规的金融色彩体系。

一、雷区一:设计师主观审美凌驾用户认知

image.png

金融色彩设计的核心是用户思维,而非个人艺术创作。若一味追求设计师偏好,无视不同人群的色彩认知习惯,极易造成信息读取障碍,削弱产品专业公信力。

(一)问题拆解

  1. 个人审美主导界面,功能性让步风格 不少设计师为追求 “高级质感” 滥用低饱和莫兰迪色系、大面积纯黑暗黑模式,直接抹平页面信息层级;也有人盲目堆砌荧光绿、高饱和紫等强冲击色,让银行、理财界面显得廉价、娱乐化,消解金融行业稳重底色。
  2. 用户分层匹配错位,视觉适配严重失衡 面向中老年理财客群的产品,大量使用低透明度渐变、浅淡抽象色块,账户余额、收益数字模糊难辨;主打年轻群体的基金、证券 APP,跟风酸性霓虹、故障艺术特效,花哨视觉冲淡专业属性,用户不敢放心投入资金。

(二)标准化落地解法

1. 搭建分人群用户色彩认知基线

先通过用户画像分层锁定色彩偏好与敏感阈值:

  • 中老年用户:优先暖调、高对比配色,规避暗底色、冷灰弱文字;
  • 高净值客户:偏好低饱和中性色系,排斥高饱和花哨视觉;
  • Z 世代年轻投资者:接纳渐变、轻量化动态效果,但核心交易区仍需保留传统金融安全色。

同步开展色彩语义认知测试,重点验证涨跌、风险、确认等关键功能色的大众联想,避免出现 “绿色代表亏损” 这类认知错位。

2. 按业态划定金融配色红线

针对不同金融品类设立禁用色彩规范,从源头规避风险:

  • 银行 / 保险:禁用荧光色、高饱和霓虹渐变、全屏黑色;
  • 证券 / 基金:主色避开红、绿两大涨跌标识色,防止行情视觉混淆;
  • 支付工具:支付、确认、退款等核心操作按钮,严格遵循大众通用色彩心智。

3. 用 A/B 测试量化配色效果

配色方案上线前必须完成对照测试,两类核心观测指标:

  • 功能指标:按钮点击率、表单完成率、交易误操作频次;
  • 情感指标:NPS 净推荐值、用户访谈中 “安全”“靠谱” 等正向关键词提及率。

二、雷区二:功能色与品牌色边界模糊,引发交易误判

 

金融色彩具备强指令属性:颜色直接告诉用户 “确认、警告、亏损、盈利”。若品牌色随意侵占功能色场景,色彩语义彻底混乱,轻则操作犹豫,重则造成资金误操作,同时无视色盲群体还会触犯无障碍法规。

(一)问题拆解

  1. 品牌色入侵功能场景,语义完全混淆 功能色是具备通用指令含义的专用色彩:红色 = 风险 / 警示 / 撤销,绿色 = 确认 / 成功,蓝色 = 进度 / 说明;品牌色仅用于 Logo、装饰、次要模块,不可替代功能色。 典型误区:品牌主色为红色,同时用红色标注风险弹窗、确认买入按钮,用户无法区分 “警示” 和 “操作入口”,关键交易时极易判断失误。image.png
  2. 单一色彩传递信息,无视色觉障碍人群 仅依靠红、绿区分涨跌行情,无文字、符号辅助,红绿色盲用户完全无法分辨盈亏;该设计缺陷不仅伤害用户体验,在多地还违反无障碍访问相关规范。

    image.png

(二)标准化落地解法

1. 色彩分层隔离:功能色优先级高于品牌色

建立强制规则:交易、风险、确认等核心功能区,优先使用通用标准功能色,即便和品牌主色冲突也不可替换。品牌色仅允许用于页面装饰、头部 Logo、次要营销模块,绝不干扰决策类操作。

image.png

2. 多维信息叠加,不单独依靠颜色表意

所有依靠色彩区分的信息,配套多重视觉辅助:

image.png

  • 涨跌数据:上涨配↑、+ 号,下跌配↓、- 号;
  • 风险等级:除红色警示外,加粗提示文案、增加边框标识;
  • 按钮状态:可点击 / 置灰状态,同步区分形状、描边粗细,不只用颜色区分。

3. 内置无障碍高对比度模式

产品设置中心增加一键切换高对比模式,采用黑白灰强对比 + 粗边框设计;设计阶段借助色盲模拟工具校验界面,保证色觉障碍用户完整获取全部金融数据。

三、雷区三:忽视地域文化色彩禁忌,全球化布局踩舆情雷

image.png

跨境金融出海时,语言翻译易被重视,但色彩背后的文化、宗教、政治象征极易被忽略。同一种颜色在不同国家、地区褒贬含义完全相反,微小配色失误会引发大规模市场负面舆论。

(一)问题拆解

  1. 色彩象征跨地域完全对立 最典型案例:红绿色涨跌语义冲突。国内市场红色代表上涨、喜庆;欧美证券市场红色代表下跌、亏损。若直接复用国内配色出海,海外用户会完全读反行情数据。 中东市场随意搭配绿色 + 星月元素,易被误认为专属伊斯兰金融产品,无关业务使用会被视作冒犯宗教。
  2. 触碰历史、政治敏感色彩组合 东欧市场避免红白黑组合,易关联纳粹历史符号;曾被殖民的南亚区域,慎用殖民国家国旗配色,极易触发民众抵触情绪。
  3. 区域通用警示色不统一 国际通用橙色代表警告,但日本金融产品习惯用黄色做风险标识,直接照搬国际配色会造成本地用户看不懂风险提示。

    image.png

(二)标准化落地解法

1. 分区域建立本地化色彩库

image.png

提前调研目标市场文化、宗教、民俗,整理各地区友好色系、禁忌色、功能专用色,为不同国家版本输出独立配色规范,拒绝一套配色全球通用。

2. 本地化三重审核流程

image.png

1)文化顾问初审:筛查配色、图形是否存在宗教、政治敏感元素; 2)本地用户焦点小组测试:收集大众对色彩的第一联想; 3)色彩语义校准:修正涨跌、风险、警示等功能色,贴合当地使用习惯。

3. 搭建色彩危机应急机制

面向高敏感海外市场,预留全局一键换色功能;若配色引发文化争议,可快速替换主色调;涉及易产生歧义的色彩场景,增加说明文案,标注 “配色无宗教、政治指向”。

全球化金融配色的核心不是统一视觉,而是 “一地一策” 的文化尊重,避开色彩认知盲区,才能真正建立海外用户信任。

四、雷区四:一味追求视觉高级,牺牲基础信息可读性

 

金融界面第一要务是清晰可读,账户余额、持仓金额、手续费、风险提示都是用户核心关切。很多设计师为极简氛围感,刻意压低对比度,导致强光、暗光、老年用户都无法正常读取数据,再精致的视觉设计也失去使用价值。

(一)问题拆解

  1. 低对比度设计,文字、按钮识别困难 浅灰文字搭配纯白背景、同色系灰色按钮 + 灰色边框,看似简约高级,实际弱光、户外强光下几乎看不清;中老年视力退化人群查看资产数字时障碍极强,直接降低产品使用意愿。image.png
  2. 深色模式粗暴反色,未做专业校准 多数深色模式仅简单反转浅色页面黑白,没有重新校准色相、对比度,纯白文字在深色底上刺眼疲劳,行情图表、数字辨识度大幅下降,违背深色模式护眼的初衷。

     

    image.png

  3. 未考虑多场景光线适配 设计仅在室内柔光屏幕调试,忽略户外日光反光场景,深色界面在阳光下数据完全看不清。image.png

(二)标准化落地解法

image.png

1. 严格遵循 WCAG 2.1 AA 无障碍对比度标准

落地硬性数值规范:

  • 正文文本与背景对比度≥4.5:1;大号标题文字≥3:1;
  • 按钮、图表等功能性色块对比度≥3:1; 设计全流程使用 WebAIM Contrast Checker、Figma 对比度校验插件,所有页面批量检测,不达标配色直接驳回。

2. 多场景视觉适配方案

  • 强光户外:提供高对比度浅色主题一键切换;
  • 深色模式:重新调和文字灰度,避免纯白刺眼文字,平衡清晰度与视觉舒适度;
  • 进阶功能:增加自适应亮度调节,根据环境光线自动调整页面色彩明度。

3. 多群体可用性测试

上线前分层模拟真实使用场景校验: 1)50 岁以上中老年用户,模拟 300-500lux 户外强光环境测试; 2)色盲模拟工具全页面扫描,确认图表、盈亏数字无识别障碍; 3)灰度模式预览,仅依靠明暗层级也能分清页面功能模块。

五、雷区五:盲目跟风流行趋势,品牌色彩辨识度彻底流失

image.png

金融赛道产品同质化严重,色彩是用户区分品牌的第一道视觉记忆点。一味照搬头部产品配色、追逐短期潮流,会让品牌失去专属视觉标签,在用户心中留下 “仿品、不够专业” 的负面印象。

(一)问题拆解

  1. 照搬头部竞品配色,陷入同质化内卷 大量理财、信贷 APP 直接复制头部平台标志性色彩(支付宝蓝、微信绿),用户难以区分品牌,甚至误以为是山寨产品;盲目套用欧美冷灰极简风,又和国内用户传统金融审美脱节。
  2. 潮流设计与金融属性严重冲突 跟风酸性霓虹、玻璃拟态、赛博渐变等潮流风格,视觉花哨但信息层级混乱;金融产品核心需求是稳重可信,过度潮流化会消解专业感。
  3. 品牌色彩频繁迭代,视觉记忆断裂 短期内多次更换主色(蓝→紫→橙渐变),用户无法形成稳定品牌色彩记忆;传统保险、银行产品强行套用加密平台潮流配色,业务调性与视觉完全割裂,信任感大幅下滑。

(二)标准化落地解法

image.png

1. 挖掘品牌原生色彩 DNA

回溯品牌历史 LOGO、线下网点视觉、传统 VI 系统,保留用户已形成认知的基础色系,在原有色彩框架内微调创新,维持视觉记忆连续性;色彩调性贴合业务定位:养老理财柔和暖调、青年理财活力低饱和渐变、对公金融沉稳深中性色。

2. 潮流趋势三重筛选机制

所有流行设计落地前,依次过滤三层标准: 1)功能性过滤:优先保留能提升可读性、操作效率的趋势,舍弃干扰数据展示的花哨特效; 2)本土化适配:国际潮流结合本土传统色彩改良,不直接照搬; 3)渐进迭代原则:每年品牌主色调整幅度控制在 10% 以内,避免用户认知断层。

3. 差异化色彩战略打造竞争壁垒

跳出行业通用蓝、灰体系,适度融入地域文化特色色彩建立专属视觉符号;针对不同客群推出细分色彩方案,用色彩传递产品定位,形成竞品无法复制的视觉记忆点。

结语:搭建金融配色不可突破的安全底线

综合五大配色雷区可以发现,金融色彩设计始终需要平衡三大核心维度:功能安全、品牌识别、用户认知,三者缺一不可,其中功能安全是不可动摇的底层底线。

1. 金融配色三大核心挑战

  • 功能安全为根基:配色失误会直接造成交易误判、资金损失,是所有设计的前置约束;
  • 品牌差异为竞争力:独特稳定的色彩体系,是同质化市场中抢占用户心智的核心武器;
  • 用户认知为标尺:所有色彩设计必须贴合大众使用习惯、适配全年龄段、跨地域人群。

2. 配色安全三大核心原则

  1. 功能表意优先,杜绝色彩误导 风险、确认、盈亏等关键功能严格使用通用语义色,配套文字、符号多重辅助;全页面对比度达标,兼顾色觉障碍、老年、强光场景用户。
  2. 品牌色彩稳中迭代,拒绝频繁大变 保留品牌原生色彩记忆点,年度微调幅度可控;潮流风格仅做轻量化点缀,不破坏金融稳重专业的核心调性。
  3. 尊重人群与地域差异,前置测试验证 国内分层适配不同年龄用户,海外市场分区域定制色彩库;所有配色方案上线前完成用户测试、文化审核、无障碍校验。

3. 行业未来配色发展趋势

随着 AIGC 设计工具成熟,智能配色系统将成为金融设计标配:依托海量用户数据自动生成兼顾合规、可读、品牌调性的色彩方案,大幅降低试错成本。 同时,个性化自适应配色、区域文化定制色彩、多光线智能适配深色模式,会成为金融产品的基础标配。

金融色彩设计,是理性规范与人文体验的结合。守住可读性、交易安全、文化合规的底线,再适度做品牌视觉创新,才能长久留住用户信任,打造有记忆点、零风险的金融视觉体系。

 

 

转载:站酷

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

 

image.png

 

收拢 AI 数据不确定性:兰亭妙微深度拆解 BI+AI 可信交互设计方案

涛涛

当下 AI 深度融入企业 BI 数据分析赛道,帆软、阿里、腾讯、网易等厂商纷纷推出 ChatBI 智能问数工具,但大量企业落地后普遍陷入 “能对话、不敢采信” 的困境。深耕 B 端数据可视化与智能交互设计的兰亭妙微,结合上百套政企 BI 系统落地经验,从 UX 设计视角拆解行业共性痛点:企业数据口径杂乱、指标命名不统一、多表关联歧义繁多,用户使用自然语言查询时极易出现数据偏差、AI 幻觉,长期持续的结果不稳定会不断消磨用户信任,最终让 AI 分析功能沦为闲置摆设。

AI 产品 UX 体验设计实战:兰亭妙微拆解智能产品指标优化设计技巧

涛涛

人工智能技术全面渗透政企、消费、工业等赛道,超九成头部企业持续加码 AI 数字化布局,智能工具、智能后台、AI 生成类产品成为市场主流。但大量 AI 产品存在技术能力强、用户体验薄弱的矛盾:复杂算法藏于黑盒,用户上手门槛高、长期留存偏低,技术优势无法转化为产品竞争力。兰亭妙微深耕 AI UX 设计多年,落地百余款智能系统项目,深刻意识到 UI/UX 是衔接 AI 技术与普通用户的核心桥梁,既能降低智能工具使用门槛,也能通过精细化设计拉动核心数据指标增长。本文结合团队实战经验,拆解 AI 产品体验设计三大核心要点,配套可落地的数据优化思路。

别再写小作文了!OpenAI 最新官方提示词指南

之晨

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

一、全文速览图

image.png

大家是不是越来越觉得写 Prompt 就像在做法?

每次写提示词,我们都恨不得写上一篇小作文,生怕它漏掉一丁点细节。结果跑出来的东西依然毫无灵气,甚至让人血压飙升。

这几天,OpenAI 发布了一份官方 Prompt 指南。

image.png

作者是 Eric Provencher,熟悉开发圈的朋友可能知道,这位大佬之前打造过口碑极佳的 RepoPrompt,如今在 OpenAI 专门负责 Codex 的开发者体验。

看完之后,我有种醍醐灌顶的感觉,咱们一直以来的焦虑,其实完全找错了方向。

官方给出的结论非常反直觉:AI 表现不好,还真就是因为咱们的提示词写得太长、管得太宽了。

二、提示词这样写!

在这份指南背后的内部测试里,OpenAI 发现,把一套原本冗长的提示词精简之后,不仅总 Token 消耗暴降了 41% 到 66%,成本直接砍半。

最离谱的是,模型跑出来的任务评分竟然还提升了 10% 到 15%,少说废话,AI 反而干得更漂亮。

image.png

回想一下我们以前是怎么写提示词的。

为了防范模型犯错,总在不断地给 AI 打补丁。

它啰嗦,我们就加上“必须绝对简洁”。

风格不对,我们又补上五条语气要求。

调用工具卡壳,我们就干脆把每一步的操作流程写在里面。

遇到模型升级,我们还习惯性地把旧模型时代的规则原封不动地继承过来。

时间一长,提示词就变成了互相打架的规则垃圾场。

当一段话里包含了几十个互相冲突的指令,别说是模型了,就算是个大活人看了也会当场宕机。

指南明确建议,千万别再像对待没经验的实习生那样,试图控制 AI 的所有操作。

提示词的真正价值,在于让 AI 清晰地看到你要交付的终点。

至于用什么姿势走到终点,请放手让它自己去搜集、比较和决定。

这份新指南抛弃了过去那些玄之又玄的咒语学,回归到一个朴素但杀伤力极强的原则:结果优先。

image.png

掌握这四个词,就足以应对绝大多数场景:Goal(目标)、Context(上下文)、Output(输出)、Boundaries(边界)。

第一是 Goal(目标)。你最终要拿到什么东西?比如“我要为一款冥想 App 做一个首页的改版方向”。

第二是 Context(上下文)。有哪些会影响它判断的硬核资料?把真实的用户访谈记录、品牌规范文档直接喂给它,这比你费尽口舌描述半天管用得多。

第三是 Boundaries(边界)。有什么事情是绝对不能碰的?直接划红线,比如“千万别动旧版的 Logo”。

第四是 Output(输出格式)。交稿的时候长什么样?告诉它“给我 3 套视觉方向,每一套都要带上情绪板和配套文案”。

假设你需要优化一个 App 首页的文案和信息架构。

过去我们可能会这么写:

“你是一位资深的用户体验专家和增长黑客,精通消费者心理学。请你严格遵守以下 10 条原则对这个页面进行分析。第一,所有标题必须充满吸引力;第二,所有按钮文案必须具备强烈的行动号召感;第三…第四…第五…第六……同时绝对不要出现拼写错误,请一步一步仔细分析并说明理由。”

在 GPT-5.6 眼里,这简直是一堆充满噪音的废话。

现在,我们可以换成官方推荐的精简版:

“Goal:基于附件里的 PRD 和当前页面的截图,重写首页的区块结构和文案,核心目标是提升新用户的注册转化率。

Context:以 PRD 中的功能描述为唯一事实来源,截图仅供布局参考。

Output:输出一个分区结构文档。每个区块包含:大标题、副标题、主要按钮文案。字数控制在 800 字以内。

Boundaries:必须使用 PRD 里明确提到的产品卖点,遇到缺失的卖点请在文档末尾提示我补充,不要自行虚构任何功能。”

只要把这四点交代清楚,这个提示词就已经很棒了。

image.png

三、放下完美提示词的执念

大家千万别有一个执念,总觉得第一条提示词必须完美无缺。

一旦 AI 没做好,马上暴躁地推翻重写。

现在优秀的提示词全是聊出来的。

image.png

很少有设计师能靠最初的一页 Brief 就产出定稿。大家都是先拉个大方向,看着草图一遍遍磨出来。

写提示词也一样,你完全可以补充新资料、改变关注点、甚至半路调整,根本不需要重新起一个对话从头再来。

这就像你和身边的设计搭档过方案,一步步打磨,出来的东西才会真正契合你的心思。

image.png

结合咱们设计师的日常,我发现大家写提示词最容易在3个地方踩坑。

1. 戒掉堆砌形容词的毛病。

“帮我设计一个高级、简约、有质感、年轻化、符合当下审美的网页。”

听起来很丰满,但 AI 根本不知道这是在说什么,它只能去互联网的海量数据里找个最平庸的平均值敷衍你。

换一种接地气的说法:“为一个面向 25 至 35 岁都市白领的高端香氛品牌,设计官网首屏。目标是让人一打开就有一种‘安静但有辨识度’的第一印象。排版去参考那种高视角的编辑感杂志,避开传统电商满屏促销的套路。最后给我 3 个差异明显的视觉方向。”
感受一下,第二种说法有明确的用户画像,有非常具体的参考方向。

官方也特别强调,从你需要的结果开始写,只补充那些真正会改变产出方向的细节。

2. 别再当保姆去规定具体步骤。

老派的写法喜欢手把手教 AI 做事:第一步去分析竞品,第二步去提炼关键词,第三步去做情绪板,第四步再输出配色方案。

但现在是 GPT-5.6 了,它比咱们想象的聪明得多。

过度规定步骤,是在压缩它自主推理的空间。

现在只需要把话撂下:“基于附件里的品牌资料,给我 3 个官网改版方案。必须重点解决‘品牌价值表达模糊’的问题,别单纯去追求视觉上的新鲜感。”

你定义什么是好方案,AI 跑腿填坑,就这么简单。

3. 能上图就坚决别废话。

语言在视觉面前常常是苍白的。

写五百字去描述一个“带点呼吸感的高级布局”,绝对比不上直接甩给它一张带有红框标注的竞品截图。

配合图片的提示词只需要一句话:“参考附件这张截图的排版节奏,保留这种大面积留白和左侧的窄栏导航。避开它的灰褐色配色。结合我们自己的品牌,给出一个首屏方案。”

一张带标注的图,胜过千言万语 。

image.png

以前咱们写提示词喜欢像防贼一样,试图堵住每一个可能出错的漏洞。

官方的建议现在更新了:挑出一两个真正致命的边界就行了。

比如“不要动现有的核心信息架构”,或者“涉及开发成本高的地方一定要标记出来”。
把这几根高压线拉好,AI 就能在安全区里尽情释放它的创造力。

转载自优设网

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

 

image.png

对话框不是万能的,AI产品的交互尽头在哪里?

清阳

兰亭妙微UI设计公司分享:很多产品经理认为,给产品塞进一个对话框就是“AI 化”了。但在 AI Center 的实践中,我们发现 LUI(对话交互)往往是产品设计的“懒惰表现”。

真正的 AI 原生交互,应该是让界面消失,让用户意图透明。

本人经过多年研究 AI 产品的交互,结合近期看到一篇 CHI 2026 最佳论文提名,推荐给做 AI 产品的小伙伴。

微软亚洲研究院 + 港科大提了个 IAI(Interaction-Augmented Instruction)模型。

核心一句话:AI 时代的交互不该只有“写 prompt”,而是“prompt + 各种交互形态”的混合体。

其实他们就做了三件事:

1、把 AI 时代的人机对话方式拆成了 6 个实体:人、文字、交互、增强指令(Aug)、AI、产物。

他们最关键的创新是把“增强指令 Aug”独立出来,作为 AI 真正消费的东西。

2、分析了 66 个 AI 工具,归纳出 12 种原子交互范式:点击改 prompt、画草图作指令、AI 给你做滑块挂在结果上随便调……每种都有对应的信息流图。

3、用模型推导出全新范式:比如“AI 主动发起 + 情境感知”(走进食堂,AR 眼镜直接问你吃肉还是菜并给个滑块)。

简单总结就是:专家技能正在从“Prompt Engineering”转向“Instruction Design”。前者是教用户写作文,后者是设计“工具+情境+控件”,让用户哪怕只点几下,也能合成出比 prompt 更精准的指令。

链接:https://www.microsoft.com/en-us/research/publication/interaction-augmented-instruction-modeling-the-synergy-of-prompts-and-interactions-in-human-genai-collaboration/

一、困局:被“对话框”绑架的 AI 产品

打开现在的 AI 应用,映入眼帘的几乎全是类似微信的聊天界面。

这种 LUI(Language User Interface)确实降低了开发门槛,但对用户来说,它存在两个致命的痛点:

1、“空白页恐惧症”:用户面对闪烁的光标,往往不知道该问什么。

2、高认知负荷:输入文字(或组织语言)本身就是一种高成本的体力与脑力活。

对话框只是 AI 交互的婴儿期。如果一个操作点击两次就能完成,强迫用户输入一句话就是设计的倒退。

二、 逻辑重构:从“功能搜索”到“意图识别”

传统 GUI(图形界面)的逻辑是:用户寻找功能。你想听歌,要先找音乐 App,再找搜索框,再打字。

AI 时代 UX 的底层逻辑是:系统识别意图

1. 意图识别(Intent Recognition)

未来的交互不再是等用户下指令,而是通过环境上下文(Context)捕捉意图。

案例:在智能座舱中,你视线看向窗外某个地标并问“那是什么?”,系统结合视线追踪(眼动)和高精地图,直接给出答案。这里没有复杂的菜单,只有自然发生的意图捕捉。

2. 生成式 UI(Generative UI)

这是目前最前沿的方向。界面不再是预设好的死板组件,而是根据 AI 预测的意图实时生成的。

如果你在聊出差行程,界面自动弹出的不是聊天文字,而是一个包含航班、酒店和天气对比的定制化表格。

三、进阶设计:主动交付(Anticipatory UX)

最好的交互是“不交互”。这就是我们正在卷的 “主动交付” 逻辑。

  • 从“拉”到“推”:传统交互是用户“拉取”信息(Pull);下一代交互是 AI “推送”结果(Push)。
  • 场景编排:AI 应该预判你的下一步。例如,当你设定了一个 8 点的会议,AI 发现路况拥堵,它不应只在 8 点提醒你开会,而应在 7 点提示你提前出门,并自动帮你启动车辆预热。

PM 的实战准则:判断一个 AI UX 好不好的标准,是看它减少了用户多少次不必要的决策。

四、给 AI 产品经理的 3 条交互避坑指南

1. 保留“逃生舱”:无论 AI 多么智能,其意图识别永远存在概率性的错误。界面上必须永远有一个显眼的、确定性的“手动干预”按钮,防止 AI 陷入逻辑闭环。

2. 拒绝“黑盒式”等待:AI 处理复杂任务需要时间。不要只给一个 Loading 转圈,要通过交互展现 AI 的“思考过程”(如逐步显示推理步骤),这能极大地缓解用户的焦虑感。

3. 不要为了 AI 而 AI:传统的进度条、开关掣、单选框,在特定场景下依然比对话更高效。顶级 PM 的功力,在于知道何时该给用户一个对话框,何时该给用户一个简单的物理按钮。

总结:交互的终局是“透明”

在大模型时代,我们对 UI 的理解正在经历一场从“人适应机器”“机器适应人”的革命。

下一代 AI 产品的竞争,不在于谁的对话框更好看,而在于谁能让用户感知不到界面的存在,却能精准地交付结果。

从 LUI 走向 Intent-Centric(以意图为中心),这才是产品经理和研发人员真正该卷的战场。

 

 

 

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微设计深度解读:微软 Office 新版图标,不止是视觉焕新

涛涛

作为深耕界面视觉与品牌图标体系的设计团队,兰亭妙微持续关注全球大厂设计迭代思路。继 2018 年扁平化图标体系后,微软时隔多年全面更新 Word、Excel、PPT 等 Office 核心图标,柔和流线造型与鲜活渐变配色成为最大亮点。这场看似简单的颜值升级,实则藏着 AI 时代办公产品的设计底层逻辑,也为行业图标设计提供全新参考思路。

新手 UI 入门|iOS26 系统控件完整解读|兰亭妙微设计分享

涛涛

作为深耕 UI/UX 设计十六年的专业团队,兰亭妙微(蓝蓝设计)在日常项目对接中发现,大量新人设计师对移动端系统控件概念模糊,绘制界面时常出现规范错误。UI 控件是界面交互的基础单元,不同产品视觉风格虽有差异,但控件基础类型、交互逻辑具备统一标准。本文结合最新 iOS26 设计规范,梳理全套系统级控件分类与使用规则,帮助设计从业者快速建立标准化组件认知。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档