AIGC产品浪潮,对于产品设计师来说或许是一个可以重燃设计热情,重新探索人们与技术进行新交互方式的契机。界面在不断进化,所以优秀产品设计的基础原理也比以往任何时候都更加重要。
当然如果你本身就是一名UX设计师,这个新系列下的这些UX模式你或许也会感到熟悉,只是来到一个新的技术载体,设计细节和定义会得到新的诠释。
这是AI时代的用户体验新模式系列文章的第六篇,暗黑模式篇,灵感来自Emily Campbell模式梳理,成文夹杂部分笔者自己对目前和未来AI产品的理解。话不多说,开始。
在AI产品中,特征标识用于区分AI功能与其他功能特性,并明确其特定用例。通常会采用清晰的标签,简要的上下文信息,实际用例或场景的突出,以及一些视觉特征来明确划分AI功能,告知AI能够提供的产品价值,引导用户有效利用其能力。
接下去对AI产品的特征标识的定义会分成六个部分。
色彩模式、信息披露、初始CTA、称呼模式、个性模式、图标
是一种视觉提示,用来帮助用户识别AI功能和AI生成的内容。
用户如何知道自己是在与一个人还是一个AI模型进行互动?用户如何区分通过提示由AI返回的信息还是手动输入的信息?
色彩目前已经成为一种有效区分实现差异化的模式,用来帮助用户识别AI产品和功能。当前的色彩趋势中,有两种颜色尤为突出并被广泛应用:紫色和绿色以及渐变色。尤其紫色作为目前大多数AI产品的主导色,一方面是现代UI设计中的流行美学趋势所致,以及紫色作为界面设计中不常见但用户仍然感到熟悉的颜色,另一方面紫色作为早期就在设计工具试验的AI工具/插件配色。
当然不仅仅是色彩,同时会结合色彩丰富的图标,通过创造性美学风格将AI产品和传统产品进行区分,品牌也会在继续保持一致性和独立色彩方案之间进行权衡。
同时渐变色也逐渐被重新启用,这对于厌倦了扁平化设计的用户和设计师来说可能都是好事。色彩是一种很有用的模式,比如Google的AI生成搜索结果中,搜索窗口中的对话内容会在不同的柔和色调之间交替变换,这种模式的应用不仅有助于将不同性质的对话区分开来,同时又能与搜索结果页面的其他内容形成对比。
当然色彩模式存在一定局限性,仅靠色彩作为提示是不够的,因为不同的身体或认知能力(如色盲/色弱群体)对色彩感知会产生差异。因此最好是将色彩和基于文本或图标的指示符结合起来,以帮助用户根据来源和类型清晰地导航信息。
随着模型迭代,单一颜色可能会出现不足以区分模型能力和强度的情况,针对不同能力的模型返回的结果也可以考虑采用不同的视觉处理方式。
Jasper的UI界面使用了占视觉主导地位的紫色主题。
Adobe采用蓝紫色作为其 PDF AI 功能的主要标志颜色。
Grammarly AI功能的色彩采用和主要品牌颜色相似的色系,主要在图标上进行AI功能和常规功能的区分。
Copy.ai 使用了紫色/绿色调色板。
Notion 的所有AI功能图标均采用了紫色系。
Framer 使用蓝色和紫色的渐变调色板来表示其AI工具。
用来清晰地标记由AI引导或生成的内容和对话。
用户对AI的信任问题是不可避免的,一种帮助用户更舒适自然接受AI的方法是,在用户与AI互动时做到公开和清晰。当用户能够在充分知情的前提下选择体验功能时,他们可能更愿意暂时放下疑虑。
信息披露模式本质上是为AI生成的互动和内容贴上标签,使用户能够将其与由人类创作的内容或不涉及AI的互动模式区分开来。
对于完全基于AI的产品:实际情况下可能并不需要这种信息披露。像Perplexity和ChatGPT这样的工具本身就是完全围绕AI功能构建的,因此用户会提前预期到AI的存在。当然作为产品设计者也可以通过区分用户上传或引用的内容和AI捕获到的资源,帮助用户更好地理解数据来源。
对于混合型产品:AI生成或编辑的内容会和人工创作的内容混合在一起,因此需要考虑如何标记由AI生成的内容,以防止用户在不知情的情况下将AI生成的内容作为自己的作品呈现,产生不必要的版权等问题。
对于由AI代理的产品:需要在对话中标记由AI传递的内容,用户面对真人和面对AI的对话是不同的心理感受,提前告知用户,可以避免产生尴尬或对品牌的负面影响。随着AI Agent的普及,这一点变得尤为重要。
在用户的数据可能被收集的情况下,主动告知他们正在与AI驱动的产品互动是十分必要的。
例如Intercom's Fin会使用一个明确的标签“AI”,明确标记AI发送的消息。整个对过程中其内联标识始终存在,用户也可以回溯对话,明确知道真实客服是何时介入的。
IA Writer明确区分AI创作的文本和人类创作的文本。如果文本来自AI来源,会以灰色显示,仅在经过用户修订后才会显示为标准高对比度的文本颜色。
对于AI产品,用户信任是货币,规划建立信任的功能和体验,不仅是出于创新收益的考虑,背后也有商业利益考量。能够与真实用户建立积极关系的公司,在需要适应市场变化和应对政策法律环境变化的AI时代,将更具成长的韧性。
作为设计师需要争取在那些可能为了商业规模而损害用户体验的产品决策中掌握有限的主动权。
Productboard会对由AI搜寻和总结的信息进行特殊AI标识,将其与真实用户贡献的笔记区分开来。
指的是一个开放式的对话输入框,邀请用户开始与AI的首次互动。
初始CTA(Call to Action,行动号召)通常以一个大输入框的形式出现,邀请用户用自然语言描述自己脑海中的内容,让AI生成结果。对于一些简单的问题是有效的,但是对于大多数比较复杂的实际问题的解决,仅用几个词语往往无法获得理想的输出。
同时随着大部分产品对大输入框形式的CTA的广泛应用,这种模式开始显得有些流于形式,成了展示产品能力的一种手段,但其实未能有效给到用户实际的产品价值和“Aha”时刻。
现在也有一些产品将AI作为用户旅程中的一个选项来引入,这样可以帮助用户在最相关的上下文中发现该功能。
但不得不承认,在同质化竞争中,有时候对AI功能提前展示的“噱头”正是不少产品起步阶段所需要的,开放的初始CTA会充满趣味,清晰简化的体验模式也能吸引用户,通过创建一个前置的体验介绍AI功能,让用户克服理解的初始障碍,帮助用户迈出第一步。
在一些涉及到用户真实工作的场景中,可以将CTA与模板、建议和其他指导相结合,帮助用户更接近他们的想法。
用户不太可能在第一次尝试中就生成一个可用于生产的成果,因此可以优先考虑让用户轻松构思有趣的概念,当乐趣被创造,用户更有可能谈论和分享传播产品,或者在发现真正的用例需求时再次回来。
当然如果产品应用的用例复杂到开放文本框无法真正帮助用户理解产品的AI能力,需要考虑推迟引入AI的时机,或者将其置于更好的上下文情境中。
Prezi的CTA。
Notion将CTA置于空白页面中操作建议的顶部。
Claude、ChatGPT和其他基础对话界面为主的产品都使用了对话模式
谷歌尝试在其搜索输入表单下方放置CTA。
Adobe将其AI工具定位为标准产品的高级附加功能。
Zapier在首页上使用了CTA。
应该如何称呼这个AI呢?
在对话体验中,用户有权知道他们正在与什么或谁进行互动。针对不同的对象,用户的分享意识也会有所差异,所以需要对AI进行命名,让用户称呼正在互动的对象。
当然称呼模式存在一定的模糊性,通常大多数产品都会保留与AI相关的术语,以明确是AI性质的互动对象。比如Klarna的AI Assistant,Notion的Notion AI,Leena的Leena.ai,GitHub的Copilot等。
单独将AI取个名字进行称呼,比如Intercom将AI命名为Fin,Salesforce将AI命名为Einstein等,始终会跟随AI标识的信息披露,以明确用户正在与AI互动。本质上这种形式是为AI赋予角色,让它显得更具亲和力,帮助消费者与品牌建立情感联系。
当然不少以AI为基础起步的企业,AI和企业品牌深度绑定,比如ChatGPT、Jasper等。
该模式并不是固定的,称呼需要与真实品牌和产品体验密切相关。
当然也得避免恐怖谷效应,过于人性化的名字会让用户不清楚自己是在与AI还是真人对话,需要有适当的提示和文案来消除这种不确定感。
虽然Character.ai有高度个性化的称呼,但所有角色旁边都会有一个c.ai标识。
当与Github的Copilot开始新对话时,首先会提醒用户它是 AI。
用来区分AI的个性和氛围的特征。
随着AI产品能力的普及,一些用户会希望了解跟他们互动的AI是如何被训练来感知世界的,从而知道应该如何应对一些情况。当有多个不同的AI角色供用户选择时,就像一个生活教练的语气风格与个人工作助理可能会完全不同。
AI的个性模式,可以在初始训练时就设定,也可以通过后续提示在表层实现。目前市面上的每个大型语言模型(LLM)都有一个基础提示,用来指导AI对世界的理解方式及与用户的互动,理解每个LLM的思维方式,是定义AI整体个性的第一步。
就像Claude和ChatGPT的基本提示可以基于简单的问题回答被用户直观地理解。
当我们聊起AI的个性模式,通常都绕不开语气、语调、情境感知等特性,这些特性都可以在后续的训练中逐渐培养。而在创建AI的阶段,需要思考AI会在什么场景中出现,以及每个场景中需要的特性。比如当用户需要技术支持时,会希望AI助手更专业、不过分私人化;如果AI扮演的是导师或朋友的角色,会希望它更具人情味。
AI的个性模式不同于用户个人的语气。后者指如何双方进行直接互动,而前者则指AI如何理解用户的意图,或在用户的表达情境中生成内容。
在现实环境中,我们会通过个性来判断周围的人,在虚拟环境中,用户也会通过这些个性化线索来评估他们正在互动的数字伙伴。同时作为品牌综合印象的反映,AI角色的个性化设定需要经过谨慎评估,轻浮也会削弱用户对AI的信任。
可以给出单独的指令来定义ChatGPT的一般角色个性。
personal.ai允许用户为每个角色定义个性特征。
targuar.ai告知用户不同专业领域的AI角色如何协同工作。
为AI设计一个专属的视觉标识,为AI时代的产品建立清晰的界面体验。
用于表示AI的图标语言正在逐步形成,用来表达AI在UI界面中的存在,让用户知道他们正在与AI交互,或者某些内容是AI生成的。以下是比较常见的三种视觉隐喻:
✨ 发光星星图标,通常被用于营销页面、按钮,或标识AI生成的内容上,变体有🪄魔法棒这样的图标。
🔮 发光水晶球图标,通常被用于文本或聊天界面,以及实时互动的AI对话助手等。
🤖 机器人图标,通常被用于直接代表AI代理或助手,尤其是在强调AI是“机器人”身份时使用。
通常视觉语言的演化速度比UI或交互模式要快得多,如同传统互联网产品中的汉堡菜单和保存图标这类视觉语言,随着越来越多的用户逐渐熟悉这些象征性图标,被接受的视觉语言也会被沿用下去。
当然图标作为一种视觉隐喻,首先视觉还是要和功能本身契合,同时将AI图标的出现基础逻辑是为了与其他非AI功能图标区分开,随着AI功能的扩展,现有图标是否仍能传达新功能的意义?以及某些头部AI品牌可能是否也会结合自身的品牌特性发展出独特的视觉标志,这些或许只有在AI产品视觉语言的探索中寻找更好的答案。
当然AI图标并不是独立的视觉风格,需要和全局的视觉语言统一,结合专属的配色、称呼和个性设定,确保图标的独特性,让用户可以轻松识别出AI在产品中的位置,同时也融合进整个产品体系中。
设计一个独特的AI视觉标识时,确保其在所有相关界面中一贯使用,避免潜在的视觉混淆,以增强用户体验的清晰度和可预测性,为用户提供直观的导航。
从左到右依次为GitHub's CoPilot、Jasper、Character.ai、Adobe。
从上到下从左到右依次为Gemini、Canva、Framer、Grammarly、Writer。
上面提到的六种AI产品的特征标识模式,色彩模式、信息披露、初始CTA、称呼模式、个性模式、图标,核心都是为了帮助用户在界面中轻松识别AI并建立起信任感。无论是称呼、个性还是其他视觉符号的设计也同样遵循着清晰、可识别性、一致性和品牌连贯性这些基础原则。
AI时代的用户体验新模式系列文章暂告一段落,随着AI产品的能力边界逐渐探索和成熟,未来也不排除会继续更新该系列。
文章来自于“UX Chocolate”,作者“KaaKii”。
【开源免费】ai-renamer是一个用AI帮你做文件夹或者图片命名的项目。该项目会根据文件夹或者图片内容来为文件进行重新命名,让你的文件管理更加便利。
项目地址:https://github.com/ozgrozer/ai-renamer
【开源免费】AutoGPT是一个允许用户创建和运行智能体的(AI Agents)项目。用户创建的智能体能够自动执行各种任务,从而让AI有步骤的去解决实际问题。
项目地址:https://github.com/Significant-Gravitas/AutoGPT
【开源免费】MetaGPT是一个“软件开发公司”的智能体项目,只需要输入一句话的老板需求,MetaGPT即可输出用户故事 / 竞品分析 / 需求 / 数据结构 / APIs / 文件等软件开发的相关内容。MetaGPT内置了各种AI角色,包括产品经理 / 架构师 / 项目经理 / 工程师,MetaGPT提供了一个精心调配的软件公司研发全过程的SOP。
项目地址:https://github.com/geekan/MetaGPT/blob/main/docs/README_CN.md
【开源免费】MindSearch是一个模仿人类思考方式的AI搜索引擎框架,其性能可与 Perplexity和ChatGPT-Web相媲美。
项目地址:https://github.com/InternLM/MindSearch
在线使用:https://mindsearch.openxlab.org.cn/
【开源免费】Morphic是一个由AI驱动的搜索引擎。该项目开源免费,搜索结果包含文本,图片,视频等各种AI搜索所需要的必备功能。相对于其他开源AI搜索项目,测试搜索结果最好。
项目地址:https://github.com/miurla/morphic/tree/main
在线使用:https://www.morphic.sh/