首页

兰亭妙微ui设计公司分享:巧用 AIGC 从零打造差异化电商品牌|大厂实战案例解析

清阳 行业趋势

前言

兰亭妙微ui设计公司分享:百度优选作为百度在 2023 年 5 月全新推出的电商业务,提出“百度优选,超会选”品牌主张,目标为广大消费者提供高效、精准、专业的消费决策参考。新品牌起步阶段,想要快速建立用户认知,设计团队借由大促营销、行业生态活动等关键事件持续输出品牌内容,层层夯实用户心智,逐步加深大众对百度优选的品牌印象。

一、新品牌基础体系搭建

LOGO 是品牌对外的一面镜子,承载品牌内核。本次设计围绕购物、亲和、优选三大核心关键词发散创意,提取购物袋、笑脸表情、代表 “优” 的字母 U&YOU、百度 “度” 首字母 D 作为视觉原型,传递轻松愉悦的购物体验感。

image.png

历经 5 轮迭代,产出 70 余套设计方案,最终确定整合 D 字母、笑脸、购物袋、U 元素的 LOGO 形态。品牌主色选用优选红,借暖色调的情绪感染力,调动消费者购物欲望,同时建立信任感。

image.png

配套完成整套品牌视觉规范:定制专属字体「百度综艺体」,输出横排、竖排多套 LOGO 组合版式,统一品牌视觉输出标准。后续依托 11.11、12.12、3.8、8.18 等核心电商大促,反复曝光品牌形象,持续强化用户认同感。

image.png

二、大促品牌心智的概念定位

image.png

伴随夜经济兴起,夜间消费需求持续释放。百度优选在 2023 双十一落地数字人直播 “日不落计划”,依靠 7×24 小时不间断数字人直播服务 C 端用户;搭配搜索端 AI 购物助手智能导购,为用户提供专业商品推荐,提升选购效率,催生全新消费业态。

image.png

基于 AI 驱动的新消费模式,设计团队确立四大心智建设方向:造场景‑节日化、造趋势‑智能化、造品质‑营销化、造记忆‑品牌化,为整个双十一大促视觉搭建顶层逻辑。

  1. 造场景:紧扣夜经济,烘托大促节日氛围感
  2. 造趋势:诠释全新消费模式,传递智能化消费感知
  3. 造品质:聚焦优质商品,用营销视角放大商品价值
  4. 造记忆:放大 IP 与品牌曝光,完成品牌化传播

三、落地:把品牌心智融入设计全链路

围绕四大心智方向提炼视觉关键词与设计元素,融合 3C 数码、食品酒水、服饰穿搭、美妆个护等主流品类,完成整套主视觉设计输出。

1. 主视觉设计理念

image.png

主视觉以 “夜生活” 为核心场景,还原电商 24 小时不间断经营的新业态。夜空礼花、环绕堆叠的商品渲染狂欢的大促氛围;数字人带货、智能推荐的视觉符号体现智能电商的行业新趋势;品牌 IP、超级符号反复露出加深用户记忆;高精度 3D 视觉表现,充分展示各品类商品,传递电商营销氛围感,本次双十一主题定为AI 购物狂欢节,狂欢日不落・24 小时嗨购不停

2. 品类会场:AIGC 解决业务痛点

image.png

双十一期间要上线九大品类会场,面临两大现实难题:

  • 活动频次高,物料需求量巨大,人力供给紧张;
  • 既要统一品牌调性,又要实现不同会场之间的视觉差异化。

image.png

 

AIGC 恰好成为破局关键。团队先从 LOGO 中拆解提炼出微笑曲线超级符号,把微笑服务的品牌内核植入视觉,强化品牌记忆点。

工作流升级为:超级符号 + AIGC 生成品类素材 + 人工二次创作,产出最终页面。对比传统纯人工设计,单活动页面设计效率得到显著提升,高效化解素材多、人力不足的困境。image.png

团队为九大品类会场规划五套差异化配色,在保证整体风格统一前提下,利用 AIGC 批量生成成套视觉物料。项目沉淀 80 + 可复用的品类设计组件,形成设计资产库,能够持续赋能后续运营活动,实现长期复用复利。

完成物料生产之后,将统一的主视觉风格完整覆盖搜索、商城、直播三大业务场域,落地 11 类营销玩法与全部重点资源位,保障全渠道活动视觉表达高度统一。

总结

百度优选通过多轮大促实践,持续输出品牌内容,不断扩大品牌曝光。未来,团队将继续围绕新一代智能电商平台的品牌定位持续迭代设计方案,进一步提升百度优选的用户感知与市场口碑。

 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:WWDC26 落幕,Apple 系统图标迎来迭代:36 款原生 App 图标深度解析 >

清阳 行业趋势

兰亭妙微ui设计公司分享:每年 WWDC 大会落幕,除了新功能与交互逻辑,系统 App 图标总是设计师群体最先捕捉到的变化点。图标虽只是方寸之间的视觉载体,却完整折射出整套系统的设计语言走向 —— 色彩倾向、玻璃质感强弱、边缘锐利度、图层层级,每一处细节,都在重塑用户对系统整体气质的感知。

随着 WWDC26 召开,iOS 27 与 macOS Golden Gate Beta 版本上线,共计 36 款苹果原生应用图标完成迭代。新版图标依旧延续Liquid Glass 液态玻璃设计体系,但在视觉表达上做出明显转向:色彩饱和度更高、画面对比更强;厚重的玻璃折射效果被削弱,整体趋向轻盈扁平;图标边缘轮廓更加利落,图层层级关系清晰分明,全平台视觉一致性进一步提升。

image.png

需要注意,当前仅为 Beta 测试版本,部分图标细节仍有调整空间,锐利边缘、弱化玻璃光晕等特征,既可能是苹果确定的设计方向,也属于测试阶段的过渡效果。下文将结合新旧版本对比,拆解各款 App 图标的具体改动。

核心设计四大变化

  1. 视觉表现更大胆:色彩更深,画面对比度显著增强;
  2. 质感趋向更轻盈:弱化厚重玻璃渲染,减少过度折射,整体更扁平;
  3. 细节刻画更清晰:图标边缘锐化,图层层级边界明确,识别度提升;
  4. 风格一致性增强:统一贴合 iOS、macOS 全新系统界面语言。

重点 App 图标改动详情

Mail(邮件)

image.png

图标内部文字缩写由 California 调整为 CA,原先粗重的轮廓线条优化为细线条,整体更干净利落。

Maps(地图)

image.png

定位底座与建筑元素改为玻璃透视材质,原本粗犷的白色轮廓线条做细化处理,符号精致度提升。

Photos(照片)

image.png

花瓣图案采用玻璃扭曲堆叠的视觉处理,去掉厚重的实感,整体视觉重量变得更加轻盈通透。

Camera(相机)

image.png

镜头反光效果重新绘制,渲染效果更强烈,不少网友调侃新版镜头看起来酷似滚筒洗衣机。

Reminders(提醒事项)

image.png

圆点配色进一步加深,移除内部投影效果,图标一体化、扁平化特征更加突出。

Podcasts(播客)

image.png

弱化朦胧模糊的玻璃高光,圆环结构边界变得干脆利落,从柔和半透明过渡为锐利干净的液态玻璃质感。

Settings(设置)

image.png

强化齿轮外轮廓,优化齿轮内外层级,机械结构的辨识度进一步提高。

Siri App

image.png

iOS27 中 Siri 获得独立 App 图标,抛弃旧版多彩渐变底色,采用白底搭配渐变金属环,视觉风格彻底革新。

Messages(信息)

image.png

气泡造型做简化处理,去除多余柔和渐变,图标与背景对比度更高,观感直接干净。

Phone(电话)

image.png

听筒符号高度简化,去掉多余过渡渐变,轮廓干净,内部冗余细节大幅删减。

Find My(查找)

image.png

放弃柔和朦胧的透明分层,改用色块分区设计,雷达环与中心定位点一眼即可识别。

Finder(访达,macOS)

image.png

人脸图标鼻子造型更加圆润,隐隐复刻早期 macOS 访达的经典设计气质。

App Store

image.png

蓝色底色加深,渐变效果减弱,图标通透度提升,整体质感更轻量化。

Books(书籍)

image.png

书页细节做删减,书本主体居中对齐,图标识别更加干脆,但丢失了旧版柔和的层次氛围感。

其他代表性应用

  • Chess 国际象棋:强化马棋子主体视觉,弱化棋盘元素,识别更直接,但空间立体感有所削弱;

    image.png

  • Passwords 密码:钥匙的实体细节减少,色彩填充更加扎实,从写实物件转向符号化表达;
  • Image Playgrounds 图像乐园:图标完成主题切换,从抽象 AI 创作符号,改为气泡包裹的风景画面,视觉重心由工具转向生成结果;
  • Time Machine 时间机器:时钟与箭头轮廓加重,视觉重心从圆盘载体转移到备份恢复符号本身;
  • iPhone Mirroring(iPhone 镜像):删除手机屏幕内部细节,聚焦两台设备交叠轮廓,镜像的概念表达更加抽象直白。

还有大量应用(时钟、音乐、天气、备忘录、Safari 浏览器、FaceTime 等)改动幅度较小,大多仅微调刻度、明暗层次、边缘过渡,保留原本核心造型。

写在最后

这套全新图标设计,留给我们两个值得思考的命题:一是在真实手机桌面场景下,新版图标能否拥有更高的辨识度;二是这套 Liquid Glass 迭代后的视觉语言,能不能在 iOS、macOS 等多系统之间,维持高度统一的表现。

从评论区反馈也能看到两极分化的评价:有用户认为玻璃质感不断轻量化是有趣的演进方向;也有不少用户觉得新版图标显得生硬,过度扁平化削弱拟物质感,部分旧版的温润氛围感不复存在。

究竟你更偏爱旧版温润厚重的玻璃质感,还是新版锐利、轻盈的设计风格?

 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:《AI 体验设计》第 3 部分:指导原则

清阳 行业趋势

兰亭妙微ui设计公司分享:AI 体验设计的边界正在被重塑,从亚马逊 Go 的无感支付到自动驾驶的责任博弈,传统的交互逻辑已难以为继。本文基于人机交互与服务设计理论,提炼出五大维度设计原则,深度解析如何在黑箱算法与用户信任之间构建透明的桥梁。

当我和罗伯塔·塔西(Roberta Tassi)开始思考有助于指导 AI 体验设计的原则时,我们从唐·诺曼(Don Norman)的人机交互原则,以及埃琳娜·帕琴蒂(Elena Pacenti)在米兰理工大学攻读博士学位期间所制定的服务设计准则中汲取了灵感。

这些内容一直是我们工作的基本准则。例如,透明性原则几乎已成为每个服务提供商的必备要素,它对于让用户能够理解自身选择至关重要。但在 AI 的新环境下,这意味着什么呢?

我们开始探索这些原则,并确定影响基于 AI 的服务与体验设计的最关键变量。

有些变量是功能性的,用以界定人与技术组件及底层服务之间的交互。另一些变量则更多与审美价值相关。我们着重去理解那些能引发有意义问题、进而催生有趣设计的变量。

首先要考虑的一组原则,通常与可供性以及它们在基于 AI 的服务中如何变化相关:

1.可见性:这对于零交互/自动化服务尤为重要。我们需要设计 “负可供性”,向用户表明在新服务中,他们原有的一些交互模式可以摒弃,并指出新的交互模式是什么,即便我们希望新交互模式直观且无形。这有助于避免类似自动水龙头带来的那种困惑,因为传统交互方式在自动水龙头场景中被取消了。

2.心智模型:我们必须处理好用户针对像亚马逊 Go(Amazon Go)这类自动化服务所形成的心智模型。在这类服务中,我们要求用户摒弃旧有的服务使用模式。用户必须学会在进入时签到,而无需在离开时签出,这意味着一种全新的服务流程。我们必须考虑这一过程中的学习曲线以及所需的所有沟通环节。

3.透明性:鉴于机器学习的技术复杂性和黑箱问题,这或许是最具挑战性的原则。传统上,透明性意味着明确预期,或者让用户在等待时知晓正在发生什么(比如包裹追踪)。然而,我们现在必须考虑两个层面的透明性:其一,我们需要向用户更清晰地呈现技术限制。例如,用户需要明白 Echo 设备要么说话要么倾听,如果在 Alexa 还在说话时他们就开始发言,其询问可能无法被正确解读。其二,我们需要追踪 AI 可能代表用户采取的行动,并明确是哪些具体的用户输入或 AI 对其行为的解读导致了该行动。(例如,如果我的 AI 助手一直给我买巧克力,我想知道这是基于我的习惯、它对我心理状态的解读,还是供应商推送的促销活动。这就是所谓可解释 AI 应用的一个场景。)

4.可解释性:AI 的出现催生了一个重要的新原则。这既涉及用户理解系统中正在发生之事的能力,也关乎AI所采取行动的可问责性。它与 “让用户深入了解系统运作机制” 的理念相关。目前有朝着可解释 AI(XAI)方向的尝试,这应该遵循这一原则。

第二组原则涉及用户应如何在不同方面保持对系统的控制权:

1.退出自由:在传统系统中,这指的是随时停止交互的能力,比如我改变主意时能从 ATM 机取回银行卡。然而,随着谷歌、亚马逊这类更复杂系统的出现,理解用户的退出自由究竟意味着什么变得至关重要,特别是在如何安全取回他们的数据方面。

2.容错友好性:在传统系统中,容错友好性意味着允许人工操作者犯错而不引发严重问题。但对于智能代理而言,我们可能需要设计这样的系统:确保用户能接受一定程度的系统故障,并明确用户与 AI 代理之间责任如何划分。最近,自动驾驶汽车中多起涉及自动驾驶仪的事故使得这一原则问题尤为突出。

3.持续参与:关键在于考虑如何让用户知晓情况,并赋予他们干预和重新引导系统的能力,还要设计出能提供清晰及时反馈以实现这一点的系统。用户必须明白何时可能需要重新接管控制权,并且应为他们有效执行这一操作创造条件(例如,在自动驾驶汽车场景中,由于机器在控制,用户常常会感到无聊和分心)。这不仅对控制 AI 很重要,对人类保持自身技能和知识水平、以便在技术故障时仍能手动执行操作也很关键。

第三组原则与适应性以及这些服务如何应对不同情况相关:

1.学习能力:从用户反馈中学习并随时间不断改进的 AI 服务,是这项技术的自然产物。它们能够实现个性化体验,适配用户的需求和偏好。这一特性是许多成功的基于 AI 服务的关键要素。

2.灵活性:这是设计 AI 服务的一项关键原则,它使系统能够随时间推移进行适应和演变。这包括整合新数据和用户反馈的能力,以及响应不断变化的用户需求和偏好的能力。一个灵活的 AI 系统还能更好地处理意外情况和异常状况,提供更流畅、直观的用户体验。总体而言,以灵活性为导向进行设计,能让 AI 服务持续改进,在不断变化的环境中保持相关性。

3.多模态交互:该原则指的是为用户提供多种交互方式,如语音、文本和手势识别,还包括结合不同交互方式以实现更流畅的体验。通过提供多种交互方式,AI 服务能更好地满足用户偏好,并适应不同的使用场景,使整体体验更具灵活性和易用性。

4.情境感知:对于设计能有效适应不同情境的 AI 服务而言,这是一项至关重要的新原则。例如,用户在工作或从事其他专注活动时,可能不希望被打扰。AI 服务应设计为能够检测并响应这些情境,提供适应特定情况的差异化体验,而非采用一刀切的方式。挑战在于打造能够识别并适应用户情境的服务,提供流畅且个性化的体验。

···

接下来谈谈与美学相关的原则,我们可以思考能提升体验的元素。

一致性:

第四组原则更多涉及服务在美学和情感方面,也与品牌体验和认知相关。

1.共享且一致的语言:这既体现在服务与用户之间共享的语言,也包括契合情境的语言(不能是用户听不懂的官僚或技术语言的 AI )。服务语言在用户访问的各种平台和情境中也应保持共享且一致。

2.共享价值观:这对用户与服务的匹配至关重要。此前我们在一定程度上看到过例子,比如当前的地图应用重视效率和速度,而用户可能更看重路线体验。我们需要找到传达这些价值观或适配用户的方式。

3.可及性:AI 服务看似可及性问题较少,因为自然语言界面可能克服操作按钮和触摸屏的一些限制。然而,我们已经看到不同语言的服务在可及性方面存在显著差异。另一个方面是对不断增加的带宽和处理能力的需求,这可能在有能力使用高质量 AI 服务和无力承担的人群之间造成新的数字鸿沟。

4.伦理道德:这是一个宽泛的范畴,不止涉及单一原则,目前在技术和设计背景下都有讨论。设计师应考虑将道德准则融入 AI 服务的功能中,并评估该技术潜在的伦理影响。他们必须留意服务对社会的潜在影响,确保其符合伦理价值观和原则。然而,在某些情况下,这些伦理方面可能与一致性原则相悖,因为一些伦理考量可能高度基于具体情境,需要兼顾多样性和差异。

第五组原则旨在帮助人们在使用 AI 服务时感到自在,并且感受到被尊重,从而营造舒适的 AI 体验。

1.外观、特性与氛围:这些元素通过品牌形象视觉化、色彩和声音等接触点来传达服务的核心。对于常常超越屏幕交互的 AI 体验而言,理解如何持续传递品牌价值,以及像语气或特性等其他方面怎样用于打造不同且独特的体验,这一点至关重要。  

2.个性化:这是将智能融入服务所带来的最大优势之一,但它引发了关于个性化程度的疑问。传统上,服务和品牌的创建会考虑特定价值观和目标受众,但个性化可能会挑战这一模式,使服务适配每个特定用户的偏好。例如,是否仍需要多种打车服务,还是一个统一整合的平台就能提供足够的个性化服务以满足每个人的个体需求?品牌及其价值观的概念会被每个用户的价值观和需求所取代吗?

3.谨慎性:虽然 AI 利用用户行为数据实现个性化体验有益处,但谨慎行事很重要,不能让用户感到尴尬或不适。AI 应融入用户偏好的做事方式,避免造成尴尬局面。例如,如果 AI 收集了大量用户数据,它应利用这些信息提升用户体验,同时尊重用户隐私。设计师在利用数据支持服务行动时,应思考如何融入惊喜元素和自然交互,不让用户感到不适或隐私被侵犯。

总之,AI 体验的设计原则复杂且多面,融合了传统服务设计、伦理道德和美学等方面的元素。随着 AI 越来越融入我们的日常生活,设计师必须考虑这些原则,打造不仅功能实用、高效,而且能让用户享受其中,并尊重用户价值观和偏好的服务。

 

转载:人人都是产品经理

 

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

 

image.png

兰亭妙微ui设计公司分享:UX 文案设计指南:6 大核心原则,打造易懂好用的界面文案

清阳 行业趋势

兰亭妙微ui设计公司分享:很多产品团队都轻视界面文案,觉得只要无错别字就达标,却忽略了文案是用户与产品交互的核心对话载体。一句模糊的按钮文字,比如笼统的「提交」vs 精准的「确认支付」,都可能直接造成用户犹豫、流失。
不少人会照搬苹果极简文案逻辑,但这套表达完全贴合苹果品牌调性,直接套用在其他产品上往往水土不服。今天系统拆解 UX 文案底层逻辑,教你适配自身产品,写出兼顾易用性与品牌感的界面文字。

一、先搞懂:什么是 UX 文案?

UX 文案(用户体验文案)依附于体验设计而生,核心目标是降低产品操作门槛、统一品牌感知;和传统营销文案有本质区别 —— 后者重在说服转化、推销产品,而 UX 文案只负责让用户和产品的交互顺畅自然。
优质 UX 文案需要融合 5 大核心要素,存在清晰优先级,需由底层向上搭建:

image.png

UX文案四层金字塔模型
 
  1. 用户需求(底层根基):深度读懂用户,所有文案围绕用户诉求展开
  2. 简洁友好的文案:语言通俗直白,降低阅读理解成本
  3. 建立同理心:匹配用户当下情绪,语气贴合使用场景
  4. 一致性管理:全产品术语、语气、格式统一规范
  5. 品牌表达(顶层):传递品牌调性,助力业务目标落地
底层基础没做好,上层再华丽的文字都是空洞无效。好的 UX 文案不靠华丽辞藻堆砌,核心是梳理完整用户交互路径,用文字解决用户痛点。

二、UX 文案创作起点:一切从用户出发

1. 精准回应用户疑问

UX 文案的创作原点从来不是企业想输出什么,而是用户想知道什么。创作时先拆解用户潜在疑问,给出简短、明确的答复。

image.png

最典型场景:系统错误弹窗。只写「发生错误」是完全不合格的提示,完整提示必须覆盖三层信息:
  • 是什么:明确告知出现了哪种故障
  • 为什么:简单说明故障产生的原因
  • 怎么办:给出用户可直接执行的解决办法
核心创作逻辑三句话:读懂用户诉求、只回答当下疑问、表达极简直白。

2. 五步深度吃透你的用户

image.png

对用户画像越清晰,文案越精准。动笔前先理清 5 个关键问题,锁定文案的表达方向:
  1. 用户是谁:锁定受众年龄、职业、产品熟悉程度,划定认知基线
  2. 用户当下情绪:操作时是期待、烦躁、焦虑还是放松,决定文案语气轻重
  3. 用户会有哪些疑问:预判全流程高频困惑点,提前用文案答疑
  4. 用户的常用表达:使用受众日常习惯的词汇,减少认知隔阂
  5. 用户核心目标:用户打开产品想完成什么操作,文案全程服务这个最终目的

三、6 大落地原则,写好专业 UX 文案

原则 1:清晰简洁,杜绝模糊歧义

image.png

动笔前自问两个问题:这条信息用户是否必需?能不能用更短的话讲清楚?
 
冗余修饰、冗长描述都会抬高用户理解成本;模棱两可的话术极易引发用户焦虑、迟疑。
  • 简洁:能少一字就不多一字,压缩无效修饰词
  • 清晰:拒绝模糊指代,精准描述对象、位置、动作
反面案例:「在底部查看」存在双重歧义 —— 用户无法区分是页面底部还是手机屏幕底部;更优表达直接标注「页面底部查看订单」,省去用户反复寻找的成本。

原则 2:高可访问性,适配全人群理解

image.png

规避晦涩行业黑话、专业术语,文案难度贴合大众基础认知。
 
优秀界面文案要做到:老人、新手、视力不佳人群,在任意使用场景下都能快速读懂,不设置理解门槛。专业名词若无法替换,必须附带简短通俗解释。

原则 3:务实有用,提供可落地解决方案

文案要给到用户有效、准确的信息,答非所问会直接消耗用户对产品的信任感。
 
当用户遇到异常场景,不能只告知现状,必须配套可操作指引。

image.png

缺货提示文案优劣对比
 
反面示例(低效):该产品目前缺货,补货后会通知您
 
优化示例(实用):该产品目前缺货,补货后我们将第一时间推送提醒,点击「接收通知」即可订阅
用户的核心诉求是「如何及时买到商品」,优化后的文案直接给出操作按钮,解决用户真实需求。

原则 4:真实坦诚,拒绝诱导套路

UX 文案不能作为套路、裹挟用户的工具。很多产品会利用焦虑话术、模糊按钮引导用户做出非本意操作,大幅损耗产品信任度。

image.png

功能关闭弹窗文案优劣对比
 
反面弹窗陷阱:关闭闹钟提示框,用「您可能错过重要通知」制造焦虑,按钮设置「取消 / 查看」混淆用户判断,用户无法一眼分辨关闭功能的入口。
 
规范正向表达:直白提问「确定要关闭闹钟功能吗?您可能错过重要通知」,按钮区分「取消 / 确定关闭」,操作意图一目了然。
另一类常见诱导文案:「不开启通知会错过全部更新」,刻意制造压迫感;中性友好替代方案:「开启通知可实时接收动态更新,您可按需自主选择」,把选择权交还用户。

原则 5:全域一致性,统一产品语言体系

image.png

一致性是消除用户困惑、顺滑操作体验的关键。若页面间术语、按钮文字、提示风格割裂,用户每次切换页面都要重新学习操作逻辑。
 
统一规范落地细节:
  1. 同一操作全程使用固定名称,比如下单按钮统一叫「提交订单」,不可时而「提交订单」、时而「确认订单」
  2. 弹窗、空状态、报错、按钮的句式、标点、语气保持统一
  3. 专业名词、功能名称建立产品术语库,全团队统一使用

原则 6:贴合品牌,用文字塑造产品性格

UX 文案不只是功能说明,更是传递品牌人格的载体。同一功能,不同定位产品的表达逻辑完全不同。
 
举例:账户异地登录安全提醒
  • 年轻化潮流 APP(亲和口语):注意啦!有陌生设备尝试登录你的账号,非本人操作请立刻修改密码哦
  • 金融专业工具(严谨正式):【账户安全预警】检测到陌生设备登录请求,为保障资金安全,请前往「我的 - 设置 - 账户安全」修改登录密码
文案语气、措辞、句式要和品牌定位匹配,让用户通过文字直观感知产品调性。

文末总结

文案是用户体验的「最后一公里」。即便交互逻辑流畅、视觉设计精美,一旦文案模糊、误导、晦涩,依然会造成用户困惑、操作流失。
做 UX 文案的核心心法:永远把「用户能不能看懂、知不知道下一步该点什么」放在第一位,文字服务操作、表达贴合用户,才能真正发挥文案的体验价值。
 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:AI Chat 产品设计思考③:对话容器(Ctn)—— 人机协同的交付载体

清阳 行业趋势

前言:UI 设计的最高境界,是「无感透明」

兰亭妙微ui设计公司分享:此前和多位大厂资深 UI 设计师探讨:顶级 UI 设计的内核究竟是什么?我们跳出设计师审美视角,回归用户真实体验,最终达成共识:最好的设计是透明无感,如同空气,用户沉浸使用却察觉不到界面本身
举个直观例子:选购口红时,从打开 App 到完成支付,全程操作丝滑无阻滞。事后复盘整个流程,你不会记住界面多精致、动效多华丽,只会觉得所有步骤顺理成章、毫无门槛。
传统移动互联网产品,设计底层逻辑是构建用户路径,以用户地图为载体,核心目标是流量分发、曝光转化;
 
而 AI 智能体(Agent)产品,设计逻辑转向响应用户真实意图,核心价值是提升决策效率、完成深度转化。
进入 AI 时代,「无感体验」被赋予更深一层定义:弱化操作感知,让用户只聚焦最终结果。这不只是视觉层面减少干扰,更是对用户决策成本的全方位降低。
我们可以把 Chatfeed 对话流视作一套全新交互操作系统,本文重点拆解的容器(Container,简称 Ctn),就是这套系统里独立运行的微型应用单元。
 
AI 负责逻辑推演、内容生成,容器承接落地交互与信息交付;缺少标准化容器,大模型输出只会停留在纯文本层面,无法打造高效率、高转化、高信任感的无感交互体验。

一、读懂对话容器:AI 的标准化交付单元

1.1 容器的核心定义

在 Chatfeed 对话体系中,容器是承载 AI 输出信息的标准化 UI 载体,绝非简单的聊天气泡。它是一套可自适应内容类型的交互单元,会根据承载内容 —— 纯文本、图文 / 视频 / 音频多媒体、交互表单、专业数据、商品 SKU 自动切换形态,本质是 AI 面向用户的标准化交付物。
市面上主流 AI 产品的容器分为五大类:文本容器、多媒体容器、基础交互容器、专业输出容器、商业交易容器。

1.1.1 文本容器:结构化文字信息载体

基于 Markdown 语法渲染纯文本内容,专门承载诊断报告、数据分析、长方案建议等大段文字。通过分层排版、视觉权重区分,完成内容结构化梳理,大幅提升文本可读性与专业质感。

image.png

文本容器示例
 

1.1.2 多媒体容器:可视化感知增强单元

承载图片、短视频、音频类素材,用可视化内容补充文字短板:文物图片提供视觉佐证、实操视频做教学演示、语音音频实现情绪安抚,丰富信息传递的感知维度。

image.png

多媒体容器示例(图/视频/音频)
 

1.1.3 基础交互容器:对话内信息收集组件

内嵌于对话流,快速收集用户补充信息、引导下一步操作,通用性与易用性是核心设计目标,降低用户输入门槛。常见形态:选择题单、信息填写表单、快捷引导按钮组。

image.png

基础交互容器示例
 

1.1.4 专业输出容器:复杂能力可视化载体

image.png

用于展示 AI 高阶运算成果,适配代码块、网页预览、3D 模型、数据图表等复杂内容,直观呈现模型专业能力,强化产品专业背书。

1.1.5 商业交易容器:对话转化核心载体

image.png

标准化展示商品 / 服务核心信息,整合实拍图、定价、核心卖点、行动按钮(CTA),是对话场景下完成商业变现、引导下单的核心 UI 单元。

二、容器四大核心设计原则

2.1 一致性:统一底层骨架,差异化视觉皮肤

image.png

所有容器共用一套基础设计规范:统一圆角、留白间距、阴影层级、品牌基础色,构成标准化底层骨架;
 
仅可根据智能体赛道微调视觉皮肤:医疗智能体采用克制理性的蓝白配色,美妆智能体使用高对比时尚色系,但底层交互逻辑、组件规则必须完全统一,避免用户认知割裂。

2.2 高信噪比:降噪分层,0.5 秒抓取核心信息

移动端屏幕空间有限,且大模型易输出冗长冗余内容,容器设计的核心目标是让用户半秒内锁定重点,落地两大核心手段:
  1. 建立清晰视觉分层

    image.png

     
    弱化分割线,优先依靠字号、字重、留白区分信息层级,让关键结论视觉自动突出,无需用户逐字检索;
  2. 强制内容结构化输出

    image.png

     
    杜绝密集大段纯文本,需前端渲染层 + 工程提示词(PE)双向配合,将 AI 输出拆分为独立视觉区块。
结构化设计带来三重收益:
 
① 用户快速定位信息、预判后续操作,大幅降低阅读认知成本;
 
② 约束 AI 过度赘述的问题,精简文本体量,清晰度显著提升;
 
③ 规避智能体人设跑偏、输出逻辑散乱的问题。

特殊场景:数字人智能体反向适配

image.png

常规专业对话需强结构化,但数字人场景需要弱化显性分层,把结构藏在自然话术内。
 
数字人核心价值是建立情感信任、模拟真人沟通,若直接输出条目化文本,会产生强烈机械违和感,削弱用户信任感。
举个对比案例:用户反馈失眠
  • 机械结构化输出(负面):症状:睡眠不足;诱因:压力过载;方案:每日冥想放松
  • 自然共情表达(正面):能感受到你近期身心疲惫,睡眠状态持续变差,大概率是长期压力堆积导致。我给你整理几个当下就能执行的舒缓方法,我们一步步调整。

2.3 行动导向:放大交互可供性,分层设计触发逻辑

image.png

容器的最终价值是驱动用户产生行动,尤其商业化场景;但引导动作不只能依靠独立按钮,核心思路是让内容本身成为交互触发器
 
依据菲茨定律:交互热区面积越大,点击成本越低,操作流畅度越高,因此优先采用全容器区域点击触发。
整套交互流程采用分级触发策略
  1. 浏览、查看类轻操作:全区域热区触发,例如点击完整商品卡片跳转详情;
  2. 支付、删除等不可逆关键操作:保留独立高亮按钮,增加交互摩擦力,强化用户确认感与操作掌控力。

2.4 流式体验:将等待焦虑转化为实时生成感知

大模型内容生成存在天然时延,传统 App 瞬时加载逻辑不适用于 Chatfeed,空白屏幕会放大用户等待负面情绪。行业主流方案是「流式打字输出 + 模板骨架屏」,并根据容器类型分层设计加载策略:

策略 1:未确定容器类型(纯文本 / AI 思考阶段)

image.png

不渲染固定骨架屏,采用流畅打字机动效逐字输出,容器高度平滑动态变化,避免气泡生硬跳动、页面滚动剧烈抖动,让用户感知内容正在实时生成。

策略 2:容器类型固定、生成耗时较长(文生图 / 视频 / 代码)

image.png

提前渲染对应容器的灰色骨架占位,缓冲完成后平滑替换真实内容,消解长时间等待的焦虑感。

特例:商品 SKU 转化场景

若后端数据传输速度足够优化,可直接跳过骨架屏,省去多余 UI 等待步骤,让用户注意力直接聚焦商品卖点与下单入口,最大化对话转化效率,美团小美 AI 推荐已落地该方案。

三、容器落地四大避坑指南

照搬传统 IM 聊天气泡做 AI 对话容器,是绝大多数设计师、产品经理的常见误区。微信、飞书等传统即时通讯,服务于「人与人对话」;AI Chat 是「人与大模型协同」,完全两套底层逻辑,照搬设计会出现排版混乱、信息过载、交互断裂等体验硬伤。

3.1 样式失控:纯文本输出破坏标准化设计系统

image.png

痛点:Figma 中定义完整字号、字重、行高规范,但大模型默认输出无标签纯文本,缺少层级标记,导致重点无加粗、标题无分区、关键数据淹没在大段文字中,界面粗糙廉价。
 
根源:工程层(PE)与前端渲染层脱节,AI 无法识别 UI 设计规范。
完整解决方案:
  1. 工程侧约束:在系统提示词强制要求 AI 输出标准 Markdown 语法,标题用 #标记,核心结论加粗 **,列表有序拆分;
  2. 前端侧映射:搭建专用 Markdown 解析器,将语法标签一对一翻译为设计系统预设组件样式。

3.2 视觉抖动:流式输出造成页面剧烈跳动

image.png

打字机动效虽缓解等待焦虑,但输出表格、代码、长列表等复杂组件时,容器高度无法提前预判,气泡忽大忽小、滚动条持续跳动,造成严重视觉疲劳。
优化方案:
  1. 为容器设置基础最小高度,规避初期小幅跳动;
  2. 前端识别图表、代码、表格等复杂输出类型时,优先渲染骨架占位,内容缓冲至完整模块后再平滑替换。

3.3 长篇信息过载:冗余内容折叠收纳,规避页面跳转

image.png

大模型为保证逻辑完整,常会输出大量推导过程、注释、备用方案,用户仅需最终结论时,冗余内容会形成信息墙;同时合规、可信度要求下,冗余文本又不可直接删减。
解决方案:容器内置折叠 / 展开组件,收纳次要信息;
 
核心设计红线:所有信息延展、次级操作尽量在当前对话流内完成,禁用新页面跳转。Chatfeed 核心是沉浸式信息流,跨页跳转直接打断对话连贯性,割裂用户沉浸感,优先使用折叠面板、非模态弹窗承载延展内容。

3.4 缺失消息编辑能力:忽略 AI 交互「反复调试」核心需求

image.png

传统 IM 发送消息后无法修改,但 AI 交互中,调整提示词、重新生成是高频刚需。若不支持气泡直接编辑,用户只能复制、粘贴、修改、重发,操作链路冗长笨重。
行业两种成熟方案,无绝对优劣,适配不同产品定位:
  1. 单次编辑限制(如灵光):主打专业严谨,限制修改次数,引导用户梳理完整需求后再提问;
  2. 无限制自由编辑(如豆包):主打轻量化高频交互,降低多轮调优的操作成本,提升流畅度。

结语:设计容器,本质是重构全新人机协同关系

AI 对话容器早已不止是好看的 UI 组件,它承载着一套全新的人机交互逻辑 —— 不再是单向信息推送,而是人与大模型联合生成、协同解决问题。
作为设计师与产品从业者,不能只停留在视觉层面绘制组件,必须吃透大模型底层特性:Token 输出限制、Markdown 结构化能力、内容幻觉问题,才能打造出可控、高效、体验顺滑的 AI 对话产品。
 

转载:站酷

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

 

image.png


兰亭妙微ui设计公司分享:从生图到代码落地|打通 AI×UI 全链路标准化工作流

清阳 行业趋势

全文导读

兰亭妙微ui设计公司分享:以往 AI 生成 UI 效果图与可落地设计稿、前端代码之间存在明显断层。本次我们完整跑通一套可复用标准化 SOP:文字需求→AI 草图 / 效果图→Figma 结构化设计稿→AI 自动生成代码→移动端真实预览
 
这套流程能大幅降低页面初稿重复搭建成本,验证设计稿到前端页面的还原精度,覆盖页面结构、组件、交互、多端适配全环节,同时沉淀团队专属提示词、设计规范与验收标准。
 
AI 真正的价值,从来不是一键生成完整 App,而是把设计师的创意想法,快速推进至可查看、可交互、可开发迭代的落地阶段。
 
AI×UI全链路流程图
 
此前我分享过 AI 效果图导入 Figma 的实操方案,解决了 AI 与设计工具之间的第一层壁垒。而本次团队完成闭环测试,补齐了从设计稿直达可运行代码的最后一环。
 
我们的核心目标:
  1. 提升初稿产出效率,消除重复绘制、素材处理等机械工作;
  2. 实测不同工具从 Figma 稿到前端页面的还原度、调试成本;
  3. 逐步覆盖页面布局、通用组件、交互动效、多尺寸响应适配;
  4. 沉淀可复用的团队 SOP、标准化提示词、交付验收清单、组件规范。
本次 Demo 完整链路:AI 生成效果图 → Figma MCP 搭建基础稿 → 设计师精细化校正 → WorkBuddy/Codex 生成前端代码 → 移动端真机预览
 
简单启动页可实现近乎 100% 视觉还原,包含渐变立体按钮、3D 插画等复杂元素均可通过代码原生实现,而非整图拼接。

image.png

设计稿与代码对照演示
 

一、第一阶段:文字需求一键生成 AI 效果图

本次演示选用 APP 版本更新启动页作为案例,以参考图为基准,通过 GPT Image 2 快速产出匹配需求的高保真效果图。
 
只需在提示词内明确 5 项核心信息,AI 即可快速输出贴合预期的视觉方案:
  1. 页面类型(启动页 / 首页 / 活动页等);
  2. 画布尺寸、倍率规范;
  3. 页面完整文字文案;
  4. 插画、吉祥物、装饰图形等视觉元素;
  5. 整体视觉风格、品牌配色体系。

image.png

GPT Image2生成效果图流程
 
效果图定稿后,即可进入下一环节:将像素效果图转化为分层可编辑的标准 Figma 设计稿。

二、第二阶段:Figma MCP 双方案,平衡结构完整性与插画精度

现阶段 Figma MCP 可直接基于效果图自动生成页面图层,但两种单一路线各有短板,最优解是分层素材 + 全局结构合并的组合方案。

方案 1:全图直传,一键生成完整页面框架

操作方式:在 Figma 内调用 MCP 插件,上传完整效果图并输入分层指令,要求区分文字、图片、系统状态栏,锁定 750px 移动端二倍画布尺寸。

image.png

Figma MCP提示词设置

image.png

自动生成分层图层
 
优势:自动搭建完整页面层级,背景、状态栏、标题、功能按钮、分页指示器全部原生生成,页面布局结构完整可编辑。
 
短板:3D 渐变、半透明光影、复杂插画会出现锯齿、分辨率不足;装饰箭头、立体图形矢量还原效果较差。

方案 2:AI 分层导出高清透明素材,保障插画质感

针对复杂视觉插图,先通过提示词让 AI 拆分独立透明 PNG 素材,将数字图形、吉祥物、标题文字、装饰线条、背景、按钮拆分为单独图层,输出 4K 高清无损文件。

image.png

分层导出提示词

image.png

拆分后的透明素材
 
再将分层素材传入 Figma MCP,指令 AI 按效果图位置完成画布拼接。
 
优势:插画、立体装饰素材画质无损,渐变光影细节完整保留;
 
短板:仅导入素材,不会自动生成规范文字组件、按钮容器、标准页面布局。

最优实操:两种方案合并,兼顾结构与画质

将方案 1 自动生成的完整页面结构,与方案 2 导出的高清分层素材在 Figma 内整合,由设计师统一校正间距、文字样式、图层层级,最终产出规范可复用设计稿。

image.png

分层素材导入Figma

image.png

图层合并效果

image.png

三版对比校正
 
AI 生成文件仍存在细节瑕疵:间距不统一、SVG 图标不标准、文字样式未遵循设计规范,必须由设计师做标准化微调,才能交付开发。

三、第三阶段:Figma 设计稿一键转前端代码,复杂组件原生还原

完成标准化 Figma 稿后,我们实测 Codex、WorkBuddy、CodeBuddy 三款 AI 代码工具,可直接读取设计图层与切图资源生成可运行页面。
 
本次测试最大突破:立体渐变按钮、带阴影圆角容器不再以整张图片实现,而是生成原生 button 标签,通过 CSS 还原渐变、圆角、投影、点击反馈等全部视觉效果,页面语义化完整,不影响交互开发。

image.png

浏览器代码与界面对照
 

1. Codex 代码还原操作指南

可直接对接 Figma MCP,一键拉取设计稿资源,输入简单交互需求即可生成还原度 90% 以上的静态页面。
 
两种使用渠道:网页端插件、VS Code 本地客户端,本地编辑器加载速度更快,支持实时查看、修改完整项目代码。

image.png

Codex网页端操作

image.png

VS Code代码编辑界面
 

2. WorkBuddy / CodeBuddy 落地方法

两种工具账号体系互通,有两种对接 Figma 路径:
  1. MCP 远程连接:通过配置 json 文件完成官方服务器授权,实现 Figma 文件实时同步;

    image.png

    WorkBuddy MCP配置
     
  2. 切图文件导入(推荐新手):使用 Figma 插件 Heron Handoff 导出标注与切图资源,提前给所有插画、装饰素材开启导出权限,AI 识别效率更高、消耗 Token 更少、加载速度更快。

image.png

Heron Handoff导出切图
 
新建项目后由 AI 自动搭建前端运行环境,口头输入交互、适配需求即可生成完整页面代码。

四、三款 AI 工具选型对比 & 付费方案参考

Codex(ChatGPT Plus/Pro 配套)

适合高频设计转代码需求,20 美元 / 月 Pro 套餐解锁完整 Codex 额度,可搭配 DeepSeek 拓展算力,日常页面还原、快速原型完全够用。

image.png

ChatGPT付费档位
 

WorkBuddy / CodeBuddy

注册即赠送 2000 积分,体验版每月附赠 500 免费积分,轻度测试无需付费;付费档位分为 70/140/700 元每月,随档位提升解锁任务数量、协作人数、代码实时补全权限,独立团队可按需选购高级版。

image.png

WorkBuddy套餐价格
 

五、全流程总结:AI 时代设计师的核心价值转移

完整跑通这套 Demo 后,我最深的感悟并非 AI 能够替代设计师,而是设计师的工作重心正在发生根本性转变:
 
过去大量时间消耗在重复素材抠图、页面搭建、间距校准、切图标注、转译开发文档等机械执行工作;如今 AI 可承接绝大多数标准化重复劳动。
但 AI 无法自主完成核心决策:
  • 判断适配产品定位的视觉风格;
  • 规划可长期复用的组件图层结构;
  • 定义页面适配逻辑、交互落地技术方案;
  • 制定可交付的视觉还原验收标准。
以上核心判断,依旧依赖设计师的专业能力。
未来 UI 设计的核心竞争力,不再是单一工具熟练度,而是整合多类 AI 工具、搭建稳定可复用全链路工作流的能力。
 
这套流程虽未达到完美,但已经实现完整闭环。AI×UI 工作流真正的意义,是大幅压缩创意到落地的周期,让设计师把精力集中在创意、体验与设计体系搭建上。
后续会持续更新复杂页面测试案例、标准化提示词模板,大家有想看的工具实操、工作流技巧,欢迎在评论区留言交流。
 

转载:优设

 

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

 

image.png

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

日历

链接

个人资料

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

存档