首页

AI产品用户暴涨之后,产品经理该看哪些指标?

之晨 行业趋势

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

一、全文速览图

image.png

QuestMobile 的数据显示,国内 AI 原生 App 月活已经到 4.99 亿,同比涨了 85.4%。

支付宝「碰一下」的用户规模过了 4 亿,千问的月活涨幅接近 58 倍。

这些数字这半年被反复引用,几乎成了「AI 产品在爆发」的标准论据。

这类报道通常只披露一件事,规模涨了多少。使用时长、复访比例、有没有留存下来,这些同样能拿到的数据,很少被放进同一篇报道里,也很少被追问。

但很少有报道会往下多问一句,这些涨起来的用户,有多少留下来了,有多少只是来试了一次就走。用户规模和用户是不是被真正留住,是两件事,前一件被讲了太多次,后一件几乎没人认真拆过。

这半年被反复引用的规模数字,也让「要不要跟进做一个 AI 功能」这类决策,变得比以前更容易被数字本身带偏。

二、传统指标体系失灵的地方

产品经理判断一个产品好不好,习惯性地看一条链路,获客、转化、留存。

这条链路背后有个默认假设,用户只要进来了、用起来了,价值就会自然沉淀,剩下的事交给时间。

这套假设在传统互联网产品上大体成立。做一个能用的产品需要门槛,门槛本身筛掉了一批凑热闹的用户,留下来的大多是真有需求的人。

AI 产品把这套逻辑打乱了。

调一个大模型 API,套一个现成的 RAG 框架,几天就能拼出一个看起来很能打的 Demo。门槛被拉到了历史最低,注册转化率、首页访问这些前端数字,因此也变得很容易做得好看。

举个例子,一个做 AI 写作工具的团队,两周就能上线一个输入主题就能生成一篇公众号文章的功能。用户点一下几乎零成本,注册转化率做得很漂亮并不难。真正难的是,用户拿到生成结果之后,愿不愿意把这篇文章真的发出去,这一步在老地图上是找不到的。

这套低门槛甚至体现在产品经理自己的判断习惯上。过去评估一个新功能值不值得做,往往先看它能不能带来注册量和访问量的短期上涨。AI 功能几乎都能满足这个标准,因为新鲜感本身就会带来一波点击,这也是为什么很多团队会在错误的方向上,做出一个看起来很成功的判断。

问题出在更深的地方。用户进来了,产品是不是真的把事情办成了,这件事和用户进来了完全是两回事。

传统产品里,进来和办成之间的距离很短。AI 产品里,这段距离被拉长了,而且大部分产品经理还在用老地图找这段新路。

这就是为什么同一套仪表盘,同一批产品经理,会在 AI 产品上判断失误。不是数据造假,是看的地方错了。

image.png

三、权重重新排序

看的地方错在哪,QuestMobile 的另一组数据说得比较清楚。

AI 原生应用用户的月均使用次数是 92.7 次,同类预装应用只有 51.4 次,接近两倍的差距。

豆包、DeepSeek、Kimi 三家,单次使用超过 10 分钟的重度用户占比都在 26%到 30%之间,而且这个比例还在往上涨。

这组数据指向同一件事,入口流量在 AI 产品里正在退位,使用深度顶了上来。使用深度不是一个笼统的说法,拆开看至少是三件事,用户来得勤不勤(使用频次)、每次待得久不久(单次时长)、一次任务有没有走完(任务完整度)。

这三个维度也不是随便拆的。使用频次要看的是一个固定周期内(比如 7 天或 30 天)用户主动打开产品的次数,不是被推送唤醒的次数。单次时长要排除挂机、开着不操作这类噪音,只算真正产生交互的时间。任务完整度要求先给「一次任务」下一个清晰的定义,一次面试、一次报告、一次生成,都算作一次完整任务,半途退出的不算。这三个维度定义不清楚,后面所有的判断都会跟着走偏。

传统产品看的是有多少人打开了 App。AI 产品要看的是打开之后,用户有没有真的把一次任务完整地做完,做完了愿不愿意再来一次。

北极星指标这个概念,本来就是用来提醒产品经理别盯着虚荣指标的。但现实是,很多团队在 AI 产品上依然把北极星定在注册量或者 DAU 这类入口指标上,等于用旧地图找新路的同一个错误又犯了一遍。

这背后还有一层现实原因。增长团队的考核指标、投资人熟悉的汇报框架,很多时候还是围着注册量和 DAU 转,这两个指标改起来最快,也最容易在一页 PPT 里讲出一个漂亮的故事。使用深度这类指标需要更长的观察窗口,也更难被一眼看懂,团队天然有动力去优化那个更容易被看见、也更容易被误读的数字。

市面上不少「套壳」AI 应用就是这么起来的,借一波热点把注册量做得很好看,用户进来点两下就再没回来,团队却还在为注册曲线开庆功会。

反过来看,一款真正解决问题的 AI 工具,早期注册量涨得可能没那么快,因为它依赖的是用户遇到具体问题时的搜索和推荐,不是一次性的流量爆发。但一旦有人开始用,复访和深度使用会持续爬升,这条曲线不好看,却更值钱。

我自己在做一款 AI 面试产品,叫 Lollipop。它后台的北极星指标定的不是注册量,是面试完成率,就是用户有没有走完一整轮模拟面试、拿到报告。

最近一个周期,首页访问、新增注册、开始面试这几个前端数字全都在大幅下滑,跌幅都在四成到七成之间。只看这几个数字,很容易得出产品在快速失血的结论。

但面试完成率这个北极星指标,同一个周期反而是往上走的。前端数字砸下去了,真正衡量产品有没有把事办成的指标却在变好,这组反差比任何单一数字都更能说明,入口流量不该排在第一位。

选面试完成率做北极星,也是因为这类产品的一次任务相对好定义。一场模拟面试有明确的起点和终点,用户走完全程、拿到一份报告,就算完整地体验了一次产品的核心价值。不是所有 AI 产品都有这么清晰的任务边界,判断使用深度之前,先想清楚自己的产品里,一次完整任务到底指的是什么,是能不能套用这套框架的前提。

image.png

image.png

四、转化率超 100%,未必是好事

权重排对了,接下来是怎么防止被数字骗。

第一个常见陷阱,是漏斗里某个环节的转化率超过了 100%,人数不减反增。

这种情况通常有三个来源。

统计口径没对齐,上一步按自然日去重统计新增用户,这一步却按一个更长的活跃窗口统计所有触发过这个动作的账号,两边的分母来自不同的时间尺度,下一步的人数比上一步多,是算法层面的必然,不是产品层面的奇迹。

采集标准不一致,前端埋点和后端日志各算各的,同一个动作在两套系统里可能被记成不同的数字,尤其是涉及 App、小程序、网页多端的产品,这种错位更常见。

用户行为本身有跳跃,用户离开又回来重新走了一遍这个环节,系统把这当成了两次独立事件,凭空多算了一次。这在允许用户中途退出再进入的 AI 产品里尤其常见,因为一次任务本身可能拆成好几轮交互。
遇到这种数字,正确的排查顺序是这样的。

先确认两个环节的统计窗口是不是完全对齐,再看这批用户里有没有掺进本不该算的老用户或回流用户,最后确认埋点逻辑会不会把同一个人的多次动作,算成了多次新增。三步查完,大概率能找到问题出在哪一环。

更具体一点,多数 BI 工具或者后台数据库里,可以直接把两个环节的用户 ID 拉出来做交叉比对,看下一环节里有多少用户 ID 没有出现在上一环节的名单里。如果这个数字不是零,说明确实有凭空出现的用户,顺着这批用户的行为记录往回查,通常能直接定位到问题出在统计口径、埋点还是回流。

这三步排查,靠翻埋点文档和拉后台原始数据就能做,不需要额外的工具。需要的是遇到反常数字时,先怀疑统计本身,再相信这是个好消息的习惯。

Lollipop 的后台就出现过更夸张的情况,注册转化的一个子环节里,「成功注册」的人数是「进入注册页」的十倍还多,转化率算出来超过了 1000%。

image.png

查下来是两个环节的统计时间窗口没对齐,「进入注册页」只挑了当日严格路径进来的用户,「成功注册」却把更宽时间窗口里所有完成注册的账号都算了进去,两边的分母压根不是同一批人。这类异常如果不查,很容易被当成一个值得庆祝的好消息,写进周报里。

五、功能上线不等于被采纳

第二个陷阱更隐蔽,一个 AI 功能上线了,不代表用户真的在用它。

微软自己披露的数据是一个很有分量的参照。

Microsoft 365 Copilot 上线三年后,付费企业里的实际采纳率不到 4.5%,每周还在用的用户比例只有 1%。

财富 500 强企业里七成拿到了 license,但每周真正被使用的付费席位只有两到三成。

一个全球最大的企业软件公司,尚且交出这样的采纳数据。说明这不是某个小团队的执行问题,是 AI 功能从上线到被真正采纳,中间天然有一道很宽的沟。

这道沟通常来自三个原因。

用户不信任 AI 给出的结果,宁可自己重做一遍,尤其是涉及需要担责的场景,比如财务数字、合同条款,用户会本能地想再核对一遍,AI 帮着做的这一步,等于白做。

功能藏得太深,不在用户原有的操作路径上。一个 AI 摘要功能如果放在三级菜单里,大多数用户根本不知道它存在,更不会主动去找。

功能确实存在,但比用户熟悉的手动方式并没有明显更好,缺乏切换的理由。如果 AI 自动填表的出错率比用户自己手动填还高,用户试过一次就会放弃,回到熟悉的老办法。

判断一个 AI 功能有没有真被采纳,可以拆成两层来算。第一层是尝试率,能接触到这个功能的用户里,有多大比例点开用过至少一次。第二层是复用率,用过一次的人里,有多少比例会用第二次、第三次。

尝试率高、复用率低,说明用户对这个功能有好奇心,但没有形成依赖,这正是大多数 AI 功能卡住的地方。用过一次约等于好奇,用过不止一次才约等于这个功能真的解决了问题。

微软的数据也印证了这一点。超过 1 亿月度 Copilot 用户,说明尝试的门槛已经很低,财富 500 强七成拿到 license,说明分发也做到位了,真正卡住的,是复用这一层。

我们 Lollipop 的简历漏斗里也有类似情况。用户确定简历之后,走到「Agent 对话」这一步的转化率只有个位数。功能是上线了的,但绝大多数用户走到这一步就停住了,没有再往前一步。

image.png

六、留存曲线才是终局判据

前两个陷阱都还只是排查具体数字,第三个陷阱要看的是一整条曲线,留存曲线的形状。

a16z 在一份关于 AI 消费应用的报告里提到一个说法,很多 AI 应用早期都会经历一波「AI 游客」。这批用户被新鲜感或者一次刷屏式的传播吸引进来,用几次就走,本身对产品没有真实需求。

AI 游客通常是被两种力量带进来的。一种是免费试用或者限时活动,用户抱着反正不要钱的心态点进来看一眼;另一种是社交媒体上的一次刷屏式安利,用户被大家都在讨论这件事本身吸引,而不是被产品要解决的问题吸引。这两类用户对产品本身没有真实需求,留存曲线注定要往下掉。

真正的分水岭在第三个月前后。如果留存曲线过了这个点还在持续往下掉,说明用户最初的新鲜感没有转化成长期愿意用的理由。具体到怎么看这条曲线的形状,可以连续观察三个月的环比降幅,如果降幅一个月比一个月收窄,说明曲线在走平,用户群体逐渐稳定下来;如果降幅稳定甚至扩大,说明流失还在加速,这是曲线持续下探的信号。

报告里也提到一个有意思的反例,头部产品比如 ChatGPT 呈现出一种回升式的留存曲线,用户在中途流失后,会因为产品能力持续提升、能处理的场景变多,重新回来使用。

回升式曲线不是靠运气出现的。头部产品做对的事情,通常是持续扩展产品能处理的场景,让一个因为某个具体需求流失的用户,后来因为另一个新场景被解决,重新想起这个产品,再加上恰当的触达(比如提醒、周报这类唤回机制),才能把回升曲线做出来。

看留存,不能只看前几天的数字,要看到第三个月这个节点之后曲线是往下探、走平,还是回升。前几天留存好看,只能说明第一次体验没让人失望,不能说明产品被真正需要。

Lollipop 的 30 日留存数字趋近于零,首页访问的流量并不小。

image.png

入口流量还在,但30天之后几乎查不到人回来,这组对比比任何一条好看的增长曲线都更能说明问题。

image.png

image.png

前面这三个陷阱,说的都是老指标怎么骗人。有一个容易被忽略的地方是,使用深度、功能采纳率这类新指标,同样可以被做出虚假的好看。

刷时长、机器人循环调用、把一个简单任务硬拆成好几轮交互凑次数,都能在不产生真实价值的情况下,把这几个新指标堆上去。看使用深度、看功能采纳率、看留存曲线,解决的是入口指标不够用的问题,不是给了一张可以不用再怀疑的新地图。遇到反常的深度数据,同样要用前面几节的排查方法再过一遍。

七、一份可复用的判断清单

把前面几节收拢成一份清单。

先看使用深度,用户打开之后有没有走完一次完整任务,来得勤不勤,待得久不久。

再看功能采纳率,新功能有没有被反复使用,不是浅尝辄止用一次就再没打开过。

最后看长期留存曲线的形状,第三个月之后是探底、走平,还是回升,不要只盯着首周数字。

入口流量、首日转化率这类老指标不是不看,是不能再排在最前面。

如果这三项同时不达标,修复的优先级也有讲究。

先修留存,留存趋近于零,说明产品可能根本没有解决用户的真实问题,这时候去优化功能采纳率或者入口转化率,投入产出比很低,方向可能就错了。

再修功能采纳率,留存还过得去,但某个 AI 功能没人用,通常是设计或者信任问题,不是产品根本没用,值得针对性优化。

最后才轮到入口转化率,这一层最容易优化,也最容易带来虚假的安全感,前两层没达标之前,把力气花在这里性价比最低。

这套优先级说起来容易,落地时最大的阻力往往不是数据本身,是团队内部的认知。如果汇报框架、老板的直觉判断都还锚定在注册量和 DAU 上,突然把留存曲线摆到第一位,很容易被当成在唱反调。更现实的做法,是把这几个新指标和老指标并排放进同一张报表里,让入口流量继续涨,同时用具体数字展示留存和采纳率的差距,用事实说话,比正面辩论更容易推动认知转变。

拿这份清单去看一个陌生的 AI 产品,可以这样用。

先找它公开披露过的使用时长或使用频次,没有的话看应用商店评论里有没有人提到「用了一次就没再打开」这类反馈。

再看它有没有单独披露过某个核心功能的复用数据,一次性使用和反复使用是两回事。

最后如果能查到第三方的留存报告,重点看第三个月前后的曲线走向,而不是首周数字。

举个具体的应用场景。假设在看一款新出的 AI 笔记应用,官方通稿里只写了用户破千万。这时候先翻一下应用商店评论区,如果高频出现用了一次觉得挺新奇、后来就没再打开这类留言,基本可以判断留存是个问题。如果通稿里进一步披露了周活跃或者人均使用时长,可以拿来和同类产品做个粗略对比,时长明显偏短,说明用户可能只是把它当成一次性的新鲜工具,没有形成使用习惯。

三步做完,基本能判断出这个产品的增长,有多少是真的。

image.png

八、结尾

增长曲线好看,这件事本身不需要否定。

真正决定一个 AI 产品能走多远的,是曲线背后那些不那么好看、但更接近真实的数字,有多少人真的把一次任务办成了,办成之后,愿不愿意再来一次。

这三层判断标准不需要复杂的工具,大多数时候翻一下后台数据、看一眼应用商店评论,就能做完第一轮判断。

 

转载自优设网

 

 

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

 

image.png

Figma 在 AI 时代起落沉浮,让它们看清了关于未来的 3 个趋势

之晨 行业趋势

 

 

 

 

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

软件开发与数字设计领域,眼下正在经历着一场深刻的重构。这场重构由 AI 和各大厂商的大模型所驱动,而 Figma 正好处于这个风暴中心,从 2024 年到现在,它正在经历一场彻底的颠覆,从一个云端协作设计工具,蜕变为「产品创建操作系统」。

全文速览

image.png

转型的起点,源于 2023 年 12 月的监管干预。在英国 CMA 和欧盟委员会的重压之下,Adobe 斥资 200 亿美元收购 Figma 的世纪并购案宣告终止。凭借 10 亿美元的天价解约金,Figma CEO Dylan Field 开启了激进的技术与人才扩张。在这期间,Figma 员工人数翻倍,突破了 1500 人。同时,Figma 连续收购了 Diagram、Weavy、Modyfi 以及无头内容管理系统(Headless CMS)Payload 等关键初创企业 ,为接下来的 AI 战争做好储备。

Dylan 这一系列战略布局在 2025 年 7 月 31 日迎来了高潮。Figma 在纽交所成功敲钟上市(IPO,股票代码:FIG),发行价 33 美元,估值高达 150 亿美元 。Figma 交出的 2025 年答卷堪称惊艳:营业收入达 10.6 亿美元,同比增长 41%。

但是在 AI 加速的世界里,变革都是按月算的。尽管营收大涨,Figma 在 2025 年的净亏损却也显著扩大至 1.25 亿美元。进入 2026 年 4 月,市场格局再遭强烈冲击。Google 让对标 Figma 的 AI 设计工具 Google Stitch 免费。这导致 Figma 股价在短短数日内连续暴跌。目前,其股价较 IPO 后的最高点(142.92 美元)已狂泻近 80%。

image.png

在这个伴随高速扩张、生态重塑与突发危机的动荡期,Figma 的核心管理层、内部开发者、一线设计师及庞大的社区生态纷纷发声。针对 AI 如何重塑设计流程、设计方法及产业未来,他们提出了大量极具颠覆性与前瞻性的见解。本报告系统梳理了 2024 年至 2026 年间 Figma 生态内部的言论、产品发布、工程博客及行业数据。我们将深入解析 AI 时代设计工作流的底层逻辑演变,并全面提炼 Figma 团队对整个设计产业未来的终极预测。

一、「软件大清算」与 AI 时代的设计哲学重构

面对 AI 浪潮,Figma 领导层并未采取传统的防御姿态。相反,他们主动拥抱破坏性创新,并从哲学与战略高度,重新定义了设计在现代软件工程生命周期中的核心坐标。

1.1、Dylan Field 的「软件大清算」

2026 年 2 月 17 日,Figma 首席执行官 Dylan Field 接受了 CNBC 专访。他在采访中抛出了一个震动行业的核心概念:「软件大清算」 。他指出,随着 Claude Code、Cursor 等智能体编程工具(Agentic Coding Tools)日益成熟,软件开发的门槛正经历断崖式下跌。过去将想法转化为代码需要耗费昂贵的开发资源,如今寥寥几句自然语言提示词,就能生成生产级别的 APP。

在这种高度自动化的语境下,业内普遍弥漫着「设计师即将消亡」的恐慌。但 Field 的论断却截然相反:

「当任何人都能轻易构建软件时,软件的执行和代码本身将彻底商品化;而深思熟虑的设计以及对人类真实需求的理解,将成为区分伟大产品与平庸数字垃圾的唯一护城河。」

他将生成式 AI 定位为设计师的「副驾驶」,专门用来处理调整组件大小、填充原型数据等枯燥的「设计苦差事」。

Field 极度强调「品味」和「文化同理心」不可替代。他以 2024 年风靡全球的「Brat summer」文化现象为例,犀利地指出:

「即使是再强大的超级人工智能(ASI),也无法凭空设计出与当下微妙流行文化、隐喻产生共鸣的视觉产品,因为 AI 缺乏在人类社会中生存的『灵魂』与文化感知力。」

2026 年 1 月,他在一次公开演讲中将这一哲学量化:

「在未来,一个事物完全由 AI 生成的概率,将与其预期的生命周期成反比。」

简言之,用完即废的瞬时产物交由 AI 处理,而具备长久生命力的核心产品系统,将永远离不开人类设计师的打磨。

1.2、设计权力的去中心化与「产品感」的崛起

Figma 产品副总裁 Sho Kuwamoto 从组织架构的角度,剖析了 AI 的深远影响。Kuwamoto 断言:

「孤立设计师的时代已经结束,设计正在跨越专业壁垒,成为每个人的业务。」

AI 工具打破了职能孤岛。如今,产品经理、营销人员甚至后端开发者,都能利用 AI 工具进行早期的视觉探索。

image.png

在这场权力去中心化的变革中,Kuwamoto 认为设计师的战略价值发生了转移:从「把东西做对」(偏重执行),转向了「做正确的东西」(偏重战略方向的把控) 。他特别强调要培养「产品感」。这是一种根植于深刻理解用户痛点、从而解决问题的能力 。在 Figma 内部,团队通过高强度的「吃狗粮」(Dogfooding,即重度使用自家开发的产品)来不断磨砺产品感。这确保了他们在极高速度的 AI 迭代中,依然能与用户保持共情 。

1.3、AI 动态博弈:「抬高设计天花板」与「降低设计门槛」

image.png

Figma 设计副总裁 Noah Levin 将 AI 对设计行业的冲击,提炼为一个双向动态模型。他认为,AI 同时在「抬高天花板」和「降低门槛」 。

抬高天花板与「更好的设计」:AI 打破了传统工具在复杂计算上的桎梏。这使得顶尖专业设计师能够放手探索以往因成本过高而望而却步的复杂系统与动态交互 。

降低门槛与「脆弱的设计」:AI 让未经严格训练的普通人也能迅速生成 UI 。然而,业界资深专家 Buzz Usborne 结合最新的交互研究发出了警告:「完全依赖自然语言生成界面,往往会导致脆弱的设计。」 绝大多数普通用户并不具备高超的「提示词能力」以及掌控力。

image.png

这也意味着未来的设计工具必须做出改变,不能再仅仅提供一个空白的输入框,而是要转向提供结构化的语境建议和约束条件。

二、 工作流的彻底颠覆:「从画布到代码」再到「代码即画布」

2024 至 2026 年间,Figma 最大的技术突破在于彻底终结了陈旧的「线性设计交付」模式。过去,设计师在画板上绘制静态的 UI 界面,然后丢给前端开发。这个过程往往伴随着设计语境的丢失和妥协。而现在,以 MCP 协议为核心的双向工作流彻底颠覆了这一切。

2.1、MCP 引发的设计变革

在 Schema 2025 大会上,Figma 宣布其 MCP 服务器正式全面可用,Figma 将内部复杂的画布结构彻底开放。这包括组件库、设计令牌(Design Tokens)、变量层级,甚至是自动布局逻辑,这些结构被全部暴露给 Claude Code、Cursor 等智能体编程平台。

image.png

这意味着,当用户向 AI 下达开发指令时,AI 不再基于互联网数据胡乱猜测。相反,它会严格遵守企业的专属设计规范来输出代码。业界资深人士 Tommy Geoco 对此给出了极高评价,称这种结合了 Figma MCP 与 Claude Code 的底层基建,是目前「唯一能在生产环境中使用的 AI 工作流」 。

image.png

当然,2026 年此刻,Figma 早就不是唯一的选择了。

2.2、「Code to Canvas」:AI 设计开发闭环确定

image.png

2026 年 2 月 17 日,Figma 与 Anthropic 强强联手,发布了震撼行业的「Code to Canvas」(代码到画布)功能。这补齐了设计与开发闭环的最后一块拼图 。它的核心操作流程如下:

1. AI 辅助构建:开发者利用 Claude Code 结合 MCP,快速生成前端 UI 代码,并在浏览器中运行验证 。

2. 状态捕捉:只需在 Claude Code 终端输入「Send this to Figma」指令,工具便会直接抓取浏览器中运行的真实 DOM 状态,并将其自动转换为 Figma JSON 结构。

3. 画布重构:被捕获的 UI 会瞬间在画布上重构。值得注意的是,这绝不是一张屏幕截图,而是一个真实的设计框架,包含可自由编辑的文本、独立分离的按钮图层,以及完整的 Auto Layout 响应式约束。

4. 视觉探索与决策:设计团队无需触碰任何代码,就能直接在这些由代码逆向生成的真实界面上进行批注,并对比各种极端状态。

image.png

这种全新的「状态评审」(State Review)的工作方式,将会彻底取代了传统的「设计评审」。值得注意的是,根据 2026 年初的独立测试数据显示,AI 从设计图到代码的「还原度」目前普遍徘徊在 65% 到 80% 之间 。这也印证了业内的精准评价:

「代码负责收敛逻辑,画布负责发散探索。在生成 UI 变得轻而易举的世界里,核心工作已经发生了转移——我们需要在无限的可能性空间中,去决定究竟应该交付哪一个版本。」

三、 Figma 的进化与 AI 的重构

在继续审视 Figma 未来发展之前,我们先审视一下最近2年 Figma 的变化,从 Config 2024 到 Config 2025,Figma 的产品矩阵经历了大幅度的延展和重构:

Figma Make:这是搭载了 Claude 3.7 Sonnet 模型的「提示词到APP」的 AI 生成引擎。你可以用自然语言下达指令(例如「让XX元素响应滚动」),为静态框架注入动态交互。更强大的是,它能完美保留原文件的组件层级和元数据 。

Figma Sites:这是一个全栈式无代码可视化建站平台 。它引入了 CSS 级的网格系统。配合收购的 Payload CMS,实现了前端响应式 UI 与后端数据集合的无缝对接,彻底打破了设计与最终发布之间的壁垒 。

Figma Buzz:这是一个面向营销和销售团队的大规模内容共创平台。通过集成 OpenAI 的 gpt-image-1 和 Gemini 模型,支持从电子表格 批量导入数据,并自动生成多尺寸广告图。这标志着 Figma 正式向非设计岗位的企业级用户进行渗透 。

Figma Draw:这是一个内嵌的专业级矢量插画工具集。它引入了动态笔刷、可变宽度路径以及拟真噪点纹理,让插画师们彻底告别来回切换 Adobe Illustrator 的繁琐操作。

image.png

3.1、争议与反思:Apple Weather App 事件

2024 年 7 月,Figma 发布了早期的「Make Designs」 AI 工具。由于引入了未经严格人工审查的第三方组件库,当用户输入「天气应用」时,系统直接生成了一个与苹果 iOS 原生天气应用近乎一模一样的界面 。此事件瞬间引爆了关于 AI 抄袭和数据伦理的巨大风暴 。

image.png

CEO Dylan Field 亲自出面澄清,强调模型并未在用户的私有文件上进行训练,并果断将该功能下线回炉重造 。这一惨痛的教训让 Figma 深刻意识到:泛用型的 AI 生成工具暗藏巨大的法律风险。AI 必须与企业自身的设计系统进行深度绑定。

3.2、Schema 2025:迈向「智能体设计系统」

在 2025 年的 Schema 设计系统大会上,Figma 的核心议题迎来了全面升维:重点探讨「如何为人工智能构建基础设施」 。会上,Figma 正式宣布了「智能体设计系统」的一系列底层基建更新:

  • 扩展集合 (Extended Collections):允许架构师发布白标基础版本。子品牌则能在其基础上自由扩展自定义变量,同时还能自动接收来自母系统的底层更新 。
  • 插槽原生支持 (Native Slots):设计师可以在组件内部精准定义「插槽」区域,并严格约束允许放置的实例类型。这大幅提升了组件库的模块化程度,同时保障了 AI 生成内容的合规性 。
  • 检查设计 (Check Designs Linter):该功能利用机器学习智能扫描画布元素。它能自动识别硬编码的色值,并建议替换为相匹配的变量 (Token) 。

3.3、系统哲学与问责制的变化

在这次大会当中,系统设计专家 Cristian Morales Achiardi 分享过一个发人深省的案例。

他敏锐地察觉到警告色的对比度存在异常这件事情。在传统流程中,这往往会导致部门间互相推诿,或是开发者干脆写死色值。但在智能体生态中,开发者调用了「Token 审计智能体」(Token-auditor skill)来排查链路。最终,系统精准追溯到了源头:正是 Cristian 本人在底层定义的原始色阶出了错 。

Cristian 为此感慨道:

「开发者对系统产生了绝对信任。当错误发生时,环境机制能够精确追溯到决策层。」

在这套体系中,设计系统架构师扮演了「法律制定者」的角色。正如一位负责人发出的严重警告:

「如果开发者利用 AI 将产出效率提升了 3 到 4 倍,而你只是盲目增加开发者,那么你扩张的根本不是产出,而是技术债务。因为设计决策、实施审查、质量保证这些外围支撑,必将成为致命的瓶颈。」

四、2026 年职场角色的残酷洗牌

2026 年初,Figma 发布了重量级的《State of the Designer 2026》报告。该报告对全球逾 900 名专业设计师进行了深度调研,勾勒出了一幅机遇与危机并存的产业图景。

4.1、效率的狂欢与创作危机

数据呈现出压倒性的拥抱姿态:72% 的设计师正在使用生成式 AI,其中 98% 的人增加了使用频率。

在拥抱 AI 的群体中,91% 认为工作质量得到了提升,89% 认为工作速度明显加快,80% 认为协作得到了增强 。

更关键的数据在于:积极使用 AI 的设计师,其工作满意度比拒绝使用 AI 的同行高出了 25%。反之,在 AI 使用量停滞的群体中,有 40% 的人觉得自己的工作变得更糟 。

image.png

然而,认知的巨大裂谷依然存在。当被问及「AI 是否实质性地改善了最终产品质量」时,68% 的开发人员表示肯定,但只有 40% 的设计师认同 。Figma 尖锐地指出了设计师「手艺危机」的存在:由于互联网上高达 81% 的主页存在低对比度等体验缺陷,依赖这些海量平庸数据训练出的 AI,在自动化生成中必然会延续这种系统性的偏差与缺陷 。

在这个充满不确定性的变革期,结构感成了定心丸:高达 91% 的设计师坦言,「清晰的目标和期望」能帮助他们更好地完成工作 。此外,87% 的设计师表示拥有「决策权」能够显著提升他们的表现。这证明了一个观点:

「精确的设计愿景,才是区分专业设计师与随便使用 Figma 的产品经理的关键。」

4.2、中产空心化与新角色的崛起

报告揭示了一个残酷的真相:目前 Figma 中 60% 的新文件是由非设计师创建的 。纯 UI 岗位的生存空间受到了严重挤压。行业内催生出了两种新型职业路径:

  • 设计工程师 (Design Engineer):他们将 50% 的时间投入在 Figma 中制定系统规范,另外 50% 的时间则使用 Claude Code / Cursor 构建和测试真实的 React 组件 。他们兼具前端框架认知与 API 评估能力,是跨越设计与开发鸿沟的坚实桥梁 。
  • AI 产品经理 (AI Product Manager):他们不再纠结于像素细节。其核心职责是将商业意图拆解为 AI 可执行的逻辑模块,并定义数据流向与交互规则 。

image.png

对此,Wert & Co. 首席执行官 Daniel Wert 警告各大企业:

「不要陷入寻找全能创始设计师(Founding Designer Unicorn)的陷阱,而应利用魔球理论(Moneyball approach)来建立多元化团队。」

他同时指出,大幅削减初级人才招聘,正在严重损害行业的长远建设 。

五、 Figma 团队对未来的三大宏观预测

预测1:对「设计产品」本身的预测——全领域覆盖的设计工具

设计工具将不再是一个绘图的画布,以 MCP 为代表的通信协议将成为底层标配,设计工具将全面演变为「双向连通的沙盒」,它既能向下直接生成生产级代码,更能向上解析和渲染实时运行的复杂代码架构 。平台将无缝集成战略规划、开发框架与下游 CMS,最终实现「全领域互联」的目标 。

预测2:对「设计产业」格局的预测——基于 Agent 的系统性治理

随着 2026 年 4 月 Google Stitch 走向免费,基础 UI 生成的边际成本已彻底归零。当绝大多数数字资产都由非技术人员通过提示词快速生成时,产业对「中介型」执行劳动的需求将彻底枯竭。设计组织的核心任务将发生不可逆转的转移,转向「质量控制与支撑层」。未来,企业需要构建严密的「智能体设计系统」,以类似于立法与司法机构的方式,来确保海量 AI 产物的合规性与品牌独特性 。

预测3:对「设计本身」的终极预测——品味成为护城河,「设计即代码」

「设计即代码」时代已全面降临。当你能在画布上直接渲染/编辑 React 代码的框架时,「设计」这一动作本身就是在进行系统架构决策。当技术手段变得无限充裕且极度廉价时,方向性决策就会变得最为昂贵。正如 Dylan Field 所言:

「AI 算法可以穷尽千万种视觉组合,但无法体会痛楚,也无法理解人类微妙的文化共鸣。」

因此,人类对卓越技艺的极致追求,以及在纷繁复杂中懂得取舍的高级「品味」,将成为永远无法被算法计算出的终极护城河。

 

转载自优设网

 

 

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

 

image.png

用了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

日历

链接

个人资料

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

存档