首页

AI 时代的用户体验设计:设计师会被替代,还是更值钱?

杰睿 行业趋势

近两年,生成式 AI 席卷了整个设计圈。有人感到兴奋:再也不用从 0 开始画界面了;有人则担忧:设计师是不是迟早会被替代? 尤其是做用户体验设计(UX Design)的同学,经常会问自己:AI 会让我们失业,还是会让我们更值钱?
今天我尝试从三个角度聊聊这个问题:AI 在设计环节的作用、用户体验设计的本质、以及设计师的价值升级。

一、AI 到底能取代哪些工作?

我们先承认一个现实:AI 确实能做掉一部分重复性、低门槛的设计工作。
视觉稿:输入一句话,AI 就能给你 10 套界面方案。
流程优化:AI 可以根据常见模式,自动生成标准化流程。
测试反馈:AI 可以模拟用户点击,快速发现流程瓶颈。
这些工作过去可能要一个新人花两三天,现在 AI 几分钟就能完成。
所以,如果一个设计师的工作主要停留在“工具层面”,那确实危险。

二、用户体验设计的本质是什么?

但问题来了,UX 设计的核心价值从来不是“画界面”。 它更接近三个关键词:
理解用户:洞察真实的痛点,而不是想当然地堆功能。
设计逻辑:通过信息架构、交互流程,让产品自然可用。
场景整合:把体验放到完整的用户旅程里,而不是某一屏。
AI 再聪明,也需要人类告诉它:
哪些问题值得解决?
哪些体验更贴近用户心智?
哪些约束(商业、技术、伦理)是必须考虑的?
这就像自动驾驶:AI 可以帮你控制方向盘,但“去哪儿”还是要人来决定。

三、设计师会更值钱的三个方向

那么,在 AI 时代,什么样的 UX 设计师反而会更有价值?我总结了三点:
更懂业务
  1.   不只是画好看、好用的界面,而是能和产品经理、运营、市场一起思考: 这个功能能不能提升转化?这个流程能不能降低成本?
  1.   能把体验和商业目标结合的人,AI 很难取代。
更懂用户
  1.   会做用户研究,会用数据和洞察驱动设计决策。
  1.   AI 可以生成方案,但无法真正“共情”用户。
更懂系统
  1.   能构建设计系统、制定规范,指导团队和 AI 工具一起产出。
  1.   未来的设计师更像“体验架构师”,而不是“美工”。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

审美积累 | 金融类 SaaS 产品落地页设计

杰睿 行业趋势

视觉风格

imgi_149_54479b227260621.683d51861bbda.png

imgi_1146_b66b9d227260621.683d51861c35a.png

imgi_1148_7a2611227260621.683d51861b045.png

imgi_1150_813cf9227260621.683d51861cd40.png

imgi_1151_7d5e0a227260621.683d51861b4ab.png

色彩系统
  1.   主色调:蓝色(#2563eb 左右)→ 传递专业、信任、安全感。
  1.   辅助色:绿色(成功/正向)、紫色(现代科技感)、黄色(提醒)。
  1.   大面积留白 → 保持呼吸感和简洁度,让信息有清晰的层次。
  1.   渐变色块(蓝紫渐变、绿色渐变) → 增强科技感和未来感。
排版
  1.   标题:黑色/深灰 + 关键词高亮蓝色(“Financial”)→ 强调重点,视觉节奏感强。
  1.   字体:无衬线,圆润现代 → 亲和但保持专业感。
  1.   字重层级明显(粗体标题 + 中等正文),增强信息层次。
图形语言
  1.   卡片式布局 → 每个功能点都以卡片承载,模块化、清晰可点击。
  1.   圆角极大化(按钮、卡片、图表) → 减少金融产品的“冷感”,更易亲近。
  1.   图标/插画 → 轻量、简洁,带点拟物投影(增强真实感)。

交互与信息结构
模块化区块
  1.   Hero 区:大标题 + 产品截图 → 直接传达核心价值(Maximize your financial potential)。
  1.   信任背书:评分展示 → 快速建立信任感。
  1.   功能介绍:图文搭配(Analytics、Expense、Send Money)→ 以可视化方式分块展示。
  1.   行动召唤(CTA) → “Get Started”“Watch a Demo” 多次重复,降低用户流失。
视觉引导
  1.   关键词蓝色高亮 → 引导阅读路径。
  1.   图表与数据示例 → 让金融工具更具象,降低抽象感。
  1.   卡片颜色差异(紫色、绿色、深蓝) → 形成节奏和重点感。

设计语言关键词
现代(Modern):极简无衬线字体 + 大面积留白 + 渐变色块。
可信(Trustworthy):蓝色为主色调 + 用户评分背书。
友好(Friendly):圆角 + 卡片化设计 + 简洁插画。
科技感(Tech-savvy):渐变、数据可视化、模块化信息层次。
行动驱动(Conversion-driven):多个 CTA 按钮(Get Started、Watch a Demo),颜色对比强烈。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

2025 年产品设计师的最佳 AI 工具

杰睿 行业趋势

没有设计师,没有开发人员,没有冗长的交接;只有她自己、一台笔记本电脑和合适的AI工具。
这并非遥不可及的未来场景。根据 Figma 的 2025 年 AI 报告,今年三分之一的产品开发者将推出 AI 驱动的产品:比去年增长了 50%。但值得注意的是:52% 的 AI 开发者表示,设计对于 AI 驱动的产品而言比传统产品更为重要。我们不仅要实现设计自动化,更要提升设计水平。

设计工具包中的隐形革命

就在大家还在争论人工智能是否会取代设计师的时候,更有趣的事情发生了:它开始让设计师的效率成倍提升。2025年出现的工具不仅仅是生成漂亮的图片——它们从根本上改变了产品团队的协作方式。
以五月 Figma Config 2025 大会上发生的事情为例。在四大产品发布中,Figma Make脱颖而出,并非因为其技术实力,而是因为它打破了传统角色之间的界限。突然之间,产品经理可以创建功能原型,工程师可以快速将复杂的交互可视化,设计师可以测试原本需要数周才能实现的想法。
但 Figma 并非唯一一个实现这一转变的公司。过去六个月,专门用于加速产品设计工作流程的 AI 工具激增,每种工具都解决了从设计到开发流程中的不同痛点。

全新必备工具包:改变一切的五大类别

  1. 智能研究综合
问题:用户研究曾经是一个瓶颈。需要耗费数小时的访谈记录、零散的反馈,以及在定性数据中寻找规律的漫长过程。
解决方案:Dovetail 的 Magic SuiteMaze AI等工具正在自动化繁琐的研究分析工作。Dovetail 的 Magic Highlight 会自动显示用户访谈中的关键时刻,而 Magic Cluster 则无需手动标记即可将反馈分组到各个主题。Maze AI 则更进一步,能够检测研究问题中的偏见,并在现场访谈中生成上下文相关的后续信息。
实际影响:以前团队需要花费 3-4 天的时间来综合研究结果,现在只需不到一小时就能完成,并且能获得比手动分析更全面的见解。
  1. 提示到原型生成器
游戏规则改变者: Figma Make已从 Beta 版进入正式版,任何人都可以通过简单的文本描述生成交互式原型。但这不仅仅关乎速度,更关乎探索。当测试一个想法的成本几乎降到零时,团队就能测试更多的想法。
 
新兴竞争对手:LovableReplit 的 Agent等工具正在创造类似的即时应用体验,而Canva Code则为营销团队带来了互动元素。
设计师视角: “现在,设计师、工程师和产品经理都可以制作高保真作品,并带回团队进行更深入的讨论,” Figma 设计总监 Gui Seiz 说道。“这是一种思维转变,鼓励你勇于尝试、勇于冒险,并提出更有趣的解决方案。”
  1. 情境感知视觉生成
超越基础 AI 艺术: Midjourney 可以创作精美的图像,而Adobe FireflyPhotoroom 的全新 AI 套件等工具则专为产品工作而设计。Firefly 可直接集成到 Photoshop 和 Illustrator 中,从而实现 UI 组件和视觉资源的快速迭代。Photoroom 的产品美化器于 2025 年 4 月推出,可自动优化电商产品照片,无需摄影专业知识。
实际胜利:设计团队将资产创建时间缩短了 60-70%,同时保持了品牌一致性,这是通用 AI 艺术工具难以做到的。

4.智能布局和响应式设计

技术突破: Figma 的全新网格功能利用 AI 创建响应式布局,自动为开发者生成简洁的 CSS 代码。这不仅是为了提升美观度,更是为了创建能够无缝转换为代码的设计。
 
 
更广泛的趋势:UXPin Merge等工具将基于代码的组件直接带入设计环境,而Lummi AI 则根据经过验证的设计原则提供智能布局建议。
5.跨平台工作流程集成
协作革命: Notion AI正悄然成为设计团队不可或缺的工具,它可以自动总结用户访谈并清理会议记录。与此同时,Miro AI 可以根据关键词和情绪对头脑风暴会议记录进行聚类,使创意会议更加结构化,更具可操作性。
按 Enter 键或单击即可查看完整尺寸的图像
重要性:当人工智能处理设计工作的管理开销时,团队会花更多时间进行战略思考和创造性解决问题。
实用框架
准备好将 AI 融入你的设计工作流程了吗?以下是一个实用的方法:
  1. 研究阶段加速
  • 使用Perplexity进行竞争研究和趋势分析
  • 设置Notion AI用于会议记录和用户访谈摘要
  • 实施Maze AIDovetail进行研究综合
2.快速成型
  • 尝试Miro AI进行更有条理的头脑风暴会议
  • 使用Figma Make进行实验以快速进行概念测试和验证
  • 使用Adobe Firefly自定义视觉资产
  1. 设计到开发的桥梁
  • 实现UXPin Merge或 Figma 的Grid以实现响应式布局
  • 使用GitHub Copilot实现自定义交互和微动画
  • 使用 AI 生成的文档设置自动交接流程
剧情转折:设计变得更加人性化
矛盾的是,随着人工智能越来越多地承担设计技术执行的任务,人的因素也变得越来越重要。同理心、战略思维和创造性判断——这些人类独有的设计特质——正在成为设计的主要差异化因素。
Figma 的人工智能产品负责人 David Kossnick对此进行了完美的阐述:“人工智能将帮助人类更快地探索,在构思上走得更远,但我认为所有人类的判断力、同理心、技艺和品味才是成为飞行员的意义所在,而不是副驾驶。”
这并不是要取代设计师,而是要扩大他们的影响力。当测试创意的技术障碍消失后,团队就可以专注于测试正确的想法。
未来已来
2025年最成功的产品团队不一定是预算最雄厚或设计师经验最丰富的团队,而是那些学会利用人工智能工具来缩短创意与执行之间反馈循环的团队。
问题不在于人工智能是否会改变产品设计——它已经改变了。问题在于你的团队是否会成为这场变革的第一批受益者,还是最后一批适应者。
你的团队的AI应用策略是什么?更重要的是,哪些想法因为过于复杂而无法快速制作原型而被你搁置?
测试工具已经准备好了。唯一的问题是:你还在等什么?

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

人工智能和用户体验——它是如何成为我的用户体验联合设计师的

杰睿 行业趋势

简述:AI 并非接管用户体验设计,而是彻底改变我们的工作方式。本文将分享 AI 工具如何改变我的工作流程,让我的工作更高效、更敏锐,以及为什么拥抱 AI 是当今设计师最明智的选择。

说实话——人工智能一开始让我很害怕

当人工智能工具开始充斥我的设计信息时,我感到恐慌。

“这会让我的工作变得无关紧要吗?”

这是我脑海深处平静的声音。

但我的经验是:人工智能并非用户体验设计师的替代品——它只是对我们工具包的升级。我们并非与人工智能竞争——而是与它合作。

现在,我把人工智能视为我的头脑风暴伙伴、文案助理、设计陪练伙伴和时间节省者。这种思维转变开辟了我从未意识到自己需要的创意空间。

人工智能之前:我的用户体验流程是什么样的

在我将人工智能引入其中之前,对我来说典型的用户体验流程是这样的:

  • 手动转录用户访谈
  • 用于亲和力映射的便签混乱
  • 从零开始构建用户画像
  • 微文案的每一个字都是我自己写的
  • 多次反复的迭代和筛选
  • 手动可用性测试和数小时的分析

是的,这确实很周到。但通常进展缓慢、重复性强,而且难以规模化。

进入人工智能:改变我的工作流程的转变

然后是人工智能。起初,它只是用于快速内容的 ChatGPT。但很快,我发现自己将更多工具融入到我的工作流程中——这些工具不仅节省了时间,而且实际上改善了我的工作方式。

以下是人工智能如何融入我当前的用户体验阶段:

研究与分析

  • Notion AI:完美总结用户访谈
  • Dovetail AI:转录、标记和分析研究模式
  • ChatGPT:帮助生成假设或规划关键主题

构思与文案

  • Magician(Figma 插件):自动生成 UI 组件 + 微文案
  • ChatGPT / Claude:编写入门流程、按钮文本、错误消息
  • Jasper:针对不同用户群体调整语气

设计与原型制作

  • Uizard:将手绘草图转换为可用的 UI
  • Figma + AI 插件:加速重复性任务(例如,创建变体、自动布局帮助)
  • Galileo AI:将文本提示转换为模型(有时非常好!)

测试与反馈

  • UXtweakMaze:通过热图提供人工智能用户测试
  • Lookback + AI:通过记录分析用户行为

突然之间,数小时的体力劳动变成了几分钟的辅助创造力。

人工智能的优势(我并没有抱怨)

以下是人工智能帮助我做得更好、更快、更少摩擦的事情:

  • 加速重复性、低价值的任务
  • 当我陷入困境时,它能帮助我快速产生想法
  • 以新视角增强头脑风暴
  • 减少快节奏项目中的精神疲劳
  • 让我更专注于解决问题和讲故事

人工智能仍然无法做到的事情

即使取得了所有进展,仍有一些东西是人工智能无法(或许也不应该)取代的:

  • 理解人类的情感、细微差别和未说出口的背景
  • 做出符合道德的设计决策
  • 用灵魂创造共情体验
  • 解读模棱两可的反馈
  • 向利益相关者展示设计决策

这是件好事。因为这些正是用户体验的一部分,让设计更具人性化

我今天的工作流程:人机设计之舞

现在与人工智能合作感觉就像是一种创造性的伙伴关系——双方都能带来一些有价值的东西。

在研究过程中,我使用人工智能转录和标记访谈内容,但我也会介入解读其中的情感细微差别并验证模式。在构思阶段,人工智能会生成流程或占位文案,然后我会将其精炼成符合用户目标的精美体验。在设计线框图时,人工智能有助于加快布局建议的速度,但我也会运用用户体验启发式方法、无障碍标准和叙事技巧。即使在测试阶段,人工智能也会提供摘要和行为图,但我仍然需要深入挖掘用户行为背后的原因

简而言之,人工智能承担了繁重的工作。我负责判断、同理心和目标。

设计师使用 AI 工具的技巧

如果您对人工智能感到好奇,但不知道从哪里开始,我推荐以下内容:

  • 从小事做起。使用人工智能进行内容生成、摘要或快速提示。
  • 使用适合你当前技术栈的工具。Figma、Notion 和 ChatGPT 都是不错的入门工具。
  • 保持像设计师一样思考。AI提供选项,但决策权仍在你手中。
  • 保持好奇心。这个领域发展迅速。尝试新工具,测试极限,经常进行实验。
  • 不要把关。与你的团队分享有用的工具和提示。我们一起进步。

最后的想法:人工智能不是敌人,而是进化

人工智能不会取代用户体验设计师。

但懂得如何使用人工智能的设计师可能会比不懂人工智能的设计师更成功。

用户体验的未来以人为本,并由人工智能加速发展。人工智能帮助我们更快、更智能地行动——但同理心、道德和创造力呢?这些仍然取决于我们。

让人工智能处理自动化,你来掌控直觉。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

高效工作 | 交互设计 | “AI-first UX”是设计师的新标准吗?

杰睿 行业趋势

刚开始学习设计时,我面临的最大挑战就是时间
画线框图要花好几个小时,用户流程则要铺满凌乱的白板。

但我见过一些了不起的事情:一位设计师在不到 10 分钟的时间内借助人工智能制作出整个应用程序的原型。

这让我不禁要问:AI-First UX 是否会成为我们领域的新常态?

按 Enter 键或单击即可查看完整尺寸的图像
照片由Emiliano VittoriosiUnsplash上拍摄

“AI-First UX” 是什么意思?

传统上,UX 意味着研究、线框、设计系统和测试,所有这些都由设计师和研究人员团队手动完成。

但“AI-First UX”颠覆了这一工作流程:

  • AI 生成初稿。Framer、Stitch AI 或 Uizard 等工具现在可以将文本提示转换为可立即使用的屏幕。
  • 人工智能加速研究。类似 ChatGPT 的人工智能助手可以总结用户访谈,识别情绪模式,甚至对反馈进行聚类。

简而言之:人工智能不再是一个辅助工具,它正在成为设计的第一步

为什么2025年需要人工智能优先的方法

过去两年来,设计行业发生了巨大变化:

  • 预算更紧缩,团队规模更小,截止日期更短。人工智能弥补了这些差距。
  • 更快的预期。利益相关者期望在几天内(而不是几周)就能获得原型。
  • 全球竞争。印度的自由职业者和柏林的初创公司现在拥有相同的工具,人工智能可以创造公平的竞争环境。

我亲眼见证了这一点:以前在 Figma 上要花几个小时才能完成的事情,现在在 AI 的帮助下,几分钟就能构思出来。我不用再纠结于矩形和对齐,而是可以把精力放在更重要的问题上:“这个设计真的能解决用户的问题吗?”

人工智能如何改变设计师的角色

最大的误解是什么?AI 会取代设计师。但我注意到的是不同的:AI 正在接管生产工作,但我们作为设计师的角色正变得更加以人为本。

这种转变是这样的:

  • 从像素推移到问题框架。AI负责布局;我们负责提出正确的问题。
  • 从重复性任务到创造性策略。我们不再重复按钮,而是开始探索“假设”场景。
  • 从测试物流到同理心工作。人工智能可以处理调查数据,但只有人类才能真正理解文化差异、无障碍需求和情感。

所以,无论如何,人工智能正在让我们的实践变得更加人性化。

AI-First UX 的机遇与挑战

与任何颠覆一样,人工智能既带来兴奋,也带来警惕。

机会:

  • 更快的原型设计和迭代
  • 独立设计师可以用更少的资源实现更多成果
  • 大规模个性化(AI 根据个人用户调整界面)

挑战:

  • 过度依赖可能导致千篇一律的设计
  • 如果人工智能在非包容性数据集上进行训练,则存在偏见的风险
  • 一些工艺技巧(例如像素级精细度)如果被忽视,可能会消失

作为设计师,我们面临的真正考验是:我们能否引导人工智能,而不是被它引导?

按 Enter 键或单击即可查看完整尺寸的图像
徐海威Unsplash上摄

那么……AI-First UX 是新标准吗?

我认为是的,但是带有星号。

人工智能正在成为默认的起点,但终点线仍然属于人类设计师。因为无论工具多么先进,人工智能都无法体会用户在结账表单上挣扎时的沮丧,也无法体会用户首次浏览无障碍产品的喜悦。

这就是我们的优势。

作为一名设计师,我不再问“人工智能会抢走我的工作吗?”
,而是问“我怎样才能让人工智能成为我的设计助手,这样我就可以专注于解决更深层次的问题?”

AI First UX 并不会消除对设计师的需求,而是需要更好的设计师。

如果你是设计新手,我的建议是:不要害怕人工智能。学会引导它。学会提出更好的问题,让人工智能掌控速度。

因为在2025年,设计不再只是推动像素,而是在人工智能的帮助下设计人类体验的未来。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

人工智能产品设计:识别技能差距以及如何弥补

杰睿 行业趋势

资料来源:https ://left.eu/ai-act-big-tech-says-jump-eu-asks-how-high/

TLDV: AI 产品设计师在工作中遇到挑战并不少见,尤其是在理解 AI 产品背后复杂的技术方面。这可能会使他们难以与技术专家进行有效沟通,从而导致进一步的复杂化。此外,跟上不断发展的人机交互设计模式也极具挑战性。在本文中,我整理了一些资源,旨在提升设计师在这些领域的知识和技能,帮助他们自信而轻松地完成工作。

重新思考设计方法

人工智能的进步为人机交互带来了激动人心的机遇。从识别照片中的猫咪到实现自动驾驶,人工智能为用户体验提供了众多充满希望的全新可能性。它促成了以往难以想象的交互形式。

根据最近的研究设计师正在努力应对设想和原型人工智能系统的复杂性。

这是为什么呢?传统的用户体验 (UX) 和人机交互 (HCI) 设计技术(例如草图和原型设计)可能不足以解决人工智能在产品设计中带来的意外后果。

Graham Dove 及其同事在“计算机系统人为因素”会议上表示: “人机交互专业人士无法轻易地勾勒出人工智能系统在不同情境下适应不同用户的多种方式。” “……他们也无法轻易地为尚未开发的人工智能系统可能犯的推理错误类型建立原型。” 引用Philip van Allen 的话,我还可以补充一句。

问题:在设计过程中映射人工智能设计挑战

卡内基梅隆大学的杨倩及其团队研究了人机交互研究人员和专业人士在使用人工智能时面临的挑战。他们基于广受认可的双钻石设计流程模型,构建了这些挑战及相关的研究论文。

按 Enter 键或单击即可查看完整尺寸的图像
此图概述了双钻模型中人工智能系统设计的挑战,分为四个阶段:发现、定义、开发和交付。每个阶段都强调具体问题,例如阐明人工智能功能、设计行为原型、设计交互以及管理人工智能性能。挑战还包括预见人工智能的影响、避免恐怖谷效应以及对人工智能错误的责任追究,强调了从最初问题识别到最终解决方案的复杂过程。
作者创建的图表

以下是我从本文中得出的结论,按设计过程步骤细分:

  1. 发现(发散思维阶段)
按 Enter 键或单击即可查看完整尺寸的图像
这幅图集中展现了“发现”阶段,该阶段展现了人工智能系统设计面临的挑战。它强调了以下关键挑战:明确人工智能能做什么、不能做什么;高度依赖数据的设计理念的技术可行性;缺乏如何在特定设计问题中精准运用人工智能的知识;以及描绘不同的人工智能交互方式。
作者创建的图表
  • 设计师很难理解人工智能的局限性和能力,这阻碍了他们的头脑风暴和草图绘制过程。
  • 设计理念的技术可行性取决于能否获得足够、多样化和高质量的数据以有效地训练人工智能模型。
  • 即使了解人工智能的工作原理,设计师仍然发现很难构思出许多可能的新互动和新颖的体验。
  • 为设计问题选择正确的人工智能技术需要深入了解人工智能技术,这可能具有挑战性。

2. 定义(聚合思维阶段)

按 Enter 键或单击即可查看完整尺寸的图像
这幅图聚焦于人工智能系统设计中的“定义”阶段,并以更大的框架形式呈现。它突出了两个具体的挑战:快速构建人工智能系统行为原型的难度;以及预见人工智能潜在影响的挑战。
作者创建的图表
  • 用户体验设计涉及快速原型设计,以评估人为因素的影响并进行改进。人工智能产品的快速原型设计在预测用户体验方面面临挑战。
  • Scott Klemmer 建议创建“绿野仙踪”系统或基于规则的模拟器作为早期交互式 AI 原型。Josh Lovejoy 和 Jess Holbrook 在他们的文章中对此进行了进一步探讨。虽然这是一个有效的选择,但这种方法无法解决由 AI 推理错误导致的用户体验问题。
  • 杨倩及其同事提出的第二种方法是在真实用户中部署一个功能正常的人工智能系统,以充分了解其预期和非预期后果。然而,由于该过程耗时过长,且无法承受早期失败的风险,团队无法充分认识到快速迭代原型设计的价值。

发展(发散思维阶段)

按 Enter 键或单击即可查看完整尺寸的图像
此图聚焦于人工智能系统设计的“开发”阶段,详述了几个关键挑战:设计模糊、开放式的交互;向用户解释人工智能行为;设计人工智能与用户之间的共享控制;设计能够持续提升人工智能性能的交互;向用户传达人工智能系统随时间推移的演变。
作者创建的图表
  • 对于许多用户体验设计团队来说,AI技术专家是宝贵但往往稀缺的资源。一些设计师发现,由于缺乏共享的工作流程、边界对象或促进协作的通用语言,很难与AI工程师有效合作。
  • 模糊、开放式的交互设计起来很复杂。它们引入了高度的复杂性,因为它们允许用户以各种方式表达自己。
  • 理解与人工智能相关的概念和术语可能具有挑战性,这使得难以有效地传达人工智能系统的工作原理及其行为方式。
  • 如果五分之三(61%)的人对信任人工智能系统持谨慎态度,我们该如何设计人工智能与用户之间的共享控制权? 用户可能不信任人工智能能够代表他们做出决策,或者可能对放弃控制权持怀疑态度。建立对人工智能系统能力的信任并确保其决策过程的透明度至关重要,但可能并非易事。
  • 设计人工智能系统的交互是一项挑战,因为它们的环境可能快速变化,需要适应性交互。
  • 人工智能系统是动态且不断发展的实体。及时、相关且易于理解的方式向用户传达这种持续的演变可能非常复杂。

交付(聚合思维阶段)

按 Enter 键或单击即可查看完整尺寸的图像
这幅图聚焦于人工智能系统设计中的“交付”阶段,重点关注以下几个关键挑战:预测或缓解不可预测的人工智能行为;避免“恐怖谷”效应,确保人工智能不会让人觉得令人毛骨悚然;确定人工智能错误的责任。
作者创建的图表
  • 人工智能系统可以通过与环境互动或接收反馈来进化和适应。这种进化可能导致难以预测或控制的行为变化。一些人工智能模型可能是黑匣子,这意味着很难理解它们是如何做出决策的。因此,预测/缓解不可预测的人工智能行为可能具有挑战性。
  • 我们的目标是创造出逼真且易于理解的人工智能,同时又不让人感到不安或毛骨悚然。设计师在设计人工智能时必须把握这种微妙的平衡,尤其是那些具有类似人类特征(例如声音、面部表情或行为)的人工智能。如果人工智能过于像人类,但又不够完美,它可能会陷入“恐怖谷”效应,从而导致用户产生负面反应。
  • 数据存在偏差或缺陷可能会导致人工智能错误。由于数据收集、预处理、模型开发或实施过程中可能出现问题,因此目前尚不清楚谁应该承担责任。

采取行动:解决已发现的挑战

我把所有提到的问题分为两大类:

  • 困难在于缺乏对人工智能系统背后技术的了解
  • 与缺乏对人工智能系统设计模式的理解有关的困难

困难在于缺乏对人工智能系统背后技术的了解

仅仅让更多用户体验师参与使用机器学习的项目是不够的。他们必须理解机器学习的核心概念,破除人们对人工智能及其功能的先入之见,并遵循建立和维护信任的最佳实践。Josh
Lovejoy

关于哪些类型的人工智能知识与用户体验设计相关,仍然存在很大争议。然而,越来越多的人认同,用户体验设计师需要具备一些人工智能方面的技术专长才能有效地运用它。

大多数人工智能课程都要求学生具备统计学、概率论、线性代数、微积分和编程方面的知识。如果没有这些背景知识,理解许多人工智能概念可能会很困难。

你无需对人工智能有深入的理解,但熟悉数学和计算机科学至关重要。如果你对这些科目感到不适应,可以考虑参加这些高评价课程。

概率: 渺茫的机会:从头开始的概率(哈佛大学)

统计学:麻省理工学院统计学基础

线性代数: 麻省理工学院的线性代数 18.06

微积分:麻省理工学院的单变量微积分和多变量微积分

编程:从Codecademy谷歌密歇根大学学习 Python 。我个人更喜欢密歇根大学的“Python for Everybody”课程。虽然篇幅较长,但讲解更详细。

对每个主题有一定的熟悉度将为参加以下课程奠定良好的基础:

1)“ AI For Everyone ”(6小时,49.99美元/月)——最好的非技术性AI入门课程,由斯坦福机器学习课程创始人吴恩达讲授

2)人工智能计算机科学专业证书(5个月,432欧元)——edX 颁发的两部分专业证书,跟踪哈佛大学的 CS50 和 CS50AI 课程,让没有必备 CS 知识的学习者也能进入人工智能领域。

3)“人人适用的人工智能基础(40小时,49.99美元/月)—— IBM提供的专业课程 。IBM通过Coursera被公认为新兴技术领域的革命性领导者。该专业课程包含三门课程:

4)人工智能要素(30-60小时,免费)——赫尔辛基大学和MinnaLearn合作推出的课程,解释了人工智能可以实现什么(和不可能实现什么)以及它如何影响我们的生活——无需复杂的数学或编程。

您是否知道其他有用的资源?如果有,请在评论区留言。

与缺乏对人工智能系统设计模式的理解有关的困难

人们对人机交互设计技能的需求日益增长,但相关课程却十分有限。幸运的是,有众多设计师和研究人员慷慨地分享他们的知识和专业技能。以下是我关注的一些:

如果我遗漏了任何人,请随时在评论区分享他们的名字以及他们创建的任何有用资源。让我们一起拓展知识,帮助彼此成长。

最后的想法

人工智能塑造着我们的思维、感受和行为方式。它驱动着决定我们未来的决策。我们有责任将其潜力转化为人性化的科技。构建一个基于我们多样化价值观和需求的人工智能需要深思熟虑的设计。

乔什·洛夫乔伊和杰斯·霍尔布鲁克

人工智能正日益融入各种数字产品和服务。用户与人工智能的交互将成为决定这些产品成功与否的关键因素。然而,如果我们未能定义并采用新的交互模式和技术,而是依赖过时的启发式方法和对人工智能有限的理解,就有可能阻碍创新。

通过将坚持与创造力相结合,设计师可以充分发挥人工智能的潜力,为更美好的未来铺平道路。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

用户体验设计优化 | AI驱动的个性化交互:产品要准备好什么?

杰睿 行业趋势

过去我们聊交互设计,总绕不开“统一流程”和“标准化体验”。一个产品要么好用,要么不好用,大家面对的几乎是同样的界面和操作路径。但现在不一样了——AI正在悄悄改变这个逻辑。未来的产品,更像是一个“会学习的伙伴”,而不是一个冷冰冰的工具。这对产品提出了哪些新要求?我们来分层聊一聊。

 一、体验层面的变化

  1. 界面不再固定 不同的人打开同一个产品,看到的可能是完全不同的界面。比如阅读应用会根据你的阅读速度自动调整推荐模式,有的人喜欢夜间护眼,有的人喜欢大字版,系统会自己学会。
  2. 预测性更强 未来用户可能不需要“找功能”,而是系统主动把下一步放到眼前。比如你习惯早上开日历,系统会自动跳出常用会议室地址、提醒时间,帮你省掉一堆点击。
  3. 极简直觉化 随着AI帮忙减少步骤,用户对“零摩擦体验”的要求更高。他们希望“想到就能做到”,而不是还要研究菜单在哪里。

 二、技术层面的挑战

  1. 实时数据驱动 个性化体验离不开数据。产品必须具备实时收集、分析、反馈的能力。否则“个性化”只是空谈。
  2. 可解释性 用户想知道“为什么推荐给我”。如果一切都是黑箱操作,会让人怀疑甚至反感。所以产品需要给出适当的解释提示,增加透明度。
  3. 灵活的架构 界面和交互逻辑要能动态生成和修改,而不是写死在流程图里。设计师和开发团队要做好“留白”,让AI能自由发挥。

 三、设计与策略层面的考量

  1. 设规则而不是画死流程 设计师未来的任务更像“制定游戏规则”:哪些地方可以变,哪些地方必须稳定。AI在这个框架下去适应不同的用户。
  2. 个性化 vs 一致性 个性化不等于混乱。产品需要保证:即使每个人的界面不同,整体品牌调性和核心价值也不能丢。就像定制西装,花纹可以不同,但版型要保持质感。
  3. 隐私与信任 个性化背后是大量的数据收集。用户必须感到“这是我允许的”,而不是“我被监视了”。清晰的设置和边界,可能比炫酷的AI功能更重要。

 四、商业价值的变化

  1. 差异化竞争 产品更懂用户,本质上就是竞争优势。个性化交互能成为留存和转化的关键点。
  2. 长期信任而非短期刺激 推荐得再精准,如果让用户感觉“被操纵”,他们最终还是会离开。长期的信任感,比短期的点击率更有价值。

AI驱动的交互,不是给界面多加一个“智能推荐”入口,而是重新定义了产品的角色:

  • 从“统一体验”走向“千人千面”
  • 从“被动响应”走向“主动预测”
  • 从“工具”走向“伙伴”
对于交互设计师来说,挑战也在变化。未来不是拼谁画的界面多,而是谁能设计出一套可演化的规则,让AI既能适应用户,又不至于失控。
说到底,未来产品的竞争力,可能不是“谁的功能更全”,而是“谁更懂用户”。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

 

Agentic UX 的秘密:人类与 AI 代理交互的新兴设计模式

杰睿 行业趋势

想法简述

  • 本文探讨了 UX 设计师如何通过了解影响代理行为和用户交互的四种关键能力类型来有效地与 AI 代理合作。
  • 它强调在设计过程早期评估人工智能代理的感知、推理、行动和学习能力的重要性,以创造现实、合乎道德和以用户为中心的体验。
  • 该作品提供了实用的框架和示例——从智能家居设备到医疗保健机器人——以帮助设计师提出正确的问题、跨职能协作以及负责任地使用人工智能。

随着人工智能 (AI) 越来越深入地融入产品,设计师必须了解这些系统真正能做什么。本文介绍了一个围绕感知、推理、记忆和代理四大核心能力构建的实用框架,旨在帮助用户体验 (UX) 专业人士设计更智能、更值得信赖的 AI 体验。本书包含真实案例和实用技巧,对于任何致力于塑造 AI 界面未来的人士来说,都是必读之作。

许多人认为,人工智能代理已经存在,只是分布不均。然而,目前很少有案例能够展现与这种近未来人工智能的良好交互体验。幸运的是,在最近的 AWS Re: Invent 大会上,我偶然发现了一个与人工智能代理交互的用户体验的绝佳示例,我迫不及待地想在本文中与大家分享这一愿景。但首先,人工智能代理究竟是什么?

什么是 AI 代理?

想象一下一个蚁群。在一个典型的蚁群中,有不同专长的蚂蚁:工蚁、兵蚁、雄蚁、蚁后等等。蚁群中的每只蚂蚁都有不同的工作——它们独立运作,但又像一个紧密结合的整体。你可以“雇佣”一只蚂蚁(代理)为你做一些简单的半自主工作,这本身就很酷。然而,试想一下,你可以雇佣整个蚁丘去做一些更复杂或更有趣的事情:找出你的系统出了什么问题,预订你的行程,或者……做几乎所有人类在电脑前能做的事情。每只蚂蚁本身并不非常聪明——它们高度专业化,专注于完成特定的工作。然而,不同专长的蚂蚁组合在一起,呈现出一种我们将其与高级动物联系起来的“集体智慧”。我们在博客中一直使用的“人工智能”(AI)与人工智能代理之间最显著的区别在于自主性。您不需要向 AI 代理提供精确的指令或等待同步输出 - 与一组 AI 代理的整个交互更加流畅和灵活,就像蚁丘解决问题一样。

按 Enter 键或单击即可查看完整尺寸的图像
《人工智能用户体验:设计人工智能驱动产品的框架》 (Wiley出版社,2025年)图片来源:Greg Nudelman

AI 代理如何工作?

代理型人工智能 (Agentic AI) 的工作方式多种多样——这是一个内容丰富的主题,值得专门写一本书来探讨(或许一两年后)。在本文中,我们将以系统故障排除为例,阐述一个涉及主管代理(也称为“推理代理”)和多个工作代理的复杂流程。该流程始于人类操作员收到问题警报。他们启动调查,然后由主管代理领导的半自主 AI 代理团队帮助他们找到根本原因,并提出解决问题的建议。让我们用步骤图来分解与 AI 代理交互的过程:

按 Enter 键或单击即可查看完整尺寸的图像
多阶段代理AI流程。图片由Greg Nudelman提供

上图所示的多阶段代理工作流程包含以下步骤:

  1. 人类操作员向主管 AI 代理发出一般请求。
  2. 然后,主管 AI 代理启动并向几个专门的半自主工作者 AI 代理发出一般请求,这些代理开始调查系统的各个部分,寻找根本原因(数据库)。
  3. 工作代理将调查结果带回主管代理,主管代理将其整理为对人类操作员的建议。
  4. 人类操作员接受或拒绝各种建议,这会导致主管代理启动更多工作人员进行调查(云)。
  5. 经过一段时间的反复,主管代理提出了关于根本原因的假设并将其交给人类操作员。

如同与典型的人类组织签订合同一样,主管AI代理拥有一支由专业AI代理组成的团队。主管可以将消息路由到其监管下的任何AI工作代理,这些代理将执行任务并反馈给主管。主管可以选择将任务分配给特定代理,并在稍后获得更多信息时发送附加指令。最后,任务完成后,输出将反馈给用户。然后,人类操作员可以选择向主管AI代理提供反馈或附加任务,在这种情况下,整个流程将重新开始。

人类无需担心任何内部事务——所有事务都由“主管”以半自主的方式处理。人类所做的只是提出一个通用请求,然后审查并响应这个代理“组织”的输出。如果你能做到这一点,这正是你与蚁群沟通的方式:你将工作分配给蚁后,让她管理所有工蚁、兵蚁、雄蚁等等。与蚁群类似,单个专业代理不需要特别聪明,也不需要直接与人类操作员沟通——它们只需要能够半自主地解决它们被设计执行的专业任务,并将精确的输出反馈给“主管”代理,仅此而已。“主管”代理的工作就是完成所有的推理和沟通。这种人工智能模型更高效、更经济,并且在许多任务中都非常实用。让我们来看看交互流程,以便更好地感受这种体验在现实世界中的感受。

使用案例:使用 AI 代理进行 CloudWatch 调查

为简单起见,我们将遵循本文前面的工作流程图,流程中的每个步骤都与图中的步骤相对应。此示例来自AWS Re: Invent 2024 — 不要停滞不前:互联遥测如何助您前进 (COP322),由 YouTube 上的 AWS Events 主持,从 53 分钟开始。

步骤 1

该流程始于用户发现名为“bot-service”的服务(屏幕截图左上角)故障急剧增加,并启动新的调查。然后,用户将所有相关信息以及一些额外的指令传递给主管代理。

按 Enter 键或单击即可查看完整尺寸的图像
步骤 1:人工操作员启动新的调查。图片来源:AWS via YouTube

第 2 步

现在,在步骤 2 中,主管代理接收请求并生成一组工作 AI 代理,这些代理将半自主地查看系统的不同部分。该过程是异步的,这意味着右侧的建议初始状态为空:调查启动后不会立即显示结果。

按 Enter 键或单击即可查看完整尺寸的图像
步骤二:主管代理启动工作代理,工作代理需要一些时间才能汇报结果。图片来源:AWS via YouTube

步骤3

现在,工作代理返回了一些“建议的观察结果”,这些结果由主管处理并添加到屏幕右侧的建议中。请注意,屏幕右侧现在更宽了,以便于阅读代理建议。在下面的屏幕中,不同的代理提出了两个截然不同的观察结果,第一个代理专门负责服务指标,第二个代理专门负责跟踪。

按 Enter 键或单击即可查看完整尺寸的图像
步骤3:工作代理返回可能与系统遇到的问题相关的建议。图片来源:AWS via YouTube

这些“建议的观察结果”构成了调查中的“证据”,旨在找出问题的根本原因。为了找出根本原因,此流程中的人类操作员会提供帮助:他们会向主管代理反馈哪些观察结果最相关。因此,主管代理和人类操作员并肩协作,找出问题的根本原因。

步骤4

人工操作员会点击“接受”按钮,确认他们认为相关的观察结果,这些结果会被添加到屏幕左侧的调查“案例档案”中。现在,人工操作员已经添加了反馈,表明他们认为这些信息是相关的,代理流程将启动调查的下一阶段。主管代理收到用户反馈后,将不再发送“更多相同的信息”,而是会进行更深入的挖掘,甚至可能调查系统的其他方面,以寻找根本原因。请注意,下图中右侧出现的新建议属于另一种类型——它们现在正在查看日志以寻找根本原因。

按 Enter 键或单击即可查看完整尺寸的图像
步骤4:收到用户反馈后,代理会进行更深入的分析,并提出不同的建议。图片来源:AWS via YouTube

步骤5

最后,主管代理掌握了足够的信息,开始尝试找出问题的根本原因。因此,它从证据收集转向推理根本原因。在步骤3和4中,主管代理提供了“建议性观察”。现在,在步骤5中,它准备好进行重大揭秘(也可以称之为“结局场景”),因此,就像文学侦探一样,主管代理提出了它的“假设建议”。(这让人想起游戏“线索”,玩家轮流提出“建议”,然后,当他们准备好发起攻击时,他们就会提出“指控”。主管代理在这里也做了同样的事情!)

按 Enter 键或单击即可查看完整尺寸的图像
步骤5:主管代理现在可以指出“犯罪”的罪魁祸首了。图片来源:AWS via YouTube

建议的假设是正确的,当用户点击“接受”时,主管代理会提供后续步骤来解决问题,并防止将来再次出现类似问题。代理似乎在对人类指手画脚,建议他们“实施适当的变更管理程序”——这是任何良好系统卫生的基础!

按 Enter 键或单击即可查看完整尺寸的图像
Supervisor Agent 还提供了后续步骤来修复问题并预防未来再次发生。图片来源:AWS via YouTube

最后的想法

代理流如此引人注目,并成为当今众多人工智能开发工作的焦点,原因有很多。代理引人注目、经济实惠,并且能够实现更加自然灵活的人机界面。代理能够填补人类与机器之间沟通的空白,真正实现人机思维的融合,形成超越人类的“增强智能”,其价值远超其各部分之和。然而,要从与代理的交互中获得最大价值,也需要我们彻底改变对人工智能的理解方式,以及设计支持代理交互的用户界面的方式:

  • 灵活、可调节的用户界面:代理与人类一起工作,为此,人工智能代理需要一个灵活的工作流程,以支持人与机器在多个阶段的持续交互——开始调查、接受证据、形成假设、提供后续步骤等。这是一个跨越多个迭代的灵活循环流程。
  • 自主性:虽然目前,人机交互似乎是代理工作流程的常态,但代理展现出非凡的能力,能够提出假设、收集证据,并根据需要迭代假设,直至解决问题。它们不会感到疲倦,也不会穷尽所有选项而放弃。AI 代理还展现出能够有效地“编写代码……让工具自行构建工具”的能力,从而探索解决问题的新方法——这很新颖。这种交互本质上需要“积极主动”的 AI,例如,这些代理接受了最大召回率的训练,愿意尝试所有可能性,以确保获得最真实的积极结果(请参阅我们在此处的价值矩阵讨论)。这意味着,有时代理会“只是为了尝试”而采取行动,而不会“考虑”假阳性或假阴性结果的成本。例如,一个积极主动的 AI 代理“医生”可能会开出侵入性脑癌活检手术,而不会先考虑风险较低的替代方案,甚至不会停下来征求患者的同意!所有这些都需要更深层次的人机分析,以及针对激进的人工智能“探索想法”的多个新的审批流程,这些想法可能会导致人类伤害,或者只是导致超出预算的成本膨胀。
  • 需要新的控件:虽然大部分交互可以通过现有屏幕完成,但大多数代理操作都是异步的,这意味着大多数采用传统事务型、同步请求/响应模型的网页都无法适应这种新型交互。我们需要引入一些新的设计范式。例如,开始、停止和暂停按钮是控制代理流程的良好起点,否则你很有可能最终陷入幻想曲中“魔法师的学徒”的境地(自我复制的扫帚不停地打水,造成巨大且昂贵的混乱)。
  • 你“雇佣”AI来执行任务:这与传统的工具使用方式截然不同。它们不再是工具,而是具有推理能力的实体,各自拥有智能。AI服务目前已包含多个由主管监控的专用代理。很快,我们将引入多级管理,由下级主管和“团队负责人”向最终与人类打交道的“客户经理代理”汇报……就像今天的人类组织一样。到目前为止,组织需要跟踪产品、人员和流程。现在,我们为“人”添加了新的定义——AI代理。这意味着需要开发可行的用户界面来保护机密信息、基于角色的访问控制 (RBAC) 和代理版本控制。保护代理数据将比与人类员工签署保密协议更为重要。
  • 持续学习系统:要充分发挥智能代理的价值,它们需要持续学习。智能代理会不断学习,迅速成为其所用系统方面的专家。最初的智能代理就像新来的实习生一样,知识储备有限,但他们很快就会成为“房间里的成年人”,拥有比大多数人更丰富的访问权限和经验。这将在职场上引发巨大的权力转移。我们必须做好准备。

无论你对人工智能代理有何看法,它们无疑会与人类同行共同发展,并持续存在。因此,我们必须了解代理人工智能的工作原理,以及如何设计能够让我们安全高效地与它们协同工作的系统,充分发挥人类和机器各自的优势。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

人工智能自动化 | 20+ GenAI UX 模式、示例和实施策略

杰睿 行业趋势

20+ GenAI UX 模式、示例和实施策略

生成式人工智能通过关注基于意图的结果规范,为人类与系统交互提供了一种新的方式。GenAI 带来了新的挑战,因为它的输出是概率性的,需要理解变异性、记忆、错误、幻觉和恶意使用,这就带来了构建原则和设计模式的必要性,正如 IBM 所描述的那样。

此外,任何AI 产品都是一个分层系统,其中 LLM 只是其中一种成分,而内存、编排、工具扩展、UX 和代理用户流才是真正的魔力!

本文是我对 GenAI 设计模式演变的研究和记录,这些模式为产品经理、数据科学家和交互设计师提供了一种通用语言 ,帮助他们打造以人为本、值得信赖且安全的产品。通过应用这些模式,我们可以弥合用户需求、技术能力和产品开发流程之间的差距。

以下是 21 种 GenAI UX 模式

  1. GenAI 或无 GenAI
  2. 将用户需求转化为数据需求
  3. 增强或自动化
  4. 定义自动化水平
  5. 逐步采用人工智能
  6. 利用心智模型
  7. 传达产品限制
  8. 显示思路链(CoT)
  9. 利用多种输出
  10. 提供数据源
  11. 传达模型信心
  12. 为记忆和回忆而设计
  13. 提供上下文输入参数
  14. 为 coPilot、共同编辑或部分自动化而设计
  15. 定义自动化的用户控件
  16. 用户输入错误状态的设计
  17. 针对人工智能系统错误状态的设计
  18. 设计以捕捉用户反馈
  19. 模型评估设计
  20. 人工智能安全护栏设计
  21. 传达数据隐私和控制

1. GenAI 还是非 GenAI

评估 GenAI 是否改善了用户体验或增加了复杂性。通常,基于启发式 (IF/Else) 的解决方案更易于构建和维护。

GenAI 有益的场景

  • 开放式、富有创意且能增强用户体验的任务。
    例如,写作提示、总结笔记、起草回复。
  • 创建或转换复杂的输出(例如,图像、视频、代码)。
    例如,将草图转换为网站代码。
  • 结构化的用户体验无法捕捉用户意图。

应避免使用 GenAI 的情况

  • 结果必须精确、可审计或确定。
    例如,税务表格或法律合同。
  • 用户期望清晰一致的信息。
    例如:开源软件文档

如何使用此模式

  1. 确定客户旅程中的摩擦点
  2. 评估技术可行性:确定人工智能是否能够解决摩擦点。评估规模、数据集可用性、错误风险评估和经济投资回报率。
  3. 验证用户期望:
    -
    通过评估系统是否增强了人类的努力还是完全取代了人类的努力,确定人工智能解决方案是否侵蚀了用户期望,如模式 3“增强与自动化”中所述。-
    确定人工智能解决方案是否侵蚀了模式 6“心智模型”

2. 将用户需求转化为数据需求

这种模式确保 GenAI 开发始于用户意图以及实现该意图所需的数据模型。GenAI
系统的优劣取决于其训练数据。但真正的用户并非以行列的方式表达,他们表达的是目标、挫折和行为。如果团队未能将用户需求转化为结构化的、模型可用的输入,最终的系统或产品可能会优化到错误的结果,从而导致用户流失。

如何使用此模式

  1. 作为 PM、产品设计师和数据科学家的跨职能团队进行协作,并针对值得解决的用户问题进行协调。
  2. 定义用户需求通过使用三角研究:定性(市场报告、调查或问卷)+ 定量(用户访谈、观察性研究)+ 突发(产品评论、社交聆听等)和综合用户洞察 JTBD框架同理心地图将用户的情绪和观点形象化。价值主张画布将用户的收益和痛苦与功能结合起来
  3. 通过 选择合适的数据模型来定义数据需求和文档,进行差距分析,并根据需要迭代优化数据模型。一旦理解了“为什么”就将其转化为模型的“什么” 。你的AI模型需要哪些特征、标签、示例和上下文来学习这种行为?利用结构化协作来找出答案。

3. 增强 vs. 自动化

GenAI 应用中的一个关键决策是完全自动化任务还是增强人类能力。使用此模式可以使技术与用户意图和控制偏好保持一致。

自动化最适合用户倾向于委派的任务,尤其是在繁琐、耗时或不安全的情况下。例如,Intercom FinAI 会自动将冗长的电子邮件线索汇总为内部笔记,从而节省重复性、低价值任务的时间。

增强功能能够提升效率、创造力和控制力,从而增强用户想要持续参与的任务。例如, Abelton 的Magenta Studio支持创造性的控制,方便用户操控和创作新音乐。

如何使用此模式

  1. 为了选择最佳方法,请使用研究综合工具(如同理心地图(可视化用户情绪和观点)和价值主张画布(了解用户的收益和痛苦))评估用户需求和期望
  2. 测试并验证该方法是否会削弱或增强用户体验。

4. 定义自动化水平

在人工智能系统中,自动化指的是将多少控制权委托给人工智能而不是用户。这是一种战略性的用户体验模式,它根据用户的痛点、情境场景和对产品的期望来决定自动化程度。

自动化水平

  1. 无自动化(AI 辅助,用户自主决定)
    AI 系统为用户提供帮助和建议,但所有决定均由用户自行决定。例如,Grammarly会突出显示语法问题,但用户需要自行决定接受或拒绝更正。
  2. 部分自动化/副驾驶/共同编辑(AI 在用户监督下行动)
    AI 发起操作或生成内容,但用户根据需要进行审核或干预。例如,GitHub Copilot会建议开发人员可以接受、修改或忽略的代码。
  3. 完全自动化(AI 独立行动)
    AI 系统无需用户干预即可执行任务,通常基于预定义的规则、工具和触发器。GenAI 中的完全自动化通常被称为代理系统 (Agentic systems)例如,Ema可以自主规划和执行多步骤任务,例如研究竞争对手、生成报告并通过电子邮件发送,无需用户在每个步骤提示或干预。

如何使用此模式

  1. 评估用户需要自动化的痛点及其风险:当相关风险较低且发生故障不会造成严重后果时,自动化任务最为有效。低风险任务(例如发送自动提醒、促销邮件、过滤垃圾邮件或处理常规客户咨询)可以自动化,最大程度地减少负面影响,同时节省时间和资源。高风险任务(例如进行医疗诊断、发送关键业务邮件或执行金融交易)需要仔细监督,因为一旦发生错误,可能会造成重大损失。
  2. 评估和设计特定的自动化级别:根据用户的期望和目标,评估用户痛点是否应该属于——无自动化、部分自动化或完全自动化。
  3. 定义用户控件以实现自动化(参考模式 15)

5. GenAI 的逐步采用

当用户第一次接触基于新技术的产品时,他们常常想知道系统能做什么和不能做什么,它如何工作以及他们应该如何与它交互。

该模式提供了多维策略来帮助用户使用 AI 产品或功能、减少错误、与用户准备情况保持一致,以提供明智且以人为本的用户体验。

如何使用此模式

这种模式是许多其他模式的顶峰

  1. 从一开始就注重传达好处:避免深入探讨技术细节,并强调人工智能如何带来新的价值。
  2. 简化用户引导体验:在询问用户数据共享偏好之前,先让用户体验系统的价值,并优先提供基础 AI 功能的即时访问权限。鼓励用户稍后注册以解锁高级 AI 功能或分享更多详细信息。例如,Adobe FireFly循序渐进地引导用户从基础功能到高级 AI 功能。
  3. 定义自动化水平(参考模式 4) 逐步增加自主性或复杂性。
  4. 通过针对错误进行设计 来提供可解释性和信任(参考模式 16 和 17)。
  5. 传达数据隐私和控制(参考模式 21),以清楚地传达如何收集、存储、处理和保护用户数据。

6. 利用心智模型

心智模型帮助用户预测系统(网页、应用程序或其他类型的产品)的运作方式,从而影响他们与界面的交互方式。当产品与用户现有的心智模型相符时,用户会感觉直观且易于上手。当两者发生冲突时,可能会导致用户沮丧、困惑,甚至放弃。

例如,Github Copilot 建立在开发人员从传统代码自动完成的思维模型之上,从而简化了向 AI 驱动的代码建议的过渡

例如,Adobe Photoshop 建立在使用矩形控件扩展图像的熟悉方法的基础上,通过集成其生成填充功能,智能地填充新创建的空间。

如何使用此模式

通过提问来识别并建立现有的心智模型

  1. 用户旅程是什么以及用户试图做什么?
  2. 哪些心智模型可能已经存在?
  3. 该产品是否打破了任何直观的因果模式?
  4. 你是否打破了现有的心智模型?如果是,请清晰地解释如何以及原因。良好的引导、微文案和视觉提示可以帮助弥合差距。

7. 传达产品限制

这种模式涉及清楚地传达人工智能模型能做什么和不能做什么,包括其知识边界、能力和局限性。

它有助于建立用户信任、设定适当的期望、防止误用,并在模型出现故障或异常行为时减少挫败感。

如何使用此模式

  1. 明确说明模型的局限性:显示过时知识或缺乏实时数据的上下文提示。例如,当问题超出其知识范围时, Claude会说明其知识范围。
  2. 当模型无法提供合适的输出时,提供回退或升级选项。例如,当被问及与购物无关的问题时, Amazon Rufus会说:“它无法访问事实信息,我只能协助解决与购物相关的问题和请求。”
  3. 在产品营销、入职培训、工具提示或回应免责声明中明确限制

8. 显示思路链(CoT)

在人工智能系统中,思路链(CoT) 提示 技术 通过模仿人类更结构化、循序渐进的思维过程,增强了模型解决复杂问题的能力。

CoT 展示是一种用户体验模式,它通过揭示 AI 是如何得出结论的来提高透明度。这可以增强用户信任,提高可解释性,并为用户反馈提供空间,尤其是在高风险或模糊场景下。

例如Perplexity通过显示处理步骤来增强透明度,帮助用户理解答案背后的深思熟虑的过程。

例如Khanmigo是一种人工智能辅导系统,它通过模仿人类推理来逐步指导学生解决问题,以增强理解和学习。

如何使用此模式

  1. 显示“研究”和“推理”等状态 来传达进展,减少用户的不确定性,让等待时间感觉更短。
  2. 使用渐进式披露:从高级摘要开始,并允许用户根据需要扩展细节。
  3. 提供 AI 工具透明度:清晰显示 AI 用于生成建议的外部工具和数据源。
  4. 展现信心和不确定性:表明人工智能信心水平,并在相关时强调不确定性。

9. 利用多种输出

GenAI 凭借其概率特性,能够对同一输入产生不同的响应。这种模式通过并排呈现多个输出来利用可变性。展示多样化的选项有助于用户创造性地探索、比较、改进或做出更符合其意图的决策。例如, Google Gemini提供了多种选项,帮助用户探索、改进并做出更明智的决策。

如何使用此模式

  1. 解释变化的目的:帮助用户理解输出之间的差异是故意的,旨在提供选择。
  2. 启用编辑功能:让用户无缝地对输出进行评分、选择、重新混合或编辑,从而塑造结果并提供反馈。例如, Midjourney 可以帮助用户调整提示,并指导用户使用重新混合功能进行修改和编辑。

10.提供数据源

在 GenAI 应用程序中,清晰地阐明数据源对于透明度、可信度和用户信任至关重要。清晰地表明 AI 的知识来源有助于用户评估响应的可靠性并避免错误信息。

这在医疗保健、金融或法律指导等高风险事实领域尤其重要,因为决策必须基于经过验证的数据。

如何使用此模式

  1. 内联引用可靠来源:将来源显示为脚注、工具提示或可折叠链接。例如,NoteBookLM会在其答案中添加引用,并将每个答案直接链接到用户上传的文档部分。
  2. 清晰披露训练数据范围:对于生成工具(文本、图像、代码),请简单解释模型训练时使用了哪些数据,以及未包含哪些数据。例如,Adobe Firefly披露其生成填充功能是在库存图像、公开授权作品以及版权已过期的公共领域内容上进行训练的。
  3. 提供来源级信心:在有多个来源贡献的情况下,直观地区分更高信心或更权威的来源。

11. 传达模型信心

AI 生成的输出具有概率性,准确度可能存在差异。显示置信度分数可以传达模型对其输出的确定性。这有助于用户评估可靠性并做出更明智的决策。

如何使用此模式

  1. 评估情境和决策风险:显示模型置信度取决于情境及其对用户决策的影响。在医疗保健、金融或法律咨询等高风险场景中,显示置信度分数至关重要。然而,在AI 生成的艺术作品或故事叙述等低风险场景中,显示置信度可能不会带来太多价值,甚至可能带来不必要的困惑。
  2. 选择合适的可视化:如果设计研究表明展示模型置信度有助于决策,那么下一步就是选择合适的可视化方法。百分比、进度条或一些修饰语(“可能”、“不确定”)都能有效地传达置信度。合适的可视化方法取决于应用程序的用例和用户的熟悉程度。例如,Grammarly会使用“可能”之类的修饰语来描述它与用户共同生成的内容。
  3. 在低信心情况下指导用户行动:提供前进的路径,例如提出澄清问题或提供替代选项。

12. 为记忆和回忆而设计

记忆和回忆是一个重要的概念和设计模式,它使人工智能产品能够存储和重用过去交互中的信息,例如用户偏好、反馈、目标或任务历史,以提高连续性和情境感知。

  • 通过记住过去的选择或偏好来增强个性化
  • 通过避免重复输入请求来减轻用户负担,尤其是在多步骤或长格式任务中
  • 支持复杂任务,如项目规划中的纵向工作流程、通过参考或借鉴过去的进展进行学习历程。

用于访问信息的记忆可能是短暂的会话内的短期)持久的跨会话的长期),并且可能包括对话上下文、行为信号或明确的输入。

如何使用此模式

  1. 定义用户上下文并选择记忆类型。
    根据用例选择记忆类型,例如短暂记忆、持久记忆或两者兼有。购物助理可能实时跟踪交互,无需为未来会话保留数据,而个人助理则需要长期记忆来实现个性化。
  2. 在用户交互中智能地使用记忆
    为 LLM 构建基本提示,以便根据上下文回忆和传达信息(例如,“上次你喜欢更轻松的语气。我应该继续吗?”)
  3. 传达透明度并提供控制功能
    清晰地传达正在保存的内容,并允许用户查看、编辑或删除已存储的记忆。使“删除记忆”操作易于访问。例如,ChatGPT 在其平台上提供了广泛的控制功能,可随时查看、更新或删除记忆

13.提供上下文输入参数

情境输入参数通过简化用户交互来提升用户体验,并更快地实现用户目标。通过利用用户特定数据、用户偏好、过往交互,甚至来自其他具有相似偏好的用户的数据,GenAI 系统可以定制输入和功能,以更好地满足用户意图和决策。

如何使用此模式

  1. 利用先前的交互:根据用户先前输入的内容预填充输入。参考 模式 12,记忆与回忆。
  2. 使用自动完成或智能默认设置:在用户输入时,根据个人和全局使用模式提供智能的实时建议。例如,Perplexity会根据您当前的查询线索,提供智能的后续查询建议。
  3. 推荐交互式 UI 小部件:根据系统预测,提供定制的输入小部件,例如提示框、滑块和复选框,以增强用户输入体验。例如,ElevenLabs允许用户通过显示预设或默认值来微调语音生成设置。

14. 为副驾驶/共同编辑/部分自动化而设计

副驾驶是一种增强模式,AI 充当协作助手,在用户掌控全局的同时,提供情境化和数据驱动的洞察。这种设计模式在战略制定、构思、写作、设计或编码等领域至关重要,因为这些领域的结果具有主观性,用户拥有独特的偏好,或者用户的创意输入至关重要。

副驾驶 加快工作流程,增强创造力并减少认知负荷,但人类仍保留创作权和最终决策权

如何使用此模式

  1. 嵌入内联帮助:AI 建议会根据上下文进行呈现,方便用户轻松接受、拒绝或修改。例如,Notion AI 可以帮助您起草、总结和编辑内容,同时您可以掌控最终版本。
  2. 保存用户意图和创意方向:让用户通过目标、语气或示例等输入来引导 AI,同时保持原创性和创意方向。例如,Jasper AI 允许用户设置品牌语调和语气指南,帮助构建 AI 输出,使其更好地匹配用户意图。

15. 设计自动化的用户控件

构建 UI 级机制,让用户根据用户目标、上下文场景或系统故障状态管理或覆盖自动化。

没有系统能够预测所有用户情境。控制赋予用户自主权,即使人工智能出错,也能保持信任。

如何使用此模式

  1. 采用渐进式展现:从最低限度的自动化功能开始,逐渐允许用户选择更复杂或自主的功能。
    例如,Canva Magic Studio一开始会提供简单的 AI 建议,例如文本或图像生成 ,然后逐步展示高级工具,例如 Magic Write、AI 视频场景和品牌语音定制。
  2. 为用户提供自动化控制功能: 提供诸如 开关、滑块或基于规则的设置等UI 控件,让用户选择何时以及如何控制自动化功能。例如,Gmail 允许用户禁用智能撰写功能。
  3. 自动化错误恢复设计:当 AI 出现故障(误报/漏报)时,向用户提供纠正措施。添加手动覆盖、撤消或升级到人工支持的选项。例如,GitHub Copilot 建议内联代码,但当输出关闭时,开发人员可以轻松拒绝、修改或撤消建议。

16. 设计用户输入错误状态

GenAI 系统通常依赖于对人类输入的解读。当用户提供模糊、不完整或错误的信息时,AI 可能会误解其意图或产生低质量的输出。

输入错误通常反映的是用户期望与系统理解之间的不匹配。妥善处理这些问题对于维护信任和确保顺畅的交互至关重要。

如何使用此模式

  1. 优雅地处理拼写错误:当置信度较高(例如,> 80% )时,使用拼写检查或模糊匹配自动纠正常见的输入错误,并巧妙地进行表面更正(“显示结果......”)。
  2. 提出澄清性问题:当输入过于模糊或有多种解释时,提示用户提供缺失的上下文。在对话设计中,当意图明确但实体不明确时,就会发生此类错误。了解更多关于实体和意图的信息。例如,当 ChatGPT 给出“首都是什么?”这样的低语境提示时,它会提出后续问题,而不是猜测。
  3. 支持快速更正:方便用户编辑或覆盖您的解释。例如,ChatGPT 在已提交的提示旁边显示一个编辑按钮,方便用户修改输入。

17. 人工智能系统错误状态的设计

GenAI 输出本质上是概率性的,容易出现幻觉、偏见和上下文错位等错误。

与传统系统不同,GenAI 的错误状态难以预测。针对这些状态进行设计需要透明度、恢复机制和用户自主性。精心设计的错误状态可以帮助用户了解 AI 系统的边界并重新获得控制权。

混淆矩阵有助于分析人工智能系统错误,并通过显示以下计数来深入了解模型的执行情况
-真阳性(正确识别阳性案例)
-假阳性(错误识别阳性案例)
-真阴性(正确识别阴性案例)
-假阴性(未能识别阴性案例)

人工智能错误和故障状态的场景

  1. 系统故障(错误输出)
    由于数据质量差、存在偏见或模型错觉,会出现假阳性或假阴性。例如,花旗银行金融欺诈系统会显示一条消息:“异常交易。您的卡已被冻结。如果是您本人操作的,请验证您的身份。”
  2. 系统限制错误(无输出)
    由于未经训练的用例或知识缺口,会出现真负例。例如,当 ODQA 系统接收到训练数据集之外的用户输入时,会抛出以下错误:“抱歉,我们没有足够的信息。请尝试其他查询!”
  3. 上下文错误(误解输出)由于解释不清或与用户预期相冲突而导致用户困惑的
    真阳性结果属于上下文错误。例如,当用户从新设备登录时,被锁定。AI 会回复:“您的登录尝试已被标记为可疑活动。”

如何使用此模式

  1. 传达各种场景的人工智能错误:使用诸如
    “这可能不准确”、“这看起来像......”或表面置信度水平之类的短语来帮助校准信任。
  2. 使用模式传达低置信度输出的模型置信度。
  3. 提供错误恢复:如果发生系统故障或上下文错误,请提供清晰的路径来覆盖、重试或升级问题。
    例如,使用“尝试其他查询”、“让我改进一下”或“联系客服”等方式。
  4. 启用用户反馈:轻松报告幻觉或错误输出。了解更多关于模式 19 的信息。设计以捕获用户反馈

18. 设计时要捕捉用户反馈

现实世界的一致性需要直接的用户反馈来改进模型,从而改进产品。当人们与人工智能系统互动时,他们的行为会塑造并影响他们未来收到的输出。从而形成一个持续的反馈循环,系统和用户的行为都会随着时间的推移而不断调整。例如,ChatGPT使用“反应”按钮和“评论”框来收集用户反馈。

如何使用此模式

  1. 考虑隐性反馈:捕捉用户操作,例如跳过、忽略、编辑或互动频率。这些被动信号提供了有价值的行为线索,有助于调整推荐内容或发现用户不感兴趣的行为模式。
  2. 寻求明确的反馈:通过点赞/踩、NPS 评分小部件或用户操作后的快速调查问卷,收集用户的直接反馈。利用这些反馈来改进模型行为和产品契合度。
  3. 告知反馈的用途:让用户了解他们的反馈将如何影响未来的体验。这可以增强信任,并鼓励用户持续做出贡献。

19. 模型评估设计

强大的 GenAI 模型需要在训练期间以及部署后持续进行评估。评估旨在确保模型按预期运行,识别错误和幻觉,并与用户目标保持一致,尤其是在高风险领域。

如何使用此模式

三种关键的评估方法可以改进机器学习系统。

  1. 基于法学硕士 (LLM) 的评估(LLM-as-a-judge)一个独立的语言模型充当自动评判者。它可以对回复进行评分,解释其推理过程,并分配诸如有用/有害或正确/不正确等标签。
    例如,Amazon Bedrock 使用 LLM-as-a-Judge 方法来评估 AI 模型的输出。一个独立的可信 LLM(例如 Claude 3 或 Amazon Titan)会根据有用性、准确性、相关性和安全性自动审核和评分回复。例如,比较两个 AI 生成的针对同一提示的回复,评判模型会选择更优的那个。这种自动化方法可将评估成本降低高达 98%,并加快模型选择速度,而无需依赖缓慢且昂贵的人工审核。
  2. 启用基于代码的评估:对于结构化任务,使用测试套件或已知输出来验证模型性能,特别是对于数据处理、生成或检索。
  3. 捕捉人工评估:集成实时 UI 机制,方便用户将输出标记为有用、有害、不正确或不清楚。更多详情,请参阅模式 19。捕捉用户反馈的设计
  4. LLM 作为评判者和人工评估的混合方法将准确率大幅提高到 99%

20. AI护栏设计

人工智能护栏的设计意味着在GenAI模型中建立实践和原则,以最大限度地减少伤害、错误信息、不良行为和偏见。至关重要的是

  • 保护用户和儿童免受有害语言、虚构事实、偏见或虚假信息的侵害。
  • 建立信任和采用:当用户知道系统避免仇恨言论和错误信息时,他们会感到更安全并愿意经常使用它。
  • 道德合规:欧盟人工智能法案等新规要求人工智能设计必须安全。团队必须符合这些标准,才能保持合法合规并承担社会责任。

如何使用此模式

  1. 分析并引导用户输入:如果提示可能导致不安全或敏感内容,则引导用户进行更安全的交互。例如Miko 机器人遇到脏话时,它会回答“我不允许使用此类语言”。
  2. 过滤输出并审核内容:使用实时审核功能检测并过滤可能有害的 AI 输出,在显示给用户之前屏蔽或重新构建它们。例如显示一条注释:“此回复已根据我们的安全准则进行了修改。”
  3. 使用主动警告:当用户接触敏感或高风险信息时,巧妙地通知他们。例如“这只是信息建议,不能替代医疗指导。”
  4. 创建强大的用户反馈机制:让用户轻松举报不安全、带有偏见或虚假信息的输出,从而通过主动学习循环逐步改进人工智能。例如,Instagram 提供了应用内选项,方便用户举报伤害、偏见或虚假信息。
  5. 交叉验证关键信息:对于高风险领域(例如医疗保健、法律、金融),使用可信数据库备份 AI 生成的输出,以捕捉幻觉。参考模式 10, 提供数据源。

21. 传达数据隐私和控制

这种模式确保 GenAI 应用程序清楚地传达如何收集、存储、处理和保护用户数据。

GenAI 系统通常依赖于敏感数据、情境数据或行为数据。处理不当可能会导致用户不信任、法律风险或意外滥用。清晰地传达隐私保护措施有助于用户感到安全、受到尊重并掌控全局。例如,Slack AI 明确表示,客户数据仍归客户所有并控制,不会用于训练 Slack 或任何第三方 AI 模型。

如何使用此模式

  1. 显示透明度:当 GenAI 功能访问用户数据时,显示访问内容和原因的解释。
  2. 设计选择加入和选择退出流程:允许用户轻松切换数据共享偏好设置。
  3. 启用数据审查和删除:允许用户查看、下载或删除他们的数据历史记录,从而让他们能够持续控制。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

优化用户体验 | AI工作流 | Lovable + Cursor:如何设置这个强大的 AI 工作流程

杰睿 行业趋势

今天给大家分享一个强大的工作流程:Lovable — GitHub — Cursor。

虽然 Lovable 和 Cursor 都是流行的工具,但它们各有其优点和局限性。

但当一起使用时,它们可以很好地互补,您可以获得两全其美的效果。

此工作流程让您可以利用 Lovable 的快速设计生成和 Cursor 的 AI 驱动编码环境来精确构建更强大的应用程序。

我将向您展示如何逐步连接它们并创建无缝的工作流程。

概述

工作原理

在Lovable中,将您的项目与Github连接起来,这样代码就可以实时同步到GitHub。

在 Cursor 中,你可以将项目代码克隆到本地并进行编辑。之后,你可以随时同步到 GitHub。

一旦同步,更新将立即反映在 Lovable 中。

按 Enter 键或单击即可查看完整尺寸的图像
工作流程概述

然后,您可以根据需要选择使用 Lovable 或 Cursor 进行工作。两者之间可无缝切换。

为什么它如此强大

对于专注于前端的设计来说,Lovable 直观且快速。但当需要改进或添加实际功能时,你很快就会遇到瓶颈。

它根本不适合开发可靠的应用程序。而且,Lovable 的免费计划也很容易达到使用上限。

这就是 GitHub 和 Cursor 的用武之地。GitHub 充当了 Lovable 和 Cursor 之间的桥梁。从它的名字就可以看出“ GitHub = Git + Hub ”。Git 是管理代码版本的工具。GitHub 是一个托管 Git 存储库并增强协作的平台。

而 Cursor 就像一个带有 AI 助手的代码编辑器。它比 Lovable 强大得多。你可以更精确地调试、优化和构建代码。

缺点是,如果你编程经验有限,Cursor 可能会让你感到不知所措,而且它不够简单,不适合前端探索。这就是为什么 Lovable 和 Cursor 相辅相成的原因。

但是如何让 Lovable、Cursor 和 GitHub 协同工作呢?

按 Enter 键或单击即可查看完整尺寸的图像
我在 Reddit 上偶然看到的一篇帖子 :)

接下来,我将逐步引导您完成工作流程!

步骤 1:Lovable → GitHub

首先,你需要有一个 GitHub 帐户。

那就用 Lovable 来构建一些东西吧。我在一篇新闻通讯里提到过 Lovable 。它很容易上手。

为了这个演示,我创建了一个简单的“像我 5 岁一样解释它”应用程序。

您可以随时通过点击右上角的 GitHub 图标选择连接到 GitHub。

按 Enter 键或单击即可查看完整尺寸的图像
Lovable 中的 GitHub 图标

如果单击该图标,将出现以下对话框:

按 Enter 键或单击即可查看完整尺寸的图像
点击 GitHub 图标后

连接到 Github 帐户后,此对话框将显示另一个选项,供您将此“项目”连接到您的 Github。请确保它也已连接。

步骤 2:GitHub → Cursor

打开 Cursor。第一步是选择一个文件夹。这就是项目所在的位置。

接下来,您只需在 Cursor 中输入以下内容:

克隆此 repo:[你的项目 Github 链接]repo:[你的项目 Github 链接]

然后 Cursor 会告诉你该怎么做。设置起来非常简单直接。

您实际上是在安装“依赖项”,即下载并设置项目正常运行所需的所有包。

按照说明,我打开了本地服务器,它在 Lovable 中显示了完全相同的设计。

按 Enter 键或单击即可查看完整尺寸的图像
获取我的本地服务器来展示 Lovable 的设计

假设现在我想在 Cursor 中进行一些修改。CTA 按钮的悬停效果太过分了。

按 Enter 键或单击即可查看完整尺寸的图像
原始按钮悬停效果

我在 Cursor 的提示窗口中输入了以下内容:

删除悬停时“解释一下!”CTA 上的放大效果。悬停时“解释一下! ” CTA产生影响。

然后就修复了:

按 Enter 键或单击即可查看完整尺寸的图像
Cursor 中按钮悬停效果修改后

步骤 3:光标→GitHub

简介

您可以随时选择将代码从 Cursor 同步到 GitHub。

但是,您会发现选项比您预期的要多得多,而只有一个选项 — — 同步。

Git 就是这样运作的。它将版本控制分解成多个小的、具体的操作,以便你进行精确控制。

这在处理大型项目时尤其有用。想象一下,当多人协作时,所有本地模型都同步到一个中心模型,而且每个人都只能选择同步,没有其他选择,那该有多混乱。

我在下面画了一张图表来帮助您更好地理解所有这些命令。

按 Enter 键或单击即可查看完整尺寸的图像
从 Cursor 到 Github 的 Git 命令

您不必亲自输入这些命令,但是当您在 Cursor 中看到这些术语并感到困惑时,该图表可以作为有用的参考。

阶段变化

首先,点击这个“分支”图标切换到源代码控制面板。然后点击“+”图标“暂存更改”,使其准备好提交。

按 Enter 键或单击即可查看完整尺寸的图像
阶段变化

提交 + 同步

然后根据您的需要,您可以在“提交”下拉菜单中选择一个选项。

如果您只想直接同步,请使用“提交和同步”。

按 Enter 键或单击即可查看完整尺寸的图像
提交并同步

你看到“提交”顶部的消息框了吗?它就像一个版本历史记录名称,方便你更好地跟踪更改。如果你将其留空,Cursor 会根据你所做的更改自动生成一条提交消息。

步骤 4:GitHub → Lovable

现在就是神奇的一步。因为你什么都不用做。

你应该会立即看到更新自动同步到 Lovable 中。太酷了!

按 Enter 键或单击即可查看完整尺寸的图像
Cursor 中的更新实时反映在 Lovable 中

如果您查看上面的快照,它会在聊天窗口中显示来自 Cursor 的最新修订。

然后,您可以根据需要选择继续在 Lovable 中构建或切换到 Cursor。

附录

如果您想与某人合作,只需在 GitHub 上的项目仓库中添加一位合作者即可。前往项目 → 设置 → 合作者 → 添加人员

按 Enter 键或单击即可查看完整尺寸的图像
在 GitHub 中添加协作者

一旦添加,他们也可以使用 Cursor 实时协作该项目。

感谢阅读。特别感谢 Junaid,在我准备课程期间与我分享了工作流程

下周见,

欣然

-

PS:几天前我做了一个关于创建 AI 原型的演讲,并演示了一些示例。如果你也对这个话题感兴趣,可以去看看。你可能会喜欢我和观众现场演示的冰淇淋搭配应用。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

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

存档