基本原则
清晰、简洁、一致、可操作暗示以及隐喻（可供性）、反馈、容错、高效、易记忆易学习。
1. 清晰
内容、结构、界面效果都是清晰可见的，加强情感的修饰，注意只使用文字与排版来表达页面，以字体、字号、颜色、版式，精妙动画效果来增加界面的精致性与设计不够。尽量避免平滑、阴影。
2. 简洁
为了用户聚焦，限制明确页面唯一的或者最重要的目标性，不让用户让焦钛的选择感。
3.一致性
界面元素的标准控件化：问题使用系统交互元素，以及界面和用户之间对话风格的统一：标准文本风格、口吻、语气、统一话术。
4.可操作暗示隐以及喻意
让用户看到这个就是可以交互的，按钮要像按钮，与文本内容以及其他界面元素有所区别。另外可增加操作引导，在操作时给予引导，而不是独有的一股脑引发引导。隐喻本可以单独做一个原则，但这里与可操作暗示大约类似，隐喻指的是虚拟界面可以做到让用户经验类似的喻，确实是现实物理世界的隐喻还是虚拟数字世界。让用户无成本迁移感。5
. 反馈
任何操作都要给予可感知的操作反馈，当点击或者其他时，被操作交互的要素要给予短暂的强调，另外通过动画给予进度提示，
6.容错与安全感
降低用户犯错成本，做到高危操作可恢复。应用应该通过使用熟悉的、可预见的交互元素，确认重要的操作、可回溯的取消手段等方式，来让用户觉得自己处于被保护的状态中。此外还有防错原则，采用本质的安全设计方式（固有）安全），比如表单未完成按钮不可用...
7.高效
两个方面，用户高效使用的性以及高效开发的性，要关注网页技术新功能，快速迭代那些优秀且通用改装的新功能。
8.易学习易记忆
这是最后一条，在做到前面的原则之后，这条应该是取缔的，但是由于技术性平台的特殊性，涉及专业性技术术语等等的东西，所以对于一些非技术人员或者不太懂行的技术人员，需要提供提醒文档嵌入，方便用户学习。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
项目名称与内容：这是为 ComplyControl——一个专注金融领域的前沿 AI 合规模块（具备实时监控、智能检测与欺诈发现功能）的品牌形象与网站界面设计项目 Behance+1。
完成时间与平台：发布于 2025 年 6 月 4 日，整合品牌设计、网站 UI/UX 及用户界面，使用 Figma 与 Webflow 等工具进行创作与实现 Behance。
标志设计：图中展示了简洁现代的标志（logo），结构紧凑且具识别度，呈现强烈的科技感与专业感 。
配色策略：项目运用了对比鲜明的暖色（如橙红）与冷色（蓝色），辅以深色底调，强化视觉冲击力，同时展现了兼具活力与稳重的品牌气质 。
字体风格：在字体展示中可见清晰可读的无衬线体，搭配简洁的数字表现，进一步传达专业且现代的品牌语言 。
移动界面布局：图中呈现了移动设备上的 UI 布局，包括导航菜单与交互按钮，采用扁平化设计，按钮与图标配色清晰，对焦用户操作体验 。
数据可视化：图表或百分比数据显示以清晰简练的方式呈现关键指标（如 95%、40% 等），辅助用户快速理解核心内容 。
整体风格语言：整体风格简洁、科技感强烈，布局逻辑清晰，强调功能与信息可视化，有助于金融产品的信息传递与可信感建立。
设计工具：项目中使用了 Figma 进行界面与原型设计，利用 Webflow 实现响应式网页开发与交互效果。同时还运用 After Effects、Photoshop 以丰富视觉表现与动画效果 。
多方协同：项目由 Embacy Design 领衔，联合多位设计师及机构参与，展现了团队协作的深度与创意整合能力 。
| 优点 | 描述 |
|---|---|
| 清晰品牌定位 | 通过色彩、字体与视觉元素的统一，传达了“科技 + 合规”的品牌主旨。 |
| 现代化视觉表现 | 配色对比强烈、界面干净、排版有序，符合金融科技产品的使用场景。 |
| 信息表达精准 | 数据视觉化突出、界面交互明确，提升用户理解与体验效率。 |
| 专业工具运用 | Figma、Webflow、AE 等工具的融合使用提升了设计的实施效率与表现力。 |
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
作为 Pennylane 的高级设计运营专家，我以为我们已经破解了设计文档的密码。我们基于 Notion 的系统全面、条理清晰，理论上堪称完美。
在我的文章《设计文档：一致性和协作性 UI 开发的关键支柱》中，我倡导基于 Notion 的方法作为设计系统文档的黄金标准。回顾过去，那篇文章展现了我对文档的热情，但它也揭示了我对文档实际使用人员应该是什么样子的盲点。
在我原本以为只是例行检查设计和工程团队时，我突然意识到了这一点。结果，我听到的不是成功的故事，而是令人不安的事实：我们精心制作的文档，对于最需要它的人来说，基本上是隐形的。
一位前端工程师承认： “我通常只是尝试自己解决问题，这比在多个平台上搜索要快得多。”
“当我找到正确的文档时，我可能已经构建了该组件的三个版本，”另一位用户分享道。
这并不是我们团队能力的失败，而是我们的方法未能适应人们的实际工作方式。
之前，先简单介绍一下背景。设计师为空状态组件编写的文档是这样的：
工程师需要的技术文档是什么样的：
我没有为现有的文档辩护，而是决定倾听。几周来，我对设计和工程领域的20名团队成员进行了深入访谈。访谈结果清晰地展现了以下几个摩擦点：
来自设计师：
来自工程师：
根本原因是，我们创建了一个满足组织需求但忽略了用户自然工作流程的文档系统。
解决方案不是编写更好的文档，而是从根本上重新思考文档是什么。
我们不需要要求团队适应我们的系统，如果我们的系统适应他们呢？
愿景：将文档从静态参考转变为决策制定过程中的动态、视觉伴侣。
干净、简约、专注于基本要素、组件名称、实时代码的直接链接和完成状态。
以最纯净的形式显示的组件，其变体被清晰地标记，并由复杂分子的分离资产层支持。
工艺技巧、行为文档和使用指南以视觉方式与交互式示例一起呈现。
按照这里显示的顺序我们有：
一些多功能组件需要“注意事项”部分来说明使用它们的限制和最佳实践。
模板展示实际用例中的组件，弥合孤立组件和完整用户体验之间的差距。
完整、全面的文档，一目了然，没有不必要的文本或过时的信息。
反馈具有变革性：
“终于有符合我语言的文档了，”一位设计师分享道。 “我不用离开 Figma 就能看到我需要的一切。”
一位前端工程师表示： “这些可视化示例让我省去了与设计团队反复沟通的时间。我可以立即看到预期的行为。”
但真正的成功标准并非赞誉，而是使用率。我们的新文档正在被积极地查阅、在设计评审中被引用，并在工程讨论中被引用。它已经成为我们工作流程中不可或缺的一部分，而非事后才想到的。
这次旅程让我明白，优秀的文档就是在人们所在的地方与他们会面并支持他们自然的工作方式。
我们的下一个挑战是将这些相同的原则应用到我们的 UI 工具包平台，确保我们以工程为中心的工具像我们的设计文档一样直观且工作流程集成。
这次转型最重要的启示在于人性。我们的利益相关者并不抗拒文档，他们抗拒的是那些无法满足他们需求的文档。
通过从同理心出发，进行真正的研究，并围绕实际工作流程而不是理论理想设计我们的文档系统，我们创造了一些不仅仅存在的东西：它蓬勃发展。
对其他设计团队的启示：你的文档的好坏取决于它的采用程度。在写下任何文字之前，先问问你的用户他们真正需要什么。答案可能会让你大吃一惊，并激发你彻底重新思考如何分享设计知识。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
为设计作品集寻找灵感并非易事。作为设计师，我们常常面对空白画布，不知从何入手，也不知道该包含哪些内容。今天，我想分享五个以独特方式脱颖而出的优秀设计作品集，并探讨它们的成功秘诀。
Diego - Rappi 应用产品设计师
这个作品集之所以能上榜，是因为我认为它的主页结构良好，界面简洁。基本上，他设计了一个简历主页，省去了老旧的 PDF 链接。
这个作品集的缺点是没有任何社交链接，而且滚动动画有点限制。可以去看看。
约翰·米勒投资组合
简洁实用的用户界面让这个作品集如此出色。案例研究足够详细，足以展现其价值，但篇幅太长了。我个人非常喜欢。唯一不足的是，4K分辨率下，网站比例略有失调（太大了）。建议你去看看！
Liza 的作品集真是太棒了。我本来就喜欢处理复杂问题，但 Liza 的作品集很好地展现了如何在不添加太多细节的情况下展现复杂问题。
在 Yelp 和 GitLab 上展示项目展现了她的专业素养。她将复杂项目简洁的界面展现得淋漓尽致，这令我惊叹不已。强烈推荐你去了解一下她，从她那里汲取一些灵感。
Jay 拥有简洁、专业的作品集，展示了他独特的风格和设计项目方法。案例研究全面而详细，并配有展示其特点和设计的原型视频。
太好了，现在我们已经看到了我挑选的一些“最佳”投资组合，我可以给你一份简短的清单，列出我认为你应该在你的投资组合中做什么和不应该做什么。
让我们从应该做的事情开始
✅最多展示 2-3 个案例研究。
✅ 准备一些彼此相关、展现相同技能的用例组合。所以，如果你想去移动公司，就展示移动案例研究；如果你想去游戏公司，就展示游戏案例。你懂的。
✅撰写案例研究的元数据
✅展现自我，谈论自我。人们雇佣的是人，而不是机器或文字。
✅获取产品设计师的反馈。甚至可以尝试和朋友一起演练一个案例研究。
✅有“联系我们”和“关于我们”部分/页面
❌不要做设计文档，做案例研究。简短而精彩地展示你的解决问题的能力
❌ 别忘了网站设计和建设。在我看来，拥有一个以你的域名命名的专业网站能给你带来一些荣誉，并展现你作为UX UI设计师的技能。
❌不要使用低质量的图片。请使用高质量的图片。这样才能展现你对细节的重视。
我使用了 Make.com，一个类似于 Zapier 的无代码自动化平台。
我添加了“Figma 的列表评论”组件来从我的 Figma 文件中提取评论。
然后我需要提供文件 ID，我可以轻松地从 URL 中复制和粘贴。
我还可以设置一次获取评论数量的限制。就我而言，400 条就足够了。
如果您不希望 Figma 文件收到很多评论，则可以将评论数量降低到 50-100 甚至更少，以使自动化运行得更快。
实际上，我一开始并没有包括这个步骤，但我意识到那是一个错误。
当我尝试将数据直接发送到 Google Gemini AI（我将在第 3 步中介绍）时，它无法正常工作。
人工智能因为接收了太多不必要的信息而感到困惑。它不仅接收了评论文本，还混入了其他数据，例如时间戳、ID、文件密钥、订单位置、用户反应等等，如下所示：
这就是为什么这一步可以清理数据并确保 AI 只获得实际的评论。
这是自动化的核心——这是最重要的一步，也是我最喜欢的一步。
我选择 Google Gemini AI 仅仅是因为它几乎免费，并且提供了相当宽松的速率限制。相比之下，使用 OpenAI 或 Claude 的 API 可能会很昂贵。
Gemini AI 包含许多模型，可能会令人困惑。
本次实验我选择了老款的 Gemini 1.0 Pro，因为它已经足够满足我的需求了。如果你感兴趣，可以试试 Gemini 2.0 Flash。
最后，我访问了https://ai.google.dev/获取 API 密钥。设置起来非常简单。
用户文本是用户要求 AI 执行的操作。
这是我在文本框中输入的内容：
以下是来自设计文件的 Figma 评论列表。- 严格根据内容将其分为最多 **4 个类别**。- 使用**Figma 评论中的确切措辞**，无需修改或编造内容。- 每个类别应包括： - 使用 `<h2>类别名称</h2>` 的**标题**。 - `<p><b>此处为摘要文本</b></p>` 内的**加粗摘要**。 - `<ul><li>“实际 Figma 评论”</li></ul>` 内的**真实示例列表**，列表前有空格。 - **每个类别最多限制 4 个要点**。- **请勿添加新示例。仅使用格式化注释中提供的内容。**- 如果评论不属于这 3 个类别之一，请将其放在“其他”下。- **您只能以 HTML 格式回复**并且必须使用以下标签： `<h2>`、`<p>`、`<ul>`、`<li>`、`<b>` 和 `<a>`。---### **Figma 评论（从文件动态提取）：**{{formatted_comments}}
它看起来很复杂，因为我试图在一次提示中完成几件事。
让我一一解释一下：
1）限制类别和要点的数量。
我倾向于设置额外的限制条件，以确保最终的摘要简洁易读。将摘要限制在最多 4 个类别，每个类别下最多 4 个要点，可以确保 AI 的回复保持重点。
2）将其格式化为 HTML。
目标是直接生成样式合适的 Google 文档，无需后续额外格式化。这样可以使工作流程更加便捷。
3）使用 Figma 评论中的确切措辞。
虽然我对人工智能的总结能力很有信心，但我需要查看实际的引述以便更好地参考，并仔细检查总结以确保其足够准确。
4）在末尾添加 {{formatted_comments}}
此标签确保 Gemini AI 组件每次自动化运行时动态地从 Figma API 组件中提取最新评论。
我确实在 Google Gemini API 中进行了两项高级设置。
我将最大输出标记设置为 1000（1 个标记 ≈ 3/4 个单词，因此 1000 个标记相当于 750 个单词），只是为了保持响应简洁，而不是为我生成一篇长篇文章。
我还将“温度”设置为 0.1。值越低，响应越真实。值越高，响应越有创意/随机。在这种情况下，我希望它尽可能可靠，以防止出现随机摘要。
这是一个简单的步骤 - 只需指向您想要在其中创建文档的文件夹。
就是这样！如果我点击“运行一次”按钮，我的 Google Drive 中的“test”文件夹中就会出现一个名为“test”的新文档，其中包含所有 Figma 评论的摘要。
最初，我使用这个 Text Parser 组件作为中间步骤。它可以将 Gemini AI 的 Markdown 响应转换为带样式的 HTML，这样我就不用稍后在 Google Docs 中重新格式化了。它已经帮我处理好了。
但我后来意识到，由于我可以直接要求 Gemini 在提示中格式化其响应（如上面的步骤 3 中所述），因此这一步不再是必要的。
摘要中有一些随机性，我仍然希望改进。在运行相同的测试时，有时它很好地遵循了 Figma 的注释，而有时它又会自行编造。这提醒我们要始终仔细检查 AI 的响应，而不是盲目地遵循它们。
在我的实验中，我只需要手动单击一次“运行”命令，但“计划设置”功能会有所帮助。
例如，如果您有一个 Figma 文件，人们每天都会积极地发表评论，那么您可以设置每日自动化 - 例如每天早上 9 点，您都会收到一份更新的摘要文档。
如果您更有野心，您甚至可以在最后连接到 Slack 组件 - 例如，每次生成文档时，您都会在 Slack 中收到通知。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
前几天在 Behance 上刷到一个《DUNE｜Personal Work》的 UI 概念项目，整体完成度很高。作为设计师，我觉得这类作品不仅是视觉享受，也能总结出一些值得借鉴的经验点。这里就结合其中的阵营选择界面和整体展示，整理一些观察和思考。
这类「阵营选择」场景，本质上是一个决策界面。作者采用了很经典的结构：
中央突出：当前选中的阵营（走私者）放在正中间，卡片更大、更亮，带有金色光晕。
对称排布：左右阵营呈对称分布，层级自然清晰，符合玩家的浏览动线。
信息分区：上半部分是角色立绘和阵营徽记，下半部分是机制说明和操作提示。模块分明，不容易迷失。
经验点：在决策型界面中，居中放大+光效高亮，是非常直接有效的焦点策略。
《沙丘》的世界观强调沙漠、贵族与荒凉感，UI 也延续了这一氛围：
材质：背景有金属与沙尘质感，带来厚重感。
色彩：每个阵营配有主色（绿色、棕色、蓝色、金色、红色），既强化辨识，又有“品牌”味道。
徽记：几何化的阵营符号，简洁且容易记忆。
经验点：大型世界观游戏的 UI，最好在颜色、图形符号和氛围感上形成自洽体系。
在阵营说明区，信息拆解得很合理：
优缺点：红色 V 表示劣势，绿色 ▲ 表示优势。非常直观，不需要额外解释。
叙事与机制结合：不仅给数值效果，还加了剧情描述（例如与弗瑞曼的冲突），让选择更有代入感。
经验点：把理性信息（数值）和感性信息（剧情）结合，能让玩家在选择时既动脑又动情。
底部的操作提示很细致：
A 选择 / B 详情 / X 故事，分别对应不同层级的操作需求。
玩家既可以直接做决定，也可以深入剧情，满足不同类型的用户。
经验点：关键节点上提供“浅 → 深”不同层级的操作选项，能兼顾快进型玩家和沉浸型玩家。
Behance 项目整体除了界面，还展示了：
不同场景的 UI（例如主菜单、HUD、资源界面）。
色彩与符号系统，确保整体一致性。
工具说明（Photoshop / Midjourney / 后期合成），透明展示流程。
经验点：在作品集展示中，不仅要秀界面，还要展示系统性思考和设计过程。
这份《DUNE》个人 UI 概念作品给我的几点启发：
决策型界面要突出焦点，用对称和光效增强层级。
色彩与符号体系是阵营/角色类 UI 的关键资产。
信息既要数值化，又要叙事化，提升代入感。
操作引导要考虑不同层级的玩家。
作品集展示不仅是炫图，还要有系统设计思路。
如果你正在做游戏 UI 或作品集，这些经验都值得借鉴。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
本指南非常适合：
没有经验？没问题。
您所需要的只是好奇心、学习兴趣和额外的奉献精神。
UI/UX 设计正在蓬勃发展，数据也印证了这一点。美国劳工统计局预测，从 2021 年到 2031 年，数字设计专业的需求将增长 15%，领先于其他行业。
从 IT 公司到医疗保健初创企业，每个行业都需要设计师设计清晰且具有视觉吸引力的产品。
无论您想成为 UI 设计师、UX 研究员还是产品设计师，您跨工作和跨领域合作的机会都是无与伦比的。
另外，远程工作怎么样？这是此字段的默认设置。
您可以通过字体和调色板发挥您的创造力，解决用户流程方面的挑战，并精通原型设计等技术技能。
结果如何？一份有趣又令人满意的工作。根据 Glassdoor 的数据，UX 设计师的全球平均薪资在 8 万至 12 万美元之间，顶级职位的薪资甚至更高。
智能布局生成器等人工智能解决方案旨在提高生产力，而不是取代人类的技能。
UI/UX 设计除了赚钱之外，还旨在让人们的生活更轻松。
想象一下您上次在线购买披萨或预订机票的情况。
良好的用户体验让这些任务变得毫不费力，而糟糕的用户体验会让你对着屏幕尖叫。
作为一名设计师，你将通过构建既简洁又鼓舞人心的数字体验来应对现实世界的问题。这种影响力会让你欣喜地说：“这是我设计的。”
第一个月的主要任务是奠定坚实的基础。
首先，区分 UI（视觉界面，例如按钮、颜色和布局）和 UX（整体体验，例如易用性和满意度）。
我花了数周时间平滑按钮的渐变，却发现用户根本找不到它，这真是太惨了。
专业提示：不妨从日常事物入手，比如你的咖啡机、银行应用程序或自动售货机。“为什么要这样设计？”“还有什么更好的选择？”这种态度可以提升设计师的创造力。
现在是时候动手实践了。第二个月的重点是学习工具并将其应用于实际场景。
设计软件一开始可能看起来很吓人，但是一旦你掌握了它的感觉，它就像骑自行车一样简单（而且膝盖不会擦伤）。
资源：
我的第一次重新设计是为一个复杂的电商网站做的。我花了几个小时修改按钮的颜色，结果发现结账流程简直像个迷宫。那时我才意识到，吸引人的设计固然好，但真正能让你被雇佣的，是解决用户问题。
你已经进入最后冲刺阶段了！第三个月，你将用实际项目证明你的技能，并打造一个让你眼前一亮的作品集，让你“快来雇佣我！”
正是在这里，我从“我认为我能做到”转变为“我是一名 UI/UX 设计师”。
与他人合作：
投资组合开发：
资源：
使用 AI 驱动的 Figma 插件（例如智能布局工具和调色板生成器）提升您的工作效率。就像拥有一个永不休眠的设计助手。
我建议您开始在工作流程中使用 AI，这样您的工作速度就可以比其他设计师快 10 倍！
养成日常观察的习惯。分析实体和数字事物，例如健身追踪器、新闻应用和餐厅菜单。
可用性怎么样？为什么是这个颜色？如何改进？
这可以帮助您像设计师一样思考，并且您很快就会发现用户体验（和解决方案）的问题随处可见。
雇主希望设计师能够加快结账流程或提高客户参与度，而不仅仅是让事情变得有趣。
成为一名 UI/UX 设计师只需要策略和奉献精神，而不是设计学位或多年的经验。
在三个月内，您可以通过了解基础知识、创建真实世界的项目并自信地展示您的工作，从初学者进步到可以投入工作的水平。
现在迈出第一步：选择一个应用程序，重新设计一个屏幕，并与好友分享，并且不要忘记在社交媒体上分享它以获得反馈。
设计行业正在寻找您独特的见解。
感觉受到启发了吗？关注我的 Instagram (@rehan.designs)，获取每日见解、作品集点评以及我的设计幕后花絮。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
想法简述
随着人工智能 (AI) 越来越深入地融入产品，设计师必须了解这些系统真正能做什么。本文介绍了一个围绕感知、推理、记忆和代理四大核心能力构建的实用框架，旨在帮助用户体验 (UX) 专业人士设计更智能、更值得信赖的 AI 体验。本书包含真实案例和实用技巧，对于任何致力于塑造 AI 界面未来的人士来说，都是必读之作。
许多人认为，人工智能代理已经存在，只是分布不均。然而，目前很少有案例能够展现与这种近未来人工智能的良好交互体验。幸运的是，在最近的 AWS Re: Invent 大会上，我偶然发现了一个与人工智能代理交互的用户体验的绝佳示例，我迫不及待地想在本文中与大家分享这一愿景。但首先，人工智能代理究竟是什么？
想象一下一个蚁群。在一个典型的蚁群中，有不同专长的蚂蚁：工蚁、兵蚁、雄蚁、蚁后等等。蚁群中的每只蚂蚁都有不同的工作——它们独立运作，但又像一个紧密结合的整体。你可以“雇佣”一只蚂蚁（代理）为你做一些简单的半自主工作，这本身就很酷。然而，试想一下，你可以雇佣整个蚁丘去做一些更复杂或更有趣的事情：找出你的系统出了什么问题，预订你的行程，或者……做几乎所有人类在电脑前能做的事情。每只蚂蚁本身并不非常聪明——它们高度专业化，专注于完成特定的工作。然而，不同专长的蚂蚁组合在一起，呈现出一种我们将其与高级动物联系起来的“集体智慧”。我们在博客中一直使用的“人工智能”（AI）与人工智能代理之间最显著的区别在于自主性。您不需要向 AI 代理提供精确的指令或等待同步输出 - 与一组 AI 代理的整个交互更加流畅和灵活，就像蚁丘解决问题一样。
代理型人工智能 (Agentic AI) 的工作方式多种多样——这是一个内容丰富的主题，值得专门写一本书来探讨（或许一两年后）。在本文中，我们将以系统故障排除为例，阐述一个涉及主管代理（也称为“推理代理”）和多个工作代理的复杂流程。该流程始于人类操作员收到问题警报。他们启动调查，然后由主管代理领导的半自主 AI 代理团队帮助他们找到根本原因，并提出解决问题的建议。让我们用步骤图来分解与 AI 代理交互的过程：
上图所示的多阶段代理工作流程包含以下步骤：
如同与典型的人类组织签订合同一样，主管AI代理拥有一支由专业AI代理组成的团队。主管可以将消息路由到其监管下的任何AI工作代理，这些代理将执行任务并反馈给主管。主管可以选择将任务分配给特定代理，并在稍后获得更多信息时发送附加指令。最后，任务完成后，输出将反馈给用户。然后，人类操作员可以选择向主管AI代理提供反馈或附加任务，在这种情况下，整个流程将重新开始。
人类无需担心任何内部事务——所有事务都由“主管”以半自主的方式处理。人类所做的只是提出一个通用请求，然后审查并响应这个代理“组织”的输出。如果你能做到这一点，这正是你与蚁群沟通的方式：你将工作分配给蚁后，让她管理所有工蚁、兵蚁、雄蚁等等。与蚁群类似，单个专业代理不需要特别聪明，也不需要直接与人类操作员沟通——它们只需要能够半自主地解决它们被设计执行的专业任务，并将精确的输出反馈给“主管”代理，仅此而已。“主管”代理的工作就是完成所有的推理和沟通。这种人工智能模型更高效、更经济，并且在许多任务中都非常实用。让我们来看看交互流程，以便更好地感受这种体验在现实世界中的感受。
为简单起见，我们将遵循本文前面的工作流程图，流程中的每个步骤都与图中的步骤相对应。此示例来自AWS Re: Invent 2024 — 不要停滞不前：互联遥测如何助您前进 (COP322)，由 YouTube 上的 AWS Events 主持，从 53 分钟开始。
该流程始于用户发现名为“bot-service”的服务（屏幕截图左上角）故障急剧增加，并启动新的调查。然后，用户将所有相关信息以及一些额外的指令传递给主管代理。
现在，在步骤 2 中，主管代理接收请求并生成一组工作 AI 代理，这些代理将半自主地查看系统的不同部分。该过程是异步的，这意味着右侧的建议初始状态为空：调查启动后不会立即显示结果。
现在，工作代理返回了一些“建议的观察结果”，这些结果由主管处理并添加到屏幕右侧的建议中。请注意，屏幕右侧现在更宽了，以便于阅读代理建议。在下面的屏幕中，不同的代理提出了两个截然不同的观察结果，第一个代理专门负责服务指标，第二个代理专门负责跟踪。
这些“建议的观察结果”构成了调查中的“证据”，旨在找出问题的根本原因。为了找出根本原因，此流程中的人类操作员会提供帮助：他们会向主管代理反馈哪些观察结果最相关。因此，主管代理和人类操作员并肩协作，找出问题的根本原因。
人工操作员会点击“接受”按钮，确认他们认为相关的观察结果，这些结果会被添加到屏幕左侧的调查“案例档案”中。现在，人工操作员已经添加了反馈，表明他们认为这些信息是相关的，代理流程将启动调查的下一阶段。主管代理收到用户反馈后，将不再发送“更多相同的信息”，而是会进行更深入的挖掘，甚至可能调查系统的其他方面，以寻找根本原因。请注意，下图中右侧出现的新建议属于另一种类型——它们现在正在查看日志以寻找根本原因。
最后，主管代理掌握了足够的信息，开始尝试找出问题的根本原因。因此，它从证据收集转向推理根本原因。在步骤3和4中，主管代理提供了“建议性观察”。现在，在步骤5中，它准备好进行重大揭秘（也可以称之为“结局场景”），因此，就像文学侦探一样，主管代理提出了它的“假设建议”。（这让人想起游戏“线索”，玩家轮流提出“建议”，然后，当他们准备好发起攻击时，他们就会提出“指控”。主管代理在这里也做了同样的事情！）
建议的假设是正确的，当用户点击“接受”时，主管代理会提供后续步骤来解决问题，并防止将来再次出现类似问题。代理似乎在对人类指手画脚，建议他们“实施适当的变更管理程序”——这是任何良好系统卫生的基础！
代理流如此引人注目，并成为当今众多人工智能开发工作的焦点，原因有很多。代理引人注目、经济实惠，并且能够实现更加自然灵活的人机界面。代理能够填补人类与机器之间沟通的空白，真正实现人机思维的融合，形成超越人类的“增强智能”，其价值远超其各部分之和。然而，要从与代理的交互中获得最大价值，也需要我们彻底改变对人工智能的理解方式，以及设计支持代理交互的用户界面的方式：
无论你对人工智能代理有何看法，它们无疑会与人类同行共同发展，并持续存在。因此，我们必须了解代理人工智能的工作原理，以及如何设计能够让我们安全高效地与它们协同工作的系统，充分发挥人类和机器各自的优势。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
随着人工智能越来越多地融入网站和应用程序体验，区分哪些地方已经实施了人工智能，哪些地方尚未实施人工智能，变得至关重要。
最初，大多数产品将人工智能作为聊天机器人引入，用户可以通过聊天机器人发起并促进与人工智能的交互。现在，产品正在将人工智能融入仪表盘、任务和搜索功能。用户不再主动体验人工智能——人工智能体验已经预先存在。
由于用户不再控制何时触发人工智能的使用，因此需要让用户了解何时向他们展示人工智能功能或内容，以确定其有效性和质量。不仅如此，《欧盟人工智能法案》（2026年生效）将强制要求用户在与人工智能系统进行通信或互动时必须知晓。
这就是设计系统的用武之地——实施专门的视觉处理，以始终如一地将人工智能内容和特征与非人工智能内容和特征分开。
遗憾的是，目前只有少数开源设计系统明确地包含 AI 组件和模式。我希望很快会有更多系统加入，但目前为止，只有 GitLab 的 Pajamas、IBM 的 Carbon 和 Twilio 的 Paste 在其指南中承认了 AI。
注意：我使用Figma 的设计系统来对 AI 组件和模式进行基准测试。我没有纳入仅包含 AI 聊天机器人或对话设计文档的设计系统，因为这是一种更标准的交互模式；这包括亚马逊的 Cloudscape和Salesforce 的 Lightning。
让我们比较和对比这些设计系统 AI 组件和模式，看看它们可以在哪些方面进行优化以提高可用性。
Pajamas目前不包含明确的组件或模式，但它确实包含一些关于 AI 与人类交互的有趣文档。该文档首先建议通过识别哪些自动化操作是合乎道德且有益的（例如，高风险任务 vs. 低风险任务），来了解 AI 的使用是否真的能给用户带来好处。
接下来，它建议透明地说明 AI 的使用地点——Pajamas 通过其“GitLab Duo”实现了这一点，这是 AI 特性、能力和局限性的指标。
由于“GitLab Duo”用于 AI 功能和交互（而不是任何 AI 内容），Pajamas 还建议使用“<动词> by AI”（即“由 AI 总结”）标记 AI 生成的内容，并发送一条消息鼓励用户检查 AI 内容。
GitLab 也在开发一个框架来实践他们的指导方针；目前还在开发中，但大致的工作内容可以在GitLab 的 AI UX 模式中查看。他们的目标是发布一个带有文档的 AI 模式库——这正是我们所需要的（拜托！）。
GitLab 对其 AI UX 模式的愿景分为 4 个维度，以帮助选择正确的 AI 模式：模式、方法、交互性和任务。
例如，他们早期对人工智能模式的探索包括低保真模型，展示了如何将人工智能与图表或内联解释集成到界面中。这些模式清晰地标记了人工智能的用途，有助于建立用户对人工智能系统的理解和信任。
目前，GitLab 的文档还停留在概念阶段，仅概括了他们希望未来 AI UX 体验的样子。但它提供了一个坚实的框架，大多数设计系统都可以采用——无论哪个行业或产品。
我希望他们能尽快发布更多关于其AI用户体验模式的深入信息。我认为这对其他开发AI文档的设计系统来说，将是一笔宝贵的开源资产。
在众多开源设计系统中，Carbon拥有最丰富的 AI 使用文档。它包含一个 AI 专用版块“Carbon for AI”，涵盖组件、模式和指南，帮助用户识别 AI 生成的内容，并了解 AI 在产品中的应用方式。
Carbon for AI 建立在现有 Carbon 组件之上，添加了蓝色光晕和渐变效果来突出显示 AI 实例。目前为止，已有 12 个包含 AI 变体的组件，例如模态框、数据表和文本输入。
尽管组件的 AI 变体具有独特的视觉处理，但在上下文中，很难区分哪个组件当前处于活动状态（因为它们看起来都是活动的）。
在下面的表单中，AI 用于自动填充大部分输入字段，因此这些字段使用了 AI 变体。即使在默认状态下，AI 变体也会呈现蓝色渐变和边框，这导致难以直观地识别哪个组件处于活动状态。
用户可以覆盖 AI 的输入，这会将组件的 AI 变量替换为默认变量。这将触发“恢复为 AI 输入”操作，以替换输入字段中的 AI 标签，从而允许用户控制手动或自动表单响应。
除了 AI 变体之外，它还包含一个明确的 AI 标签，可以显示一个弹窗，解释特定场景下 AI 的细节（Carbon 将此模式称为“AI 可解释性”）。用户可以选择 AI 标签，弹窗就会出现在按钮下方。
看到像 Carbon 一样完善的 AI 模式和组件设计系统文档，真是令人兴奋。他们不仅提供了 AI 通用用法的文档，还提供了实际可用的组件和模式。
但由于组件的AI变体使得在上下文中使用时难以区分哪个组件处于活动状态，我认为存在可用性和可访问性问题。AI变体的颜色使用过于引人注目，而且看起来像Carbon的焦点状态（这可能会影响依赖焦点状态的低视力用户）。
最后，Paste在“体验”版块下提供了一个“人工智能”板块。Paste 提供了关于在用户体验中使用人工智能的通用文档，以及一些可用的组件。
在设计AI功能时，Paste建议允许用户将AI结果与自身体验进行比较，并处理潜在的错误和风险。为了减少这些错误，Paste提倡赋予用户审查和撤消输出、控制数据源以及向AI系统提供反馈的能力。
Paste 还建议在设计新的 AI 功能时问自己：“如果它做同样的事情但不使用 AI，我将如何设计这个功能？”用户使用产品不仅仅是为了与人工智能互动——他们还试图尽可能高效地完成任务并实现目标。
Paste 包含一个包含 5 个组件的 AI UI 套件：人工智能图标、徽章、按钮、进度条和骨架加载器。它还包含一些专为 AI 聊天体验打造的组件，例如 AI 聊天日志。
Paste 文档中最有帮助的是他们提供的示例，包括路标、生成功能和聊天功能。
对于指示牌，Paste 建议使用带有人工智能图标的装饰性徽章来指示某个功能正在使用人工智能，例如人工智能推荐或预测。指示牌是非交互式的，但类似于按钮，因此看起来可以点击。
生成功能会向用户提供提示，帮助他们使用 AI 功能，例如“总结数据”或“推荐下一步”。当您选择生成功能时，下面会出现一个弹出窗口，向用户提供说明以及它正在使用的 AI 模型。
最后，聊天内容是当今已知的人工智能聊天机器人的典型特征，并包含对其对话原则的引用，以发展人工智能的个性。
Paste 确实即将推出另一种加载模式，但我们还需拭目以待。这种模式将为用户提供一种控制和预测 AI 输出的方式；这包括停止输出以及根据 AI 输出所需的时间来调整状态。
我很高兴看到一些文档和实际示例的结合。虽然其中一个示例是聊天机器人，但 AI UI 套件中的其他组件也展示了如何在界面中透明地展示 AI 的使用方法。
Paste 正在寻求对其 AI UI 工具包的反馈——他们有一个开放的Github 讨论，您可以在其中提交请求。
令人惊讶的是，很少有设计系统发布关于组件和模式的文档来处理AI驱动的内容和功能（至少是公开的）。例如，谷歌和微软都是AI行业的领导者，但开源的Material和Fluent设计系统却不包含AI模式。
由于这些 AI 领导者正在将 AI 融入到与更广泛用户群体互动的常见产品（例如 Gemini 和 Copilot），他们正在构建其他产品也需要效仿的用户心智模型。即使是Adobe 旗下的 Spectrum，虽然已将 AI 融入其众多产品（例如 Adobe Firefly），但在涉及内容和人物写作时，也只用了短短的宣传语来提及机器学习和 AI。
也许他们的AI模式还在开发中？或者他们还在等待时机成熟？
无论如何，向用户展示 AI 功能和生成的内容至关重要，这样他们才能更好地理解所展示的内容，并建立对产品的信任。我期待更多超越闪光图标和聊天机器人的设计系统模式。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
蓝蓝设计的小编 http://www.lanlanwork.com