首页

2026年AI设计工具大比拼,UI设计师工作流这样搭才高效!

鹤鹤 行业趋势

2026年,AI大模型不断下场做UI设计,Stitch、Claude Design……它们都在尝试融入产品设计流程,甚至想直接生成可用的UI原型或代码。
这也体现出AI设计工具的两个不同走向:
一是基于大模型延伸的AI生成UI
,擅长快速理解文本和图片信息,输出可用界面和代码;
二是专业的AI设计平台
,在协作、规范和可落地性上更有优势。对于设计师来说,理解这两者差异是规划日常工作流的关键。

兰亭妙微ui设计公司分享:人人都在抄的设计趋势,正在杀死你的转化率

清阳 行业趋势

兰亭妙微ui设计公司分享:落地页把主视觉做成带漏光的 blob 图很美,意义为零。这篇把同一个主视觉做了十版,标出抽象度与相关度坐标图,并给出网站沟通的四步路径:先讲清用户真实问题,再亮方案,避免美学可用性效应被滥用成认知过载。

主视觉正在悄悄杀死你的产品,而且这锅 AI 背得挺冤——这是一次清醒的设计决策,杀的是你自己的业务。

公司花几个月(运气差是几周)磨出产品,转头往首页搁一个带漏光的斑块(blob)。图很美,意义为零。

问题是,落地页全都在这么干,你也不甘落后地试一把。羊群心态加一点 FOMO,人人捧着同一份「落地页模板」不假思索地照抄。

于是落地页创意方向陷入自我强化的死循环——直到临界点。因为这场抽象执迷,对业务是真的非常不利。

销量往下掉,原因很简单:你最能说服人的位置(首屏 hero 区),传达信息的能力彻底拉胯。

第一印象

访客决定买不买,只给你两秒。

美学可用性效应(Aesthetic-Usability Effect)是真的,但当所有人都在玩抽象,它只贡献认知过载。用户关掉标签页,此生不复相见。

所以我造了个假产品,把同一个主视觉做了十版——从完全不知所云,到真正接住卖点。

所有方案都会标进一张「抽象度 × 相关度」坐标图。注意:赢,不一定要待在右上角。

这里面有反直觉的发现——比如抽象什么时候反而能帮你。这事不等于「躲开抽象」,我们也不想让全网一夜变成超写实图库。

缺的那块拼图,叫相关度。

好的网站沟通,基本就是四步。一条推着用户往「行动」走的路径。

从终端用户(客户)真有的清晰问题出发。然后亮方案——但方案不能靠「某个神奇算法」撑着,得扎根现实。

意思是:至少大致讲清它是怎么运作的(HOW)。结尾还得有明确利益点 + 低摩擦的行动钩子(比如免费快速试用)。

理论就位,来给「hushy」做个落地页实操。

落地页第一印象

西方世界两种经典落地页结构:左对齐和居中对齐。核心差异在文案的分量。

居中版一般配更小、更靠下的视觉,把宝押在更强、更有冲击力的文字上。

左对齐版把文案挪到一侧,右侧留白给主视觉。左侧怎么优化之前聊过,这里快速过一遍。

fig-4

为什么非要搭个骨架?因为我后面「模糊度、无关度逐级递进」的示例,都得靠一个我亲手造的假产品来演。

注意:不是每个网站都要凑齐所有元素。有的只靠 H1 大标题 + CTA 按钮就够用。另外生成式 AI 有个癖好——不管冗不冗余,逮着落地页就塞引题(kicker)。

那就开干:给一个虚构的通知过滤服务「Hushy」「设计」落地页。

反面案例

上面这张图,我给你标好了一个反面教材。开场是一个空洞到没朋友的引题——敢自称「金牌标准」,多半是站主自己封的,顺手发了枚参与奖。

再看「Take control of your notifications(掌控你的通知)」,看着挺行动导向?问题它既没点问题、也没给方案,反而把活儿甩你头上。它没说「我们替你扛」,它在说「你自己看着办」。

翻译一下:用户要多干活。

然后是一眼假的 AI 胡扯的典型描述。看着聪明体面,内里空空如也。没有含义,没有「关你什么事」的解释,行云流水地劝人彻底躺平。

最后压轴的 CTA:「Get started(开始使用)」——又一次暗示:请你亲自开始。

这套首屏文案很差,但说实话,能写成这样你已经领先同行几个身位了。这很悲哀。

为什么?因为如今多数「设计师」是从主视觉倒推的。先随手生成个斑块、漏光、漂亮图,再把文案往图上裹——哪里断行好看断哪里,仪式感拉满。

fig-6

结果就是图和文案彻底失联。不互相成就,只互相抢戏,大脑拼命找关联、找不到,认知负荷蹭蹭涨,用户就会点击离开。

从一个糟糕的(抽象且无关的)视觉 + 一段糟糕的文案出发,你手里没有任何一张牌能换来用户的信任。

两秒后,永久流失。

更好的选择

先说明:一次真正的文案重做(比如我们在 Squareblack 的做法)可不是这种 5 分钟快闪。要客户调研、多轮迭代、上线后持续测试。

我现在展示的这版,比上一版好,足够当讨论主视觉问题的起点。

快速过一遍标注。

  • 引题是干社会证明的:真实数字永远比凑整数字好使——大家默认凑整的是编的。有 Trustpilot 或 Google 评论链接也可以直接挂。
  • 主标题可以直给利益,也可以像这版:先摆问题(普通人每天被通知轰炸,大半没用),再吊好奇心——凭什么是这五条。
  • 描述一句话讲清机制:智能过滤。
  • CTA 摩擦力拉到最低:现在就能开始、不用付费。不喜欢随时走,零承诺。让人上手,这是最优解。

再补一个大脑彩蛋:人脑爱模式。文案里 17308、636、5 三个数字递减出现,逻辑链条大脑自动脑补完成。

成千上万的人,几百条通知,最后只剩个位数。

这套打法叫数字驱动,同族还有利益驱动、恐惧驱动、声望驱动……它们大多叫情绪触发器,我的 Blueprint 方法里有全套拆解。

情节深入

前面说了,线上主视觉的两大原罪:抽象和无关。那就画张图:抽象度横轴,相关度纵轴。

两者强相关,你可能以为右上角就是终极答案——我会告诉你,未必。

现实是:大多数落地页挤在左下角,另一小撮在右下角。

主视觉相关度,历史新低。设计师们连「我为什么这么画」都讲不圆了——客户信任掉了,设计师的收入天花板也跟着掉。一地鸡毛。

我的目标:把这 10 个示例排成两条泳道——一条更抽象、一条更写实,从底部(低相关)一路向上爬。

fig-11

第 1 级,相关度最低

我们先从抽象的选项开始。你可能已经见过无数次了。发光的斑点现在非常流行,因为它们很容易生成,毫不费力。

这套用法,全押在美学可用性效应上。

美学可用性效应:看着好看的东西,会被默认为「更好用」。

残酷的是,很多客户已经把它和「好设计」画了等号——至少在看到零销量之前。等到那时候,往往已经晚了。

请跟我重复:设计因过于单一而失败。

fig-12

画面跟通知零关联:一个中心细胞核 + 周围一圈细胞,或者熔岩灯微斑块。往好了说像医疗插画,实际上空洞且无关。

这里完全没有提到安心,甚至连过滤都做不到。这几乎立刻就导致我们的大脑试图寻找那种联系,结果反而不堪重负。

这是一个非常糟糕的设计选择。这个网站如果没有图片会更好。

fig-13

第二个例子虽然直白,但仍然毫无关联。我们知道这幅图描绘的是什么。图中是一个人望着前方的路,很可能是前往山中的那个小镇。

这与通知、过滤、数字产品有何关联?

并非如此。这同样无关紧要,而且在这种情况下,我们的大脑实际上需要比处理纯粹的物质更费力一些。

自从人工智能生成图像出现以来,这类图像就非常流行。不过,它们并不总是动漫风格,很多时候是各种风景画,有时是未来主义的、赛博朋克风格的,有时则像Windows XP壁纸那样宁静祥和。

所有这些插图对信息的传达都毫无贡献,再次证明,如果网站上完全没有插图,效果会更好。

fig-14

第 2 级,相关度略高

第 2 级是另一个流量密码:效果主义(Effectionism)——营造「费了大力气」的观感,相关度却依然垫底。

尤其等距(isometric)图,低功夫实锤,还实打实地伤销售。

让我们直接来看一个抽象的例子。

fig-15

这版比斑块略强,但依然很抽象:一组泡泡。你可以想象它们 3D 漂浮、跟随鼠标跳舞。

很多场景下,这足够镇住客户、收割社媒点赞——但依旧没什么实质。

它确实展示了「一堆元素」,跟 636 这个数字八竿子打得着一点。但肉眼可见:没那么多。

而且,画面里没有任何东西在被过滤。它们只是存在,配个炫酷动画。大脑又一次试图连点成线,结果一片空白。图挺美,零关联、零实质。

fig-16

等距视图。没有什么比一屏伪 3D 等距网格更能喊出「哇,工作量好大」。再调成双色方案(灰阶打底 + 一色高亮),很多人直接脑补出「高级」二字。

AI 图时代它彻底爆红,也是「让客户觉得这钱花得值」的经典技巧。

但等距连接图的问题是:它们几乎从来不承载任何真实含义。主视觉里尤其如此。

页面下方,一个框加一个箭头指另一个框,也能说清「两层在通信」——这种场合我虽然更想选利益驱动的画法,但勉强能接受。

首屏不行。首屏的等距图只是意义的幻觉,跟文案里塞 seamlessly、streamlined 是一路货:低相关、低功夫,伪装成高功夫。

这就是我说的不诚实设计。

大脑基本直接无视这类图——互联复杂度超出处理带宽。这意味着什么?

没人看得懂你的等距视觉。包括你自己。

fig-17

第 3 级,有点相关

开始进入真正「相关且可理解」的地带。这两例里,大脑要处理的东西都少了一些。

遗憾的是:分析近 4000 个网站后,这就是全网平均「最高」相关度——正好卡在光谱正中间。而这不该是终点。

这个比喻虽然抽象,清楚多了:一个中心点(假设是「我」),无数碎片四面八方袭来,气泡像保护层一样挡住进攻。

目前为止挺好——但这个场景里,通知通过数是零。卖点承诺的是「留五条」,视觉和文案之间裂出一道逻辑鸿沟。

fig-19

现在来到更相关、更写实的位置:一部手机,通知多到溢出。数量管够,字面呼应 636。

但还是没展示过滤。它只呈现了问题(收件箱爆仓),算半个相关。

都说一图胜千言。这张图浪费了五百字——问题有了,方案没有,利益点更没有。

比完全暧昧的图强,但潜力肉眼可见地被浪费。

fig-20

第 4 级,开始相关了

如果大多数现代落地页都能到这个水平,我根本不会察觉有这场抽象风潮。

但它们没有。

先看抽象组的球体比喻。

fig-21

它有漏斗结构,和「过滤」接上了。还有五个球钻了出来,松散落地。

但问题来了:漏斗尾端其他球也快钻出来了,而且大家长得一模一样——「那五球」的独特性没了。所以它表达得更清楚,但……

差一点。「差一点」就是关键词:说明确实有人认真想过抽象这回事,只是没想透。

fig-22

写实组是一台 3D 手机。创意不算新,但至少屏幕上有真通知,机身背后还藏着一沓。

可屏幕上只有三条,说好的五条呢?有卖点就要守住卖点——你意识上可以装 Ignore,大脑可不会,脱节它照样记小本本。

字面意义上「几乎到了,但没完全到」。缺的是收益展示:都走写实路线了,最好直接给「通知变少」带来的直接好处,而不是光变少。

但它确实更近了,虽然平淡得让人哈欠。

fig-23

第 5 级,相关度达成

现在,抽象和写实两条线同时进入相关区。

没有唯一正解,这里给的是一个大方向。但大多数网站连这儿都够不着,更别提在它基础上继续迭代出更好的版本。

抽象组,还是那位老朋友——球体。

fig-24

依然是抽象的:这些球在隐喻层面可以代表通知,但它们不是通知,只是 3D 球体。

但这次多了一道半透明屏障:重要的 5 个和灰色的大多数被隔开。半透明还有潜台词——你想看,随时能看穿其余那些,只是已经有人替你处理好了。

所以它完全抽象,却句句扣住文案卖点。没人会去数 636,但谁都数得清 5。

简单,也不算多有创意,但至少跟信息有关。大脑潜意识解读时,自动跟文字、数字全部对上号。

fig-25

写实组走超写实 + 保持相关:一部手机,气泡里不多不少五条通知,同时还用情感收益把「好处」摆上桌面。

画中人根本没看手机。她在放松,无牵无挂。它展示的是「你用上这服务之后的样子」——情感连接叠出代入感。

看到别人活在我们向往的状态里,我们会自动把自己代入。用对了,这是主视觉能挂上的最强触发器之一。

真要做这种设计,照片得专为这个目的拍——图库图、生成图都出局。条件允许就多拍几位不同主体的候选,再测试哪种形象最能戳中受众。

它们都坐在图上哪个位置?

如你所见,第 5 级的作品既不完全抽象、也不完全写实。完全没问题——这恰恰证明:「有效」的设计不必二选一,只要有关联,站哪儿都行。

问题从来不在抽象本身。诚然,一定程度的写实能替大脑省处理功耗,但有些产品注定没法写实表达。

从始至终,关键词都是相关度。

说得更准一点:主视觉,到底有没有真的接住文案。

这层连接清晰了——不管走有意识的(写实)还是无意识的(抽象)——形式都是次要的。

但视觉必须为文案而存在,不是来占座的。而大多数现代网页设计在干嘛?用绝对无关的图填空。

设计界这场「假装游戏」正在压低转化率,还让坏趋势继续开枝散叶。

直到 CTR 数据拆台为止:没人点、没人在乎,所谓主流设计不过是羊群心态下互抄的、毫无灵感的老一套。

所以,如果只让你带走一句话:

一个真正伟大的销售网站,可以一张图都不放。从这个前提出发,往死里打磨:文案、字体、层级、间距、颜色、高亮。然后——只有然后——再考虑加图,前提是你真想清楚它能帮上什么。

是时候把「无关」从网页设计里扫地出门了,别再把落地页当艺术品供着。它们不是艺术,它们是要干活的。

要干活,每个元素就得咬合成一台机器,而不是随机散装。

 

转载:优设

 

 

 

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

 

image.png

兰亭妙微ui设计公司分享:2026 年 AI 设计趋势

清阳 行业趋势

兰亭妙微ui设计公司分享:AI 的到来是一场重大革新,它重塑了我们的工作流程,也深刻影响着众多岗位的发展。经过这几年的发展,AI 已经从最初的工具协作,逐步进化为富有温度的创作伙伴,正在悄然改变设计的本质。

今天和大家一起盘点 2026 年 AI 设计领域的趋势:AI 早已不只是工具,更是我们工作中的创作伙伴。

目录

一、从生成式到对话式 二、从执行单一思考到全感知设计 三、从一对众到一对一 四、实时协作打破创作边界 五、AI 也开始否定你 六、从完成设计到培育设计生态系统

一、从生成式到对话式

image.png

早期很多人把 AI 工具当作大型素材库,输入关键词获取灵感,在一堆生成结果里机械筛选,反复调试直到得到满意效果。2026 年,这个流程将发生改变,人机交互会更像和资深设计师对话交流。

举个例子,我向 AI 提出需求:“我想要设计一款面向老年用户的健康管理软件界面,兼顾怀旧感与现代简约。” AI 不再一次性输出十多个模板供挑选,而是主动反问:“您提到的怀旧感,更偏向视觉元素,还是交互体验?”

这种对话式设计让创作过程更人性化。AI 开始读懂设计背后的 “为什么”,而不只是机械完成 “是什么” 的指令。

二、从执行单一思考到全感知设计

image.png

2026 年的 AI,将不再局限于单一的视觉输出。当你需要设计一款品牌 LOGO,AI 除图形之外,还可以同步产出品牌故事、声音标识、传播建议,兼顾后续延展与落地场景。

比如为海洋保护组织设计 LOGO,AI 完成生成任务之余,还会建议搭配轻柔海浪音效,烘托海洋氛围感,强化用户的沉浸体验。

借助 AI,设计师的工作从打造 “视觉符号” 延伸到构建 “全感知体验”。AI 学习人类多感官的思维模式,辅助我们产出更加完整、更能打动人心的全案方案。

三、从一对众到一对一

image.png

大众化设计已经很难适配当下用户多元化的需求,个性化设计愈发重要。AI 工具可以结合用户的实际需求、文化背景、使用场景、情绪状态,动态调整设计方案,让不同用户拥有差异化的产品体验。

设想一款教育产品,可以给到不同特质的孩子截然不同的界面:视觉偏好的孩子侧重图表与色彩;听觉偏好的孩子获得语音引导与声音反馈。AI 让一对一的定制化产品服务成为现实,定制设计落地门槛大幅降低,还不会过多增加团队成本,这在过去是很难实现的。

四、实时协作打破创作边界

image.png

设计协作不再是 “设计师创作,AI 后置辅助” 的线性模式,而是走向实时双向协作。调整按钮颜色,AI 同步优化整套色彩系统,保证视觉协调;移动布局元素,AI 自动重构信息层级,维持逻辑清晰。

设计师和 AI 在创作过程中互相启发、互相完善,实时联动,慢慢模糊人和 AI 的创作边界。

五、AI 也开始否定你

image.png

2026 年的 AI 工具将建立自身的设计准则,不再无条件执行全部指令,会礼貌提示潜在风险。

当你的需求忽略特殊人群的使用体验,AI 会给出优化建议;生成内容与品牌风格规范冲突时,也会向你确认是否继续使用。

AI 从技术执行者,成长为掌握设计理论、理解风格规范的创作伙伴,解放设计师的脑力,让我们聚焦创意本身,把无障碍校验这类基础工作交给 AI 把关。

六、从完成设计到培育设计生态系统

image.png

借鉴产品组件化思维,设计师的角色从交付最终设计成果,转向搭建设计生态系统。我们搭建智能组件库,确立设计定位与设计原则,训练专属 AI 设计伙伴。

一旦设计生态搭建完成,就可以在不同场景、不同媒介中自主适配、演化生长。过去需要多人协作完成的项目,依托 AI 可以降低人力成本,快速生成大量备选方案。

小结

AI 不会取代设计师,而是帮我们卸下重复劳动的负担,让我们聚焦核心优势,高效落地需求,同时提升设计质量。

设计依旧离不开设计师的眼界、经验和判断力。如果自身专业能力不足,即便借助 AI,也难以产出惊艳的作品。未来职场中,设计师与 AI 就如同双人舞搭档,共同完成精彩的作品,2026 年,这一组合将释放巨大的价值。

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路

清阳 行业趋势

兰亭妙微ui设计公司分享:iPhone Duo 正式亮相,本文不聊硬件参数,也不做选购分析。随着折叠设备市场占有率持续走高,折叠屏 UI 适配已经成为移动端设计师无法回避的课题。

image.png

近段时间,折叠新品密集发布:竖向折叠代表有 VIVO X Fold6、OPPO Find N6;大屏阔折叠阵营,也迎来华为 Pura X Max、Xiaomi 18 Fold 等新机。

image.png

过往安卓厂商虽持续迭代折叠产品,但对整个行业的带动作用相对有限。而苹果入局折叠赛道之后,局面将会彻底改变。依托苹果强大的品牌声量与用户基础,折叠屏的大众热度与市场普及度,将会迎来新一轮快速提升。

image.png

这就意味着,UI 设计师在项目前期搭建界面框架、制定设计规范阶段,就必须将折叠屏适配纳入考量,提前规划适配逻辑,避免后期返工。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

 

转载:优设

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

 

image.png

兰亭妙微ui设计公司分享:AI 做不出来的复杂组件该如何设计?吃透这 6 个核心方向就够了

清阳 行业趋势

兰亭妙微ui设计公司分享:随着 AI 绘图能力飞速迭代,很多界面效果它都能快速生成。但适配国内业务场景的高阶 UI 组件,AI 往往很难交出合格答卷,国外设计师直接上手也容易水土不服。

这并不是工具本身的局限,更多是国内 UI 从业者的能力缺口:如果缺少复杂组件的设计能力,很难承接进阶业务需求,也达不到大厂岗位的能力要求。本文将结合实操案例,拆解组件的基础逻辑与进阶设计方法论,帮你补齐 AI 无法替代的核心竞争力。

一、分清两类组件:标准化基建 vs 自定义创作

UI 界面里的组件可以分成两大类别:

image.png

  1. 标准化基础组件:拥有成熟命名与固定范式,属于界面基建。像瓷片区、弹窗提示、动态卡片、用户列表、底部导航栏都属于这一类,设计时更多是遵循规范临摹落地。
  2. 自定义特殊组件:没有统一命名、没有固定样式,例如专题活动模块、会员卡片、排行榜、横向运营列表等。

真正考验设计师能力的,就是这类无固定模板的组件设计。没有现成参考,需要自主做判断、构思与创作,也是新手进阶路上最大的难关。

 

想要提升组件设计能力,可以分成三步:

image.png

  1. 收集归类:大量收集优秀组件案例,整理到 Eagle、花瓣等素材库,拓宽设计眼界;
  2. 掌握基础框架:吃透组件底层排版框架,守住界面视觉下限;
  3. 积累视觉细节手法:学会丰富画面表现,完成高阶创意表达。

守住视觉下限:简约基础组件设计要点

简约不等于简单,基础组件决定页面的底线效果。即便没有花哨特效,只要做好下面几点,界面就不会翻车:

  • 合理完成内容元素排版,信息层级清晰;
  • 把控好元素尺寸、字号,参数统一规范;
  • 内外间距设置合理,留白克制有序;
  • 选用高质量、风格统一的图标与图片素材。

底层逻辑:把各类元素,以正确的尺寸、间距摆放到对应位置,再搭配合适的素材。 如果基础排版、间距、尺寸没有处理到位,再堆砌特效、图形、创意,只会让页面更加混乱。

image.png

文中以山姆会员页作为修改案例:改版前页面特效繁杂,但元素尺寸混乱、间距失控。先剥离花哨样式,校准间距、字号、布局,输出简约版本。优化之后,即便不加任何装饰,页面已经达到合格水准,信息清晰整洁。

二、组件进阶设计:6 大突破方向(逆向设计思维)

image.png

国内互联网产品竞争的核心之一,是争夺用户注意力。朴素的基础组件容易平淡,运营类页面就需要打破常规,做出更抓眼球的效果。

进阶设计的底层是逆向思维:先吃透标准的设计规则,再有意识打破固有范式;前提是基础能力过关,否则你都不知道自己在打破什么规则。image.png

一共 6 个常用进阶手法,可以单独使用,也可以组合叠加到同一个组件中:

1. 边缘轮廓的异形处理

image.png

不局限于标准直角矩形,对卡片轮廓做改造:局部增加弧度、边角切斜、边缘做凹陷、折叠缺口等,打破死板的方框感,制造形态趣味。

案例:将会员卡片外层矩形做缺口折叠造型,跳出常规卡片形态。

2. 特殊字体标题的应用

image.png

标题放弃普通系统字体,选用风格化的定制标题字、品牌 VI 字体,强化主题氛围感,让标题信息更加醒目突出。

3. 悬浮标签 / 图标元素应用

image.png

打破横平竖直的布局约束,让标签、小图标悬浮、轻微旋转,部分元素溢出卡片边界,制造视觉冲突感。

案例:开通会员按钮外侧增加气泡悬浮标签,展示 “低至 0.72 / 天” 优惠信息,不侵占按钮内部空间。

4. 镂空突出的图片元素

image.png

把图片 / 图标主体抠出,让图形突破容器边界,不再完全被矩形、圆形框死,营造更强空间层次感。

5. 渐变和图片背景应用

image.png

跳出纯色背景的局限,使用精致渐变、低透明度背景图叠加。拒绝简单双颜色粗暴过渡,也不直接硬贴摄影图;通过色彩、蒙版、透明度叠加,打造细腻的背景氛围。

6. 特殊视觉效果的添加

image.png

适度增加质感特效提升表现力:毛玻璃、玻璃拟态、轻拟物、2.5D、水晶质感、高光模糊等。

注意:特效是加分项,切忌滥用堆砌,优先保证信息可读性。

实操示例:山姆会员卡片完整进阶改造,依次叠加:异形轮廓→品牌标题字体→悬浮优惠标签→突破容器图标→渐变背景 + 底图→毛玻璃 + 轻拟物高光,完成从朴素模板到高级运营组件的完整升级。

三、高效训练方法,快速提升组件能力

想要熟练掌握以上手法,最快路径就是:收集→归类→临摹

  1. 收集:广泛搜集各类优秀组件,积累素材库,见识足够多的表现形式;
  2. 归类:按照组件类型、表现手法建立素材分组,建立自己的设计资料库;
  3. 临摹:挑选优质案例复刻,在实操中理解布局逻辑,把技巧内化成自己的能力。

 

转载:优设

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

 

image.png

兰亭妙微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


日历

链接

个人资料

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

存档