首页

桌面端界面设计 | 如何设计浅色主题 UI

杰睿 设计管理与成长

如果您曾经尝试设计轻量级 UI,您就会理解这个悖论:它看起来很简单,但却很容易出错。

增加亮度可能会导致图像变得平淡、褪色,甚至刺眼。

你以为白色=光。但这就像说糖等于甜点一样。

凭借 6 年多为 SaaS、移动和商业平台进行设计的经验,我了解到浅色主题需要与深色主题一样多的改进和意向性,甚至更多。

它们在所有环境中都体现了清晰度、对比度、结构性和实用性。

让我来分解一下。

 

浅色主题背后的心理学
将显示缩放图像

轻量级 UI 感觉:

  • 冷静的
  • 熟悉的
  • 值得信赖

这就是为什么你会在以下地方找到它们:

  • 银行应用程序
  • 医疗保健仪表板
  • 政府网站
  • SaaS 产品

在生产力应用中,81% 的用户更喜欢将浅色主题作为默认主题。

人们需要清晰的信息,尤其是在特定场景下。不要让他们失望。

总是问自己:“这会用在哪里?” 室内、室外还是移动? 这会改变一切。

设计 Light 主题的分步工作流程

1. 从柔软的中性基底开始

将显示缩放图像

避免使用#FFFFFF。认真的。

相反,我选择中等中性色,如#F4F6F8 或#F9FAFB,它们可以提供微妙的深度并减轻眼睛的疲劳。

在模态框或照片上使用透明白色覆盖层来创建深度而不反射光线。

2.建立模块化色彩系统

将显示缩放图像

使用语义标记bg-default,例如text-muted,,border-light。这使得主题保持一致且可扩展。

3. 控制对比度(不仅仅是为了可访问性)

不要止步于 WCAG 兼容性。真正的目标是现实世界的可读性。

  • 文本对比度至少为 4.5:1
  • 为灰色添加色调以增加温暖感
  • 使用鲜艳的色彩突出显示 CTA 和错误。

我犯的错误:我曾经在仪表盘中使用了符合WCAG标准的灰色文本。虽然在我的屏幕上看起来很棒,但在户外日光下用户很难阅读。

教训:合规性≠可用性。

4. 限制使用阴影

阴影很棒,但要小心。

  • 使用 1-2 个深度级别
  • 更喜欢柔和的阴影或内嵌阴影
  • 避免使用硬轮廓

5. 反射和阳光的设计

  • 在阳光直射下进行测试(是的,在户外走走)。
  • 避免使用浅色图标,因为它们会消失。
  • 使用 400 多种字体粗细。

过亮的设置可能会使屏幕对比度降低多达 40%。请适当调整。

6. 仔细突出交互状态

在浅色主题中,悬停和焦点等状态经常被忽略。

  • 使用微妙的阴影、下划线或发光效果
  • 定义每个状态:悬停、活动、禁用

专业提示:我总是在灰度模式下测试我的元件库。如果状态保持清晰,就说明我做得对。

7.不要忘记品牌个性

一个常见的错误:品牌在轻量级 UI 中消失。

反而:

  • 使用品牌颜色来调配背景
  • 使用品牌插图或图标
  • 使用字符设置空状态的样式

即使在灯光模式下,Notion 的 UI 也保持着自己的个性。

将框架应用于 Figma 社区项目

我通常会使用随机的 Figma 模板来测试我的设计工作流程。它不仅提升了我的技能,还揭示了通用 UI 的弱点。

设计师常犯的浅色主题错误

  • 过度使用空白(可读性下降)
  • 低对比度+色彩过载=不可读。
  • 没有视觉层次。
  • 忽略组件状态。
  • 在黑色画布上设计一切会导致判断偏差。

黄金法则:首先用灰度创建光图案。添加颜色只是为了提高清晰度,而不是为了定义清晰度。

设计一个令人惊叹的灯光主题是一门艺术,也是一门科学。

  • 功能胜过花哨。
  • 对比意味着清晰度。
  • 深度应该感觉自然。
  • 始终在现实世界中进行测试!

设计从来都不是孤立完成的。你的灯光主题应该存在于阳光明媚的环境、繁忙的工作站和疲惫的双眼之中。

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

新的用户体验规则:人工智能推荐如何改变设计

杰睿 交互设计及用户体验

新的用户体验规则:人工智能推荐如何改变设计 — 0001

你知道那种滚动页面的瞬间吗?——感觉网站好像已经知道你想要什么了?没错,这就是人工智能在幕后运作。如今的用户体验设计不再只是按钮或漂亮的颜色。感觉就像……界面在和你一起思考。有点诡异,也有点酷。

Netflix 的界面、亚马逊的产品推荐,甚至ChatGPT UI 等工具都展现了人工智能如何改变游戏规则。而且,就连 Plerdy SEO Analyzer 或 Visual Inspector 等 Chrome 扩展程序也加入了这场革命。

为什么这很重要?因为如果你的设计还停留在 2015 年的水平,用户很快就会跳出。

为什么传统的用户体验规则不再有效

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0002

说实话——旧的用户体验设计已经行不通了。用户的行为不再像以前那样。他们不再遵循你漂亮的布局。他们滚动得太快。他们疯狂点击。他们像忍者一样跳过横幅。你那简洁的设计?现在都消失了。

我在测试的一家网店里看到了这种情况。看起来不错。但当我们查看热力图时,发现大多数用户根本没看过侧边栏。就好像它根本不存在一样。就在那时,我想——好吧,也许是时候放弃传统的用户体验“规则”了,开始相信人们的实际行为。

静态设计满足动态期望

用户想要快速、智能、响应迅速的用户界面。但传统的设计呢?它只是僵硬、静止,就像没有遥控器的老电视一样。你点击某个按钮……除非你强制操作,否则什么也不会改变。这才是糟糕的用户体验。

您是否注意到:

  • 菜单永远停留在同一个地方
  • 滚动感觉就像一条漫长而无聊的隧道
  • 横幅弹出,但没人看

是的。这就是为什么静态用户体验不再有效。设计必须随着用户而动,而不是仅仅停留在外观上。

预测性用户体验的兴起

这部分很疯狂。预测性用户体验意味着人工智能会观察用户的行为——他们点击了哪里,跳过了什么——然后自动更改下次访问的界面。也就是说,你不用再猜测了。人工智能知道。

TikTok?预测性。亚马逊?也一样。就连Netflix也会根据你观看的内容改变图像。这不是魔法——而是用户体验设计中的人工智能。

而且你不需要一个价值数十亿美元的团队。你可以轻松地测试。上周我用了 Plerdy SEO Analyzer,它能告诉我哪些内容块值得关注,哪些不值得。它甚至还能提供修复元标签、标题和可读性的人工智能技巧。这对于我们这样的用户体验人员来说意义重大。

旧用户体验关注的是“好看”。新用户体验关注的是“反应快”。设计如今充满活力。如果它不再活跃,你的用户可能已经流失了。

人工智能在个性化用户体验中的作用

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0003

你有没有打开一个网站,感觉就像——等等,这个页面认识我?这不是魔法。这是人工智能在后台运行,让用户体验比你的晨间播放列表更个性化。而且,这不仅仅是谷歌或Meta的专利。现在,即使是小型团队也会使用人工智能工具来针对每一位用户调整设计。

用户体验不再是千篇一律的布局。现在,设计需要做出反应、进行调整,有时甚至在用户说出之前就能猜测他们想要什么。没错,人工智能非常擅长猜测。

去年我帮助过的一家网店就出现了这种情况。我们添加了AI驱动的产品区块,它会根据用户之前的操作进行调整。结果如何?短短两周内,转化率就提升了21%。这可不是理论,而是真实的数据。所以,如果你的用户体验仍然在等待用户操作,而不是预测用户行为,那么你可能已经落后了。

以下是推动现代个性化用户体验的因素:

  • 行为模式
  • 基于意图的设计转变
  • 实时 UI 决策

这不是未来,而是现在。用户已经对此有所期待。

人工智能实时推荐

它的工作原理如下:用户点击一个产品。突然,下一个版块就变了。不同的推荐、新的横幅,甚至可能是另一个行动号召 (CTA)。无需重新加载,无需等待。这就是实时个性化。AI 会跟踪用户操作并立即更新设计。

我曾与波兰一家小型电商合作。我们使用了一种工具,可以查看点击历史记录,然后推送“智能区块”——一些显示更匹配的小设计元素。用户在网站上停留的时间更长了。跳出率下降了 15%。这就是人工智能提升用户体验的成果。

想想 Dynamic Yield 或 Plerdy SEO Analyzer 这样的工具——它们能帮你了解哪些内容效果显著,以及哪些方面可以提升价值。它们不仅仅基于屏幕尺寸,还基于实际操作。这几乎就像网站现在有了大脑一样。

相信我,一旦你尝试过,就不会再回头了。

自适应布局与响应式设计

现在,不要混淆响应式和自适应——它们听起来很相似,但本质上并不相同。响应式设计只是根据设备改变布局。平板电脑?更小的按钮。手机?折叠菜单。仅此而已。

但自适应布局更深入。人工智能会检查用户的行为——快速滚动、不点击、来回滑动——并实时调整设计。它可能会隐藏菜单,或者将浮动按钮向上推。这就是用户体验变得智能的地方。

Netflix 也这么做。如果你经常暂停,他们会把控制键移得更近。亚马逊会根据滚动深度调整产品行。这不是 CSS 媒体查询,而是 AI 在读懂你的想法。

没错,响应式设计固然很好,但自适应性呢?这才是本能的设计。人工智能让用户体验不仅实用,更令人难忘。

帮助你分析人工智能驱动的用户体验的 Chrome 扩展程序

我不太喜欢猜测,尤其是在用户体验设计方面。你添加了一些人工智能驱动的区块,但你不知道用户是否能看到它?这就是为什么我开始使用 Chrome 扩展程序进行用户体验测试。它们不是昂贵的大型工具,而是快速、简单的插件,可以展示真实的情况。有些我每天都会用,有些则只用于 A/B 测试。但当人工智能扰乱你的布局时,它们结合起来会非常有帮助。

这是我的首选组合:

相信我,当您的用户体验由人工智能驱动并且您希望确保用户不会迷失在“智能”布局中时,这种组合会非常有效。

Plerdy 分析网站— 用户体验模式和热图

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0004

在任何重新设计之前,我都会先运行这个工具。即使是在竞争对手的网站上,它也能显示滚动深度、热门点击区域以及没人触及的区域。你甚至不需要在他们的网站上安装任何东西——它就能正常工作。

它帮助我发现,40% 的用户会跳过一位客户主页上的产品横幅。我们将横幅位置下移,并修改了 CTA,跳出率下降了。快速简洁的用户体验赢得了胜利。

Lighthouse — 核心用户体验指标和可访问性洞察

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0005

这个插件内置于 Chrome 浏览器内,无需安装。当我想知道我的设计是否真的有效时,我会使用它——加载速度快、布局无偏移、对比度好、移动端视图清晰。

有一次,AI 在我工作的主页上添加了一个漂亮的轮播图。看起来很漂亮。但 Lighthouse 显示,它的加载速度降低了 1.6 秒。移动评分也下降了。我们把它移除了。页面体验好上百倍。

它还会检查可访问性,这是良好用户体验的一部分。如果您的字体太小或背景颜色太淡——Lighthouse 会直接告诉您。毫不留情。

Visual Inspector — 实时编辑与协作

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0006

说实话,当我不想碰代码的时候,我会用这个。你只需点击一下,更改颜色,移动一个块——就搞定了。非常适合演示,或者当客户说“你能把那个按钮移开一点吗?”的时候。

另一个很酷的功能是:你可以添加评论或与团队分享预览。它让反馈更容易,设计也更有趣。当AI做出奇怪的布局,而你需要快速“人工修复”时,这是一个很棒的工具。

Plerdy SEO 分析器— 实时内容和结构审核

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

这个工具简直是救星。我在一个包含 AI 生成版块的博客上测试了它。它在几秒钟内就帮我完成了一次完整的 SEO 审核。它可以检查标题、文本可读性、关键词密度,甚至还能显示内容中哪些部分比较薄弱。

最棒的是?它能提供真正的 AI 提示。比如,“这个标题太长了”或“这里缺少 H2 按钮”。所以,当 AI 搞乱了你的页面结构时,这个扩展程序会准确地告诉你该如何修复。没有废话,只有直接的建议,让用户体验更强大。

需要分析人工智能如何影响你的用户体验吗?这些扩展程序不仅能为你展示数字,还能帮助你了解用户的感受。而这才是真正的设计发生的地方。

A/B 测试 AI 驱动的 UI 决策

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0007

有时人工智能会给出很酷的想法。但并非所有想法都对真实用户有益。这听起来可能显而易见,但测试人工智能生成的设计是绝对必要的。即使用户体验看起来很棒,也并不意味着人们会点击或滚动。设计需要验证。用户体验需要行为数据。否则,它就只是猜测。

我记得我做过一个测试——我们用人工智能修改了主页布局。它拥有智能用户体验、自适应设计,看起来很新颖。但用户互动性很差。滚动地图很冷门。我们把CTA(行动号召)移到了更高的位置,改变了按钮样式——A /B测试之后,点击率跃升了31%。这就是测试的作用。

人工智能虽然强大,但却无法解读人类的情感。A/B 测试可以帮助你的用户体验匹配真实的用户,而不仅仅是算法。

从假设到热图

假设AI告诉你要更改UI布局。新的结构。新的区块。听起来很棒。但你怎么知道这对设计有帮助呢?

测试一下,就这么简单。我总是从一个小想法开始——比如改变标题顺序或移动定价区块。然后我会用 Plerdy Analyze Websites 来观察真实用户的行为。这个工具可以显示热图、滚动深度和点击次数。它对于测试动态用户体验非常方便。

以下是我的做法:

  1. 通过新的用户体验创建 AI 变体
  2. 根据实际点击跟踪交互模式
  3. 审查每个设计元素的滚动、弹跳和行为

设计的意义不在于看起来有多酷,而在于用户实际使用的内容。这就是为什么我从来不会在没有检查行为数据的情况下发布新的UI。即使是最聪明的AI创意,如果用户体验不能与人产生共鸣,也会失败。

通过内容审核衡量结果

现在让我们将设计和 SEO 结合起来。因为现代用户体验不仅仅关乎布局或按钮。它还关乎内容的体验、阅读方式以及搜索引擎的运作方式。

每次 A/B 测试后,我都会用 Plerdy SEO Analyzer。它会检查内容是否仍然遵循良好的结构。它会显示标题是否正确,关键词是否仍然有效,以及 AI 是否改写了某些错误的内容。有一次,AI 把 H2 改成了一个笑话——流量就下降了。一点也不好笑。

分析器几分钟内就帮我解决了问题。我再次调整了设计。用户体验变得更简洁了。SEO流量也回来了。

所以,没错——用AI来改进UI和设计,但千万别跳过测试。没有测试的UX是没有未来的。

用户体验的未来是人工智能

将显示缩放图像
新的用户体验规则:人工智能推荐如何改变设计 — 0008

用户体验不再仅仅依靠人工智能。用户体验正在成为人工智能。这是事实。而且,这并非科幻故事。它已经存在。你浏览TikTok——这就是人工智能驱动的用户体验。你在亚马逊上购物——整个产品页面都会根据你过去的行为进行调整。设计不再是一成不变的。它变得智能、灵活,当然,还有点令人毛骨悚然。但这是一种好的方面。

我相信这不是一种“趋势”。这是新的基础。没有人工智能的用户体验会让人感觉陈旧、缓慢、愚蠢。而且用户不会等待。如果你的设计不能理解用户的想法,他们两秒后就会离开。

我们不能再把人工智能仅仅视为一个插件了。它是界面的新大脑。它控制着设计如何运作,用户如何移动,以及他们看到什么。如果你还没有这样想过……那么,是时候开始了。

从AI支持的用户体验到AI创建的用户体验

最疯狂的部分来了。以前,AI 只是在内容方面提供帮助,比如提供一些文字和一些布局建议。现在,它构建了整个用户体验,包括结构、按钮、哪些内容先显示、哪些内容会消失——所有的一切。像 Galileo AI 或 Uizard 这样的 AI 工具可以在几分钟内创建完整的界面模型,真正的原型。你只需要给出一个简短的提示。

即使是像 Booking.com 这样的大型公司,也使用 AI 来设计和运行数千个 UI 测试,无需人工干预。这并非为了节省时间,而是为了更智能的用户体验。更快的决策,更优的结果。

有些设计师感到害怕。我理解。但你知道吗?如果人工智能能让用户体验更简洁,设计更实用——我完全支持。

成为 AI 优先设计师

你不需要成为一名程序员,也不需要构建自己的模型。但你需要改变思维。别再问:“我该如何在这里添加人工智能?” 而是要问:“如果从一开始就由人工智能掌控,设计会是什么样子?”

从您熟悉的工具入手。使用 Plerdy SEO Analyzer 检查 AI 如何影响内容结构。在 Plerdy Analyze Websites 中试用热图,看看哪些方法有效。多考虑用户行为,少考虑固定的网格。

AI优先的思维模式意味着:你的设计会生存、学习并适应。这才是真正的用户体验。

结论

如果你仍然认为人工智能只是一种趋势,那你就错过了全局。人工智能并非要扼杀用户体验设计,而是要大力推动它的发展。它就像涡轮增压模式一样。你,设计师,仍然是规则的制定者。但现在,人工智能可以帮助你打破那些枯燥乏味的规则。像 Plerdy、Uizard甚至Figma AI 这样的工具,它们并非取代技能,而是加速了创造奇迹。所以,不要抗拒,要利用它。在用户点击离开之前,提升你的用户体验。

 

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

超越旅程地图:AI UX 中的控制设计

杰睿 行业趋势

UX AI 设计工具包图示
罗布·查佩尔(Rob Chappell)插画

多年来,用户体验团队一直依赖用户旅程地图(一种标准的设计思维工具)来可视化和传达用户的意图、行为和流程。我们绘制了用户在各个界面步骤中的目标和情感,追踪了从发现到转化或任务完成的路径。这些地图假设用户旅程的进展基本呈线性:一系列可见的屏幕、结构化的任务以及用户做出的深思熟虑的选择。

但在人工智能驱动的系统中,这些假设开始瓦解。步骤变得不可见。目标在过程中不断演变。系统不再等待命令——它会推断、提出建议,甚至采取行动。随着人工智能承担起更多责任,我们熟悉的用户流程架构开始瓦解。我们曾经称之为“旅程”的东西开始变得更像一场对话,或者更准确地说,一场谈判。

传统的旅程地图假设流程固定——逐步完成的任务、静态屏幕和清晰的用户意图。但在由人工智能驱动的体验中,例如 ChatGPT、Google Gemini 或 GitHub Copilot:座席会主动完成任务(有时是隐形的),并且控制权会来回传递。考虑以下人工智能操作:

  • 写作助手会在您输入时完成您的句子。
  • 设计工具根据定义不明确的指令应用更改。
  • 浏览器助手可以总结网页、建议下一步行动并跨域采取行动。

在每种情况下,系统都会参与意义建构和决策。这些体验构成了一个相互影响的循环。针对这种新现实进行设计需要新的框架——用户体验模型,它超越了用户逐步完成任务的模式,而是考虑了人机之间动态的、共享的控制。

随着人工智能系统功能日益强大,我们作为体验设计师的工作也发生了变化。这不仅仅关乎流程、组件或优化。这意味着我们需要根据控制感知用户体验的原则进行设计:

  1. 意图框架:如何建议行动?帮助用户设定模糊的目标。
  2. 清晰地预览AI计划: AI正在做什么?为什么?在行动之前展示系统将做什么
  3. 可操控性:我可以改变路径吗?让用户在任务中调整AI行为。
  4. 可逆性:我可以撤销刚刚发生的事情吗?提供清晰的撤销和覆盖选项。
  5. 透明度和一致性:这个系统会尊重我的时间、我的目标和我的监督吗?分享系统推理。

这关乎塑造人与自主运作系统之间的关系。这种关系只有在清晰易懂、可操控且以人为本的基础上才能有效运作。

管理控制平衡

自主性滑块的图示
Andrej Karpathy 的“自主滑块”概念——Rob Chappell 的插图

在 Y Combinator 的 AI 创业学校的演讲软件正在(再次)改变中,特斯拉前 AI 主管、应用 AI 领域最具影响力的人物之一 Andrej Karpathy 将软件设计的这种转变描述为从确定性、代码驱动系统向新范式的过渡:界面是自然语言,程序就是提示本身。

正如 Karpathy 所说,“你的提示现在是编写 LLM 的程序。”但与命令或表单输入不同,提示会启动一个概率性的解释过程,其中模型推断意图和上下文,而不是执行固定的操作。

Andrej Karpathy 主题演讲截图
Andrej Karpathy 在旧金山 AI 创业学校发表主题演讲 — youtu.be/LCEmiRjPEtQ

Karpathy 提出了“自主性滑块”的概念——一种交互范围,从完全用户控制到完全 AI 自主。它并非简单的开关,而是一个动态、流畅的尺度,会在整个会话过程中不断变化。有时由用户主导,有时由 AI 模型提出建议或采取行动。通常情况下,它们会反复切换角色。这是一种时时刻刻的控制权权衡。

Karpathy 阐述了人类与人工智能之间互动的两种基本模式:

1. 人机交互(指令模式)

  • 人类给出详细、明确的命令
  • AI 模型根据这些指令执行
  • 思考:快速工程、表单填写、手动配置
  • 用户体验重点:输入清晰度和脚手架、结构化指导

2. 模型即驾驶员(自动驾驶模式)

  • 人类给出了一个高层次的目标
  • 该模型计划、决定、迭代和选择
  • 思考:“写一份简介草稿”、“为我开发一个应用程序”、“我还缺少什么?”
  • 用户体验重点:可解释性、监督和覆盖控制、信任信号

这两种模式存在于动态张力之中,而非二元对立。用户和AI代理流畅地来回切换控制权。Karpathy的框架向我们展示了真正的用户体验挑战并非对话与界面的对立,而是为共同代理而设计。

你肯定不想只用文本与操作系统(LLM)对话。文本阅读、解读和理解起来非常困难……图形用户界面 (GUI) 可以帮助人类审核这些易出错的系统的工作,并提高运行速度。—— Andrej Karpathy,软件正在(再次)改变

看完 Karpathy 的演讲后,我一直在思考“自主滑块”——用户选择将多少控制权交给 AI 的想法。但这并不总是指完全自主,比如 AI 编写代码和提交拉取请求。有时,它涉及一些更微妙的事情:你给系统多大的空间来解读你的意图。

我从Adobe Firefly测试版就开始用了,主要用来构思视觉概念和探索风格方向。Firefly 的滑块控件并非虚构的,而是内置在界面中的。

Adobe Firefly 视觉强度滑块运行截图
Adobe Firefly 实际操作示例——用户调整模型的创意控制,调整视觉强度水平

Firefly 为我提供了调节控制的工具,而不仅仅是提交输入。提示字段并非整个界面,它只是更大控制界面的一部分。它周围有一些滑块——例如“视觉强度”“风格强度”——它们充当实时刻度盘,用于控制我赋予模型的自主权。当我降低强度时,我在发出信号:紧跟提示,保持文字表达。当我提高强度时,我在邀请读者进行解读,让模型自由发挥创意。

实际上,我选择赋予AI多少自主权。这关乎塑造作者身份的平衡。系统成为了合作者,而滑块则成为一种看得见摸得着的管理合作关系的方式。

用户体验也在再次发生变化

交互的未来不仅仅是引导用户顺利地从A点到达B点,更是设计人与模型之间的关系。这种转变需要一种全新的用户体验思维,将人机交互状态视为核心设计维度,而非边缘情况。这种变化已引起广泛关注。业内的用户体验领导者正在提出以人为本的全新方法,利用智能系统进行设计,并围绕智能系统进行设计。

在 UX Matters 的文章超越炒作:以人为本的 AI 走向现实中,设计加速器 Punchcut 的联合创始人 Ken Olewiler 对当前的 AI 格局提出了尖锐的批评,警告称不应在缺乏实际用户价值的情况下仓促采用生成式 AI。尽管许多组织正在进行试验,但他指出,很少有组织能够从概念验证阶段迈向可衡量的投资回报率——他将这一差距归因于炒作驱动的决策和缺乏以人为本的框架。

避免试图在客户生命周期的每个阶段都全面集成人工智能自动化。要更有选择性,在人工智能能够带来最大价值的地方进行集成。提供能够实现协作式用户控制的人工智能功能,为用户保留有意义的自主权。——Punchcut 联合创始人 Ken Olewiler

Olewiler 呼吁重新思考自主性。尽管人工智能领域的主流叙事倾向于推崇完全自动化,但他团队的用户研究发现,用户更喜欢共享控制。他建议创建自主性地图,以可视化的方式展现人机交互在整个体验中的转换点——类似于服务蓝图等系统设计工具,但更侧重于控制。这些地图可以帮助团队在设计时实现协同自主,而不是交接或黑箱自动化。

BCG 的 Matt Scharpnick 的文章“生成式人工智能的用户体验设计:平衡用户控制和自动化”呼应了 Olewiler 强调的平衡用户代理和人工智能自动化,强调了用户体验需要在灵感和精确之间找到平衡。

用模型引导用户得出精确结果可能会令人沮丧。我们仍处于 GenAI 的早期阶段,还有很大的创新空间——尤其是在设计允许用户精准输入偏好的界面方面。—— BCG 副总监 Matt Scharpnick

Scharpnick 认为,生成式用户体验的未来在于设计出一种界面,让用户能够精准地“操控”他们想要的价值和控制,同时又不扼杀生成式模型的创造潜力。这与 Olewiler 对自主地图和共享能动性的呼吁相呼应,凸显了用户体验的更广泛转变:我们必须设计出既能激发惊喜,又能支持专业级精准度的系统。

绘制控制流:我们可以从 OESD 中学到什么

操作员事件序列图 (OESD)是一种形式化模型,用于直观地展现控制权在人类操作员和自动化系统之间随时间推移的切换。OESD 是在航空航天、自动驾驶汽车和工业机器人等安全关键领域开发的,它可以帮助工程师定义每个操作的负责人、触发控制权交接的因素以及系统在出现问题时如何响应。

这些图表通常包含两条或多条“泳道”——一条供人使用,一条供机器使用——并绘制出一系列动作、决策和交接点。它们不仅旨在捕捉行为,还旨在在复杂、高风险的环境中强制执行明确的责任制和可恢复性。

OESD示例:

在自动驾驶汽车的远程操作中,研究人员使用 OESD 来模拟远程人类何时应该介入——从被动监控到主动驾驶——这取决于车辆的信心和环境。

操作符事件序列图示例
Stanton NA 等人,(2021)。使用操作员事件序列图建模自动化与人类驾驶员的交接。未来交通1 (2),351–369。https ://doi.org/10.3390/futuretransp1020020(开放获取)

在农业机器人领域,OESD 帮助研究人员编排共享控制任务,例如让人类标记要收获的水果,而机器人负责物理切割。

操作符事件序列图示例
Salzer Y 等人,(2023)。集成功能分配和操作事件序列图以支持人机协作:机器人数据细化系统案例研究。《认知工程与决策杂志》18 (1),52–68。https ://doi.org/10.1177/15553434231199727(开放获取)

这些模型为我们提供了一种语言,将控制描述为人与系统之间的时间序列。它们已被证明在需要明确权限和故障保护的领域非常有效。作为用户体验设计师,我们可以在面对新挑战时改进控制序列图:设计不仅要考虑控制权的交接,还要考虑人与人工智能系统之间流畅的协同作用。作为用户体验设计师,我们可以在面临新挑战时改进控制序列图:不仅要设计控制交接,还要设计人与人工智能系统之间的流畅协作。

从旅程地图到控制地图

人工智能系统正在改变数字交互的结构。传统软件需要等待用户输入,而现代人工智能工具则能够推断、建议并采取行动。这彻底改变了用户体验或产品的控制方式,并挑战了当代用户体验方法中的许多假设。

在用户体验旅程图中,核心问题是:

“用户想要做什么?”

对于控制映射人工智能系统,核心问题变成:

“此刻谁在掌控局势?局势将如何转变?”

设计师需要更好的方法来追踪控制权是如何发起、共享和交还的——不仅关注用户看到什么或做了什么,还要关注人类和人工智能系统之间如何实时协商代理。

我们可以将类似 OESD 的思维方式应用于更广泛的 AI 用户体验。用户-AI 控制映射可能更多地关乎一种思维模式,而非静态图表——设计一个既能行动又能倾听的系统。关键考虑因素:

  • 谁在控制——用户、AI 或两者
  • 控制权何时以及为何发生转移——作为时刻或循环
  • 界面如何支持这些转换——遵循控制感知用户体验原则所需的可供性

为了评估这些动力是否有效,我们需要新的指标——能够捕捉合作质量而不仅仅是完成度的指标。

用户人工智能控制和质量指标概念图
用户-AI 控制和质量指标概念 — 插图:Rob Chappell

转弯效率和意图准确度等质量指标不仅仅是诊断依据,更是在人工智能设计中实现信任、协调和控制的一种方式。其目标是确保清晰性、适应性和以人为本的成果,即使控制权随时都在转移。

环境人工智能系统提高了风险

环境智能 (AmI) 指的是配备嵌入式传感器的环境,这些传感器能够主动且不引人注目地为用户提供支持——适应环境、识别行为模式,并在无需明确指令的情况下预测需求。这一愿景涵盖了从调节灯光的智能房间到能够理解语音提示的语音助手,以及如今嵌入在我们数字产品中的环境人工智能服务。

  • 无需提示即可阅读上下文
  • 提出行动而不是等待
  • 自主行动,然后退却

环境人工智能为数字体验设计开辟了新领域。

在2025 年 Google I/O 开发者大会上,环境 AI 的转型以 Project Astra 的形式展现。该项目的多模态助手被嵌入到配备摄像头和音频输入的智能手机中。Google 的 AI 助手将实时感知环境、识别物体并解读口语。它代表着我们迈向情境感知、具身化 AI 的未来:这些系统无需等待提示,而是主动观察、解读并提供帮助,并嵌入到我们现有的空间和工具中。

值得注意的是,谷歌宣布Gemini 将直接集成到 Chrome 浏览器中,这意味着谷歌正在将 AI 从一项独立的功能转变为一个无处不在的层。从这个意义上讲,浏览器曾经只是网站的被动容器,如今却成为了一个主动的协作者:读取上下文、建议操作并跨领域解释任务。AI 助手无需等待用户打开——它就在那里,感知用户的实时上下文并随时准备参与。

谷歌的立场越来越明确:拥有跨域 AI 层。这不是一个小众的边缘案例,而是一个主流的竞争态势,因为 Chrome 不仅仅是一个浏览器。它是全球用户的默认界面,控制着超过 60% 的浏览器市场。它的优势——“护城河”——不仅在于模型性能,还在于跨标签、应用和会话的上下文连续性。浏览器向对话式发展的这种演变,为在自己的平台内构建 AI 助手的产品和用户体验团队提出了一系列紧迫的问题。如果 Gemini 已经存在于 Chrome 中,那么特定领域的助手还会扮演什么角色?用户会更喜欢针对单个品牌或任务量身定制的网站嵌入式 AI 代理吗?或者,主流的网络模式是否会Gemini 而构建——确保兼容性、清晰度和信任度,而 AI 已经在浏览器级别与用户并肩作战?

Gemini 在 Chrome 中的截图
Google I/O 2025 大会上宣布 Chrome 浏览器 Gemini 将通过人工智能助手重塑浏览器 — 截图来自https://www.google.com/chrome/ai-innovations/

这不仅仅是一种新的交互模式,更是一种新的存在模式,人工智能系统将占据用户数字环境的整个界面。这种演变不仅重塑了交互模式,也重塑了我们对数字产品的期望。它重新提出了一些远远超出技术用户体验范畴的根本性问题。正是在这里,像乔纳森·艾维这样一位苹果最具标志性产品背后的极具影响力的设计师,也加入了讨论。

Stripe Sessions 2025上,Jony Ive 罕见地就设计工艺以及我们作为创造者的责任进行了一次对话。他强调,伟大的产品并非仅仅基于新颖性或巧妙性——它们源于深切的关怀、清晰的意图和克制。Ive 强调,我们有责任创造出一种不需要更多关注,而是回馈部分关注的技术。他呼吁产品能够认识到用户“能够感知关怀”——这种理念与将 AI 设计为一种新型协作者而非生产力工具的理念相呼应。

设计师 Jony Ive 爵士与 Stripe 首席执行官 Patrick Collison 在 Stripe Sessions 上进行炉边谈话:https://youtu.be/wLb9g_8r-mE

未来的工作:精心设计人工智能系统

在人工智能驱动的体验世界中,用户和模型共同创造成果。正如乔纳森·艾维提醒我们的那样,我们需要从根本上建立信任和关怀,而不仅仅是停留在表面。这些体验的成功将不再取决于系统的速度或智能程度,而更多地取决于它如何有效地共享控制权。随着人工智能工具的演进,控制设计将成为信任设计。

信任并非通过隐藏复杂性来赢得,而是通过使复杂性易于驾驭而建立。行动的系统也必须解释。提出建议的系统必须接受批评。记忆的系统必须披露记忆的内容及其原因。

动态控制设计意味着将界面视为一种关系,而不是一种工具。人际关系需要清晰的思路、积极的响应以及说“不”的能力。我们构建的系统将越来越多地为我们采取行动。问题在于,我们设计这些系统时,是否做到了在行动的同时认真倾听。

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

人工智能不会消灭用户体验——我们才会

杰睿 设计管理与成长

图片使用 ChatGPT 生成,并经过 Photoshop 编辑。图片来源:ChatGPT、Kym Primrose。

不久之前,我还坚信我的工作不会被人工智能所左右。虽然我现在仍然大体上相信这一点,但人们争相采用人工智能解决方案的速度之快令人担忧,这让我开始怀疑。我不能责怪他们;人工智能解决方案快速、一致,而且从表面上看,通常都很有吸引力。我很乐意将人工智能融入我的工作流程中(我已经这样做了),但我并不认同人工智能应该处于创作过程的中心这一观点。它无法创造;它只能复制——麻省理工学院领导的一系列实验强调了生成性人工智能依赖于模式而不是新颖的思维。虽然这种复制效果越来越好,但它仍然依赖于已经完成的工作。正是这一部分被忽视了;世界只看到了快速、可接受的解决方案,而这正是让我担心的部分。

几十年来,我们在用户体验领域一直宣扬同理心、共同创造以及理解用户个体的重要性。然而,在实践中,这些原则仍然与紧迫的时间表和狭隘的“可用”定义相冲突。正如 Adyanth Natarajan 所说,无障碍设计方面的失败反映出用户体验行业仍然主要面向一小部分人群。同样,Andrew Tipp 认为,虽然包容性设计至关重要,但预算和时间压力往往会削弱它

尽管人们竭尽全力强调包容性设计如果得到妥善实施将带来多么大的益处,但这些领域在开发过程中仍然严重缺乏重视。这个行业讲究时间和金钱;当廉价而粗糙的解决方案唾手可得时,它根本无法承担真正的用户体验设计的沉迷。人工智能提供了这样的解决方案。但是,我们越是将设计任务交给那些从聚合数据和历史模式中学习的系统,我们就越有可能将一切标准化。如果我们现在还没有找到关键的答案,那么将创意流程交给人工智能系统并不能神奇地解锁它。包容性设计成为基准标准的梦想变得更加遥不可及。诚然,我们获得了效率,但代价是什么呢?

虽然本文的重点在于AI如何将创造力从设计流程中剔除,但我们必须承认,这种观点本身并不新鲜。Alterio 、SeoHurst等人都探讨过UX /UI设计中创造力的扼杀问题,尽管他们并未提及AI的介入。

我们今天所说的“设计”有多少是真正原创的?

摆在桌面上的是:我们大多数人的工作都受到相当严格的限制。由于无障碍指南、设计系统、素材库和社区 Figma 文件的存在,许多创意意图被剥夺了。我们所做的只是将点连接起来——而这基本上就是所有人工智能解决方案都在做的事情。它们从相同的资源中提取数据,并基于相同的设计系统和无障碍规则将点连接起来。那么,这真的是一件坏事吗?

将显示缩放图像
Figma 社区 UI 工具包截图。图片来源:Figma

对我来说,答案取决于两点。首先,使用这些工具的人是否真的受过培训,了解它们的工作原理?他们是否知道如何设计提示来减轻偏见而不是加剧偏见?即使他们不知道,雇佣这些工具的人真的在乎吗?其次,我们节省下来的时间是否真的被重新投入到探索性思考中?投入到研究、实验和面向未来的想法中?

如果是,那很好;但如果不是,我们就有可能为了追求进步的幻觉而牺牲自己的创造力。任何真正的设计师都不应该愿意接受这种交易。如果我们要把所有这些耗时、繁琐、零散的工作都交给机器,我们的大脑还有什么更好的用途呢?

人工智能作为复制者,而非发起者

说实话:人工智能并不具备创造力。真的不。它只是一种非常逼真的模仿者。它接受过已经构建、发布和批准的事物的训练。这意味着它建立在已经成功的想法之上,而这些想法并不总是最好的,只是最容易被接受或最引人注目的。

它所回收的不仅仅是设计模式和配色方案,还有偏见、规范和文化假设。如果数据集存在偏差,输出结果也会如此。我们在Buolamwini 和 Gebru 于 2018 年发表的《性别阴影》等研究中就看到了这一点,其中商业 AI 工具对深色皮肤女性的性别判断错误,错误率高达 34.7%。此类研究表明,使用从互联网和企业来源收集的数据集的商业 AI 系统往往会复制并放大现有的社会偏见。

我们用同样有缺陷的框架建立了这些系统,而我们花了几十年的时间试图拆除它们,即使我们积极尝试纠正这些错误陈述,但可能为时已晚。

Molly Wright Steenson 换了一种说法:

数据的关键在于它存在于过去。数据集的问题在于它强化了现有的偏见,而不是找到新的方法来做事和解决问题

这凸显了生成式人工智能的一个核心挑战:我们用过去的假设构建未来的工具。

人们想方设法地推销人工智能解决方案,让我们觉得它们能让我们的生活更轻松,但实际上,他们只是在沙漠里兜售沙子。我们兜售的所谓创新,不过是规模化的反馈循环(是的,我是个痴迷于反馈循环的女人)。我们教它,现在我们让它用同样的材料来教我们和自己。

现在,复制有其存在的意义。我并不是说每个登录表单或入职流程都需要革新。一些优秀的设计成果是无形的。我之前提到过,我们将这些点连接起来。然而,我们是有意识地、谨慎地(或者至少我们应该这样做)将这些点连接起来。如果人工智能成为流程中这些部分的默认设计者,我们就不得不问:这给我们带来了什么?我们到底贡献了什么?如果我们把基础工作完全外包出去,我们该如何发展这门工艺?

讽刺的是,设计本应是最能抵御这种侵蚀的领域之一。多年来,我们一直在努力争取一席之地,证明好的设计能够塑造结果、改变行为,并真正改善生活质量。如今,我们终于赢得了一席之地,却被要求将工作交给那些从未被邀请参与讨论的工具。坦白说,这些工具只关心模式,不关心环境。

更糟糕的是,那些不愿或不觉得有必要深入探究的人一致认为,人工智能的输出就是客观真理。人工智能就是神谕。它不是魔法,而是一个基于泛文化训练的系统。如果我们不小心,我们就会让自己陷入自动化,最终走向创造性的湮没。

在黑暗中跳舞

话虽如此,或许我们多年来一直被困在创意的湮没之中。我至今仍记得90年代中期到21世纪初科技界的疯狂。创新无处不在,没人知道自己在做什么,他们只想尝试一些很酷的东西。有人喜欢直板手机吗?任天堂的控制器设计?那真是疯狂,也真是棒极了。

将显示缩放图像
这是 20 世纪 90 年代末到 21 世纪初的一些实验性手机设计的拼贴画,其中包括形状像口红管、摄像机和化妆盒的手机。
有趣的00年代早期手机。图片来源:u/CosmicPelican via Reddit r/nostalgia

我认为其中大约80%都失败了。但这却是最好的失败。最终,这些疯狂的想法让位于标准,就像往常一样;要么是苹果,要么是安卓;要么是PlayStation,要么是Xbox;要么是Mac,要么是Windows。

在所有这些融合中,用户体验 (UX) 找到了立足点。随着技术的成熟,我们的期望也随之成熟。怪异不再美妙,反而令人困惑。不可预测的界面不再勇敢,而是支离破碎。用户体验 (UX) 作为一种将秩序带入混乱的方式出现,其目标突然不再是脱颖而出,而是消除摩擦,使体验看起来自然。

这绝对是必要的。良好的用户体验 (UX) 使所有这些新技术不仅可以供爱好者和早期采用者使用。用户体验标准带来了一致性、最佳实践和基于成熟经验的模板。但在追求一致性和可用性的过程中,我们失去了一些东西。我们不再问“如果呢?”,而是开始问“基准是什么?”

设计师和开发人员,请告诉我,您不使用 Apple 的人机界面指南或 Material Design 作为参考点?我会质疑任何这样做的人的诚实。

将显示缩放图像
两张突出的设计系统图:Google Material Design 和 Apple 人机界面指南。图片展示了每个系统的一些界面组件。
谷歌Material Design(上)和苹果人机界面指南(下)。图片来源:Figr

你上一次彻底改变常见 UI 元素的交互预期是什么时候?流行的东西就一定有效,何必再去重新发明轮子呢?就像我们通过设计和接触学会了如何打开门和操作炉灶一样(就像唐纳德·诺曼那样),我们也学会了如何操作下拉菜单。这就是可供性(affordance)的演变。

所以,当我们说人工智能会削弱用户体验(UX)和用户界面(UI)的创造力时,真的如此吗?它所做的并非我们多年来从未做过的事情。它引用的是相同的库和标准,使用我们共同认可的有效方法。我们所说的我们失去的东西,其实是我们很久以前就放弃的东西。

平衡之举

让我们明确一点。人工智能不是敌人,自满才是。

过去一周左右,我使用了一些AI工具,体验不错,我相信它是一款非常棒的辅助工具。但我们必须挑战它。说它胡说八道就对了。问问我的ChatGPT,我告诉它它错了多少次……

将显示缩放图像
ChatGPT 对话截图。图片来源:ChatGPT、Kym Primrose。

如果我们希望人工智能能够增强我们的工作,而不是取代其核心功能,我们就必须有意识地去行动,必须意识到自己在做什么。施奈德曼的普罗米修斯原则明确指出了这一点:如果我们以这样的方式构建高度自动化,它就能支持创造力和监督。

对我来说,成功取决于三件事:教育、融合平衡

我们需要教育自己和同事,让他们了解人工智能的真正含义、运作方式,以及它在日常工作流程中的界限。这不应该是一个孤立的过程。

这不仅仅是开发人员或用户体验设计师的问题。我们需要跨职能的人工智能素养,涵盖市场营销、用户体验、开发和质量保证;我们应该共同学习。我们都应该积极意识到局限性,设定清晰的提示,仔细审查输出,并在潜在偏见影响用户之前发现它。如果我们要负责任地构建产品,我们需要共同的语言和共同的责任。

一旦我们了解了人工智能能够以及应该为我们做什么,下一步就是整合。这不仅关乎技术层面,也关乎文化和伦理层面。仅仅选择一个工具并将其融入工作流程是不够的。我们需要编写文档:哪些工具是允许使用的,如何有效地使用它们,它们属于流程的哪些阶段,以及何时应该回归到一些手动思考。这份文档不应该是自上而下的,而应该由所有参与工作的人员共同协作构建。我们需要建立清晰的界限,并让所有人拥有共同的责任,让我们有信心在认为合适的时候,敢于表达自己的想法,并主动对抗人工智能。

这才是关键;我们不能对人工智能漠不关心。每一次使用都应该有意识,每一个解决方案都应该受到质疑。人工智能可以提供辅助,但最终决定权仍然在我们手中。

这就引出了我们的目标。如果我们的目标是通过将某些任务交给人工智能模型来提高生产力和效率,那么我们必须思考如何将这些节省下来的资金重新投资到其他地方。

实现这一目标的方法之一是重新投资研发、发散思维和突破界限的创意,这不仅能为用户体验/用户界面注入活力,还能打破停滞不前的设计模式。有了人工智能处理繁琐的工作,我们就有了探索实验性概念的空间,而这些概念通常受限于预算和时间。创新正是在这个空间中得以生存。如果没有它,我们可能会陷入无休止的循环,只输出安全、毫无灵魂的成果。我们必须展现出不断发展、适应、扩展,并保持我们创意生态系统的新鲜感,这不仅是为了用户,也是为了为我们的人工智能模型提供我们真正希望它们反映的解决方案和思维。

最后的想法

即使没有自动化,我们多年来也一直陷在千篇一律的便利循环中。人工智能并非用户体验/用户界面(UX/UI)感觉陈旧的原因,而是其结果。它只是凸显了原有缺陷。所以,与其担心人工智能会抹平用户体验/用户界面(UX/UI)的创造力,或许我们应该问问自己,为什么它一开始就如此平淡?

作为设计师,我们应该探索如何利用人工智能来支持我们的工作。它不是设计师,而是工具,就像之前的 Figma 和 XD 一样。Ben Shneiderman 在《以人为本的人工智能》一书中一针见血地指出,人工智能的目标并非取代我们,而是“增强、放大、赋能和提升”人类的潜能。如果我们选择挑战模板,设计和创造力仍然掌握在我们手中。我们的价值不应在于速度,而应在于更高效、以人为本、以体验为导向的思维方式——而这些是人工智能无法掌握的,因为无论它多么接近人类,它都永远无法成为真正的人类。

因此,如果我们不想成为自身流程的过客,就必须确保在培训、道德和研发方面的投入与在工具和集成方面的投入一样多。人工智能可以支持伟大的设计,但推动其发展的仍然是我们的好奇心、挑战和本能。所有这些最初都让这个行业令人兴奋。

 

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

人工智能正在重塑用户界面——你注意到最大的变化了吗?

杰睿 设计管理与成长

告别命令,迎接意图

我们与软件交互的方式绝非一成不变。有时,它是缓慢的演变,有时则是突飞猛进。如今,越来越多的设计先锋,包括维塔利·弗里德曼艾米丽·坎贝尔格雷格·努德尔曼正在剖析人工智能应用中的新兴模式,描绘出永不停歇的格局。乍一看,这似乎只是又一次炒作周期,就像围绕着每一个新技术趋势的那种令人窒息的热情。但退一步来看,一个更深层次的转变显而易见:我们与数字系统的互动不仅在发生变化;它们的本质也在发生转变。

想象一下从胶片相机到数码摄影的转变——突然之间,用户不再需要了解曝光时间或仔细定量胶卷。他们只需点击一个按钮,剩下的就交给设备处理了。

人工智能正在为UI设计带来类似的转变,让我们摆脱僵硬、循序渐进的流程,走向流畅、直观的工作流程。交互的本质正在发生转变,正如Jakob Nielsen最近在其文章中强调的那样,这种演变需要我们全神贯注。他阐述了一个至关重要的见解:

“有了新的人工智能系统,用户不再告诉计算机该做什么。而是用户告诉计算机他们想要什么结果。”

这不仅仅是一场技术变革,更是一场哲学变革。它挑战了长期以来关于控制、自主性和人机协作的假设。我们曾经一丝不苟地掌控着每一步,而现在,我们能够定义意图,并让人工智能决定最佳的前进路径。这种转变的意义深远,堪比从命令行界面图形用户界面的转变,对于 UI 设计师来说,它既是机遇,也是挑战。

点击、滑动、询问:交互方式正在演变

但在深入探讨人工智能如何重塑交互之前,我们有必要反思一下迄今为止最直观的界面是如何定义的。1985 年,埃德温·哈金斯詹姆斯·霍兰唐纳德·诺曼发表了一篇关于直接操作界面的开创性论文。诺曼后来在《设计心理学》中定义了一些最广为接受的设计原则,而哈金斯则率先提出了分布式认知的概念。但在 1985 年,他们与霍兰一起抓住了设计史上的一个关键时刻,即直接操作逐渐成为一种主导策略。

直接操作是一种交互方式,用户使用物理、增量和可逆的操作对显示的感兴趣对象进行操作,其效果立即在屏幕上可见。NN /g

但这简单来说意味着什么呢?比如,你需要将一个文件从一个文件夹移动到另一个文件夹——这是一个典型的直接操作的例子——你看到这个文件,抓住它,然后把它移动到你想要的位置。

首先,你需要明确目标 (1)。然后,在当前文件夹中找到文件,并决定将其拖动到新位置 (2)。点击并按住文件,将其移动到屏幕上,最后将其拖放到目标文件夹中 (3)。

如果你不小心把它放在了错误的地方,你会立即看到结果,调整方法,然后再次拖动它,直到它落到你想要的位置。这种交互方式感觉很直观,因为它最大限度地减少了认知投入——系统会实时响应你的操作,强化了直接参与和掌控的感觉。

这个过程越顺畅,交互感觉就越自然、越令人满意。

将显示缩放图像
macOS 系统上两个 Finder 窗口的屏幕截图。左侧窗口打开的是“Documents”文件夹,其中显示了各种文件和文件夹,包括“Kate-comments”,它被突出显示并被拖动。右侧窗口打开的是“Measuring Usability”文件夹,其中显示了“2014–2–3-MeasuringUX.pptx”和“ROI for Usability…dition.pdf”等文件。蓝色虚线箭头表示“Kate-comments”正在从“Documents”文件夹移动到“Measuring Usability”。
在 MacOS 上使用直接操作移动文件涉及将该文件从源文件夹拖放到目标文件夹。来源

虽然缩短距离可以提高可用性,但真正定义直接操控的是参与度。作者写道:

“最能体现直接操纵的系统都给人一种定性的感觉,即人们直接参与对对象的控制——不是通过程序,不是通过计算机,而是通过我们的目标和意图的语义对象。”

几十年来,直接操控一直是设计的基本原则。然而,随着我们向人工智能驱动的系统过渡,我们必须思考这些原则如何演变——以及它们何时会被目标导向的交互所取代。

现在,想想Windows Photos 的 AI 驱动“擦除”功能。假设你给你的狗狗拍了一张照片,但照片里有一条不想要的牵引绳。你不用像十年前那样手动选择像素并精心编辑,而是只需选中牵引绳,剩下的交给 AI 处理即可。系统理解你的目标——移除牵引绳——并执行最佳解决方案。

将显示缩放图像
Windows 照片界面的 GIF 动图演示了“擦除”功能。用户从图片中选择并移除了一条狗的皮带。
Windows 照片,来源

这种交互仍然需要一定程度的操作,因为你必须指定要擦除的对象,但不同之处在于,你是在优化请求,而不是直接修改像素。你不再需要一丝不苟地编辑每个细节,而是与系统协作,以达到预期的效果。这种转变标志着 UI 设计的根本性变革。

Desolda 与其他研究人员基于诺曼的“执行鸿沟”和“评估鸿沟”理论,构建了一个模型,捕捉到了这种动态。与简单的直接操作(例如在文件夹之间拖动文件,操作需要逐步展开)不同,AI 交互需要更流畅、更迭代的过程。用户清晰地表达他们的目标,但并非手动执行每一步,而是与系统协作,优化输入,并在 AI 进行动态解释、调整和响应时对其进行引导。

将显示缩放图像
概念图展示了用户与人工智能系统之间的交互,突出了“执行鸿沟”和“评估鸿沟”。该图展示了用户如何形成意图,指定操作(重新配置、干预或询问),并通过人工智能系统执行这些操作。人工智能系统感知输入、处理并进行调整。然后,用户通过解释步骤(澄清和输出)对输出进行评估。
来源

直接操纵的持续相关性

人工智能或许正在重塑我们与科技互动的方式,但直接操控却不会消失。即使在基于意图的界面时代,用户仍然需要与人工智能系统互动,用正确的输入引导它们,将人类的目标转化为机器可读的指令。设计人工智能体验并非要取代直接操控,而是要增强它,在既有模式的基础上叠加新的交互模型,使交互更流畅、更直观,并最终增强其功能。

为了设计无缝的人工智能体验,我们需要识别并构建熟悉的模式

例如,在许多 AI 应用中,开放式提示框可以充当破冰船,帮助用户开启对话。这种方法建立在人们熟悉的输入框模式之上,几十年来,该模式一直是 UI 的标准组件,如今,它又扮演着新的角色。无论是在 ChatGPT 中输入问题,还是指示设计工具生成布局,这种方法都能提供灵活性,同时以直观易懂的方式引导用户意图。

将显示缩放图像
各种 AI 聊天机器人和助手界面的拼贴画,展示了不同的开放式输入模式。图片包含来自 ChatGPT、Claude 和 Fin 等 AI 驱动工具的多个文本输入字段。一些界面带有占位符,例如“提问”或“指定写作任务”,而其他界面则显示示例问题或答案。
打开输入模式示例,来源

这种方法不仅限于交互模式——它也扩展到用户体验框架。

例如,Evan Sunwall 提出了“Promptframes”的概念,通过将即时写作和生成式 AI 融入设计流程,作为传统线框图的补充。其目标是通过在工作流程的早期阶段融入 AI 驱动的内容生成,提高内容保真度并加速用户测试。然而,这一概念建立在线框图的基础上,这进一步强调了理解传统用户体验结构对于有效设计 AI 驱动体验的重要性。

最后的想法

不需要霓虹灯“人工智能驱动”标签;它应该无缝地融入用户旅程,感觉就像意图的自然延伸。

Netflix 的推荐系统为例。它不会打断你的体验,提醒你它正在使用高级算法。它也不会要求你配置一堆设置。相反,它会默默地学习、适应,并为你提供建议,让你感觉毫不费力——以至于你很少会停下来思考它背后的系统。这才是人工智能驱动的交互应该有的样子:它不是一个需要你费力操作的功能,而是一个根据你的需求不断改进的隐形助手。

随着我们迈向意图驱动的系统,这正是设计师应该努力追求的目标。人工智能应该减少摩擦,而不是增加复杂性。它应该赋予用户权力,而不是用不必要的选择让他们不知所措。最好的人工智能不是那种需要注意力的人工智能——而是那种能够融入你最初想要完成的任务流程中的人工智能。

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

15 个最佳现代 AI 解决方案,助力 UI/UX 设计开发

杰睿 设计思维

毫无疑问,人工智能极大地促进了许多领域的发展。UI/UX 设计也未能幸免,如今我们每天都能看到基于人工智能的全新工具涌现。这些工具旨在改变设计师的工作方式,使他们能够优化工作流程并自动化重复性任务。这样,他们就能更快、更准确地提供结果。由于人工智能接管了日常工作,设计师可以专注于最重要的事情——创造力和创新。优化工作流程并自动化重复性任务。这样,它们可以提供更快、更准确的结果。由于人工智能接管了日常任务,设计师可以专注于最重要的事情——创造力和创新。

人工智能对设计的影响

AI 驱动的工具正日益成为 UI/UX 设计师不可或缺的助手。它们在从原型设计、内容创作到最终设计完善的每个流程阶段提供支持。通过将 AI 集成到工作流程中,设计师可以更高效地创造更具活力和个性化的体验,同时节省时间和精力,从而加快产品发布速度并提升竞争力。

UI/UX设计师的最佳AI工具

下面我们将介绍一些可以帮助您简化工作的顶级工具。

1. Flowmapp:一款利用人工智能设计用户体验架构的工具

Flowmapp就像一个指南针,指引您穿越复杂的用户体验迷宫,帮助设计师创建清晰便捷的用户路径并生成站点地图。借助它,您可以通过创建流程图来设计网站和应用程序的架构,就像在精准的地图上导航一样。Flowmapp 的强大之处在于它与分析技术的集成,就像鹰眼一样,能够洞察用户迷失的方向,并帮助他们实时优化路径。

Airbnb 和 Nike 等品牌都使用 Flomwapp 来设计信息架构。该工具能够灵活地与分析工具集成,帮助团队优化路径,提升参与度并增加现场停留时间。

2. Uizard:人工智能驱动的界面原型设计

Uizard就像一根原型设计魔杖,能将您的草图转化为成品交互模型。它基于神经网络构建,能够快速将您的想法转化为可运行的原型,就像您跳过了草稿上的那些神奇步骤一样。Uizard 以其速度和简洁性超越竞争对手,将设计和代码集成在一个软件包中,使其成为快速界面开发的必备工具。

将显示缩放图像
用户界面

3. ChatGPT:基于 GPT-4 的 UX 文本生成

ChatGPT随时准备提供完美的描述或用户体验文本。它基于 GPT-4 模型,能够轻松适应您的需求,就像一位经验丰富的编辑读懂您的心思一样。其优势在于,它不仅节省时间,还能激发团队灵感。

将显示缩放图像
GPT 3.5 和 4.0 聊天功能的区别

4. Attention Insight:人工智能驱动的 UI 和 UX 分析

Attention Insight就像一张 X 光片,可以扫描并预测用户会在哪些地方停留。它利用人工智能技术,帮助您调整焦点,就像调整相机镜头以获得最清晰的照片一样。Attention Insight 的优势在于它能够高效精准地完成这项工作,而无需依赖耗时耗力且成本高昂的 A/B 测试。

将显示缩放图像
Attention Insight 界面

5. Khroma:一款人工智能配色方案工具

Khroma是一款个性化配色工具,可让您根据自己的喜好找到完美的配色方案。它利用神经网络学习您的偏好,并推荐能够为您的界面增添特色的配色方案。Khroma 凭借其个性化设计击败了竞争对手——它推荐的配色方案是根据您的喜好量身定制的。

将显示缩放图像
赫罗马整合

6. 让我们增强:优化图像以提高用户体验

Let's Enhance就像一个高清滤镜,能将像素化的图像转化为清晰锐利的视觉效果。在 AI 的支持下,Let's Enhance 可自动提升分辨率、纹理和色彩细节,让您的图片完美契合 UI 界面。其主要优势在于即时提升画质,这对于需要快速优化高分辨率的大型项目来说非常实用。

将显示缩放图像
让我们增强界面

7. Adobe Sensei:Adobe 产品中的人工智能

Adobe Sensei是您所有常用 Adobe 产品的强大引擎。它利用机器学习加速流程,无论是处理图像还是分析用户数据,都能将您的设计提升到更高的自动化水平。与其他解决方案不同,Adobe Sensei 内置于整个 Adobe Creative 套件中,让您的工作更快速、更便捷。

将显示缩放图像
Adobe Sensei 界面

8. DALL-E 2:基于文本的图像生成器

DALL-E 2是一位艺术家,他能根据口头描述,绘制出你所能想象的一切。它基于 GPT-3 模型,创作出细节丰富、独具匠心的图像,仿佛你的大脑直接连接到画布。在同类产品中,DALL-E 2 以其能够将传统设计工具难以表达的最抽象概念可视化的能力而脱颖而出。

将显示缩放图像
DALL-E 2接口

9. Vance AI:用于图像处理和增强的人工智能

Vance AI就像一位智能助手,可以即时增强您的图像,使其拥有专业水准。它可以提高分辨率、去除背景并校正纹理,就像经过专业摄影工作室的后期处理一样。Vance AI 使图像处理变得快速便捷,尤其是在处理大量数据时。

将显示缩放图像
使用 Vance AI 应用程序之前和之后的图像对比

10. Galileo AI:由人工智能驱动的动画工具

Galileo AI是您的专属动画师,能够瞬间赋予任何 UI 元素生命力。它运用机器学习技术,无需手动调整每一帧即可创建流畅的动画。Galileo AI 凭借速度和灵活性超越竞争对手,让设计师能够专注于创意,而非墨守成规。

将显示缩放图像
伽利略人工智能接口

11. Flow AI:构建聊天机器人和语音界面

Flow AI就像一位交互工程师,能够构建对话界面和聊天机器人,让它们像人类专家一样回答复杂的问题。Flow AI 可以帮助您创建周到的对话场景,而无需编写代码。与其他同类产品不同,Flow AI 提供简单的设置和跨平台支持,使其成为对话系统的多功能解决方案。

将显示缩放图像
Flow AI 的实际工作原理

12. 深度梦境生成器:人工智能驱动的超现实图像

这款工具将人工智能技术应用于照片和视频,创造出独特的图像,将其转化为超现实的杰作。与其他生成器不同,Deep Dream 可以让你创造出与众不同的抽象效果,让你瞬间从普通的视觉效果中脱颖而出。

将显示缩放图像
使用 Deep Dream Generator 创建的图像

13. Stark:用户体验的可访问性检查器

Stark会根据包容性标准检查你的设计。AI 会分析界面,检查对比度、字体大小和颜色组合,以确保你的产品适合所有用户。

将显示缩放图像
Stark 应用程序界面

14. 设计AI:标志和视觉概念生成

Design AI可在几分钟内创建徽标和视觉概念。它可以生成品牌标识并提供现成的解决方案,为您节省时间和资源。Design AI 在速度和经济性方面超越同行,能够在最短时间内提供高质量的成果。

将显示缩放图像
使用 Design AI 工具创建的徽标和标识

15. Loomly:人工智能社交媒体管理

Loomly可以帮助你构思创意、组织和规划内容,并推荐最佳发布时机。它会分析你的受众参与度,并为你推荐一些必定会“火爆”的帖子。

将显示缩放图像
Loomly 应用程序

利用人工智能改进设计

AI 工具彻底改变了 UI/UX 设计,尤其是在提供数据驱动的洞察方面。这减少了设计师在重复性任务上花费的时间,并赋予他们更多创造力。有了 AI 处理幕后机制,设计师现在可以专注于创建创新的、以用户为中心的界面。

虽然人工智能极大地提升了设计流程的效率,但务必牢记,它无法取代设计师独特的人类直觉和创造力。最佳设计成果源于人类洞察力与人工智能工具的协同作用,其中设计师在引导设计流程和利用人工智能提供支持方面发挥着不可或缺的作用。

结论

人工智能颠覆了游戏规则,让设计师能够轻松创建更优质、更以用户为中心的界面。如果您能够充分利用这些工具,它们将助您改进设计流程、激发创新,并提供更具吸引力和活力的数字体验。如此一来,您就可以将人工智能的技术突破与人类的技能和直觉相结合,突破可能性的界限,打造出完美的产品,开创 UI/UX 设计的未来。

 

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

以人为本的人工智能:用户体验设计师的 5 个框架

杰睿 交互设计及用户体验

以一个人为决策树中心的插图

2024 年是人工智能取得重大进步的一年,这项技术以惊人的速度融入我们的职业和个人生活。

在家里,我很享受看着我的三个小儿子以他们自己独特的方式沉浸在人工智能世界里。他们被最新一波的人工智能玩具所吸引,尤其是我们家的新“宠物”机器人Loona。它能用近乎科幻般的对话让他们着迷——这得益于与2024年5月发布的GPT-4o的集成。Loona激发了孩子们的好奇心,引发了他们富有想象力的人机对话,甚至引发了兄弟姐妹之间关于它如何“思考”的热烈讨论。他们的兴奋提醒我们,人工智能已经在塑造下一代人与科技的关系——使其更加个性化、引人入胜,甚至更容易被理解。

将显示缩放图像
Loona机器人玩具图片
KEYi Tech 的 Loona 机器人 — 图片来源:keyirobot.com

这种惊奇感一直延续到2025年,伴随着NVIDIA在CES上令人叹为观止的主题演讲拉开帷幕,这场演讲展示了人形机器人的进步。NVIDIA首席执行官黄仁勋的演示凸显了他对机器人和人工智能发展现状的着迷,以及他对未来几年快速变革步伐的有力预测。

对于用户体验设计师来说,在人工智能快速发展的时代,好奇心与奉献精神的结合至关重要。拥抱人工智能需要我们重新思考我们的流程,理解该技术的底层系统,并确保人类价值观和用户需求始终是我们创作的核心。拥抱人工智能需要我们重新思考我们的流程,了解该技术的底层系统,并确保人类价值观和用户需求仍然是我们创造的核心。

随着人工智能成为数字创新的支柱,我们作为设计师的角色也在不断演变。我们不仅要塑造界面,更要打造将以人为本的原则与全新的技术交互方式相融合的体验。这种转变要求我们像技术人员一样思考,拥抱数据驱动的系统,并将用户中心置于人工智能项目之中。

为了引领这一转变,领先的科技公司和大学为以人为本的人工智能提供了切实可行的战略。在本文中,我将分享来自 IBM、谷歌、微软和卡内基梅隆大学的用户体验框架,为应对人工智能技术和工具的快速发展提供洞见和资源。

1. IBM 的 AI/人类语境模型

IBM 的AI/人类情境模型是其AI 设计实践的核心。该模型提供了一个结构化的框架,确保 AI 解决方案能够与用户无缝交互,并随着用户输入而不断演进,同时尊重并增强其运行环境。

将显示缩放图像
IBM网站截图
资源:IBM 的 AI 设计

IBM 的 AI/人类情境模型旨在指导符合人类需求和价值观的 AI 系统的开发。该模型将 AI 驱动的体验分解为几个关键考量因素,每个因素对于创建有目的性、情境感知和以人为本的解决方案都至关重要:

  1. 理解意图:人工智能系统必须优先考虑以人为本的目标,并考虑用户的意图、情感和情境。意图代表了人工智能系统的基本宗旨,涵盖了用户和企业的目标、愿望、需求和价值观。它定义了解决方案背后的“原因”,并确保系统设计具有清晰的、以用户为中心的目标。
  2. 数据与政策:这指的是从用户和外部世界收集的原始数据,以及保护和管理其使用的政策。数据是人工智能决策的支柱,但其收集和处理必须遵守严格的道德和监管标准。情境是实现有效人工智能交互的关键。IBM 强调系统理解影响用户行为的情境和环境因素的重要性。例如,位置、时间或任务紧急程度等情境数据可以帮助人工智能提供更个性化、更相关的建议。
  3. 机器理解、推理、知识和表达:这指的是人工智能系统在其领域范围内解释结构化和非结构化数据的能力,应用逻辑分析数据并决定最佳行动方案的能力,确保知识库通过新见解动态更新的能力,以及以符合用户环境和期望的方式传达其响应的能力。
  4. 人类反应与系统改进循环:这强调人工智能系统必须被设计为与人类协同工作,而不仅仅是为人类服务,从而确保自动化与人类自主性之间的平衡。用户反应反映了用户对人工智能系统表达的真实反馈——无论是显式的还是隐式的。学习强调系统如何基于用户交互和反馈不断改进,使其能够随着时间的推移不断发展并更好地服务于其目标。
  5. 评估结果:这强调结果衡量人工智能系统对现实世界的影响,代表它如何有效地满足用户需求并有效且合乎道德地解决问题。

2. Google 的可解释性评估标准

Google 的可解释性评估标准 (Explainability Rubric)提供了一个清晰的框架,用于创建透明、公平且以用户为中心的 AI 系统,并重点强调了 22 条需要与用户分享的关键信息。随着 AI 不断影响我们的工作方式、与企业的互动方式,甚至成为我们表达自我的工具,确保用户能够理解并信任这些系统至关重要。

将显示缩放图像
谷歌网站截图
资源:Google 的可解释性评估标准

该评分标准分为三个信息级别:一般级别特征级别决策级别。

  1. 总体层面:概述您的产品或服务的运作方式,包括人工智能的作用。解释使用人工智能的主要目的和优势、商业模式以及人工智能如何促进价值创造。重点介绍为确保安全、公平和透明而采取的措施,包括与社区互动、解决偏见问题以及分享绩效信息。
  2. 功能层面:详细说明具体的 AI 功能,包括其运作方式、AI 的激活时间以及用户控制选项。解释系统限制、人工参与和个性化选项。提供有关所用数据的信息,包括训练数据、外部输入以及用户数据的处理和利用方式。
  3. 决策层:阐明具体的人工智能决策是如何制定的,系统对其输出的可信度,以及如何识别错误或低质量结果。决策完成后,应提供用户反馈渠道,允许提出异议,并清晰地告知用户错误和修复措施。

3.微软的人机交互体验(HAX)工具包

微软的HAX 工具包是一个综合框架,专为开发面向用户的 AI 产品团队而设计。它有助于概念化 AI 系统的功能和行为方式,使其成为设计早期阶段的实用工具。

将显示缩放图像
微软网站截图
资源:微软的 HAX 工具包

HAX 工具包功能多样,允许团队根据自身独特的需求、用例、产品类别和目标,混合搭配其设计工具。HAX 工具包的关键组件包括:

  1. 人机交互指南:这些是设计用户交互过程中 AI 行为的最佳实践。它们指导 AI 产品规划,以确保直观有效的体验。
  2. HAX 设计库:一个资源中心,通过可操作的设计模式和真实世界的例子来解释人机交互指南。
  3. HAX 工作簿:一种协作工具,供团队确定优先实施哪些指南,促进有重点且高效的设计讨论。
  4. HAX 剧本:该剧本专为自然语言处理 (NLP) 应用程序量身定制,可识别常见的人机交互故障并提供缓解这些故障的策略。

4. HCI Institute 的 AI 头脑风暴工具包

AI 头脑风暴工具包由卡内基梅隆大学人机交互 (HCI) 研究所的研究人员创建,旨在提炼 AI 能力,帮助团队探索如何利用 AI 构建应用。创新的停滞往往并非源于技术,而是因为团队选择了错误的项目。AI 头脑风暴工具包解决了这个问题,提供了一种结构化的方法来设计既技术可行又以用户为中心的 AI 驱动解决方案。

将显示缩放图像
HCI Institute 工具包截图
资源:HCI Institute 的 AI 头脑风暴工具包

该套件的结构化方法降低了开发不相关或不必要的AI解决方案的风险。通过关注AI的功能和用户的需求,该套件使团队能够进行周到而有效的创新。该套件将AI功能分为不同的功能,例如:

  • 检测模式(例如识别图像中的人脸)
  • 预测趋势(例如预测股票价格)
  • 生成内容(例如创建合成图像或文本)
  • 自动化操作(例如跨不同应用程序执行工作流程)

它概述了 40 个涵盖医疗保健、教育和交通等不同领域的真实 AI 产品示例。该工具包还包含创意提示、影响力-投入矩阵和绩效-专业知识网格等工具,可指导用户选择具有高影响力且可行的创意。要使用该工具包,首先要查看 AI 功能和示例,以激发您的团队灵感。然后,进行结构化的头脑风暴会议,探索机会、完善概念并评估潜在解决方案。该资源非常适合研讨会、组织战略会议和创新实验室,确保团队设计出具有影响力且以用户为中心的 AI 产品。

5. Google 的 People + AI 指南

《People + AI 指南》由 Google 的多学科团队People + AI Research (PAIR) 创建,提供了方法、最佳实践、案例研究和设计模式的全面资源,旨在帮助设计师、开发人员和产品团队创建有影响力的 AI 驱动解决方案。

将显示缩放图像
谷歌网站截图
资源:Google 的 People + AI 指南

该指南介绍了 20 多种设计模式,为 AI 产品设计提供了实用且以行动为导向的指导。这些模式专注于解决产品开发过程中的关键挑战,并围绕常见问题进行组织,以帮助团队找到相关的见解。

  • 以人为本的人工智能入门:
    包括确定人工智能是否增加价值、设定明确的用户期望以及有效解释产品优势的指导。
  • 在产品中使用人工智能:
    强调充分利用人工智能,平衡自动化与用户控制,并管理精度和召回率的权衡。
  • 引导用户熟悉 AI 功能:
    涵盖熟悉度、确保探索安全以及对新功能提供清晰的解释。
  • 向用户解释人工智能:
    专注于解释人工智能能力以便理解,适当地展示模型信心,并在直接用例之外提供更深入的背景解释。
  • 负责任的数据集构建:
    重点介绍诸如涉及领域专家、为数据标签者设计、维护数据集以及接受现实世界数据的混乱等实践。
  • 建立和校准信任:
    指导团队透明地设置隐私、错误责任以及实现用户反馈和监督。
  • 平衡用户控制和自动化:
    提供有关逐步实现自动化、在需要时将控制权交还给用户以及确保自动化安全的建议。
  • 故障期间为用户提供支持:
    鼓励规划错误解决并确保用户在 AI 系统发生故障时能够继续前进。

这五个框架为设计能够自然融入我们日常生活的人工智能奠定了基础——无论是好玩的、会对话的机器人玩具,还是让我们保持井然有序、高效的应用程序。作为用户体验设计师,以人为本的框架来处理人工智能意味着要在新技术能力与责任之间取得平衡,审视人工智能是否已准备好并适用于每个用例,并构建具有用户反馈循环的系统以推动持续改进。

 

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

《交互设计小白如何从“流程图思维”入门?一套拆解任务流程的实用方法》

杰睿 设计管理与成长

//写在前面:
适合人群:
视觉转交互 / UI Designer 想懂交互逻辑 / 想写出好交互文档的新手
内容结构:
  1. 流程图是什么,不是画图,是表达“用户怎么一步步完成目标”
  2. 流程图包含什么组成?(触发—操作—反馈)
  3. 初学者常犯的理解误区:关注画面,不关注“操作过程”
  4. 拆解一个真实任务流(比如“预定会议室”/“注册账号”)
  5. 如何从用户目标出发,写出一张不依赖原型图的流程清单
  6. 总结一套“新手流程图五步法”
a7af61c73dd145a5135dfffec16c8d28.jpg
很多初入交互设计的小伙伴,都会听到一个建议:“先从画流程图开始。”
但流程图到底**画什么?表达什么?**为什么它对交互设计那么关键?
今天这篇文章,我们就来系统梳理这件事,并教你如何用纯文字也能表达出完整的用户任务流程

 流程图是什么,不是画图,是表达“用户怎么一步步完成目标”

流程图(User Flow)的本质,不是图,而是一条用户的操作路径
你可以把它理解为一张“任务执行地图”:
  • 从哪里开始(入口)
  • 走过哪些关键步骤(过程)
  • 最终完成了什么(目标达成)
它不是设计页面样子,不是决定按钮放哪里,而是回答一个核心问题:用户是怎么一步步完成这件事的?
举个例子:
当你用滴滴打车的流程,其实是:
markdown
复制编辑
1. 打开App → 看到“打车”入口 2. 输入起点和终点 3. 选择车型 → 确认订单 4. 等待司机接单 → 上车 5. 到达目的地 → 支付 → 评价
这其实就是一张流程图的雏形。

流程图包含什么组成?用三段式理解(触发 → 执行 → 反馈)

为了让新手更容易掌握,我们可以把一个用户流程拆成以下三段:
阶段 说明 关键点
触发 Trigger 用户产生动机/看到入口 任务从哪里开始?入口清晰吗?
执行 Action 用户一步步完成操作 步骤顺畅吗?逻辑连贯吗?
反馈 Feedback 系统响应结果 是否完成目标?有没有确认提示?
 这三段不是理论,而是你画流程、写文档时必须考虑的三个设计面

初学者常犯的误区:关注“页面”,而忽略“操作过程”

很多设计小白在学习初期,习惯一上来就画界面、堆按钮。
但问题是——你连用户要做什么都没搞清楚,怎么知道该放什么控件?
 典型误区:
  • 原型里有“上传按钮”,但没想清楚用户是上传图片还是文件?能否预览?能删改吗?
  • 有“下一步”,但用户是否真的已经完成上一步?有没有校验、提示?
 正确思维应该是:
“用户要完成一件事 → 他需要经过哪几步 → 每一步中他需要系统给什么?”

 拆解一个真实任务流示例:「预约会议室」

我们以一个企业内部系统中的真实任务流为例:
 用户目标:预约明天下午的会议室开会

 用户流程拆解:

markdown
复制编辑
1. 登录系统 → 首页选择“会议室预约”入口 2. 选择日期 → 选择时间段(如14:00-15:00) 3. 选择会议室(系统过滤出可用的) 4. 填写用途说明 → 提交预约 5. 显示预约成功提示 → 可查看预约记录

这张流程图体现的设计思考包括:

  • 步骤是否有明确反馈?
  • 用户是否容易出错?
  • 系统是否能预防冲突时间段?
  • 可编辑、取消吗?流程中断如何处理?

 如何从用户目标出发,写出一张不依赖原型图的流程清单

很多人以为流程图就必须要“画”,但对于刚入门的同学,用文字写出一张流程清单,已经很强了!

操作方法:

以“注册账号”为例,试着这样写清楚流程:
markdown
复制编辑
【用户目标】注册一个新账号 【触发入口】 - 打开App → 点击“注册” 【执行过程】 1. 输入手机号 2. 获取验证码 → 系统发送 3. 输入验证码 → 系统校验 4. 设置密码 5. 勾选用户协议 → 点击“注册” 【反馈结果】 - 注册成功 → 跳转至首页 - 如果失败 → 显示具体错误(如验证码错误)
这个结构比直接画个框图更清晰、更全面,还方便和开发、产品对齐逻辑。

总结一套「新手流程图五步法」

很多人不知道从哪开始画流程,其实你可以用下面这套通用五步法

新手流程图五步法:

步骤 问题提示 示例
1. 明确用户目标 他要完成什么任务? 预约会议室、提交订单等
2. 确定起点入口 他从哪开始这件事? 首页、菜单栏、按钮
3. 列出关键步骤 他必须做哪些操作? 选择、输入、确认等
4. 标记系统反馈 系统会给出什么回应? 成功提示、错误校验等
5. 考虑中断/异常 用户会在哪些地方卡住? 验证失败、网络断开等
有时候不需要一次做得很完美,先写出主流程,再补充边界情况,也很棒。
 
推荐你这样开始练习:
选择一个你熟悉的 App,如微信、小红书、饿了么
模拟一个真实任务,如“下单”、“发评论”、“修改资料”
用上面五步法写出完整流程清单,别画图也行!
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何使用人工智能从现有设计中生成设计变体

杰睿 用户研究

如何利用人工智能根据现有设计生成设计选项?

这是一个常见的用例:

  • 也许您认为当前的登录页面太混乱并想改进它。
  • 也许您正在进行设计,但感觉只有一个想法,并且希望有更多的设计选择来获得灵感。

然而,我在网上并没有看到太多关于如何使用人工智能来解决此类用例的讨论。

所以今天,我将逐步向您介绍一些示例,包括我使用的提示、工作流程和结果。

让我们开始吧!

概述

由于我只需要专注于前端设计,因此我使用了V0Magic Patterns进行演示。我特意选择它们是因为它们都是针对前端优化的 AI 原型设计工具。

两种工具都可以完成这项工作,但我在两种工具中都运行了同一组提示,以便您可以更好地了解它们可以实现的功能。

如果您有兴趣,您也可以在其他工具(如CursorWindsurfBolt )中运行相同的工作流程,然后告诉我进展如何。

工作流程分为两个步骤:

  • 步骤1:让AI分析设计并提出改进建议。
  • 第 2 步:要求 AI 根据其建议生成设计变体。

如果您清楚自己想要进行哪些设计改进,您当然可以将步骤 1 和 2 合并为一个简单的步骤——只需上传设计、提供您的建议,然后要求 AI 生成新的设计选项。)

我使用 Kayak.com 的顶部部分作为演示的现有设计。

将显示缩放图像
Kayak.com

问:仔细看看。你会如何设计它以不同的方式?

第一个提示

这是我放入 V0 和 Magic Patterns 的第一个提示,以及 Kayak 主页顶部部分的快照。

提供 Kayak 登陆页面的设计评论(见附件快照)。担任具有深厚 UX/UI 专业知识的经验丰富的产品设计师。KAYAK 的主要业务目标是通过为旅行者提供旅行规划工具来赋能他们。其搜索引擎会扫描各种旅游网站,提供丰富的机票、酒店、租车和度假套餐选择和价格。其主要用户是希望搜索和比较旅行选择的日常旅行者。请使用以下视角评估桌面主页:- 核心价值主张清晰
- 信息架构和易于查找关键操作
- 视觉层次、布局和空间使用
还包括 3-5 条具体的、高影响力的建议,以改善主页上的用户体验或转化率。

正如您所见,我还包括了主要的业务和用户目标——这是一个小提示,可以为 AI 提供更多设计分析的背景。

V0

V0的设计分析:

将显示缩放图像
V0的设计分析

一长串的分析,启发性十足。我大概也能从 ChatGPT 或 Claude 得到类似的结果。

(下一步是根据这些建议生成设计方案。但正如我之前提到的,实际上我也可以提供自己的设计建议,例如“当前设计缺乏清晰的视觉层次,并且留白过多。您能否生成三个设计方案来解决这个问题?”)

接下来,我要求 V0 生成设计选项:

根据以上建议,您能否为 Kayak 主页快照生成 8 种备选设计方案?Kayak 主页快照的8 替代设计选项?

正如我所料,它运行了很长时间,每个设计选项大约一分钟。因此,我点击了“停止”,并在提示中将数量从 8 减少到 3:

根据以上建议,您能否为 Kayak 主页快照生成 3 个备选设计方案?Kayak 主页快照3 备选设计方案吗?

V0 在大约 1.5 分钟内生成了 3 个设计选项:

  • 设计1:增强核心体验
  • 设计二:沉浸式英雄体验
  • 设计3:以目的地为中心的体验

设计方案1:增强核心体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 1 的描述

它生成的设计:

将显示缩放图像
V0的设计

设计方案二:沉浸式英雄体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 2 的描述

它生成的设计:

将显示缩放图像
V0的设计

设计方案3:以目的地为中心的体验

V0 描述的快照:

将显示缩放图像
V0 对设计选项 3 的描述

它生成的设计:

将显示缩放图像
V0的设计

印象

总体而言,效果令人印象深刻。我喜欢这些精致的细节。它保留了我提供的快照中的必要信息(颜色、样式、CTA)。

所有生成的设计都由具有基本交互效果的代码支持,例如输入字段交互和悬停效果。

我希望设计选项之间能有更清晰的区分。不过我也可以尝试后续的提示来解决这个问题。

魔法图案

Magic Patterns 的设计分析:

将显示缩放图像
Magic Patterns 的设计分析

有些我同意,有些我不同意。为了演示,我简单地让它生成相应的设计选项:

根据以上建议,您能否为 Kayak 主页快照生成 8 种备选设计方案?Kayak 主页快照的8 替代设计选项?

Magic Patterns 在 1.5 分钟内生成了 8 个设计选项,比我预期的要快。

由于新闻稿的篇幅限制,我在这里仅展示三种设计:

设计方案1:增强价值主张

将显示缩放图像
Magic Patterns 的设计

设计选项 2:搜索优先设计

将显示缩放图像
Magic Patterns 的设计

设计选项3:社会认同焦点

将显示缩放图像
Magic Patterns 的设计

印象

与 V0 相比,设计更加简单。

它在更短的时间内生成了更多的设计,这很棒。

我很喜欢它的“导入 Figma”功能。我可以将生成的设计导入 Figma 进行进一步编辑。

此外,它还有一个Chrome 扩展程序,可以让我把网页转换成 React 组件或 Figma。虽然不完美,但我对它的功能非常期待。

 

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

产品设计的未来

杰睿 设计管理与成长

日历

链接

个人资料

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

存档