首页

兰亭妙微ui设计公司分享:京东金融 & 招商银行黄金交易功能深度对比

清阳 设计资源

一、体验背景

兰亭妙微ui设计公司分享:近期国际金价持续走高,出于产品体验研究目的,我分别在京东金融、招商银行、支付宝完成黄金产品建仓测试。
 
其中支付宝黄金本质为场内黄金基金,交易规则与积存金、银行账户金存在底层差异,不具备横向对比基础,因此本次测评仅聚焦京东金融积存金招商银行黄金两大产品。
二者底层交易逻辑相近,但在页面布局、交互链路、风险信息披露、操作引导上存在显著分化。差异背后,是互联网理财平台与传统银行 APP 截然不同的业务定位、目标用户心智与合规管控思路,也直接影响用户下单效率、交易决策心理。
本文以黄金投资三大核心高频动作 —— 买入、卖出、条件单为拆解主线,从「视觉信息层级、操作流转效率、用户引导策略」两大维度,完整对比两款产品全流程体验。

体验测试环境image.png

设备系统:iOS
 
京东金融版本:7.0.10
 
招商银行 APP 版本:13.1.0

对比链路与评判维度

完整流程:首页黄金入口→买入操作→卖出操作→条件单委托
 
分析维度:视觉情绪与信息层级、操作效率、风险与转化引导策略
两款 APP 首页金刚区均配置「黄金」一级入口,下面从首页一屏开始逐层拆解差异。

二、黄金首页首屏对比

1. 京东金融・积存金首页

image.png

页面将实时价格走势曲线作为视觉核心,遵循国内金融市场红涨绿跌通用视觉规范,用高饱和色彩强化行情数据优先级;信息垂直排布、密度适中,大幅降低用户信息筛选认知成本。
 
「买入 / 卖出」核心操作按钮固定于页面底部,形成查看行情→快速决策→一键交易的极简线性路径,最大程度缩短 “行情浏览到下单执行” 的操作距离,适配高频短线交易用户。

2. 招商银行・黄金首页

image.png

整体采用产品陈列式信息架构,顶部营销 Banner 抢占首屏视觉焦点,下方以网格布局陈列多类黄金产品,侧重展示产品线丰富度与银行品牌稳重调性;通过分组模块梳理产品关系,但所有交易动作均需跳转二级页面完成。
 
完整链路为挑选产品→查看行情→审慎决策→执行交易,整套设计以 “风险缓冲、理性投资教育” 为底层逻辑,更匹配风险偏好保守、低频操作的存量理财用户。
补充细节:页面内「持仓信息」仅为可点击卡片热区,无明确按钮标识;「黄金活期 - 购买」为独立操作入口,两条入口跳转落地页结构、交互逻辑完全割裂,极易造成用户操作认知混乱。

三、买入流程体验对比image.png

京东金融

买入采用弹窗浮层交互,行情页面不中断,信息高度聚焦、操作反馈即时。
 
用户无需跳转页面,在行情首页即可完成「输入投资金额→确认下单」全链路;输入金额前前置交易规则说明,提前建立用户收益与成本预期;输入数值后即时展示快捷金额标签、预计买入克重、持仓均价等关键数据,核心信息一屏完整呈现。
 
整套交互以高效快速决策为核心,适配高频小额、短线交易用户,信息透明化设计也能有效提升用户下单信心,交易流畅度更强。

招商银行

image.png

买入链路层级更深,需多层页面跳转才能完成操作;且行情页存在两条差异化入口,落地页体验割裂:
  1. 从「黄金活期 - 购买」按钮进入:页面侧重新用户教育,主推定投、一次性购买,面向从未持仓的新手投资者;
  2. 从「持仓信息」卡片热区进入:页面聚焦存量用户资产管理,核心按钮为卖出、定活互转、加仓购买。
两套页面在模块结构、操作按钮组合、引导话术上差异明显,虽初衷是区分新老用户、做分层运营,但统一操作预期被打破,大幅降低操作连贯性,用户极易产生困惑。整套多层漏斗式设计,依靠增加操作阻力强制用户审慎思考,贴合银行强合规、重风控的产品基因。

四、卖出流程体验对比

image.png

京东金融

卖出复用与买入统一的弹窗交互逻辑,全程不脱离行情页面,保证用户对实时金价的连续感知;内置快捷卖出档位,清晰展示卖出后实际到账金额,信息层级简洁直观,弱化交易操作的心理压力,提前给用户收益预期。

招商银行

延续买入 “分层披露、渐进展示” 的设计思路,完整链路:黄金首页→产品详情页→卖出操作页,分步释放交易信息,通过拉长操作链路引导用户三思后操作,完全匹配银行对稳健投资、风险管控的底层需求。

五、条件单(委托挂单)功能对比

image.png

京东金融

整体页面统一品牌视觉,保留红绿行情波动标识,持续营造金融交易氛围;采用页签分区管理限价买入、限价卖出等不同挂单状态,单页内完成全部委托状态查看,避免频繁跳转造成认知断裂。
 
全部核心操作集中在同一页面,搭配标准化价格标签、辅助测算字段,交易效率拉满;功能辅助信息完整透明,直观展示委托预计差价、卖出手续费,同时支持自定义挂单有效期、多支付渠道选择,给用户充足的决策辅助工具,适配有灵活交易策略需求的投资者。

招商银行

同样保留行情色彩规范,但交互链路冗长:查看历史委托需依次跳转「黄金首页→持仓页面→历史交易」,跳转节点多、数据分散,大幅降低信息查阅效率。
 
同时存在文案术语不统一问题:持仓页按钮标注「历史交易」,点击后页面标题改为「交易记录」,用词冲突会扰乱用户固有心智模型;金融场景下用户本身敏感度更高,模糊、不统一的术语会直接加剧操作焦虑。
功能层面设计偏保守,缺失直观的差价测算、手续费前置提示,自定义挂单有效期需额外唤起弹窗操作,缺少轻量化决策辅助工具,对需要精细化交易策略的用户支撑不足。

六、总结:两款产品底层设计定位与优劣势

image.png

产品底层定位差异

  1. 京东金融:高频交易效率优先
     
    搭建极简闭环交易链路,行情、买卖、条件单全部支持单页 / 弹窗快速操作,以最短路径、实时数据反馈为核心优势,服务追求便捷、短线高频操作的互联网理财用户。
     
    短板:极致简化的操作链路弱化了风险提示权重,容易诱导用户冲动交易,风险约束力度偏弱。
  2. 招商银行:风险管控与投资者教育优先
     
    采用多层漏斗式分流设计,功能入口分散、操作链路拉长,依靠适度操作阻力倒逼用户理性决策,是传统银行强合规、稳风控基因的直观体现,适配长期、低频、保守型理财人群。
     
    短板:分层入口造成页面逻辑割裂,跳转频繁、术语不统一,打断操作连贯性;交易辅助工具偏少,无法满足精细化投资需求。

额外体验吐槽

京东金融存在一处细节体验缺陷:开启金价报价浮窗后,切出 APP 回到桌面再重新进入,会强制暂停后台音乐播放,对多任务使用场景十分不友好。
 
再次提示:本文仅为 UI/UX 产品设计层面分析,不构成任何理财、交易操作建议,投资有风险,入市需谨慎。

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:不一样的标签页设计

清阳 设计资源

兰亭妙微ui设计公司分享:标签页是 UI 设计里高频通用的基础组件,不管是面向普通用户的 C 端产品,还是企业后台类 B 端系统,几乎都会用到。
 
市面上绝大多数标签页设计同质化严重,本篇整理多款差异化标签页方案,帮大家跳出固化设计思路,优化页面视觉层次与用户操作体验。

一、创意标签页基础样式分类

1. 图标 + 文字组合式

image.png

图标与文字采用上下分层排布,选中标签搭配圆角填充底色做区分。

image.png

 
图文搭配的形式能丰富页面视觉层次,弱化单调文字标签的乏味感,兼顾识别性与精致设计感,适配首页、分类导航等场景。

2. 主标题 + 副标题双层信息

image.png

image.png

标签分为上下两行:上层为主导航标题,下层放置精简副标题。
 
副标题可补充品类、数量、说明等关键辅助信息,用户无需点击就能快速读懂标签含义;选中 / 未选中状态依靠文字色差做区分,简洁清爽,适合内容信息量大的后台、资讯类页面。

3. 异形选中态标签

image.png

image.png

打破常规矩形底框,把选中标签的背景设计为不规则异形造型,常搭配卡片式布局使用。
 
造型独特、辨识度极高,能形成强烈视觉差异化,适合潮流 APP、活动专题、创意运营页面,强化页面专属设计美感。

二、多标签场景:标签数量超 5 个的适配方案

实际项目中经常出现标签数量过多、一行放不下的问题,网页与移动端分别有成熟落地解法:
  1. PC 网页端

    image.png

     
    在标签栏左右两端增加翻页箭头按钮,点击即可横向滚动,查看隐藏标签,交互直观、适配后台管理、网页商城等宽屏场景。
  2. 移动端 APP
     

     

    方案一:横向滑动标签栏,依靠左右滑动手势浏览全部标签,是电商、资讯类 APP 最常用的轻量化方案;
     image.png
    方案二:搭配下拉收纳菜单,超出可视区域的标签收拢在下拉面板内,适合标签总量极多、分类繁杂的产品。
     

    image.png

    image.png

     

    可根据自身产品业务量级、用户操作习惯灵活选用。

结语

以上就是本次标签页差异化设计的全部分享,希望能给各位 UI 设计师提供新的设计思路,落地更出彩的界面导航组件。感谢阅读与支持!
 
 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司:百人团队如何从0到1构建高复用的企业级设计系统?

清阳 设计资源

兰亭妙微ui设计公司分享:三五个人时设计系统就是个规范文档的事,但到了百人规模,核心已经变成了协作问题。关键看做完大家用不用得起来、愿不愿意跟,以及用着用着会不会又跑偏。
不少团队一开始就先整理UI规范、抽基础组件、写设计原则。
但业务线一多、人员一动、项目并行
,同一个按钮在不同产品里就又各长各的了。同样的交互在不同端,实现逻辑也完全对不上。
所以百人团队的问题不在于"有没有设计系统",而在于
有没有统一的使用方式,并且能持续运转下去。
 
一、先定标准,再动手搭组件
很多设计系统翻车的起点其实很简单:顺序搞反了。一上来就开干组件,规范后面再补。百人团队这么做基本必返工,因为没有统一标准,组件库越做越多,反而成了新的混乱源头。
我们的经验是,起点的核心其实是
三个问题
:设计语言有没有对齐,边界有没有划清楚,资产结构管不管得住。
设计语言统一
,不等于所有产品长一模一样,而是要在“默认长什么样”上达成共识。比如颜色是不是只保留一套主色体系,字号有没有固定梯度而不是随手拉,间距按8还是10走,按钮层级有没有明确区分。这些基础问题没定死,后面组件一定稳不住。

image.png

 
再说边界
。设计系统没必要铺到所有页面,它的边界就是把高频、稳定的那部分标准定死。像按钮、表单、弹窗、列表这些基础控件是必须收住的。但强业务属性的页面,比如活动页、营销页,硬套规范反而会把系统拖垮。
最后是资产结构
。组件不能往一个库里随便一丢就完了,得在一开始就想好分层:基础层放颜色字体间距,组件层放Button、Input这类,模式层放Form、Table,模板层放页面级结构。这样后面才好检索、好维护。这个阶段可以借助设计协作工具来把标准落地,我们用的是Pixso,把颜色、字体、组件结构先搭成可用的资产。
标准定好之后,还有一个问题:
怎么把这些东西快速搭起来
,而不是让设计师从头一个一个建。我们试过纯手工搭,效率实在太低,后来直接用了Pixso的AI生成能力。输入主色和主题方向,AI就能把颜色、字体、组件、阴影这些全吐出来,虽然生成的细节需要人再调一遍,但最耗时的骨架搭建被压缩到了一两天。而且生成的东西可以直接转成全局样式,不用再手动同步到设计稿里,团队内部复用起来也方便。

image.png

 
二、组件不在于多,稳更重要
标准定完之后,才是组件体系的搭建。但这里很容易走偏:越做越全。按钮做一套,输入框做一套,弹窗做一套,然后开始搞复杂组件,最后系统越来越重,实际项目翻来覆去还是用那几个基础款。
到了百人这个规模,设计系统的核心指标不是覆盖率,是稳定性。
1. 基础组件这块
,有几个关键点必须定死。按钮不能只定样式,Default、Hover、Disabled、Loading这些状态必须统一,不能含糊。输入框也是,错误状态、提示信息、聚焦状态要有一套固定规则,否则开发自己补的规则各不一样。
2. 比基础组件更关键的一层是
模式组件
。很多团队一开始不会做这个,但做对了效率提升非常明显。比如标准表单页、列表页、筛选区、分页区,把这些结构固定下来,后台类系统基本就是拼积木。
3. 再往上就是
变量体系
。这个容易被低估,但在多产品线里极其重要。颜色、字号、间距不再是写死的固定值,而是一套变量。不同产品线换个主题就行,组件不用重做。很多系统做到后期崩掉,就是因为没做变量层,只能靠复制组件来解决,越走越重。
 
 
 
三、系统能不能活下来要看管理
设计系统搭起来只是第一步,能持续用下去才是真本事。
百人团队里设计系统最大的问题通常不是技术,而是失控
。最典型的情况就是这几个:
  •  
    组件改了,旧项目还在用旧的,新项目又用新的,最后一套系统里跑着好几套逻辑;
  •  
    产品线各自扩展,各产品线自己搞分支组件,都说我这个按钮特殊;
  •  
    还有就是压根没人维护,设计系统变成设计组的私活儿,不是团队资产。
解决起来不复杂,但得有人管、有规则。我们分了三层:设计系统负责人管标准,前端核心管实现,业务代表管需求反馈。任何新增组件必须经过评审才能进系统,不然很快就会被各业务线的需求冲散。
还有个容易被忽略的点是
反馈机制
。系统做完了得能接收使用反馈,定期优化。某个组件在多个项目里被反复魔改,说明它本身设计得不对,需要调整,而不是让业务去适应它。

image.png

 
总结
百人团队从0到1搞设计系统,是建立一套长期运转的协作方式。其实就是让设计、开发、产品能在同一个语言体系里对话,别再各说各话。
等这套机制跑顺了,团队的变化会很明显:新项目不用从零对齐视觉,设计稿不会被反复推翻,开发也不用再为几像素的间距反复确认。

 

转载:站酷

 

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

 

image.png



掌握这5个技巧,从零开始掌握UI界面的亮点设计

之晨 设计资源

一、全文速览图

image.png

不管甲方给多少钱,哪怕一张界面的预算只有几十块,他也想要设计亮点,但是很多同学的设计又非常平庸!

为什么你做的设计没有特点,其实原因很简单,你没有用过行业属性这一招,只要学会这一招,完全够用!

先解释下,什么行业属性:

比如你做的 App 是音乐类,那就把音乐类事物或图形提炼出来植入到设计中,比如音符、麦克风等等!

比如你做 App 是体育类,那就把体育类的图形提炼出来植入到设计中,比如跑步、篮球等等!

这样一结合,就可以做的有一定的特点!

但是相关图形或事物的植入也分层次,我个人分了五个层次:

二、第一个层次:直接表达

如果你做的产品是体育类,下面这种方式,就和体育相关:

image.png

但是这种方式就是直接表达,你是篮球,就画个篮球,是网球就画个网球,是不需要思考的,只要把设计做到精致即可。

再比如下面这个:

image.png

你是唱歌,就用麦克风来表达,都是不需要思考的,直接表达即可!

三、第二个层次:勉强拼凑

接下来就需要有一点思考了,但是思考的不多,就是如何把图形放在你原有的设计中。

比如下面这个转化图标:

image.png

如果中间我们加入的飞机的标识,那就是知道,这是买飞机票的产品:

image.png

这时候主要考验的就是飞机的表达形式,你可以是正面的飞机,也可以是侧面的飞机。

image.png

还有下面唱吧这种:本来没有任何属性的空页面:

image.png

中间加上音符,音乐app的属性就有了:

image.png

四、第三个层次:巧妙结合

接下来就需要一定的思考了,比如行程这个图标:

image.png

这里面就将飞机和轮船结合到了一起,二者的组成结构,就是这个图标的门槛,而不是之前那种直接拼到一起或者贴上去。

再比如下面这个编辑任务图标,把正常的一个竖线变成树叶,也需要一定的思考和巧妙结合:

image.png

你也能够知道,这个图标是和环保或者健康相关的!

五、第四个层次:意境传达

这个层次主要是抽象的表达,需要有一定的创意内核,比如像飞猪这种旅游相关的:

image.png

空页面采用打开窗户,多去外面看看世界的创意,来进行行业属性关联!

这种就是意境抽象的表达方式!

六、第五个层次:动态加持

最后一种就是除了以上内容外,你还可以增加动态的部分,把现实中真实的动态进行加持,那创意效果就会更加显著!

比如像这种播放音乐时候的 cd 唱片机:

image.png

七、总结

运用行业属性增加设计亮点与独特性,一共分了5个层次,分别为:

  1. 第一层次:直接表达
  2. 第二层次:勉强拼凑
  3. 第三层次:巧妙结合
  4. 第四层次:意境传达
  5. 第五层次:动态加持

转载自优设网

 

 

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

 

image.png

超全面!写给UI设计师的滑块组件设计指南

之晨 设计资源

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

 

滑块 (Slider/滑动选择器) 这种随处可见的输入控件,其实藏着很多设计细节。滑块靠拖动游标就能实现调节数值,实时给出视觉反馈,不管是调音量、改亮度,还是设置参数范围,都少不了它的身影。

image.png

一、滑块构成

一个标准的滑块组件,核心包括四部分元素:

  1. 数值提示
  2. 已调节区域
  3. 调节游标
  4. 数值区间
  5. 未调节区域。

这几部分各司其职,组合在一起才能让用户用得顺手。

二、滑块类型

在Material Design的设计规范中,定义了四种常用的水平滑块,每一种都有自己的适用场景:连续滑块、离散滑块、居中滑块、范围选择滑块。

image.png1. 连续滑块

image.png

这种滑块最常见,游标能在轨道上自由滑动,停在任意位置都能对应一个精准数值,没有任何限制。比如我们平时调手机音量,用的就是典型的连续滑块。

2. 离散滑块

image.png

它和连续滑块最大的区别,就是拖动时游标会自动“卡点”到预设的区间刻度上。简单说就是不能选任意值,只能在固定的数值区间里切换,适合那些需要标准化参数的场景。

3. 居中滑块

image.png

这种滑块的初始值默认在轨道正中间,往左拖是减小数值甚至调到负数,往右拖则是增大数值。像一些需要双向调节的场景,比如色彩的冷暖调整、音频的音调调节,用它就很合适。

4. 范围选择滑块

image.png

有两个游标,分别用来设定数值范围的最小值和最大值。比如设置价格区间、筛选日期范围时,用这种滑块就能一次性搞定,不用反复输入。

三、滑块设计不踩坑

看似简单的滑块,想要做得好用,这几点一定要考虑到:

1. 效果实时反馈

image.png

滑块的调节是即时生效的,用户拖动的时候,得能一眼看到数值变化带来的直观效果。比如调亮度时,屏幕明暗要跟着游标移动同步变化,不然用户根本不知道自己调对了没。

2. 轨道逻辑清晰

image.png

轨道是用来显示数值范围的,需要分成“已调节轨道”和“未调节轨道”两部分。这里要注意语言阅读习惯:咱们常用的从左到右阅读模式下,数值得从左到右递增;如果是面向阿拉伯语这类从右到左阅读的用户,数值顺序就得反过来。

3. 限制刻度数量

image.png

滑块上的刻度是用来标记数值的,游标还会自动吸附到最近的刻度值上。但设计时千万别添加过多的刻度值,不然轨道上密密麻麻的,不仅看着乱,用户调节时也很难精准定位到想要的数值。

4. 控制数值显示

image.png

在设计范围选择滑块时,一次最好只显示一个关键数值——要么是当前选中的区间,要么是用户正在拖动的那个游标对应的数值,显示太多反而会让用户混淆。

5. 使用文本框

image.png

除了直接显示数值标签,还可以在滑块外面加个独立的文本输入框,并且让输入框的数值和滑块联动,用户既可以拖动调节,也能手动输入精准的数值。

image.png

另外,用图标或文字的形式代替刻度值,也是个提升界面颜值和易用性的好办法。

四、滑块设计

案例参考最后给大家分享几个有意思的滑块设计,平时做组件的时候可以参考:

1. 经典亮度滑块

image.png

典型的连续滑块,轨道比较细、游标是经典的圆形,左右两侧还配了亮度图标,不用看数值也能秒懂当前亮度档位。

2. 尺子形式滑块

image.png

这种滑块不是传统的样式,而是做成了尺子的形状。尺子上的刻度代替了传统的数值指示器,0.1的增量清晰可见,数值直观又有趣。

3. 情绪表达滑块

image.png

虽然也是滑块的形态,但它靠颜色来表达用户情绪。每个滑块单元都是离散设计,带有刻度区间,用户滑动选择时,能通过色彩快速对应自己的情绪状态。

4. 游标固定滑块

image.png

游标固定在轨道正中间,拖动时是轨道左右移动,选中的数值显示在右侧,用户一眼就能确认当前数值,这种交互方式很新颖。

5. 速度调节滑块

image.png

用五个刻度来划分速度区间,每个刻度上方都标注了具体数值。虽然刻度间的实际数值间隔不一样,但清晰的标注让用户能精准把控速度档位。最后滑块组件虽然看着简单,但要做到真正好用,需要将形式的新颖、交互的创新、元素的搭配等细节都考虑到,于细节处见精微。

 

转载自优设网

 

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

 

image.png

兰亭妙微ui设计公司:一文吃透 AI 设计全链路:工具大全 + 落地案例 + 自动化工作流(上)

清阳 设计资源

兰亭妙微UI设计公司:AI 设计真正的提效逻辑,不是堆砌多款工具,而是用 AI 打通完整交付链路:需求生成、视觉迭代、设计转代码、批量产出 PPT、标准化沉淀可复用工作流。
 
整套 AI 自动化设计体系由Agent+MCP+Skills三大核心模块串联成标准化设计生产线,完整落地链路包含 6 大关键要点:
  1. 按需匹配工具:图像生成、通用大模型、代码辅助工具各有适用边界,选对工具大幅减少返工;
  2. 重构全场景设计链路:品牌 VI、营销海报、电商视觉、APP / 网页 UI 等全品类设计均可 AI 快速起稿、多轮迭代;
  3. 提示词决定产出上限:需求目标、画面风格、尺寸规格、页面模块描述越具体,成品越贴合项目真实需求;
  4. 流程自动化运转:Agent 负责需求理解与任务调度,MCP 打通 Figma、代码编辑器等本地软件,Skills 执行细分标准化任务;
  5. 缩短交付周期:原始需求文档可一键转化页面、PPT、APP 界面,省去大量重复机械工作;
  6. 重塑设计师核心价值:AI 承接基础执行工作,设计师聚焦需求研判、创意方向把控、用户体验优化等高价值环节。
整套体系覆盖通用大模型、图像生成、代码编写、PPT 产出、网页 UI 全流程,实现「需求输入→AI 规划拆解→多工具协同执行→多终端交付→流程沉淀复用」闭环,核心工具包含 ChatGPT、Claude Code、Figma MCP、PPT Skill、Google Stitch。
 
下文将从主流 AI 设计工具盘点、五大类 AI 设计落地案例、三大自动化实战工作流三部分完整拆解,适配设计师日常各类项目场景。

一、主流 AI 工具全分类盘点

image.png

按使用场景分为AI 图像生成工具通用大模型两大板块,覆盖视觉创作、文档处理、代码开发全需求,国内外工具优势互补,按需选择即可。

(一)AI 图像生成工具(视觉设计核心)

  1. GPT Image 2(OpenAI)

    image.png

    当前综合效果顶尖的多模态图像生成模型,画面还原度、真实度极强,可生成实景人像、商业场景、社交截图等高度写实内容,图文一体交互便捷,综合适配平面、运营、UI 各类视觉创作。
  2. Nano Banana 2(Gemini)

    image.png

    GPT Image 2 上线前行业标杆级绘图模型,色彩表现力、创意渲染能力突出,曾掀起 AI 替代基础设计的行业讨论,依托 Google AI Plus 生态,擅长复杂创意画面、艺术风格创作。
  3. 即梦 AI(字节自研国产模型)

    image.png

    国内本土最优图像生成工具,适配中文语境与国内设计需求,每日提供免费创作积分,性价比突出;支持参考图复刻、2K 高清出图、自定义画面比例,无需复杂翻墙,国内设计师首选日常绘图工具。
  4. Midjourney

    image.png

    AI 绘画行业开创者,艺术氛围感、插画质感业内顶尖,依托 Discord 生态迭代多年,V5/V7 版本美术表现力拉满,更适合插画、艺术概念、高端质感视觉创作。

(二)通用 AI 大模型(需求拆解、文案、代码基底)

image.png

覆盖文档解析、文案撰写、逻辑梳理、代码开发、需求文档输出等办公全场景,四款主流工具各有核心优势:
  1. Claude

    image.png

    核心优势为超大上下文窗口,可一次性读取百万字长文档,擅长合同解析、长篇品牌文案、完整 PRD 撰写、严谨结构化文本输出;配套 Claude Code 可作为全流程 Agent 中枢,调度整套设计工作流。
  2. GPT 系列(OpenAI)

    image.png

    全球通用大模型标杆,综合能力均衡无短板,日常问答、营销文案、产品 PRD、代码编写、图文生成均可一站式完成,生态成熟,落地场景覆盖全行业。
  3. DeepSeek(深度求索)
     
    国产出海头部开源大模型,数学推理、代码生成能力强劲,支持商用私有化部署,个人免费使用门槛低,适合技术、设计开发协同场景。
  4. 豆包(字节自研)

    image.png

    深度适配中文使用习惯,对话自然流畅,职场文案、品牌策划、学习素材、新媒体内容创作上手零门槛,兼顾生活化与专业设计辅助需求。

二、五大类 AI 设计落地实战案例

将商业视觉设计划分为品牌 VI、运营宣传、电商视觉、B 端后台、企业官网五大核心类目,依托 AI 工具完成从品牌底层规范到线上页面落地全流程提效。

1. 品牌视觉 VI 设计

适用场景:新品牌全案搭建、品牌视觉升级
image.png

 

实操流程:上传品牌 LOGO 素材,AI 自动一键生成全套标准化 VI 系统,包含标准色 / 辅助色规范、字体层级体系、名片 / 包装 / 展架等物料延展、实物样机预览,一站式完成整套品牌识别方案,无需手动搭建规范文档。
 
示例指令参考:基于上传 LOGO,输出完整品牌 VI 手册,包含色彩规范、字体层级、线下宣传物料全套延展样机。

2. 运营宣传设计

 

适用场景:活动海报、公众号长图、短视频封面、节日营销物料

 

实操流程:输入品牌定位、产品信息、画面尺寸、风格关键词,AI 批量产出多版宣传画面,适配朋友圈、小红书、短视频多渠道裁切需求,快速迭代多套备选方案。
image.png
示例指令参考:创作新中式国风奶茶品牌宣传图,共四款单品海报 + 配料详情图,高级质感,画面比例 9:1。

3. 电商视觉设计

适用场景:商品主图、详情长图、大促首页、直通车创意图

image.png

实操流程:上传产品实拍原图,AI 自动渲染多场景产品效果图,同步提炼产品核心卖点、使用场景细节,批量生成整套详情页版式,大幅缩短新品上新设计周期。
 
示例指令参考:基于耳机实拍图,生成完整电商详情长图,提炼六大产品核心优势,统一简约科技产品调性。

4. B 端后台 UI 设计

image.png

适用场景:数据管理系统、SaaS 平台、AI 工具后台、企业管理平台
 
实操流程:输入产品业务定位、功能模块,AI 生成专业 B 端界面,包含数据看板、表单、弹窗、组件库整套规范,视觉克制专业,适配企业级系统使用场景。
 
示例指令参考:为 AI 工具 SaaS 平台设计整套官网与后台管理 UI 界面。

5. 企业官网视觉设计

image.png

适用场景:品牌官网、产品落地页、企业宣传站点
 
实操流程:上传产品 / 品牌素材,AI 自动识别品牌调性,匹配对应视觉风格,输出首页 Banner、栏目内页、落地页全套 UI 稿,兼顾视觉美观与前端落地适配。
 
示例指令参考:基于汽车实拍素材,打造高端商务汽车品牌官网全套视觉设计稿。
 

转载:优设

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

 

image.png

 

兰亭妙微ui设计公司:一文吃透 AI 设计全链路:工具大全 + 落地案例 + 自动化工作流(下)

清阳 设计资源

 

三、AI 自动化设计工作流:三大核心落地案例

整套 AI 自动化设计链路依托三大底层核心组件搭建,先理清基础概念,再看完整实战流程:
  1. Agent(Claude Code 智能体):全流程指挥中枢
     
    整套设计链路的大脑,负责接收原始需求、拆解细分任务、调度各类工具协同工作;
  2. MCP 跨平台协议:软硬件互通桥梁
     
    解决大模型无法直接操控 Figma、代码编辑器、Office 软件的痛点,实现 AI 与本地设计、开发工具双向数据互通;
  3. Skills 模块化插件:细分执行单元
     
    封装标准化功能包,由 Agent 统一调度,完成 PPT 生成、图文排版等标准化重复工作。

 

案例 1:企业官网一体化设计工作流(设计 + 代码同步)

image.png

整体效率提升 300%,缩短 2-3 天完整设计开发周期
  1. Agent 统筹需求:输入企业简介、业务板块,Claude 自动梳理官网栏目架构、首页宣传文案、各板块内容,完成全站文案定稿;
  2. MCP 双向联动:通过 Figma 专属 MCP 插件打通设计与代码,一边生成可编辑 Figma 视觉稿,一边同步输出可直接使用的 HTML 源码,设计修改实时同步前端页面;
  3. 实操步骤:
     
    ① 终端安装 Figma 插件:claude plugin install figma@claude-plugins-official
     
    ② 输入需求指令:制作极简科技风 AI Agent 企业官网
     
    ③ AI 自动完成方案构思,同步提供多版视觉方向供选择;
     
    ④ 输出完整带交互动效的 HTML 页面,包含按钮、表单、滚动动画;
     
    ⑤ 指令同步同步至 Figma:将该网页设计转化为可编辑 Figma 源文件,自动搭建自适应布局、分层可编辑图形组件。

案例 2:全自动 PPT 设计工作流

image.png

效率提升 200%,快速产出完整演示文稿
  1. Agent 拆解任务:向 Claude 输入 PPT 核心需求、主题风格;
  2. 挂载 PPT 专属 Skills 插件:npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
  3. 上传文本内容文档,输入指令:制作科技风行业演讲 PPT;
  4. AI 自动规划页面结构,生成带翻页动画、元素出场动效的演示页面;
  5. 支持直接导出标准 PPT 文件,页面元素均可二次手动修改调整。

案例 3:全套 APP UI 协同设计工作流(ChatGPT+Google Stitch)

image.png

实现从产品需求到视觉界面一站式产出
  1. ChatGPT 输出标准化 PRD:输入产品定位,自动生成完整产品需求文档,包含目标用户、核心功能、页面架构、交互逻辑、用户全流程路径;
     
    示例指令:设计一款健身爱好者专用 APP,输出完整 PRD,覆盖首页、训练计划、课程、饮食记录、数据统计、个人中心模块;
  2. Google Stitch 批量生成界面:上传完整 PRD 文档,指定主色调、视觉风格,AI 统一输出全套 APP 页面,保持色彩、图标、组件设计语言统一;
  3. 精细化迭代优化:单独选中画板、组件输入微调指令,一键修改配色、插画、页面布局,同步预览交互效果,快速迭代设计系统。

四、AI 设计提效核心总结

1. 高效落地两大关键

  • 工具精准匹配:跨设计开发协同场景用 MCP 协议打通本地软件;PPT、VI 等标准化单一场景直接调用内置 Skills 插件,减少多工具来回切换损耗;
  • 指令清晰完整:向 AI 下达需求时,明确项目目标、输出格式、尺寸、风格、页面模块、细节规范,降低 AI 理解偏差,减少反复修改返工。

2. AI 设计行业未来趋势

  1. 全链路无人自动化:从需求构思、视觉产出、前端代码生成到最终交付,AI 独立完成全流程调度;
  2. 个性化智能适配:AI 自动学习设计师个人风格、品牌固定视觉规范,生成内容贴合固有设计体系,减少后期调整;
  3. 跨场景数据互通协同:打通官网、PPT、APP 设计稿多类载体,数据资源互通,设计、产品、开发跨岗位高效协作。

五、后记

AI 从来不是取代设计师的替代品,而是帮从业者剥离重复、机械基础工作的创作利器。借助 Claude Code Agent 搭配 Figma MCP、PPT Skills 自动化链路,能够完美解决设计与开发脱节、手动操作低效、专业技能门槛高三大行业痛点。
 
未来,熟练掌握、合理搭配 AI 工具,将成为设计、产品、运营从业者必备核心竞争力。本文分享的工具清单、实操案例、自动化工作流可直接落地复用,助力各位设计师实现高效创作、低成本落地商业项目。
 

转载:优设

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

 

image.png

兰亭妙微UI设计公司:渐变色成标配?拆解谷歌图标设计改版

清阳 设计资源

哈喽,这里是兰亭妙微UI设计公司,今天分享的是「谷歌应用图标改版」。

最近不少设计师朋友打开Gmail的时候,是不是总觉得哪里怪怪的?甚至有不少人吐槽,翻了半天都找不到自己天天用的谷歌应用了。

这是因为谷歌刚刚对Gmail、文档、云端硬盘等10多款核心Workspace应用的图标,进行了一次全面的大改版。


image.png

作为产品“脸面”的图标集体换新,自然引来了用户和行业的两极评价。有人觉得新图标颜值更高,不同应用之间终于能一眼分清了;但也有批评声认为,这次改版丢掉了谷歌品牌独有的凝聚力和辨识度,更像是为了变而变,没有清晰的战略方向。



我觉得这次改版,其实是谷歌对“品牌一致性”和“可用性”长期矛盾的一次深刻反思,同时也藏着AI时代谷歌全新的品牌战略。

一起来看看新图标到底长什么样?谷歌这次的设计又藏着哪些小心思~


01 渐变色全面登场

四色原则曾是谷歌自2015年Material Design以来的强制规范,要求所有官方应用图标都需要包含品牌标志性的蓝 (#4285F4)、红 (#EA4335)、黄 (#FBBC05)、绿 (#34A853),以强化统一品牌识别。

image.png

这次改版最直观的变化,就是谷歌坚持了多年的标志性“四色原则”被彻底抛弃,每一款应用都拥有了自己专属的主色调。这也是绝大多数用户认为可用性得到显著提升的核心原因。

image.png

之前的Workspace图标全都用同一套四色调色板,导致大家根本分不清谁是谁。而现在,Gmail有了专属的红色,谷歌日历回归经典蓝色,谷歌Meet则用上了明亮的黄色,每款产品终于找回了自己的个性。


image.png

在造型上,图标外围包裹的白色“背景容器”也全部被移除了。原来的白色背景容器限制了核心符号的尺寸,让所有图标都长得千篇一律。去掉容器之后,每个图标都得到了舒展,形成了更清晰的轮廓,不再是同一个框里的小元素,而是一个个独立可识别的视觉符号。


这次改版另一个贯穿始终的设计语言,就是渐变色的全面应用。所有新图标都采用了各自独特的渐变配色,这是谷歌为AI时代量身打造的视觉战略。例如下图就是重新设计的谷歌Gmail渐变图标效果。


image.png

也许谷歌正是通过这种分层渐变的视觉效果,向外界传递一个强烈的品牌信号:谷歌已经正式进入Gemini时代!

02 解决图标辨识度问题


那么谷歌为什么要在这个时间点,进行如此大规模的图标改版?核心原因是旧设计的可用性已经走到了瓶颈期——简单来说,就是用户根本分不清哪个图标对应哪个应用服务。

 

这次改版的核心背景,正是谷歌过去为了强行统一图标设计,导致不同应用之间难以区分。过去谷歌为了追求品牌美学,不惜牺牲可读性的做法一直饱受诟病,这次的更新可以说是一次迟来的、但绝对必要的可用性升级。


image.png

谷歌也在官方公告中明确表示:希望在保持整个产品家族一致性和凝聚力的同时,确保每一款独立应用在屏幕上都能保持现代感,并且被用户清晰、快速地识别。

这也说明提升视觉辨识度是这次改版的重点。


03 品牌一致性让位于可用性

谷歌这次的图标改版,也许给整个设计行业都上了一课:任何时候,可用性都应该优先于品牌一致性。

image.png

谷歌过去几年过于执着于“一致性”,结果反而导致用户无法区分不同的应用服务。“让产品看起来像一个系列”和“让所有产品长得一模一样”是完全两回事,在设计过程中我们也要避免这个认知误区。

这次改版也让我们重新思考了图标的本质和核心价值。图标本质上是导航工具,它的任务是让用户在大脑过载、同时开着20个标签页的情况下,也能下意识地立刻找到它。

所以哪怕新版图标在视觉和谐度差了一点,但只要它能解决问题,那它就是一个优秀的设计!

 

转载:微信公众号Clip设计夹

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

 

image.png

 

兰亭妙微ui设计公司:通俗易懂讲清楚,AI生成UI的应用逻辑!

清阳 设计资源

今天的主题是关于 AI 扫盲的,因为近期相关问题实在太多了,很多同学对它的理解非常的有限,导致走向不是过于吹捧就是完全抵制的两极分化。为了防止我们成为盲目(且天真)的二极管,就有必要具体认识 AI 的应用逻辑,以及在行业中的相关使用场景。

兰亭妙微UI设计公司:分享是入门扫盲,目标是以清晰简洁的方式来概述 AI 的行业应用框架,会使用尽量简单易懂的方式解释相关概念,不会涉及太多深奥的术语和理论。

所以不用担心看不懂,一起开始下面的阅读吧。

 

image.png

二、AI 的大模型认识

谈论 AI 就绕不开大模型,它是 AI 技术应用的核心。

简单解释 AI 大模型,就是一个通过特定方法和大量数据训练出来的 “自主化程序”,这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。

传统程序虽然也可以执行用户的指令,但回复的内容和方式不会超出一开始预设的范围,非常有限。

而 AI 大模型则大大拓展了这个边界,我们不用提前预设各种条件和逻辑,它就会自己去理解问题再决定给出什么结果。

当然,这个边界只是放大了但不是无限的。任何大模型都不是全知全能的,都有自己的局限性。所以针对不同的应用领域,就开发了不同的模型类型。

最基础的模型分类包含两种,一种是大语言模型 LLM,能实现文字的对话或文案、代码、数据的整理和输出。另一种则是多模态大模型,能在处理文字的基础上还处理图片、音频、视频等特殊对象。

比如深度求索开发的 DeepSeek 模型就是大语言模型,只能处理文字但不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型,可以生成图片和视频等内容。

image.png

 

不同模型会有不同的表现和优劣,但因为大模型的开发需要尖端的技术和庞大的规模(训练),门槛极高,所以市面上主流的大模型数量并不多,可以简单分为国内和国外两个阵营。

国外的主流大模型包括 OpenAi 开发的 ChatGPT,Google 开发的 Gemini,Anthropic 开发的 Claude,xAI 的 Grok 等。

image.png

 

国内的主流大模型则包括字节开发的豆包,阿里开发的千问 Qwen,深度求索开发的 Deepseek,月之暗面开发的 Kimi 等。

image.png

 

因为前面说过大模型的局限性,所以为了应对不同的应用场景,团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型,还有 Omni 全模态(文字、图片、音频、视频)大模型,针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。

完整的大模型体积和参数都非常庞大,需要部署到专属的算力中心,并通过云服务来实现用户的访问和使用。也就是需要联网使用,但因为国内网络服务的限制(不可抗力),我们无法通过国内电信访问国外的主流大模型。

虽然说国内大模型的水平在这几年突飞猛进,但离国外的大模型还有一定的差距,在实际工作场景中多数应用的也是国外大模型,所以访问它们就需要大家自己发挥主观能动性解决了。

顺便再解释一个基础的问题,大模型除了远程访问以外,也可以在本地进行安装。部分团队(如千问)会在网上开源自己的大模型供其它人下载和使用,当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高(旗舰显卡起步),所以本地运行的效果要大打折扣。

而一些企业内部或行业专属的大模型,往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件(如手机、眼镜)和特殊应用场景开发的小模型,就暂时不在我们的讨论范围之内。

三、AI 相关工具的认识

前面讲过大模型可以类比成一种 “程序”,且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果,就需要应用前端的工具来实现。

image.png

 

比如我们打开豆包的官网,就可以使用这个网页对豆包大模型提出问题和要求,然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具,而这只是 AI 工具的其中一种形式,还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。

image.png

 

我们大多数人开始接触 AI 大模型,都是从这些官方的工具开始,它们最基本的功能就是根据指令返回文字或图片信息,我们会把它们当成是一种可以对话的人工智能客服。

但实际上它们可以发挥的作用远不止于此,比如帮你整理本地的文件夹清理重复的文件,帮你自动修图并完成动态相片的剪辑,帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能,就需要借助特定的工具才能实现。

所以除了最基础的对话工具外,行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。

到这里我们就要清楚,AI 大模型是大模型,工具是工具,大模型是基座,而工具是大模型的具体表现和应用形式。

我们更进一步认识 AI 工具,就可以把AI工具分成官方工具和第三方工具两个种类。

官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品,而第三方工具则是其它团队开发,再接入到大模型进行使用的工具。

比如本地聊天机器人 Cherry Studio,它本身只是个简单的聊天对话工具,可以自己创建对话角色/助手,但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror,只有接入大模型以后,它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw,也只是个本地工具,需要接入大模型后才能识别本地的文件和执行命令。

image.png

 

官方能提供的 AI 工具与服务往往很有限,所以在真实项目流程中,我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 Figma以外,还要结合使用 Adobe PS、AI、C4D、AE 等软件。

而第三方工具和官方不同的是,官方工具默认连接自家的大模型,用户直接登录就能使用。而第三方工具要接入大模型,就需要进行额外的配置,也就是添加大模型的 —— API

API 就是接口,是前端工具连接后端服务器的通道,而这个通道默认是上锁的,还需要提供对应的密钥(API Key)才能正常访问。

部分工具会自己接入各大模型的 API,用户只能选择它提供的模型,并只需要对这个工具进行付费即可。

image.png

 

另一部分工具则需要用户自己选择模型和配置 API,需要我们访问大模型的 API 开放平台进行申请,然后再将它们生成的 API Key 填入到工具中完成连接。

image.png

 

API Key 就像是一个电话号码,当我们申请完并进行使用,就会产生一定的 “流量”,而 AI 产生的流量用专业术语形容叫词元 Token

使用 API 完成的任意 AI 服务,都会消耗 Token,且因为 AI 的计算成本极高,所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样,既有包月服务附带一部分流量,超出部分还要按量计费。

image.png

 

在实际的 AI 工具使用过程中,Token 的消耗是极其巨大的,往往会造成沉重的成本,而这个市场也遵循一分钱一分货的真理,越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例, 一个程序员高频使用消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发,来搭配不同的模型进行使用。

总结我们应用 AI 的本质,就是通过工具来操作大模型。而工具的作用不同,大模型本身的特性和价格也不同,就导致我们在面对一个复杂的任务时,需要选择多种 AI 工具和不同大模型来实现。

学习使用 AI,和传统的单一软件教学不同,不是只学会某个工具的功能和操作方法,而是了解不同的 AI 工具以及大模型的特性,通过组合它们来实现自己目标的方式。这不是设计或产品思维,而是工程思维的具体应用。

四、结尾

时间关系只更新了上半部分,和 UI 有关的内容我会放到下篇再输出。同时我们现在有准备录制一套入门的课程,应该周末到下周就会上线,大家有什么疑问和工作中遇到的需求都可以在评论区或社群里发给我们。

 

转载:优设酸梅干超人

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

 

image.png

兰亭妙微UI设计公司:一个按钮可能定义下一代AI交互入口

清阳 设计资源

当AI战争在手机屏幕上如火如荼,一个更隐秘的战场正在方向盘后悄然成型。本文揭示了通勤场景中被忽视的认知红利——每天流失的碎片化思考如何通过一个简单的物理按钮转化为结构化资产,并深入解析字节跳动为何是最适合打造'车载语音工作台'的玩家。从交互范式革命到商业价值重构,这是一场关于AI如何真正融入物理世界的深度思考。

五一后的那个周末,我花了整整两天在研究一件事:怎么把豆包搞到 CarPlay 上。

起因很简单。我的 iPhone 刚升级到 iOS 26.5,这个版本对 CarPlay 的开放度明显提高了——ChatGPT 已经可以像一个原生 App 一样常驻在 CarPlay 界面上,方向盘语音键直接唤起,对话直接在中控屏上滚动。体验很流畅。

我的第一反应是:豆包行不行?

于是开始了各种折腾。查设置、找插件、搜教程。两天下来,结论很明确:不行。豆包在 CarPlay 上暂时无法完美适配,短时间内也不知道具体的适配规划。

但正是在这次折腾的过程中,我脑子里冒出来的,不是一个”功能缺失”的遗憾,而是一个更大的问题:就算豆包上了 CarPlay,又能怎样?

你想想看。开车的时候,我需要的真的是在屏幕上跟 AI 聊天吗?我需要在方向盘切歌和导航之间,再多一个”点击屏幕上的对话框”的动作吗?

当然不是。

我在车上真正需要的东西,比这原始得多:我希望有一个”容器”,能在我开车的 30 分钟里,把我脑子里正在流淌的那些东西——对昨天评审会的复盘、一个突然想通的产品逻辑、待会到公司要跟研发说的三件事——安全地、无摩擦地接住。

不需要屏幕,不需要打字,不需要任何视觉确认。

按一下,开始说。再按一下,结束。到停车场,一份整理好的文档已经在手机里了。

当前的 AI 战争,几乎都打在屏幕上。

字节的豆包、阿里的通义、腾讯的元宝、月之暗面的 Kimi——这些超级应用和 AI 助手,正在手机桌面和电脑任务栏里贴身肉搏。所有人都在追问同一个问题:用户什么时候打开我?每天开几次?

这是典型的 App 思维。它的假设是:交互必须发生在屏幕上,价值必须通过一个”超级入口”来捕获。

但我想提出一个反直觉的判断:最有价值的 AI 交互,多数可能恰恰发生在你根本看不到屏幕的时候。

证据就在你每天的方向盘后面。

汽车,尤其是私家车,是全世界最昂贵的”注意力占用空间”。对于知识工作者——产品经理、销售、创业者、咨询顾问——通勤的 30 到 60 分钟,是大脑高度活跃但眼睛和手被强制离线的”真空时间”——你在这段时间里复盘昨天的会议,推演接下来的提案,或者突然想通了某个产品逻辑。

但问题随之而来:这些高质量的思想,此刻正以最原始的形态在你的大脑里流淌,却没有一个”容器”可以接住它。你无法打字,不敢看屏幕,传统车机语音助手只会回答”今天天气怎么样”或者”导航去公司”。

于是,一个隐秘的认知红利被所有人忽视:通勤路上的碎片化思考,其实是知识工作者尚未被编码的”脑力资产”。它是一种每天流失、从未被结构化的信息原油。

谁能捕获它,谁就凭空创造了一块新的信息增量。 更重要的是,这背后藏着一个交互范式的转移机遇——这个机遇,至今未被任何一个大厂真正抓住。

这个机遇,可能长成一个”按钮”。

别急着觉得它简陋。在车载场景里,按钮恰恰是最被低估的交互形态。

过去十年,车机行业一直在做加法:屏幕越来越大,语音唤醒词越来越花哨,菜单层级越来越深。但一个核心问题始终没解决:驾驶时最可靠的交互,不是语音唤醒词,也不是复杂触屏,而是一个可以盲操作、有触觉反馈、动作路径极短、不需要视觉确认的实体按键。

我们用一个真实场景来推演。

你刚见完客户,坐上驾驶位,发动引擎。趁记忆还滚烫,你按了一下方向盘旁边的实体 AI 按钮,说:“豆包,记录一下刚才拜访 XX 客户的情况。客户主要关心三个问题:价格、交付周期和售后。他们现在用竞品 A,但对稳定性不满意……”

AI 只做了极轻的回应:“收到。到公司后帮你整理成纪要。”

到停车场,你熄火下车。手机推送来了:一份结构完整的客户拜访纪要,包含客户背景、核心异议、商机阶段、下一步跟进话术,甚至一封写好的回访邮件草稿。

整个过程中,你没看过一眼屏幕,没打过一个字。

这就是”按钮”交互模型的魅力。它不是把 AI 助手搬进车机,而是创造了一个全新的交互范式:按下即工作,松开即结束;思考在驾驶中完成,结果在停车后交付。

这背后是一套完全不同于传统语音助手的交互逻辑。传统车载语音是”命令-响应”式的:你说“打开空调”,它执行一个动作。而这个 AI 按钮是“会话-沉淀”式的:你陷入一段思考,它持续收音、理解、追问、整理,最后生成一份可交付的结构化资产。

换句话说,它不是帮你“控车”的工具,而是一个车内的语音工作台。

有人可能会问:为什么这个按钮不能只是 App 里的一个“车载模式”?为什么必须是硬件?

这个问题问得很好。答案在于:驾驶场景里,信任和确定性比功能更重要。

现有的语音助手都有一个盲点——你永远不确定它“什么时候在听”。唤醒词也好,屏幕点击也好,都有摩擦和误判:你喊了没反应,或者没喊它却亮了。这种不确定性在办公场景尚可容忍,但在驾驶场景是致命的。它会消耗驾驶员的注意力,更会制造一种“被持续监听”的心理不适。

实体按钮解决的就是这个问题。

当你的手指触到那个按钮的瞬间,一种清晰的心理契约就建立了:“我现在开始工作了,我的想法正在被记录。”松开,契约终止。它不是在全天候收集你的数据,而是在响应你的工作意图。

这一点在隐私层面极为重要。车内对话可能包含客户信息、商业机密、个人隐私。一个明确的物理开关动作,比任何隐私条款都更能建立信任——你清楚地知道“我刚才说了什么被记录了”,而不是“它刚才是不是听到了什么”。

这也是为什么我认为:敢在交互上“做减法”的硬件,反而可能成为 AI 时代最重要的入口。

如果只是讲一个车载硬件的产品故事,那这篇文章到此就可以结束了。但真正让我兴奋的,不是这个产品本身存不存在,而是放眼望去,有一家公司几乎已经凑齐了做这件事的所有拼图。

这家公司叫字节跳动。

让我们做一个推演。如果你现在要启动“车载 AI 按钮”这个项目,你需要什么?

第一,你需要一个能解决复杂声学环境下定向收音的硬件能力。 车里不是安静的办公室——它有胎噪、风噪、空调声、音乐声、导航播报、乘客说话。你需要麦克风阵列、降噪算法、主驾声源区分能力。这些不是软件能解决的。

字节在 2026 年 4 月和影石 Insta360 做了一件事:TRAE SOLO 上线语音输入功能,同时推出了一个联名套装,搭配 Insta360 Mic Air 麦克风。官方宣传是“Voice Working 硬件”,主打办公场景,让用户通过语音输入快速让 AI 主导任务。

Insta360 有什么?消费级音频硬件设计能力、复杂环境降噪经验、小型化和低功耗能力、对户外和移动场景的深度理解。这些东西,正好是车载场景最需要的。

第二,你需要一个能把语音流变成结构化工作流的 AI Agent 能力。 用户口述的是一段乱糟糟的口语,输出的必须是一份会议纪要、一个 PRD 草稿、一条 CRM 跟进记录。这需要多轮对话理解、意图识别、模板匹配、长上下文管理。

TRAE 在做的事情——AI Coding、Vibe Coding、从自然语言到结构化输出的 Agent 工作流——恰好就是这块能力。它的底层逻辑就是让用户说”我想要什么”,AI 负责拆解、推理、生成可用的交付物。这件事从代码领域外溢到通用办公领域,几乎是一条直线。

第三,你需要一个 C 端用户愿意张嘴说话的 AI 品牌。 产品经理和销售不需要知道 TRAE是什么,但他们大概率听说过豆包。豆包目前的品牌心智是“能聊天、能问答的 AI 助手”,从聊天到“帮我整理会议纪要”,再到“开车时我说你记”,迁移路径非常顺滑。

第四,你需要 B 端的云基础设施和行业解决方案。 ASR、TTS、RTC、大模型 API、数据安全、企业知识库、飞书/CRM/邮箱的接口打通——这些是火山引擎的阵地。

把这几块拼在一起:Insta360 做物理收音入口,TRAE 沉淀 Agent 工作流能力,豆包做 C 端交互品牌,火山引擎做 B 端技术底座和车企渠道。

一套完整的”移动语音 Agent 工作流”闭环,每一块都有现成的积木。

这不是我幻想出来的路径,而是从他们已有动作中自然浮现的战略延伸。如果字节内部有人能看到这几块资源之间的引力,这个产品不需要从零开始——它只需要把已经散落在各处的拼图对起来。

那么,第一枪应该从哪里打响?

我给出的判断可能和很多人不一样:不是“驾驶中和 AI 长聊”,而是”路上复盘”。

“开车时和 AI 深度辩论 30 分钟”听起来很酷,但它有两个致命伤:一是安全风险,长时间沉浸在复杂对话中必然分散驾驶注意力;二是用户习惯——大多数人在驾驶时并没有那么强的“讨论欲”,但复盘欲、记录欲,每个人都有。

销售刚见完客户,上车。产品经理刚开完评审会,上路。咨询顾问做完客户访谈,返程。此刻他们的脑子里装满了滚烫的信息,这些信息如果不立刻记录下来,几小时内就会衰减、变形、甚至消失。

认知心理学有一个概念叫“短时记忆的脆弱窗口”——人脑的临时记忆在没有复述和编码的情况下,15 到 30 分钟内就会显著衰退。对于知识工作者来说,这意味着每次通勤的前 15 分钟,是一天中信息密度最高、也最容易被浪费的时间。

这个场景下,他们不需要 AI 和他们深度辩论,只需要一个不会丢东西的“容器”。

按一下按钮,花 3 分钟口述,AI 自动分类、整理、结构化,停车后一份文档生成完毕。

这才是真正的刚需。 它的价值不是“让驾驶更有趣”,而是把人类最短的短时记忆,无损转化为可检索、可复用、可协作的结构化资产。

这也是为什么我认为这个产品的第一批用户,不是“所有车主”,而是高频知识工作者:产品经理、销售、创业者、咨询顾问、律师、投资人、管理者。这群人在驾驶时有大量的“想法流”,但今天这些想法很大一部分流进了黑洞。

谁先堵上这个黑洞,谁就创造了一个新的信息增量。 而这个增量,正是飞书、CRM、知识库这些企业系统最渴望的“元数据”——未经过滤、未经组织、最接近真实认知的第一手输入。

当然,任何产品构想最终都要面对“落地”的问题。

我的判断是,五步走,而不是一步到位。

第一步:桌面语音工作流。 就是 TRAE + Insta360 现在在做的事。先验证用户愿不愿意对 AI 说正经事,专用麦克风体验是否显著优于手机收音,语音输入能否真正提升 AI Agent 的任务完成质量。

第二步:手机 App 移动办公。 豆包或相关 App 支持外接麦克风,实现长语音连续记录、一键总结、多种模板输出(产品方案、销售纪要、日报、会议复盘)。这一步不需要和车厂发生任何关系,只需要手机 + 蓝牙 + 麦克风。但这一步已经可以验证“移动语音工作流”的核心价值。

第三步:驾驶模式。 App 内推出一个极简的“通勤模式”——大按钮、少视觉元素、简明语音确认、不长篇播报、驾驶结束后推送摘要和文档。这一步依然不依赖车机,但开始真正切入车载场景。

第四步:独立车载硬件。 如果前三步验证通过,独立硬件就会出现:方向盘附近的实体按钮、主驾定向麦克风、车载供电、蓝牙连接手机、一键唤醒、停车同步。这才是最接近“车载 AI 按钮”的完整形态。

第五步:车厂前装合作。 车机原生的方向盘 AI 键、座舱麦克风阵列、车机账号打通、企业系统同步。这是终局,也是壁垒。

我认为,这件事不会一步到位,但它大概率会发生。因为它满足了一个新技术范式落地的所有必要条件:有明确的高频场景、有清晰的用户价值、有现成的技术拼图、有合理的落地路径。

最后,回到标题。

“杀死 App”当然是一个夸张的修辞。App 不会被杀死,就像网站没有被 App 杀死一样。但交互的重心,正在从“屏幕里的那个方框”向“物理世界的各种锚点”转移。

当我们看到一个产品经理在车里按下按钮、口述了一个 PRD 草稿,到公司打开飞书文档直接编辑;当我们看到一个销售在返程路上复盘完客户拜访,CRM 里已经多了一条跟进记录——在这些时刻,“打开 App”这个动作本身被消灭了。

交互的起点,从屏幕上的一个图标,变成了物理空间中的一个按钮、一句话、一次触碰。

而能定义这个按钮的人,定义的不只是一个硬件,而是下一代 AI 交互的接入范式。

现在回到那个假期后的周末,当我折腾了两天 CarPlay,终于意识到豆包上不上 CarPlay 根本不重要的时候,我脑子里想的其实是另一件事:

最重要的战场,可能根本不在那个屏幕上。

它在每一个手脚被占用、大脑却高速运转的时刻。在驾驶座,在厨房,在跑步机,在流水线。在每一个你“想和大模型互动但却腾不出手”的瞬间。

谁先在这一刻按下一个按钮,谁就拿下了通向物理世界 AI 交互的入场券。

而在我看来,最接近这张入场券的玩家,车牌号已经能看清楚了。

 

 

转载:人人都是产品经理

 

 

 

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

 

image.png

日历

链接

个人资料

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

存档