AI如何应用到UX设计？来看这份案例大全！

随着 AI 技术自动化决策、自我学习等特点，其在用户体验设计领域的应用也越来越广泛，甚至有点超出我们的预期。

本着 “ 拥抱新科技之主动探索总比自动淘汰好 ”（不是） 的中心思想，我们成立了 AIGC 课题小组，希望能够总结归纳出现阶段 AI 在 UX 设计中的应用情况，结合一些实际的工作流程，谈谈 AI 对于设计工作效率方面的影响。

更多案例应用：

一、在用户调研中的应用：提高调研效率

1. 在前期桌面调研中的应用

应用一：名词概念解释

当设计师接触新行业、新业务时，难免会遇到不熟悉的概念，这时候可以把 AI 模型当作百科全书，让它解释各类概念和名词，让我们快速了解行业知识。

但因 AI 回答的随机性（有可能会编造），推荐同一问题多问几次，或者询问不同的平台。

例如，当我们为办公空间业务做设计前，向 ChatGPT 询问它与家居空间的差异：

应用二：竞品分析

在竞品分析环节中，可以利用 AI 帮我们搜集竞品名单、分析竞品特点，或者对比多个竞品的特点。

但是，在进行垂直产品和功能细节的分析时，要注意甄别 AI 提供信息的正确性，切忌不加验证就全盘采纳。

以下是一些竞品分析可采用的询问模板：

1. 我是 UX Designer / Product Designer（表面身份），正在设计 施工图的弧长标注功能（产品/功能），有哪些 CAD 工具（竞品类型） 可以参考？
2. SketchUp LayOut（某个具体产品）有 弧长标注（具体功能） 这个功能吗?
3. 详细描述 MicroStation（具体产品），包含 平台、用户、行业、创始人、融资情况、市场占有率（想了解的信息）

2. 在用户实地调研中的应用

步骤一：问卷设计

在问卷设计阶段，可以在输入调研目的之后，利用 AI 工具帮助我们输入问卷内容进行参考和补充。以下是一些推荐的 AI 问卷工具：问卷星 AI 功能（推荐）、ChatGPT、讯飞星火、Claude。

以酷家乐家装设计师群体中的暖通设计师用户特征为例，我期望生成 20 道题目。以下是我输入的不同纬度的调研目的：

1. （用户数量）了解酷家乐家装设计师群体中有多少从事暖通设计相关行业
2. （用户特征）从事暖通设计行业用户的个人和职业特征
3. （用户关注点）他们在使用水暖电设计工具的关注点
4. （产品使用情况）他们在日常工作中使用水暖电设计工具的基本情况

AI 工具的生成情况：

1. 问卷星可直接生成问卷表格，生成质量也相对可用，自行修改之后即可投放。
2. ChatGPT 生成的问卷缺少选项的选择，但是会将每个问题对应的目的表示出来。

步骤二：访谈大纲

在访谈大纲设计阶段，如果对自己想要访谈的内容不是非常清晰，可以通过 AI 工具提供大纲的参考以及帮你梳理逻辑。以下是推荐的工具：ChatGPT（推荐）、讯飞星火、Claude。

以下是可输入的访谈背景信息：

AI 工具的生成情况：

ChatGPT 根据我的提问进行访谈大纲的生成，会从门店场景以及产品工具使用情况两大维度进行大纲的列举。但是无法覆盖所有场景和行为，还需要自己根据需求进行完善。

步骤三：访谈内容的转译和梳理

在访谈结束之后，访谈录音的内容大多都零零散散，转译和梳理信息会花费我们大量的精力，AI 工具可以很好地帮助我们进行初步的信息内容的转译和整理。以下是推荐的工具：通义听悟（推荐）、科大讯飞、飞书妙记。

以下是我使用 AI 工具的方式：

1. 手机录音访谈内容，然后语音转文字（科大讯飞、飞书妙记、通义听悟等）
2. 可以直接手机打开会议实时录制，然后在访谈结束之后可以直接转为文字。

AI 工具的生成情况：

这些 AI 工具在将语音转文字的时候，会自动区分发言人、总结关键词、全文概要、并总结出本次谈话值得关注的重点。不同的工具的能力范围不太一样，通义听悟的功能较全且效果较好。

步骤四：访谈报告撰写

在对访谈内容和笔记进行初步的整理之后，信息多半还是非常复杂和缺少逻辑，AI 工具在这个阶段也可以很好的帮助我们进行逻辑整理和归类。以下是推荐的工具：Notion AI（推荐）、ChatGPT、讯飞星火、Claude。

以下是我使用 AI 工具的方式：

将凌乱的笔记复制到输入框中，如果自己有期望分析输出的维度，也可以前置的输入给 GPT；如果没有因为笔记部分过于凌乱，自己没有分析思路，也可以直接让 GPT 进行分析总结。

AI 工具的生成情况：

在初期对凌乱的内容可以进行初步的梳理，但是对于内容的总结以及观点延伸的能力较差，还需要自行梳理。

二、在设计文案中的应用：让 AI 提供更多可能性

在为界面撰写文案时，我们可以利用 ChatGPT 等工具给我们提供更多的可能性。

应用一：撰写新文案

当我们刚开始为某个场景撰写文案时，往往还不明确需要传递什么信息，这时候可以先和 AI 对话几轮，生成一些文案供选择。

以下是需要提供给 AI 的信息：

①表明身份：

我是 UX Designer / UX Writer / Product Designer，正在撰写 酷家乐设计工具（产品类型）的文案

②表明问题：

如：用户在用酷家乐工具时，不能同时在两个页面打开同一个方案，如果在新的页面打开，那之前的方案就无法继续编辑和保存。

③表明任务：

如：写一句提示文案，在另一个方案打开时出现在原方案上，告诉用户相关风险。

以上三类信息提供后，AI 会给出一个回答，大多数情况下，这个回答并不令人满意，因为我们提供的信息还不够详细和精准。

我们可以根据它的回答明确我们的要求，并补充相应信息。

补充的要求可以有以下几种类型：

A.文案类型

如：行动点（Call to Action）、报错信息、提示信息、解释说明、功能标题、二次确认文案…

如果已经明确该文案出现在哪里，也可以提供相应的信息，如位置、组件等

B.文案长度

我们可以限定文案的长度，如：详细一点、简短一点、不超过 10 个字

C.内容

当 AI 给出的信息有冗余或者缺漏的时候，可以直接反馈给它，如：需要添加 xxxxxx 的信息、不需要 xxxxxx 的信息

D.语气

语气的限定可以同时使用正向和反向的描述，如

正向：友好的、直接的、自信的、风趣的、客观的…

反向：不严肃、不官方、不令人紧张…

E.规范

成熟的设计系统会对文案内容有完善的规范（如 Material Design、AntDesign 等），可以将具体的规范内容告诉 AI，让它调整文案。

相信经过以上过程，AI 已经给你提供了不少灵感，接下来就可以挑出不错的结果再推敲一番，便可用作界面文案。

应用二：优化已有文案

当我们从数据、可用性测试、用户反馈等途径发现界面文案存在问题时，可以让 AI 帮助我们分析。以下是一些提问案例：

这个文案可能会引起 xxxx 的歧义，如何消除歧义？

这个行动点文案点击转化率不高，可能是什么原因？

你觉得 A 文案 和 B 文案相比，哪个更吸引用户点击？

这个场景中对用户最重要的信息是什么，如何体现在文案中？

在 AI 给出原因后，可以继续要求它帮助我们优化已有文案。

通过 AI 的分析和帮助，我们可以更加有效地优化界面文案，消除歧义，提高点击转化率，并确保关键信息得到准确地传达给用户。

三、在 UI 界面及视觉表现上的应用：结合 AI 打造的全新工作流

我们同样可以根据 UI 设计流程，从了解设计背景，定义设计语言、提炼设计范式这几个方面看一看 AI 在 UI 设计上的应用

1. 了解设计背景

明确业务需求后，我们可以将产品的业务背景及定位告诉 AI，让它基于此对本次需求做分析、也可以对相关概念做更进一步的解释；

AI 也可以帮助我们寻找设计灵感，比如插图设计过程中，往往需要包含排版、图形、色彩、文字等多个要素，我们可以针对这几个部分让 ChatGPT 给我们提供一些建议。

除此之外，让 AI 帮助我们提炼一些设计关键词，我们就能基于想要的关键词去衍生映射物、收集意向图，建立图形情绪板。

2. 定义设计语言

设计语言包含了主视觉、色彩、字体、图标、图形、动效等多个领域，根据调研，发现目前 AI 广泛用于以下几点

①定义色彩：

我们可以尝试与 AI 沟通，让它基于 1 个或多个颜色生成配色方案，AI 是能给出相应的建议供我们参考。如果在对话中添加更多关于设计背景介绍以及图片风格的定义，得到的答案也会更加完善。

除此之外，一些 AI 工具也能为我们提供帮助，比如 AI Colors 可以通过关键词的输入生成多样的配色方案，同时还支持对单个颜色进行修改，并且提供了手机端、仪表盘、落地页等结果效果的预览

②素材创造：

设计师在发散阶段去使用 Midjourney 或是 Stable Diffusion 生成视觉参考和创意灵感的图像已经非常普遍了，酷大师插件开发平台在进行视觉优化过程中也使用了 Midjourney「以图生图」的能力，完成了网页 Banner 以及插图的生成。

3D 模型常常作为素材使用在插图、海报设计中。在 Kaedim 上传一张图片，就能获得 3d 造型，可以下载并导出为各种格式，方便设计师基于模型进行后续的渲染；

文字指令生成 3d 模型的类似的工具也有很多，比如 openai 的 shap-e、英伟达的 Magic3D，或者与自身工具结合的 spline 的 ai 工具等等。结合 spline 关于自身工具 AI Prompt 的介绍，关键词不仅包含模型的生成，还能通过自然语言对模型进行参数与材质的修改、动效的添加。

矢量图形方面，Illustroke 能够通过关键词描述以及风格类型的选择生成矢量图形；Recraft 能力更加强大，可编辑的参数项更多并且支持对于生成的矢量图形进行颜色编辑和局部再次生成。

Galileo、Uizard、包含国内的即时设计等多个工具都在探索基于自然语言一键生成 UI 界面的能力，目前来看，虽然生成结果还不太稳定，但也能在产品设计初期为设计师或是产研团队提供一些参考。

图片处理：

图片处理相关的工具就更多了，改图、抠图、补图、一键填色，快速补光……大家都在寻求如何用简单易懂的方式进行高效的图片处理，设计师未来可能不再需要学习复杂的工具指令。

四、提炼设计范式

以颜色系统举例，在 Eva 中，只要输入 1 个基础色的色值，那么其他语义化颜色以及衍生色就能生成完毕，我们可以在亮主题和暗主题下进行颜色的预览和修正

Khroma 能够基于用户对于颜色的偏好或是上传颜色的 Jason 文档生成出不同的颜色搭配、图片和渐变效果图，如果设计师团队已经定义好了一套颜色系统，将它导入到工具内，以得到的结果作为参考就能兼顾产出内容的一致性和多样性

更多设计范式和设计系统的尝试还处于探索阶段，比如 Mastergo 提出了 AI 与设计系统的结合的理念；figma 2023 config 大会上也演示了在设计初期以及开发阶段运用 AI 能力结合工具提高产研的工作效率的一些尝试，相信未来 AI 还会更进一步改变我们的设计流程和工作方式。

总结

目前来看，AI 辅助设计的场景在深度方面远没有部分产品宣传的那么“神乎其神”，很多产品也还处于概念设计的过程当中，但结合实际的工作流程，我们发现，有的确实能够达到意想不到的效果。

比如在一些提示文案的推敲上，ChatGPT 产出的文案虽然不一定能够百分之一百直接拿来使用，但在对话的过程中，也仿佛就像是多了一个小助手，让“他”给我们提供一些建议和参考，也是一种推敲的方法；

视觉设计师们也反馈了使用 Midjourney 产出图像素材确实能够节省很多建模/绘制的时间，尤其是在产品设计初期，我们也能够在较短的时间内产出多个相对不错的方案和业务方进行沟通，拉齐彼此的想法和预期。这种工作方式在 AI 没有到来之前也是谁都没有想到的。

工欲善其事，必先利其器。尤其是在新技术已经对我们的工作行业带来影响的当下，了解 AI、拥抱 AI、运用 AI 无疑是一种富有挑战，但也有效的方法。

欢迎关注作者微信公众号：「群核科技用户体验设计」