人工智能如何改变 UI 设计的未来？

[sumonasumonakha.t]

为什么我们用原始组件来设计 Agentforce
人工智能助手以不同格式做出的四种响应的图示
模块化设计为设计师提供了更大的灵活性，为开发人员提供了更高的效率。[图片 | Salesforce]
当我们采用模块化设计方法时，我们的人工智能助手可以以不同的格式做出响应。
邓慧玲 ​
2024 年 7 月 10 日
阅读时间：6 分钟
分享文章

当您向人工智能 (AI) 助手发出请求时，其响应会根据您的目标而有所不同。您可能会得到纯文本摘要、项目销售计划或帐户概览卡。可能性无穷无尽。因此，当我们为Agentforce创建对话式用户界面时，我们依靠模块化设计和可重复使用的构建块。

了解我们为何青睐使用原语以及它们如何帮助用户获得成功。

你将学到的内容：
什么是原始组件？
模块化设计的好处
更高效发展之路
使用原始组件进行设计的结果
什么是原始组件？
原始组件* 是常见的设计系统元素，无法分解成更多部分。我们目前仅依赖它们供内部使用。它们是具有特定功能的最小独立 UI 代码块。例如，卡片、文本或颜色。它们存在于设计系统的原子和分子级别，因此它们被刻意简化。

基元不会强加太多自己的样式或层叠样式表 (CSS)，这使它们保持轻量级。它们所具有的 CSS 提供了骨架结构和必要的默认值。可以将其视为半透明的构建块。

我们的设计策略以基本要素为中心。这些微小但强大的部件支持模块化设计。当系统被划分为独立的部件（或模块）时，会有很多好处。

模块化设计的好处
如果你有一盒大瓷砖，那么将它们排列成马赛克的方式就很有限了。但如果你有一盒小瓷砖，那么你就有更多的选择。模块化设计一直提供这种灵活性。现在我们正在设计 AI 界面，灵活性的重要性上升到了一个新的水平。

我们需要一些小部件，可以根据用户的提示和基础或上下文 排列成不同的响应。

Agentforce 响应由相同的基本元素组成，例如按钮、文本和输入字段。我们的团队以不同的方式排列它们，以创建许多响应用户界面。结果看起来像记录卡、日期和时间输入、单选按钮或列表。每个功能背后都有原始组件。

例如：纯文本设计适用于请求摘要或计算的用户。

使用模块化设计和纯文本原始组件的 Einstein Copilot 响应的产品屏幕截图
对提示的纯文本响应。
然而，纯文本不适用于日历问题。这需要其他设计元素，例如日期和时间输入。

显示 Einstein Copilot 模块化设计的日期/时间输入字段。
日期和时间输入。
或者，用户可能会询问联系方式或机会。这些回复看起来也不同。我们的团队设计了每个回复以匹配用户的意图。

Einstein Copilot 的模块化设计以联系卡的形式展示。
联系人列表。
Einstein Copilot 中的机会响应。
最后一次机会。
设计 AI 界面可以扩展输出，但输出不一定是无限的。设计师还会限制现有的响应配置数量。我们的模块化设计可以满足一系列常见用例。

为了实现这一点，设计人员依赖于原始组件的灵活性。原始组件的好处也延伸到了开发人员身上。

人工智能与设计的交汇之处
带有 Slack 用户界面的手机插图

Einstein Copilot 与用户之间的对话
Trailhead：为 Agentforce 做好准备
以绿色和橙色块表示的图案的抽象插图
大多数公司都使用设计系统——您呢？
键盘、聊天字段和 Salesforce 角色 Astro 的插图，带有自然气息
我们在设计 AI 界面时会充分考虑可访问性——具体方法如下
更高效发展之路
由于基元仅包含几行代码，因此它们轻量且简单。开发人员只需 奥地利 whatsapp 数据 获取所需的内容即可快速构建。

原语如何简化开发：

内置辅助功能
简单的 CSS 样式
更快的维护更新
基元可以节省时间。它们预先打包了特定但常用的功能和可访问的设计最佳实践。因此，开发人员无需花时间自己编写功能代码并不断重新发明轮子。

如果需要 CSS 样式，则可以轻松分层。开发人员可以使用基元以受支持的方式自定义颜色、间距、文本大小、字体等。他们不必以不受支持的方式覆盖组件样式，从而最大限度地减少 Salesforce 更新组件时出现的问题。

效率不仅限于初始构建。它也存在于长期维护中。开发人员可以更换这些模块化部件以重构用户体验或消除技术债务。毕竟，我们知道人工智能界面设计将会发展。基元帮助我们随着即将到来的进步而改变。