精心设计的导航可以帮助用户更快地学习你的产品，知道该做什么，去哪里。更多导航设计干货：用一个实战案例，帮你学会优化顶部导航设计网站顶部导航栏，通常称为 header，是用户进入网站后最先看到的地方，决定着用户对网页的第一印象，其重要性不言而喻，顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅...

精心设计的导航可以帮助用户更快地学习你的产品，知道该做什么，去哪里。

更多 导航设计 干货：

用一个实战案例，帮你学会优化顶部导航设计 网站顶部导航栏，通常称为 header，是用户进入网站后最先看到的地方，决定着用户对网页的第一印象，其重要性不言而喻，顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需要的目标。

阅读文章 >

导航可以帮助用户了解他们所处的信息空间：

例如：当前页面有哪些信息和功能可以使用，信息和功能的结构是什么样的，我现在在哪里？我可以去哪里？我从哪里来，如何回去。

路标可以帮助用户了解周围环境：

例如：告知用户当前在哪里，下一步能去哪里。帮助用户保持“发现”，并计划用户的下一步。路标包括页面标题、面包屑、选项卡、步骤条、分页条等。

常见的导航模式：

你的网站使用的导航模式是什么样的？换句话说，不同的页面、功能是怎么相互连接的，用户又是怎么在这些页面与功能之间交互的?

在介绍模式前，先看下常见的导航类型：

一、全局导航 全局导航是指它可以覆盖整个产品路径，往往表现为产品的一级分类。几乎总是显示在网页的顶部或左侧，有时两者都显示（称为倒 L 导航布局），它可以快速带领用户从一个页面到达另一个页面。

例如：华为云的顶部与 ones 的左侧导航。

二、实用导航 通常情况下，实用工具导航都隐藏在功能图标或文字后面，用户必须单击打开它。 例如：当网站的访问者是登录状态时，该网站可能会在其右上角提供一组实用工具导航链接。用户倾向于在那里寻找与用户设置相关的工具：帐户设置、用户个人资料、帮助、退出等。

三、内嵌导航 它们都是在页面内容中或附近的链接。当用户阅读内容或与功能点交互时，这些链接提供了相关的选项。

例如：青云云服务器页面中“文字链接”。

四、相关内容导航 关联导航的一种常见形式是“相关文章”。新闻类产品经常使用这种方法。

例如：优设，当用户阅读一篇文章时，右侧栏或页脚会显示类似主题文章或由同一作者撰写的其他文章。

五、标签导航 通过用户定义或系统定义，链接相关内容的一种方式。特别是在内容数量非常大的情况下。

例如：语雀小记标签导航，可以快速链接到对应标签下的内容。

六、再来看几种常用的导航设计模式 1. 清晰入口点

它是什么：

只显示界面中的几个主要入口点，以便用户知道从哪里开始。对于首次使用和不频繁使用的用户，可以降低学习成本，使用户以任务为导向。

什么时候使用：

如果你正在设计一个新产品，可以使用这个模式，因为用户也是新的。他们都是通过阅读一小段介绍性文字，再开始进行某个任务。 当你的产品大部分用户都已经很熟悉了，最好就不要使用了，因为会导致用户很烦。

例如：钉钉引导帮助功能。

为什么使用：

一个新产品在用户面前就像一片信息泥潭，大量的页面、不熟悉的术语和用词。对于用户来说，这样的产品如果没有提供清晰的起点，用户是很难上手使用。

如何使用：

当用户首次使用产品时，把这些入口点当作进入内容的“大门”。利用这些入口点，逐步引导用户使用，直到用户可以自己使用为止。 这些入口点应该涵盖“人们为什么来到这里”的主要理由。可以只有一个或多个入口点，这取决哪种方式更适合你的设计。视觉效果上，要根据它们的重要程度来显示这些入口。

例如：苹果的 iPad 主页面只做几件事：展示产品，让 iPad 看起来很吸引人，并引导用户获得购买或学习更多信息的资源。与强大、明确的入口点相比，顶部全局导航在视觉上相对较弱。

2. 菜单页

它是什么：

整个页面都是跳转链接，在每个链接上清晰展示对应信息，帮助用户选择。

什么时候用：

你正在设计一个页面，其目的是要成为一个“目录”，以显示用户可以从这里去哪里。用户可能不希望有其他内容干扰，只提供链接就行。这个模式在移动端使用非常多，因为手机屏幕小，需要有效的利用。

为什么使用：

没有任何干扰，用户可以把注意力集中在菜单上。因为整个页面都是菜单目录，用户不被其它内容干扰，使用效率更高。

如何使用：

菜单页适用于大面积展示的页面，菜单名应该简短、利于理解。如果是移动端，目标对象要大点，方便触摸。 有时这些链接会比较多，需要对它们进行分类或按照某种规则进行排序。必要时可以加上搜索框。 例如：58 同城首页

3. 金字塔

它是什么：

使用上一步、下一步将一系列页面关联在一起。这些页面都有一个共同的父级页面，用户在子页面中可以按顺序或随机查看。

什么时候使用：

网站上有一系列的页面，用户想看完一个再看另外一个，有些用户可能会一个个查看或跳跃查看，不过他们最开始需要从一个列表中进行选择。

为什么使用：

这个模式减少了用户访问各个页面时，所要的的单击次数。提高了导航效率，同时也表达了一种更加顺序性的关系。

如何使用：

把所有页面或元素按顺序在父级页面上列出来，并采用合理的排列形式（网格、列表）， 在每个具体的子页面上，加上上一步（后退）、下一步（前进）、返回（关闭）的按钮。 金字塔模式虽然是一个循环列表，但有时候用户并不知道自己已经回到了第一页。你可以把最后一页链接到父页面，这样就告诉了用户你已经看完了所以内容。

例如：脸书相册和 teambition 需求页面都是典型的金字塔案例。 脸书相册通过父级页面，可以看到整个相册，选择一张照片将打开幻灯片。照片可以向右、向左切换，或再次退出到父级页面，这些都是导航选项。

teambition 选择一个任务后，会弹出层，在层上可以进行“上一条”、“下一条”切换。

4. 模态面板

它是什么：

只显示一个页面，在用户没完成当前任务前，没有任何导航可选择。

什么时候使用：

你想让页面处在一种没有用户输入就无法继续前进的状态里。

为什么使用：

模态对话框切断了用户选择其他导航的路，用户也不能丢下当前页面不管，必须处理完当前问题后才能回到之前位置做其它事。 这是一个很容易理解和使用的模型，只是经常被拿来滥用。如果用户还没准备好回答模态面板的问题，就打断了用户工作流，可能会使用户随意做出决定。应用得当时，会提高用户的决策效率，因为没其他导航来分散注意力。

如何使用：

在当前页面，用户可以注意到的地方，放置一个按钮。提供按钮请求所需要的的弹框，它能阻止用户打开其它页面。要保证这个页面很简洁，不会影响用户注意力。 而且出口不能有很多，一般只有 1-3 个，保存、取消等。通过这些按钮用户可以快速回到之前页面。

例如：Airbnb 使用了一个弹窗来引导用户登录。弹窗中只能进行：登录，注册，或者点击左上角的“关闭”按钮。

5. 深度链接

它是什么：

把一个网站的当前状态，利用一个超链接地址 (URL) 捕捉下来，这个状态可以保存，或者发送给其他人。当再次打开这个地址时，它将恢复到用户捕捉时的状态。

什么时候使用：

如果网站内容、交互比较多，例如：视频应用、阅读应用，有时候某种特定位置不容易找到，或者需要多个步骤才能到达，又或者有很多用户可以自定义参数，这些都会增加找到特定状态的复杂性。

为什么使用：

深度链接可以让用户直接跳到一个期望的地方，从而节约时间和精力。

如何使用：

把用户当前内容中的位置记录下来，并把它保存成一个 URL。同时也记录支持性数据（评论、标记、数据层等），当重新打开这个地址，会回到原来状态。

例如：在 YouTube 上分享视频最好的方法之一是：在分享链接中嵌入捕捉的点（如图）。收件人点击链接，视频播放将从捕捉这里开始，而不是从头开始播放。

6. 逃生出口

它是什么：

在没有导航的页面上，放置一个按钮或链接，让用户能快速离开这个页面，回到熟悉的地方。

什么时候使用：

当某些页面把用户锁定在一个导航受限的情形下时，例如：搜索结果页、详情页等。

例如：teambition 创建项目，点击进去后全局导航就消失了，只能通过右上角的关闭回去。

为什么使用：

页面受到导航限制，如果不为用户提供一种简单、明显的逃离通道，用户就无法向下探索，这也是安全探索的一种形式。

如何使用：

把一个按钮或链接放在页面上，用户通过这个按钮回到安全区域（之前页面）。

例如：领英的设置页面，这个页面属于独立页面，没有全局导航。如果用户来到这里，有两种方法返回，第一个点击 logo 回到主页；第二个是点击“Back to LinkedIn.com”链接。

7. 宽菜单

它是什么：

在下拉菜单里，显示一个长长的导航列表。用这种方式，展示一级菜单下所有子页面。 需要组织好它们，并设置易于阅读的分类名或排列顺序，依次横向展开。 什么时候使用：

如果网站有很多分类，分类下有很多页面，可能有 3 个以上层级结构。你希望把这些页面入口都展示给用户，让他们随机探索，以便让他们看到更多的选择。

为什么使用：

宽菜单可以让，一个复杂网站的可发现性更好，与让用户慢慢摸索相比，它能展示更多的导航选择。

如何使用：

在每个一级菜单下，提供一列精心组织的链接，把它们进行分组归类，带上分组标题。 视觉上注意风格和样式上与整个网站协调一致，注意配色方案、栅格布局等问题。

例如：华为和微软的产品宽菜单。（如图）。

8. 网站地图页脚

它是什么：

把一个站点地图放到每个页面下面，把它当全局导航的一部分，作为对头部的补充。

什么时候使用：

可能在页头会有一份全局导航菜单，但是不能在这里显示出网站所有的层次结构。 你希望使用一份简单、良好布局的页脚，又不想使用胖菜单模式，因为网站地图实现起来更简单。

为什么使用：

站点地图页脚模式能让一个复杂网站的可发现性变得更好。它们为访问者们提供了更多的导航选择。 当访问者到达页面底部的时候，页脚就是他的注意力所在，通过在这里放置一些有意思的链接，能让用户在这里停留的时间更长，也能发现更多内容。

如何使用：

设计一个和页面宽度相同的页脚，把网站的主要栏目和最重要的子栏目都包括进来（包括：导航、语言选择、社交链接、版权和隐私声明等）。 这样可能形成一份完整的站点地图，重点是要覆盖访问者需要寻找的内容，同时又不会增加页头和侧栏的导航负担。 例如：Salesforce 使用其站点地图来体现客户感兴趣的三个区域（如图）。

9. 步骤条

它是什么：

在步骤过程中的每一个页面上，都显示步骤状态，包括“你在这里”的指示状态。

什么时候使用：

你设计了一个用户可以一页接一页访问的文档、处理过程、向导或其他类似内容。用户的访问路径主要是线性的。

为什么使用：

步骤条可以在以下几个方面帮助用户：他可以看到已经完成的步骤，以及当前的位置 ，接下来还有多少步骤要进行。知道这些信息可以让用户决定是否继续，估算还需要多少时间。

如何使用：

在页面上放置一个步骤条（多于 2 步时使用, 建议不超过 5 步）。如果可以，把它们放在一条线上，或者一个表格的一列上，在视觉上不要和页面的实际内容竞争。 给步骤条的状态进行特别处理，例如：用浅一些或深一些的颜色来标记它，然后对已经访问过的页面进行另一种标记。 如果这些页面或步骤上有数字编号，那么明确使用这些数字编号，它们简短而又容易理解。 同时也应该把页面的标题放到地图上。如果标题很长，可能会让地图非常冗长，尽量缩短这些标题，这样可以让用户得到足够的信息。

例如：B&H（如图)顶部的结账流程步骤条。

10. 面包屑

它是什么：

面包屑是一种特定类型的导航，它显示了从开始到结束的导航层次、路径。

什么时候使用：

你的网站有超过两级以上的层级结构。用户将通过直接导航、浏览、过滤、搜索等方式在这棵树中上下移动，或者直接从别的地方进入一个深度链接。因为层级太深或层级结构太复杂，全局导航不足以显示“你在这里”的位置标记。

为什么使用：

面包屑层级结构显示了，到达当前页面的每一层链接，从应用的顶端一直向下。从某种意义上说，它显示的是整个网站的一个线性切片，从而避免了显示整个地图的复杂性。 就像步骤条一样，面包屑层级结构帮助用户得知他当前的位置。不过，与序列地图不一样的是，面包屑层级结构，不会告诉用户接下来要去哪里，也不会告诉他刚才是从哪里来的，它只关心现在。

如何使用：

在页面的顶部，放置一行文本或图标来表示页面在当前层级结构中的位置。从上级开始，在上级的右边，放置下一级，然后一直往下直到当前页面。在这些层级之间，放一个图标或文本字符一一通常是向右的箭头、小三角、大于号 (>)、斜杠 (/) 或右侧双角引号 (》)，来表示从一级往下一级移动的方向。 有一些面包屑层级结构的设计，会把当前页面的标题，显示在层级结构的最后。如果你要这么做，可以让它的外观和前面显示的层次有所区别，因为它们不是链接。

例如：三星官网大量使用面包屑导航，侧面反映了面包屑在大型产品中的广泛使用。

11. 注释滚动条

它是什么：

让滚动条在滚动的同时，还可以作为一种内容的映射机制，或者作为一个位置指示器。

什么时候使用：

你建立了一个以文档为中心的网站，用户会浏览这个网站来查看一些注释，但在快速滚动的时候难以记住当前的位置。

为什么使用：

当页面快速滚动时，很难阅读飞驰而过的文字内容，因此有必要使用一些其他的位置指示器。为什么是在滚动条上?因为它是用户当前的注意力所在。

如何使用：

把位置指示器放在滚动条上，或靠近滚动条的位置。不管动态的指示器还是静态的指示器都可以，静态指示器指的是不会随时间变化的指示器，例如：在滚动条轨迹上的颜色块。 动态指示器将在用户滚动的时候改变内容，它们通常以工具提示的形式来实现。当滚动位置发生变化的时候，滚动块旁边的工具提示显示和内容有关的信息。

例如：Word 滚动时动态显示当前页码。

不管是动态指示器还是静态指示器，你都需要弄清楚用户最可能在寻找什么，从而找出你需要把什么放到注释里。 内容结构是一个很好的起点，如果内容是代码，你可能需要显示当前功能或方法的名字;如果是 一份电子数据表，你可能需要显示行号等等。

例如：Chrome 用搜索结果注释其滚动条（如图)。当你在网页上搜索一个单词时，Chrome 会用颜色突出定位到的单词，并在滚动栏中放置一个黄色指示符。这样，用户就可以直接滚动到文档中的这些点。

总结 精心设计的导航可以帮助用户更快地学习你的产品，知道该做什么，去哪里。不会困惑、迷失方向。导航也是产品生命周期中最长的功能之一，如果设计得好，它将具有“常青”价值。

谢谢观看！

工作中 B 端数据图表使用频率不多，但真的接到需求时，自己也会询问周围同事或网站，图表的类型有哪些？由哪些元素组成、每一类型的图表应该对应的场景有哪些？为了设计图表时得心应手，今天我们先一起探究下有关图表的基础知识。

工作中 B 端数据图表使用频率不多，但真的接到需求时，自己也会询问周围同事或网站，图表的类型有哪些？由哪些元素组成、每一类型的图表应该对应的场景有哪些？为了设计图表时得心应手，今天我们先一起探究下有关图表的基础知识。

本文以数据图表的定义、优势、构成、分类、应用场景罗列及可让大家工作效率翻倍的网站和插件这六个部分，作为本文对图表的初步了解，后续我们将以系列文章形式挖掘“数据图表”这座宝藏。既然发现宝藏，定能够淘到自己想要的“金子”，带走它！下图为宝藏地图，请先领取！

更多图表干货：

7个实用技巧，教你搞定可视化图表 ​ 可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。

阅读文章 >

一、图表的定义 图表是将研究对象的数据进行可视化表达，它可以呈现数据的整体形态、趋势、对比等；更加直观明了，同时也不会分散人的注意力，有利于快速展示大量的数据关系，图表是数据的表现形式之一。

例如：在数据可视化 图表设计 出现之前，我们多用于 Excel 表格进行罗列数据、计算等，如下图把表格中的数字以图形的形式进行展示，对于用户来讲图形化要比一长串“数字”更吸引眼球。

二、图表的优势 作为一个设计师，接到需求时，面对庞大的数据，也会挠脑皮，问烦同事；但办法总比困难多，大多数设计师会利用“可视化”图形的方法，在工作中因数据具有针对性变得高效、直观性显得更易理解、数据样式组合会更加的实用等这 3 个优势，做到这三个优势在整体上降低用户阅读数据的门槛和分析；那我们就结合例子分别看看这三个优势：

第一：针对性

在工作中我们也会遇到不同类型的数据需要使用不同的图表形式，例如曲线图一般会用来显示在一个连续的时间或者时间跨度上的变化，它的特点是能够看到事物随着时间的变化趋势；柱状图使用垂直或水平的坐标显示类别之间的数值比较，其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。我们使用图表时，需要先对数据属性进行判断，再对哪种形式的图表作出选择。

第二：直观性

图表与文字相比，在数据的表现上非常直观。如下图，从只有“数据”到以折柱图的形式呈现，不仅可以让用户一目了然地看到数据，还能让用户将数据进行对比。

第三：拓展组合

根据数据属性与图表对比，图表有更强的拓展性，可以进行组合使用；图表拓展性一般是根据基础图表样式，以及数据的增加，拓展出系列或类似的图表，例如我们常见的基础柱状图，由于数据属性多样可以衍生出双向柱状图、堆叠柱状图等。

三、图表的元素构成 了解完什么是图表及它的优势后，接下来我们来看下图表由几个的基础部分组成。图表是由：标题、坐标轴、图例、图形、信息标签等组成。如下图示例：

标题：标题简洁明了，表达图表主题，有些图表只有一个主题，也有主标题与副标题； 坐标轴：数据关系映射在坐标系的视觉展示，包括轴线（纵轴、横轴）、标尺； 图例：图表中信息和数据较多，需要用来数据属性区别，一般会用图例对内容与数据进行说明； 信息标签：鼠标在悬停时出现、固定在图形上展示数据信息，这也是常见的交互方式，也是对当前数据的内容提示信息的一种方式； 图形：数据在视觉展示中映射出来的图形，可以反映数据差异与关系，例如常见的柱状图、饼状图、折线图； 如下图在工作中出现或常见的小错误，会遗忘标题、图例、信息标签等。

四、图表常见的分类 其实在了解图表的分类和概念过程中发现，图表是我们工作中使用图表类型的依据，在了解图表的过程中，发现安德鲁·阿伯拉（Andrew Abela）制作的一份图表类型选择指南，他将图表展示关系可大致分为 4 类：比较、分布、构成、联系四种类型（见下图）。此图更多的帮助我们思考图表的起点和思维，在设计实践中并不都是每个人认可的组合方式。

数据图表类型有很多，考虑设计师们习惯于搭建组件库提高团队效率，凡子整理了自身工作中常见的使用场景，并且从比较、占比、城市分布、排名等维度进行归纳，将图表分为：柱状图、折线图、饼状图&环形图、面积图、子弹图、雷达图、漏斗图等常见类型并做简单的使用场景概述，后面也希望做为图表类型进行详解。

1. 柱状图：多使用垂直或水平的坐标显示类别之间的数值比较。柱状图除了单条柱状图，还可以多条柱状对比，在信息过多，或者对比分类过多时竖向排布的柱状图（如上图左上一）也是个不错的选择。

2. 折线图：折线图也被称为曲线图，一般会用来显示数据在一个连续的时间或者是时间跨度上的变化，他的特点是能够看到事物随着时间的变化趋势。

3. 饼状图：广泛应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。

4. 面积图：适用于百分比堆叠面积图，例如：几个月安卓手机各个版本在市场的占比情况；但是面积图不适合的用在“分类数据的比较，如下图错误与正确的使用。

5. 子弹图：子弹图更适合显示阶段性数据信息，例如季度的数据显示

6. 雷达图：雷达又叫戴布拉图、蜘蛛网图、星图。是由一个点向 3 个或者 3 个以上不同维度的数据，它能够用一张图呈现多个纬度的数据量。它的对象属性往往是多维度的。

7. 漏斗图：适用于流程流量分析。如业务上规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。

以上为大家简单介绍常用的 7 种数据图表类型和简单场景（后续我们将作为另一篇文章详解）。

感谢大家已经阅读到此，接下来可以开启法宝箱之一：推荐阿里的 Antv （网站建议收藏： https://antv.vision/zh/ ）此网站中有图表分类目录，包含比较、趋势、组成、占比、分布、排名、关系、空间等 8 个大类。快快收下此法宝，图表效率要翻倍！

五、图表的应用场景罗列 随着数据可视化趋势，其中数据图表使用场景也可以分为信息图表设计、B 端后台界面设计、可视化大屏设计、系统后台检测、移动端界面设计、游戏数据 UI 这六大场景，由于文章篇幅问题，在此篇暂不过多赘述。

六、插件推荐和网站合集 第一：插件

https://www.figma.com/community/plugin/731451122947612104/Charts https://www.figma.com/community/plugin/734590934750866002/Chart https://kitchen.alipay.com/

第二：数据图表网站合集

https://dycharts.com/appv2/#/pages/home/index https://chartcube.alipay.com/ https://psdrepo.com/free-psd/analytics-charts-freebie/ https://echarts.apache.org/en/index.html

七、总结回顾 以上内容就是凡子在深夜码字、整理图片的成果，我们从图表的定义、优势、类型及简易场景描述、过程中的小 Tips，网站和插件等六个部分对图表进行学习和了解，希望可以为想要了解图表知识的伙伴们解惑、带来帮助，荣幸之至，此外还请期待图表系列（二）《B 端后台产品的图表类型及使用场景详解》。

欢迎关注团队微信公众号：兆日 UCD

想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。本文总结了做好 UX 文案需要掌握的内容，希望对你有所帮助。

想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。本文总结了做好 UX 文案需要掌握的内容，希望对你有所帮助。

更多 UX文案 干货：

腾讯出品！5000字干货帮你重新认识UX文案（附实用技巧） 讲到 UX 文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。

阅读文章 >

UX 文案它在《用户体验五要素》中处于两个层级，一个是结构层的信息架构，一个是框架层的信息设计。

所以，在整个体验设计或者说交互设计过程中都是非常重要的，承上启下引导、连接用户操作节点之间的关系链条作用。

因此，想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。而精准、清晰的提示文案会让用户在无意识的操作中顺畅、愉悦的完成任务目标。所以，我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。

当然，说得好像门槛很高，但是做起来并不是特别困难。接下来，就一起和我看看到底做好 UX 文案需要做好哪些内容吧……

一、信息结构 其实说起来，UX 文案对于做体验设计或产品的人来说，既熟悉又略陌生，其实UX 文案与交互设计真的密不可分，但是又有很多差别的地方，交互设计更多从行为层面，而 UX Writer 更多从“意”的层面。好像是空无飘渺，但是它又是确确实实存在各种场景中，例如接下来的五大场景。

1. 五大提示类型 （1）指引提示场景

指引提示场景不管是 to b 还是 to c 都是不可忽略的重要场景，它主要体现在：输入前-预防、输入中-校验反馈、输入后-容错（单个必填输入、全部必填输入），其中针对输入后的逻辑规则上，很多产品都有不同的逻辑标准，具体哪种更好，并没有具体标准，主要还是看产品目标、用户目标的侧重。

①输入前文案引导（预防）

②输入中校验反馈

③输入完成提示文案

输入完成后的承载在很多产品中都会选择全局提示承载失败结果，但是由于产品对于组件认知的缺乏，导致很多场景下，用户无法获知失败原因，也不知道该如何解决。使得体验感变差。

（2）防错确认场景

其实针对防错确认这个原则，我们也最好不要过于侧重了，毕竟有些操作项如果可以前置判断，避免用户进行无效的操作更胜于事后容错或再犯错，体验的核心其实就是一种情感的宣泄。我们要设计好用户完整的操作路径，使其保持住目标完整性的情感表达，不至于中途不断的产生其他情绪。

（3）反馈提示场景

2. UX 文案八大原则

八大 UX 文案原则，其实在我们做交互设计中的信息设计、信息架构过程中也会涉及，只是在具体落实的过程中，我们并没有那么严格的去执行，毕竟交互设计的侧重点在于用户的行为侧，而用户具体的认知侧，在落实过程中并没有那么仔细或严格。那么这八大具体原则，这次我们可以仔细去一一分解一下。

（1）风格统一

在 UX 设计过程中，UX 文案的语言风格需要与产品定位相符。一般偏向直接面向用户的产品项目，会考虑更多情感化表达风格以拉近距离，而偏向企业服务类型的产品，更多侧重任务效率，整个文案风格会偏向严谨正式一些。而不管开始选择哪种风格，都需要从全局考虑。使得整个产品的文案提示趋于统一。

（2）清晰简洁

考虑文案的时候，不要和用户玩曲折婉转，应该直接，单刀直入，最大限度的降低用户思考成本。就如《Don’t make me think》一书倡导的：让用户能不思考的尽量不要思考。间接、暧昧模糊的说法，生僻和过于“委婉”的用词，都应尽免则免，因为文案是沟通的工具，只有最有效的传递信息才是它的目标。复杂的修辞和句式、“只可意会”的深层含义，都是不需要的。

（3）用词一致

文案用词，同功能、同属性应保持一致。不同模块，同功能也应该保持一致。减少用户操作学习的成本，提升整个产品的使用效率。

（4）用词精准、专业

按钮文案与对话框文案应该精准传达意思，而不是赘述其他信息。特别是与用户行为密切相关的任务路径上，更应该以精简文案传递完整意思为主。

（5）平等亲和语气

不管是不是直面用户的产品，在文案设置上都不应该采用“不能”、“不要”、“不可”、“必须”、“要”等命令式的语态词，让用户产生与产品的距离感

（6）主动语态

相对于使用宾语作为主语的被动态，用户作为主语的主动态，与用户直接相关联，能调动其情绪，更能让用户直接、毫无负担的接受信息。

（7）动宾结构

动宾结构偏向适合有明确动作指向的场景，在表格动作按钮，对话框底部 cta 按钮，建议以动宾结构为主；主谓宾结构偏向叙述指向，部分动宾结构文案语序不适合的场景，可以考虑采用主谓宾结构语序弥补偏动作性行为指向场景。

（8）结果+建议/原因

在事后反馈文案的时候，除坚持之前原则外，还应增加对用户下一步动作指向的文案。引导用户行为目标，不要让用户在当前页面产生迷茫、无措。

3. UX 文案通用性规则 通用性规则主要是从用词、中英文、标点等方面进行了细节的说明，当然包含的内容还可以更丰富，只是限于篇幅以及使用频率进行了删减，欢迎大家与我私信补充更完整。

（1）易混词表

易混淆词表主要是列举一下在 B 端产品中很容易混淆的词语，避免我们在设计 UX 文案的时候文不对题，闹出笑话。当然这些也不是全部场景。

动词类易混词是比较常见的，我们在交互设计过程中，很难注意这其中的细节差别，但是作为一个 UX 文案这块才是工作的重要部分。

除词的属性之外，其他细节也是很容易忽略的。但是我们在考虑交互事件以及行为动作的时候，就需要利用合适的文案来精准的传递我们的想法和目标。

（2）数字

统计数据在一般使用场景下使用阿拉伯数字展示，可以高效传递信息范围和感知信息的速度。在其他特别使用场景下，还是需要使用中文数字展示。

（3）日期与时间规则

时间格式需要与 web 端和移动端各时间组件结合考虑，目前日期与时间的内容展示更多的问题主要是因为格式不统一导致的，所以，在结合组件进行输入的时候，就需要考虑好日期与时间的展示规则标准。

（4）中英文排版规则

这里说的中英文混排主要是中文结合英文一些专有名词或单独的一个句子的场景，我们在进行中英文排版的时候，需要注意一些细节点。（非特别要求，不建议整个单词都大写）

（5）标点基本规则

只有中文或中英文混排中，使用中文全角标点； 中英文混排中如果出现整句英文，则在这句英文中使用英文/半角标点符号。

通过以上方面的交流，我想大家也有所认识了。UX Writer（交互写手）或者说 UX 文案的岗位其实并不是那么简单的做下文案的撰写，还需要通晓一定的语言学、语义学、应用语言学、应用心理学，甚至不同国家/地区的标点符号标准规范，当然，必然还需要熟知交互设计方面的知识，否则在考虑用户路径节点的时候，用户行为的触发轻重和产品设计的目标、用户目标就会背道而驰。

UX Writer 在当前 AIGC 的潮流下其实不应该会被取代的，毕竟真正触动人内心的还是需要人本身，而当前 AI 智能的出现，我们需要从工具角度来看，它会是我们的一个助力。当然，这并不代表 UX 文案就一定永远不可替代，需要我们不断的充实自我，从人属性上多下功夫，只有不断的更了解人，才能更好的利用好 AI 智能。

回顾开头所说的-UX 文案具体落实规范，我将在下一篇文章“UX 文案具体怎么写，可以考虑从这些细节入手”与大家继续聊。当然，这个时间不一定就是下一篇，如果有可能，我想尝试专职从事这个岗位之后，再分享具体的执行策略。

一、背景最近 AI 创作内容火爆网络，让我们看到 AI 在设计上充满想象力的未来。关于 AI 在设计上应用的探索由来已久，从早几年的智能广告素材，智能 Logo 再到如今的 AIGC，AI 的成长突飞猛进。本文尝试梳理 AI 目前在设计领域应用的最新进展，展望设计行业在 AI 技术影响下可能发生的变革。

一、背景 最近 AI 创作内容火爆网络，让我们看到 AI 在设计上充满想象力的未来。关于 AI 在设计上应用的探索由来已久，从早几年的智能广告素材，智能 Logo 再到如今的 AIGC ，AI 的成长突飞猛进。本文尝试梳理 AI 目前在设计领域应用的最新进展，展望设计行业在 AI 技术影响下可能发生的变革。

更多AI落地干货：

8大实战案例！AIGC在网易落地项目中的运用 AIGC 全称 AI Generated Content，是利用人工智能技术来生成内容，AIGC 绘画属于 AIGC 的分支。

阅读文章 >

二、AI 与设计相关的最新技术 1. 自动化内容生成（AIGC）

从文本-图像、文本-视频、文本-3D 模型到智能字体、智能文本，AI 在各类内容的创造上已经突飞猛进，强大到让人惊叹地步。

① 文本-图像技术

近一两年以来，各大平台推出的 AI 绘画工具，用户只要通过简单学习，输入文本，进行关键词调教，即可生产各种风格的画作。关于文本-图像的原理可粗略分为文本理解和图像生成两个部分，目前主流的 AI 绘画工具，文本理解部分大多基于 CLIP 模型，图像生成部分大多基于 Diffusion 模型。相较之前的技术，AI 在关键词理解和生成画作的多元性有了大幅提升。下边简要为大家介绍最受欢迎、效果也最出色的 4 款 AI 绘画工具的特色，关于每种工具使用教程以及如何生成高质量作品，大家可以自行研究。

Disco Diffusion

Disco Diffusion 是发布于 Google Colab 平台的一款开源免费的绘画工具，可以在 Google Drive 直接运行，也可以部署到本地。Disco Diffusion 在生成图前需要完成一些基本参数设置，好处是可以按定制方式生成图片，缺点是交互不如其他几个工具便捷，操作较为复杂，生成时间也比较长。Disco Diffusion 擅长抽象氛围图，色彩华丽丰富，但在人像生成上效果不太理想。

描述“A beautiful painting of a singular lighthouse, shining its light across a tumultuous sea of blood by greg rutkowski and thomas kinkade, Trending on artstation.”

图片来源：@x1ao4，关键词 ”ancient Chinese village“

Midjourney

Midjourney 是一款部署在 Discord 上的绘画工具，需申请测试资格，在收到邀约邮件后，加入 Discord 频道，即可通过关键词输入完成绘画。它的优点在于操作非常简单，用户仅需通过关键词输入即可完成作画，不用设置其他参数。它支持在生成图片后，在已生成图片基础上进行调整。初次加入会赠送免费体验资格，额度用完以后就需要按月/年付费完成绘画。

Midjourney 对关键词理解出色，无论出图速度和完整度都优于 Disco Diffusion，而且它对各类艺术风格模仿较为出色，通过设定风格，可以有帮助 AI 更好理解你想要的画作效果。

来自 Midjourney 的一组对知名艺术家风格模仿的画作

最近发布的 V5 版本在细节上又提升一步，写实效果堪比照片，同时支持更多风格选择，也解决了之前 AI 手部表达错乱问题。

AIGC神器 Midjourney V5 强势更新！逼真到令人发指！ 大家好，这里是和你们一起探索 AI 绘画的花生~ 备受期待的 Midjourney V5 在上周四终于上线了，而且一发布就引起了不小的轰动，因此这次 V5 模型的图像生成效果“太惊人了”，无限逼近真实照片，让人难辨真假。

阅读文章 >

DALL-E 2

Dall-E2 是由 OpenAI 实验室发布的，目前也处于内测阶段，可在官网上申请体验，但开放体验资格有限。注册后首次会免费获赠生成机会，额度用完后需要按次付费生成。它不仅操作简单，而且可控性比较强，但目前图片比例是固定 1:1 方图。DALL-E2 可以根据描述生成一幅画，如果对图效果不满意，可以针对该图生成 3 张新的图片。而且如果对图片局部不满意，它可以支持选择不满意部分，单独设置关键词后再生成。此外，它还可以根据描述对现有图像进行编辑，以及按给定原图生成同一风格的不同画像。

按描述“一个宇航员+骑马+超现实风格”生成的画

按描述“选一个位置加一只火烈鸟”生成的画

根据戴珍珠耳环的少女风格生成的画

Stable Diffusion

Stable Diffusion 是开源免费的，使用起来相当亲民。使用渠道多样，可以在官网、Google Colab、本地部署等方式使用，官网会默认给你点数，生成图消耗点数，消耗完成需要充值使用，但通过 Google Colab 或本地部署基本可以不受数量限制。它可控参数丰富，功能齐全，满足各种个性化需求，因此使用范围最广。而且 Stable Diffusion 支持插件，很多第三方在源代码基础上进行了 2 次开发，比如有的团队就发布程序，让用户可以使用自己提供的图像训练 Stable Diffusion，形成个性化数据模型，生成带有自己风格的图像。Stable Diffusion 在抽象的氛围感上可能不如 Disco 和 Midjourney 出色，但它的想象力和创作力非常丰富，风格多样，人物写实。

超详细！外婆都能看懂的Stable Diffusion入门教程 一、前言 上次发的 Midjourney 教程《奶奶看了都会的 Midjourney 入门教程！

阅读文章 >

Stable Diffusion 官网示例图

AI 绘画工具吸引了大量用户进行尝试，他们形成了各自的社区，彼此分享作品、交流创作过程。虽然很多时候 AI 画作效果不错，但目前仍有一些待解决问题：

生成的结果会有一些随机性，无法按照严格需求的方式生产； 关键词描述对最终效果影响较大，对关键词的描述技巧需要慢慢摸索； 如果对内容一致性要求比较高的话，需要对模型进行训练，有一定的技术挑战。 ② 文本-3D 模型技术

在 Text-Image 技术基础上，各大科技巨头都纷纷入局尝试 Text-3D 技术，目前公开了研究论文和初步效果的技术主要有：Google 推出的 DreamFusion、NVIDIA 的 GET3D、Meta 的 MAV3D，还有 OpenAI 的 Point-E。这项技术还处在初期发展阶段，有很多不完善的地方，比如缺乏几何细节、缺乏纹理，在合成过程智能使用神经渲染器，3D 软件没法通用等问题。还有一个普遍的缺点，就是生成速度缓慢，生成单个 3D 模型的常常需要数个小时。而 OpenAI 推出的 Point-E 仅需几秒到几分钟就能产出一个 3D 模型。英伟达的 AI 科学家 Jim Fan 在推特上表示，Point-E 的生成速度约能达到 DreamFusion 的 600 倍。

OpenAI 生成的 3D 模型

DreamFusion 可以在任意角度、任意光照条件、任意三维环境中基于给定的文本提示生成模型

③ 文本-视频技术

文本生成视频技术也是建立在文本图片技术基础之上，它主要是通过文本图像对和无文本视频来学习，根据文本理解生成几个关键帧。建立插帧模型，基于关键帧补充关键帧之间的图片，提高视频流畅度。最后再进行每帧分辨率的提升，提高整体的视频质量。AI 在文本生成视频的技术相对较新，Meta/Google 在去年 10 月分别官宣对应的视频生成器 Make-a-video/Imagen Video，目前只公开了研究论文和几个官网示例，但得益于文本图片质量的飞速提升，可以预期很快图片视频技术也将大幅提升能力。

Google Imagen Video 生成“一个开车的熊猫”

虽然目前通过文本生成视频技术只能生成简单的变化或动作、无法生成基于文本描述的细节以及多场景复杂故事的视频。但通过 AI 对视频内容进行智能处理技术，已经有很多让人惊艳效果，这部分在本文第 2 章节详细展开介绍。

④ 智能字体

日本筑波大学开发了一套以人工智能为基础的汉字字型设计系统，可以让原本需要人工设计上万字的流程，缩短为只要完成五个手工汉字的设计，AI 就可以自动生产超过 14,000 个相同字体的汉字。

该系统通过学习大量已有字体，再从这几个手工设计的字体范例中提取特征，通过调整参数值输出为新的字型。而且它使用的是矢量图，可以将其输出为字体文件，让字体制作所需的时间大大缩短。

2. AI 特效及内容处理

① AI 视频特效

视频风格化

在线视频编辑网站 Runway 于最近发布了 AI 视频处理工具 Gen-2，该工具针对视频处理的能力很强大，不仅可以通过文本、文本+图片、图片生成视频，还可以对视频进行各种风格化处理，比如只需要把你想要叠加的风格用图片或者文字叠加上去，可很快按要求生成风格化的视频。

原视频通过添加一张驱动图像即可生成风格化视频

智能 CG 角色替换

由《头号玩家》主演 Tye Sheridan 创立公司推出的 Wonder Studio 是一个可以为上传的 CG 模型自动制作动画、HDR 打光、合并到真人场景的 AI 工具。

② AI 图形特效

智能编辑

Adobe 最近发布了 AI 编辑工具 Firefly，虽然目前可体验功能仅有图片生成、文字效果 2 项功能。但根据介绍来看它具有强大的图片编辑能力，包含随手涂鸦作画、上传草图即可生成矢量字体文件、一键修改画面场景、关键词生成设计模板等等能力；

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

智能生成

NVIDIA Canvas 早于 Adobe 发布了自家的涂鸦出图能力，帮助 设计师 加快概念图创作探索，并腾出更多时间进行创意表达。用户通过调色板绘制简单的形状和线条，AI 模型会在屏幕上实时呈现出与之相呼应的风景图像。用户可以通过切换材质来自定义图像效果，Canvas 提供 9 种风格的可视化效果和 20 种不同材质，比如将雪地改为草地，图像将呈现从冬日仙境变为热带天堂的视觉感受。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

③ AI 辅助 UI 设计

AI 生成 UI 版式

近期已经有团队开始实践在 AI 辅助下的 UI 设计。比如 Habitable 开发的 Figma 插件“AI designer”，在展示视频里，它可以通过一段描述生成复杂的页面。

AI 生成内容素材

Microsoft Designer 是一款智能生成图文内容的设计工具，搭载 Dall-E2，根据用户输入文字指令，可以为用户自动生成设计素材，如社群贴图、营销 Banner 等高质量的排版。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

3. 塑造虚拟人

虚拟人是近年很火的领域，虚拟人应用前景广阔，如虚拟偶像、助手、主持人等等，是未来虚拟世界最重要的存在之一。如何塑造虚拟人的人格化特征，实现虚拟人功能，背后都依托的是 AI 技术的加持。

在虚幻引擎最新发布会上，发布了 MetaHuman 新功能 Animator。它可以让你使用 iPhone 或立体头戴式摄像机（HMC）在 MetaHuman 角色上以高保真动画的形式重现任何面部表演。有了它，你就能捕捉到演员表演中的个性、真实感和保真度，将每个细节和微妙变化转移到任意 MetaHuman 身上，在虚幻引擎中为他们注入生命力。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

三、AI 对设计的价值 1. 助力设计师表达创意

设计师可以将 AI 工具应用在工作中，比如当需要探索视觉概念时，可以使用简单的文本说明生成一些素材供创意师提供灵感和参考；还可以借助 AI 将已有素材尝试其他不同风格元素，探索可能性；再有就是利用一些 AI 图形处理工具，快速生成系列内容比较筛选。

比如，数码艺术家 Karen X Cheng 和时尚杂志《Cosmopolitan》团队一起创造了首个由 AI 生成的艺术封面。虽然渲染这张图片只用了 20 秒，但团队为了达到更满意的效果，将大量时间投入到创意方向的讨论和关键词的挑选与组合上，他们尝试输入了数百次创意关键字组合进行调试，最终找到了想要的效果。

使用提示词 “a strong female president astronaut warrior walking on the planet Mars, digital art synthwave.”生成的几组图像

使用提示词 “wide-angle shot from below of a female astronaut with an athletic feminine body walking with swagger toward camera on Mars in an infinite universe, synthwave digital art.” 生成的最终封面效果，

2. 提供更新颖的营销方式

AI 如今也成为广告营销领域必不可少的工具，通过 AIGC 或 AI 内容编辑功能，来实现营销内容的个性化、可互动性等特征，来强化产品吸引力，提升品牌形象。

亨氏 AI 番茄酱

番茄酱品牌亨氏 Heinz 去年借助 AI 自动生成图像的话题制作了趣味性的广告，向广大消费者证明了人工智能更喜欢亨氏番茄酱的事实。广告中，亨氏利用 Dall-E2，输入“蕃茄酱”后，AI 自动生成了一款有亨氏经典外型包装的番茄酱。当继续输入“文艺复兴番茄酱”、“印象派番茄酱”、“外太空番茄酱”等更复杂的文字指令时，生成的图像结果无论在风格上如何变化，所呈现的番茄酱外型和 LOGO 位置都与亨氏番茄酱极为相似，这也印证了广告中的那句话：“连 AI 都认为番茄酱就是亨氏”。同时，亨氏还邀请了世界各地的粉丝参与到用 AI 创作番茄酱的活动中，粉丝们通过输入各种词汇，生成怪异、有趣的番茄酱图像，并发布到网络，亨氏将其中较为出色的案例分享到了官方社交平台，利用 AI 生成视觉效果的热点，成功帮助品牌进行了推广传播。

QQ 音乐 MUSE AI 具像化歌曲海报

AIGC 已经遍布 QQ 音乐的各处细节中，从听歌体验、视觉呈现、社交分享等多个维度，做了不少有趣的创新尝试。与以往的歌曲专辑封面播放不同，QQ 音乐新上线的 AI 播放器是国内音乐行业首个在 AIGC 领域运用的视觉尝试，其原理是通过在 AI 工具输入关键词，让 AI 算法组合各种元素，生成有创意的播放器风格。现在，QQ 音乐已推出机械装甲、雪山白、积木游戏、工业灰等 6 款供用户选择，据悉还将结合场景，有更多样式可以期待。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

3. 扩展品牌语言

设计师可以寻找更具创造性的方式与 AI 合作，比如创作品牌语言。杰西卡·沃尔什 (Jessica Walsh) 使用 AI 为虚拟核能影响者 Isodope 创建品牌语言，将核能重新塑造为一种向善的力量。Isodope 是巴西模特伊莎贝尔·博梅克 (Isabelle Boemeke) 创建的在线角色，目标是利用 Isodope 超凡脱俗的形象和创意风格在 TikTok 上吸引人们的注意力，来改变人们对核能争议的看法，倡导将核能作为解决气候变化和能源紧缺的手段。

Isodope 的品牌元素和排版完全由 AI 打造，Walsh 团队将创意想法通过 DALL-E，创造出一种全息插画风格的品牌语言，通过易于分解的视觉元素和前卫的风格表达来缓解人们对核的恐惧，Walsh 说：“你必须推动这个工具并学习如何与它对话，才能产生更复杂、更有趣、感觉更原始的东西。” DALL·E 还帮助品牌创建了各色贴纸，以便于创建社交资产。借助 AI 使 Isodope 团队围绕核能概念扩展和创造更多的品牌元素。

4. 打造全新的交互方式

依赖于 AI 支撑的虚拟人和 Chatgpt 能力，未来人们面向虚拟世界的交互模式将由原来的文本、图片、视频等内容升级为拟人化的互动方式。这将大大提升虚拟产品互动的友好性，同时提升用户对虚拟产品的情感链接。

日本便利店巨头罗森(Lawson)在东京开设首家配备虚拟店员的“Green Lawson”门店。接待顾客的为显示屏上的虚拟店员，一项研究数据表明，它通过线上发放优惠券领取率是 10%，通过人发领取率为 70%，而通过虚拟人发领取率为 57%，可见未来这种交互方式在商业领域的广阔前景。

四、总结 很多人看到 AI 的发展现状，不免担心 AI 未来会在很多方面取代设计师。事实上大可不必如此看待问题，AI 虽然在图像生成、图像编辑和插图排版等方面有着让人赞叹的效果。但就目前来看，它的内容生成还存在很多问题。即时 AI 在将来内容生成上已经炉火纯青，在情感表达、创意等很多方面，AI 还需要人的调教和指导才能产生很好的价值。

得益于 AI 在设计领域的快速发展，人工智能势必会大大简化设计师的工作，提升设计师处理各种图像的效率。设计师也不必将时间浪费在去除背景等费力、重复的任务上，并且将有机会以最少的努力探索更多创意。学习和研究 AI 在设计上最新的能力，将这种能力找到一个很好的契合点，应用在项目中，必将为为项目带来不一样的亮色。

参考文献：

AI 艺术的背后：详解文本生成图像模型 | 集智俱乐部 极市开发者平台-计算机视觉算法开发落地平台 如何通俗理解扩散模型？- 知乎 一起用 AI | AI 工具导航 | AI 教程 | AI 集合 | OpenAI 建模师也危险了？OpenAI 公布 Point-E，AI 迈出“生成 3D 模型”第一步 | 游戏大观 | GameLook.com.cn 欢迎关注作者微信公众号：「腾讯ISUX」

想必大家也都可以看到，随着人工智能技术的迅速发展，用户界面设计也在不断演变。虽然现在传统的 GUI（图形用户界面，Graphical User Interface）还是我们日常生活中使用数字产品的标配，但随着 AIGC 的应用，传统的 GUI 将会向 CUI（对话式用户界面，Conversational User...

想必大家也都可以看到，随着人工智能技术的迅速发展，用户界面设计也在不断演变。虽然现在传统的 GUI（图形用户界面，Graphical User Interface）还是我们日常生活中使用数字产品的标配，但随着 AIGC 的应用，传统的 GUI 将会向 CUI（对话式用户界面，Conversational User Interface）演变。

GUI 界面在过去几十年里一直是数字产品的主流用户界面。GUI 通过图形、图标、按钮和菜单等元素，使用户可以通过鼠标、键盘或触摸屏等方式与计算机进行交互。然而，随着数字产品功能的不断增加，GUI 界面在某些情况下变得越来越复杂，需要用户记住很多功能的入口位置和操作方式，导致学习成本越来越高。

而 CUI 则采用了更加自然和直观的语言交互方式，用户可以通过语音或文字与系统进行对话，无需记住复杂的图标和操作。AI 技术的发展使得 CUI 在语音识别、自然语言处理和对话生成等方面取得了显著的突破，使得 CUI 在多个领域得到了广泛应用。

关于AI如何辅助设计：

交互设计师如何用 AI 提高工作效率？来看大厂高手的总结！ 关于 AIGC，我收到的同学提问大多都表示担忧，多数人会这样问： “AI 会不会替代交互设计师的工作？

阅读文章 >

一、CLI、GUI、CUI 的故事，以及 CUI 的优势 CLI 作为最早的用户界面形式，在 1960 年代就已经出现并得到广泛应用，而 GUI 则在 1970 年代至 1980 年代得到较为广泛的发展和应用。而 CUI 则相对较新，近年来随着人工智能技术的发展，尤其是自然语言处理和语音识别技术的进步，CUI 得到了越来越多的关注和应用，但目前仍处于发展中，并在不同的应用领域和场景中进行探索和实践。

CUI 和 VUI 在诞生后受到一些技术条件的制约，从大量语音机器人的昙花一现可以看到，AI 在自然语言的理解上的基础能力不足，导致产品化的智能硬件并没有最终赢得市场。而现在不一样了。

下面是 CLI（命令行界面）、GUI（图形用户界面）和 CUI（对话式用户界面）三者之间的一些差异，通过一个表格进行简单的对比：

下面是具体的差异对比：

可见 CUI 的明显优势在于：使用更加自然和直观的语言交互方式，用户可以通过语音或文字与系统进行对话，无需记住复杂的图标和操作。此外，CUI 可以通过上下文记忆和智能化回应，为用户提供个性化和智能化的交互体验。随着 AI 技术的不断推进，CUI 有望在未来成为数字产品界面设计的重要趋势，为用户提供更加智能和便捷的交互方式。

值得一提的事，CUI 与 GUI 并非是 3.0 与 4.0 的替代关系，而是两种不同的解决方案。所以，CUI 不太可能完全替代 GUI，GUI 也有他不可替代的优势，GUI 在许多情况下更便捷易用，特别是对非技术人员和初学者来说。

二、GUI 变得越来越复杂 从整体趋势来看，GUI（图形用户界面）在近 20 年的发展过程中，可以说在某种程度上变得越来越复杂。随着数字产品的快速发展和功能需求的不断增加，GUI 界面通常需要满足更加复杂和多样化的用户需求，这导致了界面设计在某些情况下变得更加复杂。

处理复杂的代价是 UX 设计成本变得更高、用户学习成本变高。虽然设计师们也在努力提供更加简洁、直观和用户友好的界面，但很多数字产品的学习成本依然很高。尤其是在 SaaS 领域的 UI 设计中，层叠抽屉，多重窗口，四五级以上的导航，这些已经司空见惯。用户需要经过一定的培训才可以使用。

随着数字产品的功能和复杂性不断增加，GUI 界面通常需要包含更多的功能和选项。比如早期的操作系统和软件界面通常只包含简单的菜单、按钮和对话框等基本元素，而现在的数字产品界面可能需要包含更多的功能按钮、选项卡、工具栏、复杂的数据展示和操作控件等。这使得界面设计师需要在有限的屏幕空间内合理安排各种功能和选项，使用户能够方便地访问和使用这些功能，这可能导致界面变得更加复杂。

平台级超级 App 的发展，迫使移动端 GUI 界面不得不承载过载的信息，从而变得超级复杂。这些超级 App 背后的大厂，各个部门之间分管一个 App 的不同模块，然后在首页争夺寸土寸金的流量入口，从而造成新的“公地悲剧”式的用户体验。

我们通过几个例子来看看：

搜索引擎界面：搜索引擎是现代互联网使用最广泛的工具之一，其界面在过去的 20 年中经历了显著的变化。早期的搜索引擎界面非常简单，通常只包含一个搜索框和搜索按钮。然而，随着搜索引擎的功能和复杂性的增加，现代搜索引擎界面变得更加复杂，包括搜索建议、搜索结果页面、过滤和排序选项等。此外，搜索引擎还包括了广告、新闻、图片、视频等多种类型的搜索结果，使得界面变得更加复杂。 社交媒体界面：社交媒体在过去的 20 年中迅速崛起，其界面也在不断演变。早期的社交媒体界面相对简单，主要包括用户发布和查看消息的功能。然而，现代社交媒体界面变得越来越复杂，包括了朋友列表、消息通知、隐私设置、活动日志、群组管理等多种功能。此外，社交媒体还涉及到用户生成内容、社交关系图谱、社交广告等复杂的元素，使得界面的复杂性不断增加。 电商界面：随着电子商务的快速发展，电商界面也变得越来越复杂。电商网站和应用程序通常包含了大量的产品信息、分类、筛选、购物车、支付、物流、评论等功能，需要提供用户友好的界面来支持这些复杂的操作。此外，电商界面还需要考虑到用户个性化定制、促销活动、商品推荐等复杂因素，使得界面的复杂性逐渐增加。 三、CUI 的发展，将改变数字产品设计的信息架构 与 GUI 相比，CUI 通过自然语言对话实现用户与系统的交互，为数字产品设计带来了新的可能性。CUI 的发展将影响数字产品设计的交互方式、信息架构、流程设计等方方面面。

飞书最近发布的飞书“My AI”的宣传视频中呈现了以 CUI 为基础的全新交互方式，用户通过对话与 AI 进行交互，打开自己想要的功能模块，实现自己想要完成的任务。相较于这种流畅的对话交互，IM 产品左侧的一排导航图标略微显得有点尴尬。

这排图标就是 GUI 模式下的信息架构方式的代表。传统的 GUI 通常基于菜单、按钮和图形等元素构建，用户需要通过点击、拖拽等方式与界面进行交互。而 CUI 则通过语音或文本对话的形式，让用户以更加自然的方式与系统进行交流。CUI 可以通过语音识别、自然语言理解（NLU）和对话管理等技术，解析用户的语言输入，理解其意图，然后生成合适的回应或执行相应的操作。CUI 这种自然语言的对话方式，可以让用户更加直观、便捷地与数字产品进行交互，无需繁琐的操作和记忆复杂的界面结构。

传统的 GUI 通常需要设计师在界面中精心设计和组织各种菜单、按钮、标签等元素，以实现产品的功能和内容展示。而 CUI 则将更多的关注点放在了对话的设计和流程管理上。

对话设计（Dialogue Design）成为了 CUI 中的一个重要领域，涉及到如何设计合适的对话流程、如何组织对话内容、如何处理用户输入和意图识别等。这意味着设计师需要更加关注语言交互的逻辑和结构，而不仅仅是界面的外观和布局。在 HMI 领域，对话设计并不是什么新鲜事，可以通过这里了解一下。

CUI 的发展，会促使数字产品设计从功能导向转向任务导向。在传统的 GUI 中，用户通常需要通过一系列的点击、选择和操作来完成特定的功能，而在 CUI 中，用户通过对话来表达自己的需求和意图，系统则根据用户的需求和意图来为其提供相应的服务和响应。这种任务导向的设计思维，将使信息架构更加注重用户的目标和任务，而不仅仅是功能和内容的展示。

CUI 的发展还将带来更加个性化和自适应的信息架构。通过 NLP 技术和机器学习的应用，CUI 可以根据用户的语言输入和行为习惯，自动学习和适应用户的需求和偏好，从而提供更加个性化和定制化的体验。这将对数字产品的信息架构产生深刻的影响，使其更加灵活和可定制，以满足不同用户的需求和偏好。

总的来说，CUI 的发展将改变数字产品设计的信息架构，从传统的 GUI 导向向更加自然语言的对话导向转变，注重对话设计、任务导向、个性化和自适应等方面。

四、基于 AIGC 的 CUI 会大幅简化产品服务流程 相较于 GUI，CUI 在服务流程设计方面具有以下几个优势：

自然语言交互（CUI）简化了服务流程设计，使用户能够以自然、直观的方式与系统进行交互。用户可以通过语音或文字输入表达需求、提问或指令，系统能够智能地理解和处理用户输入，并提供高效和便捷的服务。 动态对话流程：CUI 系统根据用户输入和系统逻辑动态生成对话流程，实现智能和个性化的服务。设计师通过配置和优化对话流程，以适应不同用户和场景的需求。 智能反馈和推荐：基于 AI 的 CUI 系统可通过分析用户输入和行为来智能反馈和推荐。例如，系统可根据用户需求自动推荐相关服务或信息，提供个性化和精准的服务。这可减少用户的犹豫和提高用户体验。 数据驱动优化：基于 AI 的 CUI 系统可通过收集和分析用户输入和反馈数据，进行数据驱动的优化和改进。系统可自动学习用户偏好、行为和需求，优化对话模型和对话逻辑，从而持续提升系统性能和用户满意度，提高服务质量和效率。

2023 年 3 月，AI 招聘平台的先驱之一 Beamery 正式推出世界上第一个 HR 生成式 AI——TalentGPT。Beamery TalentGPT是一款人工智能招聘工具，具有人才搜索和匹配、自动化招聘流程、智能候选人推荐、人才洞察和分析以及职位广告优化等能力。它利用自然语言处理和人工智能技术，帮助企业高效进行人才招聘和管理。（出处）

比如 TalentGPT 可以自动化的进行候选人筛选。雇主可以通过设置特定的招聘要求和条件，例如工作经验、技能和学历等，然后让 Beamery TalentGPT 自动筛选出符合条件的候选人。这样，雇主无需手动筛选大量简历，大大减少了筛选过程中的时间和劳力成本。

TalentGPT 还可以进行人才洞察和分析。他可以通过对招聘数据的分析和挖掘，生成人才洞察和洞察报告，包括招聘渠道效果、候选人来源、候选人流失率等信息，帮助雇主优化招聘策略和决策。这样，雇主可以根据数据分析结果做出更加明智的决策，从而简化招聘服务流程，提高招聘效率。

通过这个例子可以看出，CUI 在服务流程设计方面具有自然语言交互、动态对话流程、智能化的反馈和推荐、数据驱动的优化以及跨平台和多通道支持等优势，有望在未来的数字产品设计中发挥重要作用。

同时我们也可以看到，CUI 将会改变搜索产品的 UI 设计。TalentGPT 用 CUI 的方式实现候选人筛选的过程，完全可以替代现在大部分 GUI 产品中的搜索流程。

CUI 将使搜索产品从关键词输入向自然语言输入、从单一输入向多轮对话、从静态界面向动态界面转变。所以，搜索产品的 UI 设计在未来需要更加注重语言理解、对话交互、多轮对话流程、上下文管理、实时性和动态性，以提供更加便捷和智能化的搜索体验。

写在最后 总的来说，随着 CUI 技术的不断发展，数字产品的设计也将不断向着自然语言的对话导向转变，注重对话设计、任务导向、个性化和自适应等方面。CUI 将会带来更加灵活、智能的服务流程设计，并改变搜索产品的 UI 设计，并有望在未来的数字产品设计中发挥重要作用。

CUI 的发展将改变数字产品设计团队的角色和工作方式，但这也将带来更多的机遇和挑战。**传统的 GUI 设计通常由 UI 设计师、交互设计师和视觉设计师等专业人员组成，而 CUI 的设计则需要跨学科的合作，包括语言学、心理学、人机交互等多个领域的知识和技能。**因此，设计师需要更多地了解用户的语言行为、意图和心理特征，以更好地设计对话流程、生成回应和处理用户输入。

这意味着设计师需要更加注重语言逻辑和用户体验，而不仅仅是界面的外观和布局。设计师需要跨学科合作，深入理解用户的语言行为和需求，以更好地设计和构建 CUI，从而为用户提供更加直观、便捷和个性化的数字产品体验。我们相信，通过这种方式，我们能够打造出更好的数字产品，为用户带来更多的价值和便利。

欢迎关注作者微信公众号：「柴林的设计笔记」

想必大家也都可以看到，随着人工智能技术的迅速发展，用户界面设计也在不断演变。虽然现在传统的 GUI（图形用户界面，Graphical User Interface）还是我们日常生活中使用数字产品的标配，但随着 AIGC 的应用，传统的 GUI 将会向 CUI（对话式用户界面，Conversational User...

想必大家也都可以看到，随着人工智能技术的迅速发展，用户界面设计也在不断演变。虽然现在传统的 GUI（图形用户界面，Graphical User Interface）还是我们日常生活中使用数字产品的标配，但随着 AIGC 的应用，传统的 GUI 将会向 CUI（对话式用户界面，Conversational User Interface）演变。

GUI 界面在过去几十年里一直是数字产品的主流用户界面。GUI 通过图形、图标、按钮和菜单等元素，使用户可以通过鼠标、键盘或触摸屏等方式与计算机进行交互。然而，随着数字产品功能的不断增加，GUI 界面在某些情况下变得越来越复杂，需要用户记住很多功能的入口位置和操作方式，导致学习成本越来越高。

而 CUI 则采用了更加自然和直观的语言交互方式，用户可以通过语音或文字与系统进行对话，无需记住复杂的图标和操作。AI 技术的发展使得 CUI 在语音识别、自然语言处理和对话生成等方面取得了显著的突破，使得 CUI 在多个领域得到了广泛应用。

关于AI如何辅助设计：

交互设计师如何用 AI 提高工作效率？来看大厂高手的总结！ 关于 AIGC，我收到的同学提问大多都表示担忧，多数人会这样问： “AI 会不会替代交互设计师的工作？

阅读文章 >

一、CLI、GUI、CUI 的故事，以及 CUI 的优势 CLI 作为最早的用户界面形式，在 1960 年代就已经出现并得到广泛应用，而 GUI 则在 1970 年代至 1980 年代得到较为广泛的发展和应用。而 CUI 则相对较新，近年来随着人工智能技术的发展，尤其是自然语言处理和语音识别技术的进步，CUI 得到了越来越多的关注和应用，但目前仍处于发展中，并在不同的应用领域和场景中进行探索和实践。

CUI 和 VUI 在诞生后受到一些技术条件的制约，从大量语音机器人的昙花一现可以看到，AI 在自然语言的理解上的基础能力不足，导致产品化的智能硬件并没有最终赢得市场。而现在不一样了。

下面是 CLI（命令行界面）、GUI（图形用户界面）和 CUI（对话式用户界面）三者之间的一些差异，通过一个表格进行简单的对比：

下面是具体的差异对比：

可见 CUI 的明显优势在于：使用更加自然和直观的语言交互方式，用户可以通过语音或文字与系统进行对话，无需记住复杂的图标和操作。此外，CUI 可以通过上下文记忆和智能化回应，为用户提供个性化和智能化的交互体验。随着 AI 技术的不断推进，CUI 有望在未来成为数字产品界面设计的重要趋势，为用户提供更加智能和便捷的交互方式。

值得一提的事，CUI 与 GUI 并非是 3.0 与 4.0 的替代关系，而是两种不同的解决方案。所以，CUI 不太可能完全替代 GUI，GUI 也有他不可替代的优势，GUI 在许多情况下更便捷易用，特别是对非技术人员和初学者来说。

二、GUI 变得越来越复杂 从整体趋势来看，GUI（图形用户界面）在近 20 年的发展过程中，可以说在某种程度上变得越来越复杂。随着数字产品的快速发展和功能需求的不断增加，GUI 界面通常需要满足更加复杂和多样化的用户需求，这导致了界面设计在某些情况下变得更加复杂。

处理复杂的代价是 UX 设计成本变得更高、用户学习成本变高。虽然设计师们也在努力提供更加简洁、直观和用户友好的界面，但很多数字产品的学习成本依然很高。尤其是在 SaaS 领域的 UI 设计中，层叠抽屉，多重窗口，四五级以上的导航，这些已经司空见惯。用户需要经过一定的培训才可以使用。

随着数字产品的功能和复杂性不断增加，GUI 界面通常需要包含更多的功能和选项。比如早期的操作系统和软件界面通常只包含简单的菜单、按钮和对话框等基本元素，而现在的数字产品界面可能需要包含更多的功能按钮、选项卡、工具栏、复杂的数据展示和操作控件等。这使得界面设计师需要在有限的屏幕空间内合理安排各种功能和选项，使用户能够方便地访问和使用这些功能，这可能导致界面变得更加复杂。

平台级超级 App 的发展，迫使移动端 GUI 界面不得不承载过载的信息，从而变得超级复杂。这些超级 App 背后的大厂，各个部门之间分管一个 App 的不同模块，然后在首页争夺寸土寸金的流量入口，从而造成新的“公地悲剧”式的用户体验。

我们通过几个例子来看看：

搜索引擎界面：搜索引擎是现代互联网使用最广泛的工具之一，其界面在过去的 20 年中经历了显著的变化。早期的搜索引擎界面非常简单，通常只包含一个搜索框和搜索按钮。然而，随着搜索引擎的功能和复杂性的增加，现代搜索引擎界面变得更加复杂，包括搜索建议、搜索结果页面、过滤和排序选项等。此外，搜索引擎还包括了广告、新闻、图片、视频等多种类型的搜索结果，使得界面变得更加复杂。 社交媒体界面：社交媒体在过去的 20 年中迅速崛起，其界面也在不断演变。早期的社交媒体界面相对简单，主要包括用户发布和查看消息的功能。然而，现代社交媒体界面变得越来越复杂，包括了朋友列表、消息通知、隐私设置、活动日志、群组管理等多种功能。此外，社交媒体还涉及到用户生成内容、社交关系图谱、社交广告等复杂的元素，使得界面的复杂性不断增加。 电商界面：随着电子商务的快速发展，电商界面也变得越来越复杂。电商网站和应用程序通常包含了大量的产品信息、分类、筛选、购物车、支付、物流、评论等功能，需要提供用户友好的界面来支持这些复杂的操作。此外，电商界面还需要考虑到用户个性化定制、促销活动、商品推荐等复杂因素，使得界面的复杂性逐渐增加。 三、CUI 的发展，将改变数字产品设计的信息架构 与 GUI 相比，CUI 通过自然语言对话实现用户与系统的交互，为数字产品设计带来了新的可能性。CUI 的发展将影响数字产品设计的交互方式、信息架构、流程设计等方方面面。

飞书最近发布的飞书“My AI”的宣传视频中呈现了以 CUI 为基础的全新交互方式，用户通过对话与 AI 进行交互，打开自己想要的功能模块，实现自己想要完成的任务。相较于这种流畅的对话交互，IM 产品左侧的一排导航图标略微显得有点尴尬。

这排图标就是 GUI 模式下的信息架构方式的代表。传统的 GUI 通常基于菜单、按钮和图形等元素构建，用户需要通过点击、拖拽等方式与界面进行交互。而 CUI 则通过语音或文本对话的形式，让用户以更加自然的方式与系统进行交流。CUI 可以通过语音识别、自然语言理解（NLU）和对话管理等技术，解析用户的语言输入，理解其意图，然后生成合适的回应或执行相应的操作。CUI 这种自然语言的对话方式，可以让用户更加直观、便捷地与数字产品进行交互，无需繁琐的操作和记忆复杂的界面结构。

传统的 GUI 通常需要设计师在界面中精心设计和组织各种菜单、按钮、标签等元素，以实现产品的功能和内容展示。而 CUI 则将更多的关注点放在了对话的设计和流程管理上。

对话设计（Dialogue Design）成为了 CUI 中的一个重要领域，涉及到如何设计合适的对话流程、如何组织对话内容、如何处理用户输入和意图识别等。这意味着设计师需要更加关注语言交互的逻辑和结构，而不仅仅是界面的外观和布局。在 HMI 领域，对话设计并不是什么新鲜事，可以通过这里了解一下。

CUI 的发展，会促使数字产品设计从功能导向转向任务导向。在传统的 GUI 中，用户通常需要通过一系列的点击、选择和操作来完成特定的功能，而在 CUI 中，用户通过对话来表达自己的需求和意图，系统则根据用户的需求和意图来为其提供相应的服务和响应。这种任务导向的设计思维，将使信息架构更加注重用户的目标和任务，而不仅仅是功能和内容的展示。

CUI 的发展还将带来更加个性化和自适应的信息架构。通过 NLP 技术和机器学习的应用，CUI 可以根据用户的语言输入和行为习惯，自动学习和适应用户的需求和偏好，从而提供更加个性化和定制化的体验。这将对数字产品的信息架构产生深刻的影响，使其更加灵活和可定制，以满足不同用户的需求和偏好。

总的来说，CUI 的发展将改变数字产品设计的信息架构，从传统的 GUI 导向向更加自然语言的对话导向转变，注重对话设计、任务导向、个性化和自适应等方面。

四、基于 AIGC 的 CUI 会大幅简化产品服务流程 相较于 GUI，CUI 在服务流程设计方面具有以下几个优势：

自然语言交互（CUI）简化了服务流程设计，使用户能够以自然、直观的方式与系统进行交互。用户可以通过语音或文字输入表达需求、提问或指令，系统能够智能地理解和处理用户输入，并提供高效和便捷的服务。 动态对话流程：CUI 系统根据用户输入和系统逻辑动态生成对话流程，实现智能和个性化的服务。设计师通过配置和优化对话流程，以适应不同用户和场景的需求。 智能反馈和推荐：基于 AI 的 CUI 系统可通过分析用户输入和行为来智能反馈和推荐。例如，系统可根据用户需求自动推荐相关服务或信息，提供个性化和精准的服务。这可减少用户的犹豫和提高用户体验。 数据驱动优化：基于 AI 的 CUI 系统可通过收集和分析用户输入和反馈数据，进行数据驱动的优化和改进。系统可自动学习用户偏好、行为和需求，优化对话模型和对话逻辑，从而持续提升系统性能和用户满意度，提高服务质量和效率。

2023 年 3 月，AI 招聘平台的先驱之一 Beamery 正式推出世界上第一个 HR 生成式 AI——TalentGPT。Beamery TalentGPT是一款人工智能招聘工具，具有人才搜索和匹配、自动化招聘流程、智能候选人推荐、人才洞察和分析以及职位广告优化等能力。它利用自然语言处理和人工智能技术，帮助企业高效进行人才招聘和管理。（出处）

比如 TalentGPT 可以自动化的进行候选人筛选。雇主可以通过设置特定的招聘要求和条件，例如工作经验、技能和学历等，然后让 Beamery TalentGPT 自动筛选出符合条件的候选人。这样，雇主无需手动筛选大量简历，大大减少了筛选过程中的时间和劳力成本。

TalentGPT 还可以进行人才洞察和分析。他可以通过对招聘数据的分析和挖掘，生成人才洞察和洞察报告，包括招聘渠道效果、候选人来源、候选人流失率等信息，帮助雇主优化招聘策略和决策。这样，雇主可以根据数据分析结果做出更加明智的决策，从而简化招聘服务流程，提高招聘效率。

通过这个例子可以看出，CUI 在服务流程设计方面具有自然语言交互、动态对话流程、智能化的反馈和推荐、数据驱动的优化以及跨平台和多通道支持等优势，有望在未来的数字产品设计中发挥重要作用。

同时我们也可以看到，CUI 将会改变搜索产品的 UI 设计。TalentGPT 用 CUI 的方式实现候选人筛选的过程，完全可以替代现在大部分 GUI 产品中的搜索流程。

CUI 将使搜索产品从关键词输入向自然语言输入、从单一输入向多轮对话、从静态界面向动态界面转变。所以，搜索产品的 UI 设计在未来需要更加注重语言理解、对话交互、多轮对话流程、上下文管理、实时性和动态性，以提供更加便捷和智能化的搜索体验。

写在最后 总的来说，随着 CUI 技术的不断发展，数字产品的设计也将不断向着自然语言的对话导向转变，注重对话设计、任务导向、个性化和自适应等方面。CUI 将会带来更加灵活、智能的服务流程设计，并改变搜索产品的 UI 设计，并有望在未来的数字产品设计中发挥重要作用。

CUI 的发展将改变数字产品设计团队的角色和工作方式，但这也将带来更多的机遇和挑战。**传统的 GUI 设计通常由 UI 设计师、交互设计师和视觉设计师等专业人员组成，而 CUI 的设计则需要跨学科的合作，包括语言学、心理学、人机交互等多个领域的知识和技能。**因此，设计师需要更多地了解用户的语言行为、意图和心理特征，以更好地设计对话流程、生成回应和处理用户输入。

这意味着设计师需要更加注重语言逻辑和用户体验，而不仅仅是界面的外观和布局。设计师需要跨学科合作，深入理解用户的语言行为和需求，以更好地设计和构建 CUI，从而为用户提供更加直观、便捷和个性化的数字产品体验。我们相信，通过这种方式，我们能够打造出更好的数字产品，为用户带来更多的价值和便利。

欢迎关注作者微信公众号：「柴林的设计笔记」

一、背景最近 AI 创作内容火爆网络，让我们看到 AI 在设计上充满想象力的未来。关于 AI 在设计上应用的探索由来已久，从早几年的智能广告素材，智能 Logo 再到如今的 AIGC，AI 的成长突飞猛进。本文尝试梳理 AI 目前在设计领域应用的最新进展，展望设计行业在 AI 技术影响下可能发生的变革。

一、背景 最近 AI 创作内容火爆网络，让我们看到 AI 在设计上充满想象力的未来。关于 AI 在设计上应用的探索由来已久，从早几年的智能广告素材，智能 Logo 再到如今的 AIGC ，AI 的成长突飞猛进。本文尝试梳理 AI 目前在设计领域应用的最新进展，展望设计行业在 AI 技术影响下可能发生的变革。

更多AI落地干货：

8大实战案例！AIGC在网易落地项目中的运用 AIGC 全称 AI Generated Content，是利用人工智能技术来生成内容，AIGC 绘画属于 AIGC 的分支。

阅读文章 >

二、AI 与设计相关的最新技术 1. 自动化内容生成（AIGC）

从文本-图像、文本-视频、文本-3D 模型到智能字体、智能文本，AI 在各类内容的创造上已经突飞猛进，强大到让人惊叹地步。

① 文本-图像技术

近一两年以来，各大平台推出的 AI 绘画工具，用户只要通过简单学习，输入文本，进行关键词调教，即可生产各种风格的画作。关于文本-图像的原理可粗略分为文本理解和图像生成两个部分，目前主流的 AI 绘画工具，文本理解部分大多基于 CLIP 模型，图像生成部分大多基于 Diffusion 模型。相较之前的技术，AI 在关键词理解和生成画作的多元性有了大幅提升。下边简要为大家介绍最受欢迎、效果也最出色的 4 款 AI 绘画工具的特色，关于每种工具使用教程以及如何生成高质量作品，大家可以自行研究。

Disco Diffusion

Disco Diffusion 是发布于 Google Colab 平台的一款开源免费的绘画工具，可以在 Google Drive 直接运行，也可以部署到本地。Disco Diffusion 在生成图前需要完成一些基本参数设置，好处是可以按定制方式生成图片，缺点是交互不如其他几个工具便捷，操作较为复杂，生成时间也比较长。Disco Diffusion 擅长抽象氛围图，色彩华丽丰富，但在人像生成上效果不太理想。

描述“A beautiful painting of a singular lighthouse, shining its light across a tumultuous sea of blood by greg rutkowski and thomas kinkade, Trending on artstation.”

图片来源：@x1ao4，关键词 ”ancient Chinese village“

Midjourney

Midjourney 是一款部署在 Discord 上的绘画工具，需申请测试资格，在收到邀约邮件后，加入 Discord 频道，即可通过关键词输入完成绘画。它的优点在于操作非常简单，用户仅需通过关键词输入即可完成作画，不用设置其他参数。它支持在生成图片后，在已生成图片基础上进行调整。初次加入会赠送免费体验资格，额度用完以后就需要按月/年付费完成绘画。

Midjourney 对关键词理解出色，无论出图速度和完整度都优于 Disco Diffusion，而且它对各类艺术风格模仿较为出色，通过设定风格，可以有帮助 AI 更好理解你想要的画作效果。

来自 Midjourney 的一组对知名艺术家风格模仿的画作

最近发布的 V5 版本在细节上又提升一步，写实效果堪比照片，同时支持更多风格选择，也解决了之前 AI 手部表达错乱问题。

AIGC神器 Midjourney V5 强势更新！逼真到令人发指！ 大家好，这里是和你们一起探索 AI 绘画的花生~ 备受期待的 Midjourney V5 在上周四终于上线了，而且一发布就引起了不小的轰动，因此这次 V5 模型的图像生成效果“太惊人了”，无限逼近真实照片，让人难辨真假。

阅读文章 >

DALL-E 2

Dall-E2 是由 OpenAI 实验室发布的，目前也处于内测阶段，可在官网上申请体验，但开放体验资格有限。注册后首次会免费获赠生成机会，额度用完后需要按次付费生成。它不仅操作简单，而且可控性比较强，但目前图片比例是固定 1:1 方图。DALL-E2 可以根据描述生成一幅画，如果对图效果不满意，可以针对该图生成 3 张新的图片。而且如果对图片局部不满意，它可以支持选择不满意部分，单独设置关键词后再生成。此外，它还可以根据描述对现有图像进行编辑，以及按给定原图生成同一风格的不同画像。

按描述“一个宇航员+骑马+超现实风格”生成的画

按描述“选一个位置加一只火烈鸟”生成的画

根据戴珍珠耳环的少女风格生成的画

Stable Diffusion

Stable Diffusion 是开源免费的，使用起来相当亲民。使用渠道多样，可以在官网、Google Colab、本地部署等方式使用，官网会默认给你点数，生成图消耗点数，消耗完成需要充值使用，但通过 Google Colab 或本地部署基本可以不受数量限制。它可控参数丰富，功能齐全，满足各种个性化需求，因此使用范围最广。而且 Stable Diffusion 支持插件，很多第三方在源代码基础上进行了 2 次开发，比如有的团队就发布程序，让用户可以使用自己提供的图像训练 Stable Diffusion，形成个性化数据模型，生成带有自己风格的图像。Stable Diffusion 在抽象的氛围感上可能不如 Disco 和 Midjourney 出色，但它的想象力和创作力非常丰富，风格多样，人物写实。

超详细！外婆都能看懂的Stable Diffusion入门教程 一、前言 上次发的 Midjourney 教程《奶奶看了都会的 Midjourney 入门教程！

阅读文章 >

Stable Diffusion 官网示例图

AI 绘画工具吸引了大量用户进行尝试，他们形成了各自的社区，彼此分享作品、交流创作过程。虽然很多时候 AI 画作效果不错，但目前仍有一些待解决问题：

生成的结果会有一些随机性，无法按照严格需求的方式生产； 关键词描述对最终效果影响较大，对关键词的描述技巧需要慢慢摸索； 如果对内容一致性要求比较高的话，需要对模型进行训练，有一定的技术挑战。 ② 文本-3D 模型技术

在 Text-Image 技术基础上，各大科技巨头都纷纷入局尝试 Text-3D 技术，目前公开了研究论文和初步效果的技术主要有：Google 推出的 DreamFusion、NVIDIA 的 GET3D、Meta 的 MAV3D，还有 OpenAI 的 Point-E。这项技术还处在初期发展阶段，有很多不完善的地方，比如缺乏几何细节、缺乏纹理，在合成过程智能使用神经渲染器，3D 软件没法通用等问题。还有一个普遍的缺点，就是生成速度缓慢，生成单个 3D 模型的常常需要数个小时。而 OpenAI 推出的 Point-E 仅需几秒到几分钟就能产出一个 3D 模型。英伟达的 AI 科学家 Jim Fan 在推特上表示，Point-E 的生成速度约能达到 DreamFusion 的 600 倍。

OpenAI 生成的 3D 模型

DreamFusion 可以在任意角度、任意光照条件、任意三维环境中基于给定的文本提示生成模型

③ 文本-视频技术

文本生成视频技术也是建立在文本图片技术基础之上，它主要是通过文本图像对和无文本视频来学习，根据文本理解生成几个关键帧。建立插帧模型，基于关键帧补充关键帧之间的图片，提高视频流畅度。最后再进行每帧分辨率的提升，提高整体的视频质量。AI 在文本生成视频的技术相对较新，Meta/Google 在去年 10 月分别官宣对应的视频生成器 Make-a-video/Imagen Video，目前只公开了研究论文和几个官网示例，但得益于文本图片质量的飞速提升，可以预期很快图片视频技术也将大幅提升能力。

Google Imagen Video 生成“一个开车的熊猫”

虽然目前通过文本生成视频技术只能生成简单的变化或动作、无法生成基于文本描述的细节以及多场景复杂故事的视频。但通过 AI 对视频内容进行智能处理技术，已经有很多让人惊艳效果，这部分在本文第 2 章节详细展开介绍。

④ 智能字体

日本筑波大学开发了一套以人工智能为基础的汉字字型设计系统，可以让原本需要人工设计上万字的流程，缩短为只要完成五个手工汉字的设计，AI 就可以自动生产超过 14,000 个相同字体的汉字。

该系统通过学习大量已有字体，再从这几个手工设计的字体范例中提取特征，通过调整参数值输出为新的字型。而且它使用的是矢量图，可以将其输出为字体文件，让字体制作所需的时间大大缩短。

2. AI 特效及内容处理

① AI 视频特效

视频风格化

在线视频编辑网站 Runway 于最近发布了 AI 视频处理工具 Gen-2，该工具针对视频处理的能力很强大，不仅可以通过文本、文本+图片、图片生成视频，还可以对视频进行各种风格化处理，比如只需要把你想要叠加的风格用图片或者文字叠加上去，可很快按要求生成风格化的视频。

原视频通过添加一张驱动图像即可生成风格化视频

智能 CG 角色替换

由《头号玩家》主演 Tye Sheridan 创立公司推出的 Wonder Studio 是一个可以为上传的 CG 模型自动制作动画、HDR 打光、合并到真人场景的 AI 工具。

② AI 图形特效

智能编辑

Adobe 最近发布了 AI 编辑工具 Firefly，虽然目前可体验功能仅有图片生成、文字效果 2 项功能。但根据介绍来看它具有强大的图片编辑能力，包含随手涂鸦作画、上传草图即可生成矢量字体文件、一键修改画面场景、关键词生成设计模板等等能力；

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

智能生成

NVIDIA Canvas 早于 Adobe 发布了自家的涂鸦出图能力，帮助 设计师 加快概念图创作探索，并腾出更多时间进行创意表达。用户通过调色板绘制简单的形状和线条，AI 模型会在屏幕上实时呈现出与之相呼应的风景图像。用户可以通过切换材质来自定义图像效果，Canvas 提供 9 种风格的可视化效果和 20 种不同材质，比如将雪地改为草地，图像将呈现从冬日仙境变为热带天堂的视觉感受。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

③ AI 辅助 UI 设计

AI 生成 UI 版式

近期已经有团队开始实践在 AI 辅助下的 UI 设计。比如 Habitable 开发的 Figma 插件“AI designer”，在展示视频里，它可以通过一段描述生成复杂的页面。

AI 生成内容素材

Microsoft Designer 是一款智能生成图文内容的设计工具，搭载 Dall-E2，根据用户输入文字指令，可以为用户自动生成设计素材，如社群贴图、营销 Banner 等高质量的排版。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

3. 塑造虚拟人

虚拟人是近年很火的领域，虚拟人应用前景广阔，如虚拟偶像、助手、主持人等等，是未来虚拟世界最重要的存在之一。如何塑造虚拟人的人格化特征，实现虚拟人功能，背后都依托的是 AI 技术的加持。

在虚幻引擎最新发布会上，发布了 MetaHuman 新功能 Animator。它可以让你使用 iPhone 或立体头戴式摄像机（HMC）在 MetaHuman 角色上以高保真动画的形式重现任何面部表演。有了它，你就能捕捉到演员表演中的个性、真实感和保真度，将每个细节和微妙变化转移到任意 MetaHuman 身上，在虚幻引擎中为他们注入生命力。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

三、AI 对设计的价值 1. 助力设计师表达创意

设计师可以将 AI 工具应用在工作中，比如当需要探索视觉概念时，可以使用简单的文本说明生成一些素材供创意师提供灵感和参考；还可以借助 AI 将已有素材尝试其他不同风格元素，探索可能性；再有就是利用一些 AI 图形处理工具，快速生成系列内容比较筛选。

比如，数码艺术家 Karen X Cheng 和时尚杂志《Cosmopolitan》团队一起创造了首个由 AI 生成的艺术封面。虽然渲染这张图片只用了 20 秒，但团队为了达到更满意的效果，将大量时间投入到创意方向的讨论和关键词的挑选与组合上，他们尝试输入了数百次创意关键字组合进行调试，最终找到了想要的效果。

使用提示词 “a strong female president astronaut warrior walking on the planet Mars, digital art synthwave.”生成的几组图像

使用提示词 “wide-angle shot from below of a female astronaut with an athletic feminine body walking with swagger toward camera on Mars in an infinite universe, synthwave digital art.” 生成的最终封面效果，

2. 提供更新颖的营销方式

AI 如今也成为广告营销领域必不可少的工具，通过 AIGC 或 AI 内容编辑功能，来实现营销内容的个性化、可互动性等特征，来强化产品吸引力，提升品牌形象。

亨氏 AI 番茄酱

番茄酱品牌亨氏 Heinz 去年借助 AI 自动生成图像的话题制作了趣味性的广告，向广大消费者证明了人工智能更喜欢亨氏番茄酱的事实。广告中，亨氏利用 Dall-E2，输入“蕃茄酱”后，AI 自动生成了一款有亨氏经典外型包装的番茄酱。当继续输入“文艺复兴番茄酱”、“印象派番茄酱”、“外太空番茄酱”等更复杂的文字指令时，生成的图像结果无论在风格上如何变化，所呈现的番茄酱外型和 LOGO 位置都与亨氏番茄酱极为相似，这也印证了广告中的那句话：“连 AI 都认为番茄酱就是亨氏”。同时，亨氏还邀请了世界各地的粉丝参与到用 AI 创作番茄酱的活动中，粉丝们通过输入各种词汇，生成怪异、有趣的番茄酱图像，并发布到网络，亨氏将其中较为出色的案例分享到了官方社交平台，利用 AI 生成视觉效果的热点，成功帮助品牌进行了推广传播。

QQ 音乐 MUSE AI 具像化歌曲海报

AIGC 已经遍布 QQ 音乐的各处细节中，从听歌体验、视觉呈现、社交分享等多个维度，做了不少有趣的创新尝试。与以往的歌曲专辑封面播放不同，QQ 音乐新上线的 AI 播放器是国内音乐行业首个在 AIGC 领域运用的视觉尝试，其原理是通过在 AI 工具输入关键词，让 AI 算法组合各种元素，生成有创意的播放器风格。现在，QQ 音乐已推出机械装甲、雪山白、积木游戏、工业灰等 6 款供用户选择，据悉还将结合场景，有更多样式可以期待。

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

3. 扩展品牌语言

设计师可以寻找更具创造性的方式与 AI 合作，比如创作品牌语言。杰西卡·沃尔什 (Jessica Walsh) 使用 AI 为虚拟核能影响者 Isodope 创建品牌语言，将核能重新塑造为一种向善的力量。Isodope 是巴西模特伊莎贝尔·博梅克 (Isabelle Boemeke) 创建的在线角色，目标是利用 Isodope 超凡脱俗的形象和创意风格在 TikTok 上吸引人们的注意力，来改变人们对核能争议的看法，倡导将核能作为解决气候变化和能源紧缺的手段。

Isodope 的品牌元素和排版完全由 AI 打造，Walsh 团队将创意想法通过 DALL-E，创造出一种全息插画风格的品牌语言，通过易于分解的视觉元素和前卫的风格表达来缓解人们对核的恐惧，Walsh 说：“你必须推动这个工具并学习如何与它对话，才能产生更复杂、更有趣、感觉更原始的东西。” DALL·E 还帮助品牌创建了各色贴纸，以便于创建社交资产。借助 AI 使 Isodope 团队围绕核能概念扩展和创造更多的品牌元素。

4. 打造全新的交互方式

依赖于 AI 支撑的虚拟人和 Chatgpt 能力，未来人们面向虚拟世界的交互模式将由原来的文本、图片、视频等内容升级为拟人化的互动方式。这将大大提升虚拟产品互动的友好性，同时提升用户对虚拟产品的情感链接。

日本便利店巨头罗森(Lawson)在东京开设首家配备虚拟店员的“Green Lawson”门店。接待顾客的为显示屏上的虚拟店员，一项研究数据表明，它通过线上发放优惠券领取率是 10%，通过人发领取率为 70%，而通过虚拟人发领取率为 57%，可见未来这种交互方式在商业领域的广阔前景。

四、总结 很多人看到 AI 的发展现状，不免担心 AI 未来会在很多方面取代设计师。事实上大可不必如此看待问题，AI 虽然在图像生成、图像编辑和插图排版等方面有着让人赞叹的效果。但就目前来看，它的内容生成还存在很多问题。即时 AI 在将来内容生成上已经炉火纯青，在情感表达、创意等很多方面，AI 还需要人的调教和指导才能产生很好的价值。

得益于 AI 在设计领域的快速发展，人工智能势必会大大简化设计师的工作，提升设计师处理各种图像的效率。设计师也不必将时间浪费在去除背景等费力、重复的任务上，并且将有机会以最少的努力探索更多创意。学习和研究 AI 在设计上最新的能力，将这种能力找到一个很好的契合点，应用在项目中，必将为为项目带来不一样的亮色。

参考文献：

AI 艺术的背后：详解文本生成图像模型 | 集智俱乐部 极市开发者平台-计算机视觉算法开发落地平台 如何通俗理解扩散模型？- 知乎 一起用 AI | AI 工具导航 | AI 教程 | AI 集合 | OpenAI 建模师也危险了？OpenAI 公布 Point-E，AI 迈出“生成 3D 模型”第一步 | 游戏大观 | GameLook.com.cn 欢迎关注作者微信公众号：「腾讯ISUX」

工作中 B 端数据图表使用频率不多，但真的接到需求时，自己也会询问周围同事或网站，图表的类型有哪些？由哪些元素组成、每一类型的图表应该对应的场景有哪些？为了设计图表时得心应手，今天我们先一起探究下有关图表的基础知识。

工作中 B 端数据图表使用频率不多，但真的接到需求时，自己也会询问周围同事或网站，图表的类型有哪些？由哪些元素组成、每一类型的图表应该对应的场景有哪些？为了设计图表时得心应手，今天我们先一起探究下有关图表的基础知识。

本文以数据图表的定义、优势、构成、分类、应用场景罗列及可让大家工作效率翻倍的网站和插件这六个部分，作为本文对图表的初步了解，后续我们将以系列文章形式挖掘“数据图表”这座宝藏。既然发现宝藏，定能够淘到自己想要的“金子”，带走它！下图为宝藏地图，请先领取！

更多图表干货：

7个实用技巧，教你搞定可视化图表 ​ 可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。

阅读文章 >

一、图表的定义 图表是将研究对象的数据进行可视化表达，它可以呈现数据的整体形态、趋势、对比等；更加直观明了，同时也不会分散人的注意力，有利于快速展示大量的数据关系，图表是数据的表现形式之一。

例如：在数据可视化 图表设计 出现之前，我们多用于 Excel 表格进行罗列数据、计算等，如下图把表格中的数字以图形的形式进行展示，对于用户来讲图形化要比一长串“数字”更吸引眼球。

二、图表的优势 作为一个设计师，接到需求时，面对庞大的数据，也会挠脑皮，问烦同事；但办法总比困难多，大多数设计师会利用“可视化”图形的方法，在工作中因数据具有针对性变得高效、直观性显得更易理解、数据样式组合会更加的实用等这 3 个优势，做到这三个优势在整体上降低用户阅读数据的门槛和分析；那我们就结合例子分别看看这三个优势：

第一：针对性

在工作中我们也会遇到不同类型的数据需要使用不同的图表形式，例如曲线图一般会用来显示在一个连续的时间或者时间跨度上的变化，它的特点是能够看到事物随着时间的变化趋势；柱状图使用垂直或水平的坐标显示类别之间的数值比较，其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。我们使用图表时，需要先对数据属性进行判断，再对哪种形式的图表作出选择。

第二：直观性

图表与文字相比，在数据的表现上非常直观。如下图，从只有“数据”到以折柱图的形式呈现，不仅可以让用户一目了然地看到数据，还能让用户将数据进行对比。

第三：拓展组合

根据数据属性与图表对比，图表有更强的拓展性，可以进行组合使用；图表拓展性一般是根据基础图表样式，以及数据的增加，拓展出系列或类似的图表，例如我们常见的基础柱状图，由于数据属性多样可以衍生出双向柱状图、堆叠柱状图等。

三、图表的元素构成 了解完什么是图表及它的优势后，接下来我们来看下图表由几个的基础部分组成。图表是由：标题、坐标轴、图例、图形、信息标签等组成。如下图示例：

标题：标题简洁明了，表达图表主题，有些图表只有一个主题，也有主标题与副标题； 坐标轴：数据关系映射在坐标系的视觉展示，包括轴线（纵轴、横轴）、标尺； 图例：图表中信息和数据较多，需要用来数据属性区别，一般会用图例对内容与数据进行说明； 信息标签：鼠标在悬停时出现、固定在图形上展示数据信息，这也是常见的交互方式，也是对当前数据的内容提示信息的一种方式； 图形：数据在视觉展示中映射出来的图形，可以反映数据差异与关系，例如常见的柱状图、饼状图、折线图； 如下图在工作中出现或常见的小错误，会遗忘标题、图例、信息标签等。

四、图表常见的分类 其实在了解图表的分类和概念过程中发现，图表是我们工作中使用图表类型的依据，在了解图表的过程中，发现安德鲁·阿伯拉（Andrew Abela）制作的一份图表类型选择指南，他将图表展示关系可大致分为 4 类：比较、分布、构成、联系四种类型（见下图）。此图更多的帮助我们思考图表的起点和思维，在设计实践中并不都是每个人认可的组合方式。

数据图表类型有很多，考虑设计师们习惯于搭建组件库提高团队效率，凡子整理了自身工作中常见的使用场景，并且从比较、占比、城市分布、排名等维度进行归纳，将图表分为：柱状图、折线图、饼状图&环形图、面积图、子弹图、雷达图、漏斗图等常见类型并做简单的使用场景概述，后面也希望做为图表类型进行详解。

1. 柱状图：多使用垂直或水平的坐标显示类别之间的数值比较。柱状图除了单条柱状图，还可以多条柱状对比，在信息过多，或者对比分类过多时竖向排布的柱状图（如上图左上一）也是个不错的选择。

2. 折线图：折线图也被称为曲线图，一般会用来显示数据在一个连续的时间或者是时间跨度上的变化，他的特点是能够看到事物随着时间的变化趋势。

3. 饼状图：广泛应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。

4. 面积图：适用于百分比堆叠面积图，例如：几个月安卓手机各个版本在市场的占比情况；但是面积图不适合的用在“分类数据的比较，如下图错误与正确的使用。

5. 子弹图：子弹图更适合显示阶段性数据信息，例如季度的数据显示

6. 雷达图：雷达又叫戴布拉图、蜘蛛网图、星图。是由一个点向 3 个或者 3 个以上不同维度的数据，它能够用一张图呈现多个纬度的数据量。它的对象属性往往是多维度的。

7. 漏斗图：适用于流程流量分析。如业务上规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。

以上为大家简单介绍常用的 7 种数据图表类型和简单场景（后续我们将作为另一篇文章详解）。

感谢大家已经阅读到此，接下来可以开启法宝箱之一：推荐阿里的 Antv （网站建议收藏： https://antv.vision/zh/ ）此网站中有图表分类目录，包含比较、趋势、组成、占比、分布、排名、关系、空间等 8 个大类。快快收下此法宝，图表效率要翻倍！

五、图表的应用场景罗列 随着数据可视化趋势，其中数据图表使用场景也可以分为信息图表设计、B 端后台界面设计、可视化大屏设计、系统后台检测、移动端界面设计、游戏数据 UI 这六大场景，由于文章篇幅问题，在此篇暂不过多赘述。

六、插件推荐和网站合集 第一：插件

https://www.figma.com/community/plugin/731451122947612104/Charts https://www.figma.com/community/plugin/734590934750866002/Chart https://kitchen.alipay.com/

第二：数据图表网站合集

https://dycharts.com/appv2/#/pages/home/index https://chartcube.alipay.com/ https://psdrepo.com/free-psd/analytics-charts-freebie/ https://echarts.apache.org/en/index.html

七、总结回顾 以上内容就是凡子在深夜码字、整理图片的成果，我们从图表的定义、优势、类型及简易场景描述、过程中的小 Tips，网站和插件等六个部分对图表进行学习和了解，希望可以为想要了解图表知识的伙伴们解惑、带来帮助，荣幸之至，此外还请期待图表系列（二）《B 端后台产品的图表类型及使用场景详解》。

欢迎关注团队微信公众号：兆日 UCD

想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。本文总结了做好 UX 文案需要掌握的内容，希望对你有所帮助。

想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。本文总结了做好 UX 文案需要掌握的内容，希望对你有所帮助。

更多 UX文案 干货：

腾讯出品！5000字干货帮你重新认识UX文案（附实用技巧） 讲到 UX 文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。

阅读文章 >

UX 文案它在《用户体验五要素》中处于两个层级，一个是结构层的信息架构，一个是框架层的信息设计。

所以，在整个体验设计或者说交互设计过程中都是非常重要的，承上启下引导、连接用户操作节点之间的关系链条作用。

因此，想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。而精准、清晰的提示文案会让用户在无意识的操作中顺畅、愉悦的完成任务目标。所以，我们在考虑提示文案的合理性和适时性的基础上，还需要考虑两大设计方向的平衡：用户理解与平台统一。

当然，说得好像门槛很高，但是做起来并不是特别困难。接下来，就一起和我看看到底做好 UX 文案需要做好哪些内容吧……

一、信息结构 其实说起来，UX 文案对于做体验设计或产品的人来说，既熟悉又略陌生，其实UX 文案与交互设计真的密不可分，但是又有很多差别的地方，交互设计更多从行为层面，而 UX Writer 更多从“意”的层面。好像是空无飘渺，但是它又是确确实实存在各种场景中，例如接下来的五大场景。

1. 五大提示类型 （1）指引提示场景

指引提示场景不管是 to b 还是 to c 都是不可忽略的重要场景，它主要体现在：输入前-预防、输入中-校验反馈、输入后-容错（单个必填输入、全部必填输入），其中针对输入后的逻辑规则上，很多产品都有不同的逻辑标准，具体哪种更好，并没有具体标准，主要还是看产品目标、用户目标的侧重。

①输入前文案引导（预防）

②输入中校验反馈

③输入完成提示文案

输入完成后的承载在很多产品中都会选择全局提示承载失败结果，但是由于产品对于组件认知的缺乏，导致很多场景下，用户无法获知失败原因，也不知道该如何解决。使得体验感变差。

（2）防错确认场景

其实针对防错确认这个原则，我们也最好不要过于侧重了，毕竟有些操作项如果可以前置判断，避免用户进行无效的操作更胜于事后容错或再犯错，体验的核心其实就是一种情感的宣泄。我们要设计好用户完整的操作路径，使其保持住目标完整性的情感表达，不至于中途不断的产生其他情绪。

（3）反馈提示场景

2. UX 文案八大原则

八大 UX 文案原则，其实在我们做交互设计中的信息设计、信息架构过程中也会涉及，只是在具体落实的过程中，我们并没有那么严格的去执行，毕竟交互设计的侧重点在于用户的行为侧，而用户具体的认知侧，在落实过程中并没有那么仔细或严格。那么这八大具体原则，这次我们可以仔细去一一分解一下。

（1）风格统一

在 UX 设计过程中，UX 文案的语言风格需要与产品定位相符。一般偏向直接面向用户的产品项目，会考虑更多情感化表达风格以拉近距离，而偏向企业服务类型的产品，更多侧重任务效率，整个文案风格会偏向严谨正式一些。而不管开始选择哪种风格，都需要从全局考虑。使得整个产品的文案提示趋于统一。

（2）清晰简洁

考虑文案的时候，不要和用户玩曲折婉转，应该直接，单刀直入，最大限度的降低用户思考成本。就如《Don’t make me think》一书倡导的：让用户能不思考的尽量不要思考。间接、暧昧模糊的说法，生僻和过于“委婉”的用词，都应尽免则免，因为文案是沟通的工具，只有最有效的传递信息才是它的目标。复杂的修辞和句式、“只可意会”的深层含义，都是不需要的。

（3）用词一致

文案用词，同功能、同属性应保持一致。不同模块，同功能也应该保持一致。减少用户操作学习的成本，提升整个产品的使用效率。

（4）用词精准、专业

按钮文案与对话框文案应该精准传达意思，而不是赘述其他信息。特别是与用户行为密切相关的任务路径上，更应该以精简文案传递完整意思为主。

（5）平等亲和语气

不管是不是直面用户的产品，在文案设置上都不应该采用“不能”、“不要”、“不可”、“必须”、“要”等命令式的语态词，让用户产生与产品的距离感

（6）主动语态

相对于使用宾语作为主语的被动态，用户作为主语的主动态，与用户直接相关联，能调动其情绪，更能让用户直接、毫无负担的接受信息。

（7）动宾结构

动宾结构偏向适合有明确动作指向的场景，在表格动作按钮，对话框底部 cta 按钮，建议以动宾结构为主；主谓宾结构偏向叙述指向，部分动宾结构文案语序不适合的场景，可以考虑采用主谓宾结构语序弥补偏动作性行为指向场景。

（8）结果+建议/原因

在事后反馈文案的时候，除坚持之前原则外，还应增加对用户下一步动作指向的文案。引导用户行为目标，不要让用户在当前页面产生迷茫、无措。

3. UX 文案通用性规则 通用性规则主要是从用词、中英文、标点等方面进行了细节的说明，当然包含的内容还可以更丰富，只是限于篇幅以及使用频率进行了删减，欢迎大家与我私信补充更完整。

（1）易混词表

易混淆词表主要是列举一下在 B 端产品中很容易混淆的词语，避免我们在设计 UX 文案的时候文不对题，闹出笑话。当然这些也不是全部场景。

动词类易混词是比较常见的，我们在交互设计过程中，很难注意这其中的细节差别，但是作为一个 UX 文案这块才是工作的重要部分。

除词的属性之外，其他细节也是很容易忽略的。但是我们在考虑交互事件以及行为动作的时候，就需要利用合适的文案来精准的传递我们的想法和目标。

（2）数字

统计数据在一般使用场景下使用阿拉伯数字展示，可以高效传递信息范围和感知信息的速度。在其他特别使用场景下，还是需要使用中文数字展示。

（3）日期与时间规则

时间格式需要与 web 端和移动端各时间组件结合考虑，目前日期与时间的内容展示更多的问题主要是因为格式不统一导致的，所以，在结合组件进行输入的时候，就需要考虑好日期与时间的展示规则标准。

（4）中英文排版规则

这里说的中英文混排主要是中文结合英文一些专有名词或单独的一个句子的场景，我们在进行中英文排版的时候，需要注意一些细节点。（非特别要求，不建议整个单词都大写）

（5）标点基本规则

只有中文或中英文混排中，使用中文全角标点； 中英文混排中如果出现整句英文，则在这句英文中使用英文/半角标点符号。

通过以上方面的交流，我想大家也有所认识了。UX Writer（交互写手）或者说 UX 文案的岗位其实并不是那么简单的做下文案的撰写，还需要通晓一定的语言学、语义学、应用语言学、应用心理学，甚至不同国家/地区的标点符号标准规范，当然，必然还需要熟知交互设计方面的知识，否则在考虑用户路径节点的时候，用户行为的触发轻重和产品设计的目标、用户目标就会背道而驰。

UX Writer 在当前 AIGC 的潮流下其实不应该会被取代的，毕竟真正触动人内心的还是需要人本身，而当前 AI 智能的出现，我们需要从工具角度来看，它会是我们的一个助力。当然，这并不代表 UX 文案就一定永远不可替代，需要我们不断的充实自我，从人属性上多下功夫，只有不断的更了解人，才能更好的利用好 AI 智能。

回顾开头所说的-UX 文案具体落实规范，我将在下一篇文章“UX 文案具体怎么写，可以考虑从这些细节入手”与大家继续聊。当然，这个时间不一定就是下一篇，如果有可能，我想尝试专职从事这个岗位之后，再分享具体的执行策略。