专栏名称: 长弓小子
阿里巴巴高级体验设计师工作经验分享,专注交互体验设计
目录
相关文章推荐
51好读  ›  专栏  ›  长弓小子

干货|Ant Design 定义 AI 界面设计新范式!

长弓小子  · 公众号  ·  · 2024-12-09 08:22

正文

请到「今天看啥」查看全文


⬆️ 关注 「长弓小子」 看更多大厂 B 端设计干货!

Hi,我是元尧。记 得将我设为星标 ⭐️ ,不错过日后每一条来自大厂的经验分享。

欢迎长按下图二维码加我微信,带你进设计师交流群,与上万设计师一起交流成长!

「👇 添加好友请备注:设计交流」


本文内容及图片参考并来自于:
https://x.ant.design/index-cn,
全文共 3127 字,阅读需要 9 分钟

2022 年 11 月,OpenAI 发布 ChatGPT 3.5,带领人类走向 AGI (Artificial General Intelligence 通用人工智能)人机交互新世纪。AGI 让 自然人机交互 成为现实,“语言”这一简单、自然的交互方式也影响到了 GUI(图形用户界面)。


但随着时间的流逝, 设计师们也逐渐发现:即便 “对话式”交互 有着简单易上手、自然快捷等优势,也依旧存在着诸多的问题有待探索:


- 到底 AI 产品界面设计该如何进行?
- 什么样的产品更适合用会话交互完成?
- 会话交互跟图形界面交互可以融合吗?
- AI 产品的交互设计体验会受到哪些因素的影响?
……
对于以上问题,Ant Design 团队正力图构建出一套适用于当下的 AI 设计理论和规则 ,并在蚂蚁内部的海量 AI 产品中进行实践和迭代。在这个过程中,他们沉淀出了一套系统性的 AI 设计理论和方法: RICH 设计范式





PART 1

「 What 」 ‍‍‍‍‍‍‍‍‍‍‍‍

什么是 RICH 设计范式? ‍‍‍‍‍‍‍‍‍


我们可以先看看 ACM SIGCHI 2005(人机交互顶会)曾经定义过的 人机交互的核心问题, 可以分为三个层面:


1. 界面范式层

定义 人机交互界面的设计要素 ,用于指引设计师关注核心问题


2. 用户模型层

构建界面的 体验评估模型 ,用于度量界面体验的好坏


3. 软件框架层

人机界面的 底层支撑算法,以及数 据结构等软件 开发框架 ,是前端界面背后用户看不到的内容


以上提到的的“界面范式层”,定义了作为 UI / UX 设计师在界面设计工作中应关注的 核心 设计要素 是什么,并基于此来确定:“什么是好的设计?该如何做出好的设计”:


在人机交互发展的几十年来,用户界面在不断革新,本质上是想要更大程度地 解放人的生产力 。跟随着时代的变迁和技术的进步,人机交互的过程中出现了很多 用户界面的类型


当下我们熟知并广为应用的 GUI,也即图形用户界面,最早于 1970 年代由施乐公司开创,被苹果的 Macintosh 产品和微软的 windows 产品借鉴并推广,一直沿用至今。

GUI(图形用户界面)时代 ,最底层的设计范式由 四个核心设计要素 组成,分别 WIMP:

- W indow 窗口 ‍‍

- I con 图标 ‍‍‍‍‍

- M enu 菜单

- P oint Device 指示器


这四个设计要素对应着设计师在 GUI 界面设计的过程中,应该重点关注的具体内容:

- Window 窗口: 通过屏幕和特定的界面空间来 承载信息和内容 ,让用户能够阅读、思考和评估;


- Icon 图标: 通过 图形化的隐喻 ,帮助和引导用户理解信息并执行操作; ‍‍


- Menu 菜单: 通过 有逻辑、有顺序 的结构,组织和串联起各种操作,让用户系统性地完成任务;


- Point Device 指示器: 通过键盘、鼠标等带有指向性功能的设备,帮助用户 选中目标 进行操作。


而在 AGI( 通用人工智能 )时代 ,机器已经可以理解人类的大部分意图,并能够使用会话式的交互方式与人类进行更加简易和自然的互动,这也就迫使设计师们不得不去定义一个新的人机交互界面的范式。


正是基于以上背景,Ant Design 团队 提出了一种适用于当下 AGI 人机交互界面设计的范式,它也由 四个 核心设计要素 组成,分别是 RICH: ‍‍


- R ole 角色

- I ntention 意图

- C onversation 对话

- H ybrid UI 混合界面


这四个设计要素对应着设计师在 AI 交互界面设计的过程中,应该重点关注的具体内容:


- Role 角色: AI 在交互过程中扮演了某种 人设和形象 面对用户, 匹配用户的意图,与用户顺畅互动; ‍‍‍‍‍


- Intention 意图: AI 能够 预测 理解 用户的意图,能够 协助用户进行方案 计划 和步骤 拆解 ,进而 推动执行 ,完成用户意图; ‍‍‍‍‍‍‍‍‍‍


- Conversation 对话: 用户通过对话 给出指令 ;AI 在收到指令后 表达出 让用户 听得懂、看得懂 的内容;

‍‍‍‍‍‍‍‍‍


- Hybrid UI 混合界面: 用户的 执行动作 和机器的 结果输出 与反馈 承载在多种交互方式相融合的界面中。





PART 2

「 Why 」

为什么是 RICH 设计范式?


那么 AntD 团队是如何推导出 RICH 设计模式的?为什么是 RICH 而不是其它要素呢?


我在文章: 经验|AI 时代的用户体验设计有哪些变化? 一文中也提到过, 不论是之前的工业时代、互联网时代,还是当下的 AI 时代,做用户界面体验设计的根本出发点始终都是“以用户为中心”,去探讨 用户与产品界面之间的关系 几十年来 人机交互的本质 一直都是万变不离其宗:


用户通过某种动作或行为,将意图和信息 输入 给机器;
机器理解并产出结果 反馈 给用户;
用户对结果进行 评估 ,看是否符合要求;
如果符合要求,这一轮交互就算完成 闭环



《设计心理学》的作者唐纳德·诺曼,基于以上这个交互闭环,提出了一个 人机交互模型 ,更进一步地拆解了这个交互闭环的每个环节:



可以看到,在 GUI(图形用户界面)时代 用户需要先根据自己的意图,设想解决问题的方式和工具,并将步骤进行分析和拆解,明确需求之后再让机器开始执行操作,也即:


前期大量的工作是由用户自己思考完成后,再交付给机器的, 机器的工作内容更多是 视觉及听觉层面 的反馈。


而在 AGI( 通用人工智能 )时代 机器越来越像一个可以思考的“人”了,它能够理解用户模糊的意图,自动制定方案、推动任务执行,更加快速和丝滑地帮助用户达成意图。也即:


人与机器的交互范畴被向前拓展,除了交互界面上可见的内容, AI 时代的用户交互体验还取决于机器是否听得懂人类表达,是否能够预测用户需求等一系列 隐形的体验


而 RICH 中的四要素,正是可以用来帮助和指引设计师更进一步地思考 AI 时代界面设计, 创造出更优质的 AI 产品体验


- Role 角色: AI 应该以怎样的 人设和形象 与用户进行沟通和交流?


- Intention 意图: AI 怎样才能 听懂并 理解 用户的意图,再帮助用户 完成意图?


- Conversation 对话: AI 在收 到指令后如何表达才能让 用户 听得懂、看得懂


- Hybrid UI 混合界面: 如何组织 会话场景 多行为融合 的操作界面?





PART 3

「 How 」

如何使用 RICH 设计范式?


那么设计师该如何应用 RICH 创造卓越的 AI 产品体验呢?AntD 团队 总结了很多设计策略和方法:


1. Intention 意图

作为设计师,要清楚 AI 产品应该如何满足用户的意图,这就需要我们:


1️⃣ 明确意图类型
明确用户给出的是 “清晰意图” 还是 “模糊意图” ,是 “咨询信息类” 的意图还是 “执行任务类” 的意图,给出有针对性的解法。

2️⃣ 提供意图预期
用户对 AI 所具备的能力缺乏一定的了解,因此设计需要帮助用户 明确 AI 的能力边界 ,从而建立符合 AI 可实现范围的意图预期。

3️⃣ 引导意图表达
用户意图表达若过于口语化,AI 可能无法识别与理解,从而影响到用户的使用体验。因此设计需要对用户 表达意图的方式进行有效的引导


2. Role 角色

设计师需要赋予 AI 清晰的人设定位,需要做到:


1️⃣ 一致性
角色的 行为逻辑与背景设定 保持一致;在不同的对话环境下, 角色前后 的风格特征也要保持一致。

2️⃣ 自然性
角色应展现出 人类交流的流畅性和真实性 ,包括 语法、语气和逻辑 上的自然感

3️⃣ 情感化
识别用户的情绪状态,通过 同理心的表达、有个性化的关怀及有感染力的视觉表现 来响应用户


3. Conversation 对话

AntD 将人类与 AI 产品的对话流程划分为四个主要环节: 唤醒、识别、确认、反馈 ,每个环节都对应特定的场景及设计规则:




4. Hybrid UI 混合界面

在 AI 时代,图形界面融合了自然语言会话和操作界面等多通道交互,演变出了新的形态。当以上提到的意图(Intention)、角色(Role)、会话(Conversation)等无形的体验规则被确定后,它们最终也会承载于具体的界面之上。


为了将无形的体验融入到有形的界面之中,AntD 提出了 HUI(Hybrid UI) 设计理念,并 基于 Ant Design 5.0,沉淀了一套 AI 组件资产: A nt Design X



在官网: https://x.ant.design/index-cn 可以 找到 RICH 的更多具体规则和组件规范。


关于 AI 时代的设计体验和设计思考,你还可以阅读我的过往文章:


- 干货| 生成式 AI 应用的 6 大设计原则!
- 经验|AI 时代的用户体验设计有哪些变化?
- 详解|苹果的 Apple Intelligence,重新定义 AI 交互体验!

公众号后台回复 “AI” ,还可以看更多大厂 AI 设计工作经验:




识别二维码 👇 👇 👇 添加我的微信。 带你加入 设计师交流群 添加好友请备注:设计交流。




学海无涯,盼你同舟!😊




>  经验| 项目太琐碎,如何成长和沉淀? ‍‍‍‍

>  经验|设计策略到底从哪来?如何制定?

>  详解 |组件库如何做好更新迭代?



- END -

欢迎长按图片👇👇👇加我微信
带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集!
「添加好友请备注:设计交流」







请到「今天看啥」查看全文