之前的文章我们主要讲述了搭建设计系统前的一些准备工作，本篇开始我们就进入到具体的搭建内容了。由于笔者是做 HMI 设计的，所以很多内容是针对 HMI 设计来讲的，希望大家可以举一反三，得到自己想要的东西。上期回顾：设计系统搭建全流程：开始前的准备工作上一篇文章我们主要讲的是设计系统的必要性，接下来我将会继续用后续...

之前的文章我们主要讲述了搭建 设计系统 前的一些准备工作，本篇开始我们就进入到具体的搭建内容了。由于笔者是做 HMI 设计的，所以很多内容是针对 HMI 设计来讲的，希望大家可以举一反三，得到自己想要的东西。

上期回顾：

设计系统搭建全流程：开始前的准备工作 上一篇文章我们主要讲的是设计系统的必要性，接下来我将会继续用后续的文章详细讲解怎么搭建设计系统，希望可以帮助到有需要的人。

阅读文章 >

接下来我们进入正题，本篇文章我们主要讲述全局样式的搭建过程，全局样式按照我构建的组件库分类来讲，包括：栅格系统、颜色样式、字体样式、图标样式。首先我们先来讲述下栅格系统：

一、栅格 栅格是遵循一定的规则，运用固定的网格，进行页面的布局设计，使布局版面简洁有规则，提高设计效率与统一性。

简单来讲：就是使用垂直或者水平的参考线，将画面简化为有规律的格子，并用这些格子作为参考，以构建秩序性版面的一种设计手法，基于构建的网格来定义信息区域的框架，以保证页面的每个区域都能够规则的排布。

1. 基本构成

在栅格的使用中，我们会对不同区域进行定义，一个栅格系统主要由 Container：容器、Columns :列宽、Gutters：水槽、Margin：内边距 四部分组成。

Container/容器：需要布局信息的版面区域，栅格系统的其他三大元素都要基于该容器的大小去计算。

Columns /列宽：从上到下的垂直空间区域，是承载内容的容器。

Gutters/槽：相邻两个栏之间的间距，把控着页面的留白与呼吸感。

Margin/内边距：可以视为安全距离。栅格和内容区域的距离间隙。

2. 计算公式

当对区域内的单元格进行栅格标注时，我们可得出公式为：

NC=N*Column+（N-1）*Gutter+2*Margin

当屏幕进行适配时，相同密度下，通过调整栅格中 Column 的数值进行适配。

3. 应用

笔者从事 HMI 设计，所以一般来讲，在构建设计系统的时候栅格采用 12 栅格体系，既能保证页面元素的排列多样，也可以不至于页面元素过于凌乱。

元素的排布应落在 Column 上，而不是 Gutter 上。

4. 怎么找到适合的栅格

在做 HMI 的栅格的时候，不同于 PC 端，当一个车机系统架构出来的时候，基本上容器宽高就定义好了，所以对于车机的屏幕来讲，它的栅格系统宽高属性是固定的，那么接下来就是找到一个适合的栅格系统。

首先要说明的是，栅格系统不是臆想出来的，它是为了界面视觉更好呈现，帮助 设计师 快速布局的。所以我们首先要根据 keypage 界面，判断出视觉风格，根据视觉风格构建合适的栅格。

上图是一些车机系统的界面，从其中我们可以看出来，有的界面属于紧凑型，有的是属于宽松型，这就是视觉风格的表现，同时也是我们去制作栅格系统需要考虑的问题，对于紧凑型的视觉风格，Gutters 会小一些，对于宽松型的视觉风格，Gutters 就会大一些。

当我们对视觉风格有一个基础把握以后，接下来就进入到制作栅格体系的过程了。在这里我一般会使用 Numbers 进行栅格体系的构建，通过输入不同的参数，构建出不同的栅格数据，以供后续进行验证选择。比如：对于一个 1728*756 的应用区域来讲，我们构建的栅格体系可以有如下几种：

首先根据栅格计算公式计算出不同 Gutters 下 Column 的极值，然后根据不同的 Gutter 制作不同的栅格参数，以便筛选出符合要求的栅格数据。在这里凭借一些经验来进行输入。

Gutters 以 8 作为作为栅格中的最小单位，如果无法获取合适的栅格，可以使用 4 为最小单位。 所有参数数据尽量选 2 的倍数，不可出现小数点，如果无法找到合适的栅格，才考虑进行打破。 Margin*2 一般小于 Column*1 Gutters 一般不小于 8dp，不大于 48dp …… 根据上面的经验判断，选出了十个可以使用的栅格体系，如下图所示。然后就是对选出来的栅格体系进行具体界面验证，通过对一些页面进行栅格布局，来考量哪个栅格体系更合适，以便确定需要的栅格体系。

在本例中，可选择栅格体系范围还是比较大的，但是到了具体的项目中，很可能遇到更复杂的情况，发现按照上面的逻辑无法选择出任何一个栅格体系，那么就需要继续优化逻辑进行进一步的筛选了。

二、颜色 颜色体系在产品中主要起到传递信息、创建层级、表达情感、构建一致性的目的。

1. 构成

一般来讲，在构建颜色体系的时候，品牌色已经定义好了，不管是从公司 VI 还是项目风格提炼而来。然后根据定义好的品牌色构建其他色彩，可以是邻近色、补色等不同的颜色种类共同构建出一套完整的色彩体系。

对于 HMI 设计来讲，不需要像很多设计系统那样子构建那么多色彩，那么多梯度，只需要按照项目来打造自己项目的色彩体系即可，如下图所示：

色彩体系主要定义了品牌色板、辅助色板、警示色板、中性色板、功能色板 五部分。

品牌色板：常用颜色，作为系统主色彩贯穿整个系统中，是系统中最核心、最高频使用的颜色，常用于强调信息、引导操作，并在很大程度上决定了系统整体的基调和风格。

辅助色板：用于重要程度较低的的操作或内容。

警示色板：应用于异常、危险操作以及警告提醒等场景。

中性色板：针对正文和图标，占位符、分割线、背景等元素和组件，根据不同的使用场景使用恰当的正文色彩。

功能色板：功能色是指用于特定场景、表达特殊语义的颜色，例如成功、警告等状态颜色。

上述色彩体系只是我平时搭建设计系统时候用的分类方式，并不适用于所有项目，大家可以根据自己具体的项目搭建属于自己的色彩体系。

三、字体 字体是界面设计中最基本的构成之一。一套设计系统中通过合理的使用字号、字重和颜色来强调界面中重要的信息。

一般来讲，一套设计系统中只使用一种字体，因为多种字体的混合使用会使界面看起来零散和草率。

不同于移动端和 pc 端，不同的车厂都会有不同的字体需求，所以在制作字体体系的时候，需要根据具体的字体集进行评估。

1. 字重

系统中为了区分界面中信息的重要程度，可以通过不同的字重进行区分。HMI 系统中为了避免界面混乱，一般定义两种到三种字重等级。

2. 行高

字体行高的引入主要是为了对齐相同字号的不同字体，比如：中英文、字符和数字的混合排版等。所以为了界面统一性，我们会定义每种字号的行高。

3. 字体类型

为了统一视觉和排版效果，会对所有使用的字体进行规范，生成固有的字体类型，设计师使用定好的字体类型进行设计，而不可使用其他的字号和字重。下面的是我常用的字体类型，仅供参考。

四、图标 图标作为界面构成的重要元素，并在一定程度上影响着整体界面的设计效果。

车机中的图标大致可以分为两种类型：通用型图标和业务型图标。我们这里主要聚焦在通用型图标。

1. 规范

栅格作为图标绘制的底层结构，设计的基础。我一般选择以 160*160 dp 的尺寸作为图标绘制的统一栅格尺寸。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。

2. 风格统一

对于系统设计来讲，会充斥着各种不同的图标类型，那么一套统一视觉风格的图标就会显得尤为重要，上面我们通过使用图标栅格规范来保证视觉重量一致，但是还有很多的细节也会影响到图标的风格统一，比如：描边还是填充、线宽粗细、圆角大小、倾斜角度、切口、修饰符位置等等一系列的问题都在影响着图标的最终展示效果，所以我们在制作图标规范的时候，这些内容都需要进行定义。

3. 尺寸

由于图标使用的方式多样，出现的位置各有不同，所以我们有必要对我们的图标设定一个大小梯度，这有助于尽可能的减少我们视觉不统一现象。比如：40dp 和 42dp 的图标使用在 list 中都可以，或者说，从视觉来讲，大差不差，如果不对图标大小进行限制，那么不同的设计同学就可能使用不同大小的图标。这并不是一个良性的过程，所以我们有必要对图标的大小梯度进行设定，基于本人 HMI 的经验来讲，一般我会把图标分为：24*24、32*32、40*40、48*48、64*64、80*80、120*120、160*160 这八种尺寸。

4. 线宽

基于上述图标尺寸和视觉风格的定义，接下来想和各位探讨一个问题，那就是线条粗细。因为显示设备一般采用方形像素，那么非整数像素会以灰度显示，所以对齐像素点是影响图标是否清晰显示的最重要的因素。

我们既然设定了图标的大小梯度，那么为了更好的呈现，我们期望可以在每种图标尺寸下都可以保证清晰显示，也就是说线宽都是整数，但是现实往往并不那么完美，在图标放大缩小的时候势必会出现小数点的情况，那么我们如何去比避免呢？

对于早期的显示设备来讲，屏幕像素质量不高，那么只有一条途径：对每种不同尺寸下的图标进行单独绘制，以保证在每种尺寸下都可以完美展示，这是技术的限制，同时也是解决这个问题最好的方法。

但是对于当下的显示设备来讲，屏幕质量已经极大提升，并且现在版本更新迭代加快，很多时候时间就是效率，所以需要尽快的完成设计工作，所以大家现在更倾向于使用一种尺寸进行放大缩小生成其他的尺寸。

所以在绘制图标的时候，我们需要去考虑选择合适的线宽，尽可能的让图标可以清晰的展示，尤其对于车机屏幕来讲， 并没有手机或者电脑屏幕像素那么好，所以这件事就会显得更加重要。在这里我一般还是会用 Numbers 进行图标不同尺寸线宽计算。如下图所示：

通过上图可以看出，为了尽可能保证线宽是整数，在没有的情况下，尽可能使用.5，减少特殊数值的出现，所以能够满足情况的很少。在 160 尺寸下，线宽为 20 dp 是最好的，但是当图标为 24 dp 时线宽为 3，会显得太粗，所以下一级合适的就是线宽为 10 dp。

这里只是我的一些经验之谈，大家在制作图标时，可以参考这种思维模式，而没必要完全套用，毕竟线宽粗细首先是由视觉风格决定的。

总结 本篇内容主要聚焦在全局样式的搭建，以及我在具体工作中遇到的一些问题的具体思考，为大家提供一种思路。希望本篇文章可以对你有所帮助。如果大家有什么不同的见解，欢迎留言，我们一起探讨，谢谢大家。

后续的文章我将继续为大家介绍设计系统的控件组件的搭建流程，敬请期待～

大家好，这是 2023 年 4 月的第 4 波设计干货合集！这一期干货打头的是 2 个素质不错的合集和导航类工具，一个是精选的 UI 类素材网站，一个是全新的 AI 工具导航 AI Scout，而之后的几个工具基本上都是 AI 在不同细分领域的应用，从生成 PPT 到室内设计，从简单 3D 模型视觉化设计到 UI...

大家好，这是 2023 年 4 月的第 4 波设计 干货合集 ！这一期干货打头的是 2 个素质不错的合集和导航类工具，一个是精选的 UI 类素材网站，一个是全新的 AI 工具导航 AI Scout，而之后的几个工具基本上都是 AI 在不同细分领域的应用，从生成 PPT 到室内设计，从简单 3D 模型视觉化设计到 UI 设计优化文案，大都相当实用，一定不要错过！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第三波！2023年4月精选实用设计工具合集 大家好，这是 2023 年 4 月的第 3 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、超强精选 UI 设计资源导航 链接直达： https://uigoodies.com/

务实一点，用对素材能够省出大量的时间，无论是在做平面设计还是 UI 设计的时候。这个名为 UI Goodies 的素材合集网站，将网上最佳的 UI 相关的设计资源汇聚于此，它根据常用的素材类型分成了图标、插画、灵感、配色、字体排版和图片 6 个大类。虽然每个门类下的素材数量都只有 2 位数的数量，但是这些素材大都经过仔细的筛选，素质相当过硬。

2、专门帮你发掘 AI 新工具的 「侦察兵」 链接直达： https://aiscout.net/

紧随着如今 AI 工具的「寒武纪大爆发」，类似 AI Scout 这样的 AI 工具导航也越来越多，它们将上百个最新出现的 AI 驱动的工具分门别类，方便企业、设计师、开发等对于这类工具有相对迫切需求的用户。AI Scout 将最新的 AI 工具的名字、类型、链接、简单介绍和付费与否都罗列了出来，一目了然地呈现在主页上，方便查看。如果你也正在寻找趁手的 AI 工具，AI Scout 可能是个找东西的好地方。

当然，最好用的还是我们优设的AI工具导航，分类全面，是百万设计师的AI导航首选： https://hao.uisdc.com/ai/

3、移动端终极 AI 辅助 3D 细化生成工具 链接直达： https://glyf.in/

这个名为 Glyf AI 的移动端 APP 介绍起来略有一点拗口，它其实是将 AI 生成的技术和 3D 设计结合到一起，它可以借助 AI ，在非常简单的 3D 模型的基础上生成视觉效果炸裂的效果图，Glyf AI 本身内置了非常丰富的模型库和字体库，你可以直接调用这些素材作为 AI 生成的基础。在生成效果的风格上，你的选择也很多，比如写实风的人物角色，或者是日漫风，等等。你可以在这些生成的图片基础上进行更加深入的2次创作，制作海报，Banner 或者字体效果，然后应用到不同的场合。这个 APP 提供基础的免费试用，付费进阶版将会没有任何限制。

4、基于 GPT 的演示文稿生成工具 链接直达： https://www.magicslides.app/

随着 OpenAI 的 API 功能越来越丰富，第三方的优质工具数量也开始爆发式增长。最典型的就是基于 GPT 接口的演示文稿类的工具越来越多了，MagicSlides 也是这样的一个工具。它的功能和服务是通过 Chrome 浏览器插件和 Google Docs 集成到一起，安装好插件之后，你只需要将你搜集的内容摘要粘贴到插件的侧边栏当中，然后就能一键生成演示文稿。目前 MagicSlides 生成的文稿样式比较简单，免费生成的数量也比较有限，但是值得尝试。

5、基于 GPT 的室内设计生成工具 链接直达： https://gpt.collov.com/home

室内设计也是一个需要设计师投入相当多精力的领域，如今在 ChatGPT 的 API 协助之下，设计工作会方便很多。CollovGPT 就是这样的服务，你只需要将你想要改造的室内空间拍照，上传到 CollovGPT 的软件中，然后你只需要描述需求选择风格，它就能生成符合需求的各种室内设计方案，接下来你需要做的就是沿着这些方案来进行装修就好了！

6、借助 OpenAI 在 Figma 中改进文案的插件 链接直达： https://www.figma.com/community/plugin/1227295209727026769/Genie

Genie 是一个面向 Figma 的文案生成工具，它同样使用了 OpenAI 的 API ，借助人工智能，你可以在不离开 Figma 的前提下，直接改进已有的 UX 文案，翻译文本内容，生成新的文案，并且能够相对精确地将文案风格设置成友好的、随意的、直观的或者简约的，另外，它还能使用 Dall-E 生成图片素材，作为不错的素材补充。另外，所有生成的内容都可以保存下来，以便之后查看和使用。

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >

大家好，这是 2023 年 4 月的第 4 波设计干货合集！这一期干货打头的是 2 个素质不错的合集和导航类工具，一个是精选的 UI 类素材网站，一个是全新的 AI 工具导航 AI Scout，而之后的几个工具基本上都是 AI 在不同细分领域的应用，从生成 PPT 到室内设计，从简单 3D 模型视觉化设计到 UI...

大家好，这是 2023 年 4 月的第 4 波设计 干货合集 ！这一期干货打头的是 2 个素质不错的合集和导航类工具，一个是精选的 UI 类素材网站，一个是全新的 AI 工具导航 AI Scout，而之后的几个工具基本上都是 AI 在不同细分领域的应用，从生成 PPT 到室内设计，从简单 3D 模型视觉化设计到 UI 设计优化文案，大都相当实用，一定不要错过！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第三波！2023年4月精选实用设计工具合集 大家好，这是 2023 年 4 月的第 3 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、超强精选 UI 设计资源导航 链接直达： https://uigoodies.com/

务实一点，用对素材能够省出大量的时间，无论是在做平面设计还是 UI 设计的时候。这个名为 UI Goodies 的素材合集网站，将网上最佳的 UI 相关的设计资源汇聚于此，它根据常用的素材类型分成了图标、插画、灵感、配色、字体排版和图片 6 个大类。虽然每个门类下的素材数量都只有 2 位数的数量，但是这些素材大都经过仔细的筛选，素质相当过硬。

2、专门帮你发掘 AI 新工具的 「侦察兵」 链接直达： https://aiscout.net/

紧随着如今 AI 工具的「寒武纪大爆发」，类似 AI Scout 这样的 AI 工具导航也越来越多，它们将上百个最新出现的 AI 驱动的工具分门别类，方便企业、设计师、开发等对于这类工具有相对迫切需求的用户。AI Scout 将最新的 AI 工具的名字、类型、链接、简单介绍和付费与否都罗列了出来，一目了然地呈现在主页上，方便查看。如果你也正在寻找趁手的 AI 工具，AI Scout 可能是个找东西的好地方。

当然，最好用的还是我们优设的AI工具导航，分类全面，是百万设计师的AI导航首选： https://hao.uisdc.com/ai/

3、移动端终极 AI 辅助 3D 细化生成工具 链接直达： https://glyf.in/

这个名为 Glyf AI 的移动端 APP 介绍起来略有一点拗口，它其实是将 AI 生成的技术和 3D 设计结合到一起，它可以借助 AI ，在非常简单的 3D 模型的基础上生成视觉效果炸裂的效果图，Glyf AI 本身内置了非常丰富的模型库和字体库，你可以直接调用这些素材作为 AI 生成的基础。在生成效果的风格上，你的选择也很多，比如写实风的人物角色，或者是日漫风，等等。你可以在这些生成的图片基础上进行更加深入的2次创作，制作海报，Banner 或者字体效果，然后应用到不同的场合。这个 APP 提供基础的免费试用，付费进阶版将会没有任何限制。

4、基于 GPT 的演示文稿生成工具 链接直达： https://www.magicslides.app/

随着 OpenAI 的 API 功能越来越丰富，第三方的优质工具数量也开始爆发式增长。最典型的就是基于 GPT 接口的演示文稿类的工具越来越多了，MagicSlides 也是这样的一个工具。它的功能和服务是通过 Chrome 浏览器插件和 Google Docs 集成到一起，安装好插件之后，你只需要将你搜集的内容摘要粘贴到插件的侧边栏当中，然后就能一键生成演示文稿。目前 MagicSlides 生成的文稿样式比较简单，免费生成的数量也比较有限，但是值得尝试。

5、基于 GPT 的室内设计生成工具 链接直达： https://gpt.collov.com/home

室内设计也是一个需要设计师投入相当多精力的领域，如今在 ChatGPT 的 API 协助之下，设计工作会方便很多。CollovGPT 就是这样的服务，你只需要将你想要改造的室内空间拍照，上传到 CollovGPT 的软件中，然后你只需要描述需求选择风格，它就能生成符合需求的各种室内设计方案，接下来你需要做的就是沿着这些方案来进行装修就好了！

6、借助 OpenAI 在 Figma 中改进文案的插件 链接直达： https://www.figma.com/community/plugin/1227295209727026769/Genie

Genie 是一个面向 Figma 的文案生成工具，它同样使用了 OpenAI 的 API ，借助人工智能，你可以在不离开 Figma 的前提下，直接改进已有的 UX 文案，翻译文本内容，生成新的文案，并且能够相对精确地将文案风格设置成友好的、随意的、直观的或者简约的，另外，它还能使用 Dall-E 生成图片素材，作为不错的素材补充。另外，所有生成的内容都可以保存下来，以便之后查看和使用。

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >

作为公司的产品老油条，大小也面了不下 50 个产品，产品经验横跨 0~3 年、3~5 年。这么多次面试中，我每次都喜欢问一个问题“你大概了解几种 UI 组件（前端组件）呢，能举例说明一下吗？”然而每次给我的答复 80% 是“什么是组件？

作为公司的产品老油条，大小也面了不下 50 个产品，产品经验横跨 0~3 年、3~5 年。这么多次面试中，我每次都喜欢问一个问题“你大概了解几种 UI 组件（前端组件）呢，能举例说明一下吗？”

然而每次给我的答复 80% 是“什么是组件？”有时我会继续说“在页面内的所有内容都可以称为组件”候选人给我的反馈，还是一脸懵逼。

剩余的 20% 能答出“轮播、对话框、列表”等常见组件，就算产品基础能力一般的了。

我真的很想问他们，难道你在设计原型的时候，连自己做的是什么都不知道吗？那你的页面是怎么设计出来的？后续的一系列交互反馈，又是依据什么进行设计？

一、什么是组件？ 创新，是在一系列约束条件下，对基础元素的排列组合。

一些爱偷懒的产品，发现了 产品设计 的套路，他们熟知不同的大厂组件库，了解 50+ 组件样式和组件类型，再依据不同功能、场景、需求，将各种组件进行排列、组合，完成页面、功能、乃至模块的高效设计。

那什么是组件呢？组件（Component）常见于互联网的设计和开发工作中。

用于 UI 设计时，组件是界面的组成部分，包含了不同的类型、行为和状态。而在开发领域，组件指的是对数据和功能的简单封装。

如图为京东首页，你认得几种组件呢

我对组件的理解是，组件是具有特定样式和用途的内容组合。

多个页面基本元素（例如文本、字体、字色、形状等）组成了组件，而多个组件又能组合成不同的页面。

简单来说，页面内的任意内容，都可称作组件。

二、组件的五种类型 我们可以把大多数组件，归类为五种常见类型：基础、导航、输入、展示、反馈。

基础：基础元素 导航：位置指引 输入：数据录入 展示：数据显示 反馈：数据交互 如图为有赞的 vant 组件库，大致包含了 5 种类型，约 70+ 个组件，不同的组件有各自的样式和用途。

基础 基础组件是一些常见的页面基础元素。

基础组件主要有：图标、文本、按钮、图片、单元格、遮罩层、弹出层等。

导航 导航类组件，主要帮助用户了解当前位置和指引各个页面跳转。

该类组件包括宫格、导航栏、标签栏、索引栏、分页器等。

输入 输入类组件一般用于数据录入，例如选择内容、输入文本等操作。

常见的输入类组件有：单选框、复选框、输入框、表单、选择器等。

展示 展示类组件，主要用于显示相关数据内容。

头像、徽标、标签、列表、通知栏等组件都属于展示类组件。

反馈 用户进行操作后，引发的一系列数据交互，即为反馈类组件。数据交互可以是内容提示、状态过渡、数据录入等。

常见的反馈组件包含了对话框、吐司提示、气泡提示、动作面板、下拉刷新等。

三、一些大厂的相关组件库 1. Ant Design

Ant Design 是蚂蚁集团（体验技术部）基于大量业务实践和项目总结，抽象构建出的企业级产品的设计体系。Ant Design 基于自然、确定性、意义感、生长性四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

2. Zan Design

Zan Design 是有赞出品的一套服务于产品设计的设计模式和实践方法。

它主要由产品原则、设计原则、内容策略、布局与模式、视觉、动效、资源、组件等几大部分组成。Zan Design 的组件库支持桌面端、移动端、小程序等多端组件。

3. Arco Design

Arco Design 是字节跳动 UED 团队出品的企业级设计系统，字节旗下的今日头条、番茄小说、头条号、火山引擎等优秀产品都使用了 Arco Design，同时它还支持多国语言、定制主题等特性。

4. 其他组件库

除了上述的组件库之外，还有：

小程序组件：微信、支付宝、百度、字节、360 等； 后台组件：Element、Semi Design、King Design、58 同城 matrix 等； web 组件：NutUI、Cube UI、VUX UI 等； 综合组件：Taro、uView UI。 总结 组件，是具有特定样式和用途的内容组合，主要有五种类型：基础、导航、输入、展示、反馈。

基础：基础组件是一些常见的页面基础元素，例如图标、文本； 导航：主要帮助用户了解当前位置和指引各个页面跳转； 输入：一般用于数据录入，例如选择内容、输入文本等操作； 展示：主要用于显示相关数据内容； 反馈：用户进行操作后，将会引发一系列数据交互。 不懂上述基础组件，产品设计就像是盲人摸象。只能依靠以往的产品经验、或找几个竞品功能抄抄完事，下次遇到新需求又得重头思考。所以，掌握组件概念，已经成为初级产品的必备知识。

欢迎关注作者微信公众号：「产品之外」

按钮是我们在平时做产品设计时使用频率较高的一个组件，比较常见的有主按钮、次按钮、文字按钮，虽然它们名称不同，但都是用于触发操作的可点击元素，用来传达用户可以执行的操作并允许用户与页面交互。在设计按钮时很多人会忽略按钮文案的使用体验，有的时候，对按钮的文案进行一些小小的优化，就能给你的业务带来不错的提升。更多文案技...

按钮是我们在平时做产品设计时使用频率较高的一个组件，比较常见的有主按钮、次按钮、文字按钮，虽然它们名称不同，但都是用于触发操作的可点击元素，用来传达用户可以执行的操作并允许用户与页面交互。在设计按钮时很多人会忽略按钮文案的使用体验，有的时候，对按钮的文案进行一些小小的优化，就能给你的业务带来不错的提升。

更多文案技巧：

UX文案设计该如何做？我总结了这份原则和规范！ 想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。

阅读文章 >

一、CTA 按钮：专注于价值而非动作 我们经常会在网上看到一些对 CTA 按钮优化而使产品整体转化率提升的案例。什么是 CTA 呢？CTA 是英文 “call-to-action”的简写，又名行为召唤按钮，是 Web 和移动软件应用中最常用的交互元素，比如常见的“立即注册”“免费下载”，其主要作用就是引导人们进行点击、发表评论、访问在线商店、进行购买等，从而提高产品的转化率。

当用户在点击某个按钮的时候，按钮的形状和颜色有助于吸引用户注意按钮所在的位置，但是决定其最终是否点击的一大因素其实是按钮的文案。那么，优秀的 CTA 文案应该如何设计呢？Micheal Aagaard 曾经对按钮进行了四年的测试，并提出以下公式：

在文章《How to Write a Call to Action that Converts》中，Aagaard 写道，我们不需要在按钮上写明用户做什么（动作），而需要明显地写明用户能得到什么（价值）。例如，当他将按钮上的文案从“Order information”更改为“Get information”时，转化率上升了近 40%！原因是“Order”按钮强调的是用户能做什么，而不是他们要得到什么。

当然，按钮中仅传递价值是不够的，Aagaard 提出的第二个变量是关联性，关联性是指文案具有人性化的特点，联系上下文，口语化，通俗易懂。为了获更好的效果，按钮的文本应该与潜在客户所处的特定场景相关。

再来看一个例子，这是一个论文网站，尽管“Get Instant Access Now”（中文可以理解为立即获得访问权限）传递了价值，但是当设计者将按钮文案改为“Read Full Essay Now”（立即阅读全文），它的转化率大大提升了。你会发现而「访问权限」这个词更像是一个开发者说的话，并且“获取访问权限”似乎需要很高的操作门槛，而“阅读全文”这个词是站在用户角度出发的，口语化的表达方式也更容易被用户所理解。

二、我到底要取消什么？ 取消按钮是平常容易被用错的一个例子。笼统来说，取消表达的是停止、撤销某个操作或行为，但在不同场景下其表达的含义却大相径庭。假设你在购物网站购买商品，在准备付款的一刹那，突然发现自己不想要这件商品，这个时候你可以选择不付款，即“取消”订单，当然，如果你想临时做点其他事情一会儿再来付款，你可以选择退出当前流程（通常也可以用“取消”来表达）。

因此，在具体使用按钮时，需要考虑清楚究竟取消的是什么？是取消当前操作还是取消请求？若当前操作项为逆向（如取消某个订单），那么按钮文案应指明具体操作的动作，则按钮文案为动词+宾语（如取消订购单）。

若操作项为正向操作（如退出），则按钮文案直接显示为动词（即按钮文案为退出），不直接使用“确定/取消”，避免产生歧义。

没有用户有时间和意愿来阅读长篇大论的文字以辅助 ta 做决定，因此好的按钮文案需要符合的原则是，在用户不阅读确认文案的情况下，仅查看按钮文案就能轻松做出决策。

三、简洁才是王道 不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。—尼尔森

尼尔森十大可用性原则中的优美且简约原则在按钮的文案中也同样适用，按钮上的文案越多用户就需要理解的越多。此外按钮文案应该突出按钮的重点功能或目的，让用户一眼就能够看到。使用简单易懂的语言，避免使用生僻词或专业术语，也能降低用户的理解负担。

四、合适的语气 文案的语气可以根据不同的目的和受众来进行调整。比如有些品牌喜欢用幽默、轻松的语气来吸引年轻人的注意，而有些品牌则更倾向于使用严肃、专业的语气来展示自己的专业性和可靠性。一般来说，文案的语气应该是客观、中性的，不带有过多的情感色彩。但是，在某些情况下，可以适当地使用一些情感化的语言，以便更好地引起读者的共鸣和注意。假设当前产品是一款 SaaS 工具，其整体定位是严谨、专业的，那么在用词上也应该符合其品牌调性。“我知道了”传递出用户对于当前的信息已知晓，是比较通用的用法，相比之下，“朕知道了”其实是用皇帝的口吻来传递出使用者高高在上的感觉，反而让用户和系统之间产生隔阂。使用与产品“性格”相符的文案能够拉近用户和产品之间的距离，从而产生信任感。

写在最后 使用贴切的按钮文案可以帮助用户更好地理解按钮的功能和作用，提高用户的操作效率和满意度，并且减少用户因为误解按钮功能而发生的误操作，避免用户的不必要的麻烦和困惑。相反，不恰当的文案让用户觉得困惑、沮丧。在日常的设计工作中，关注细节，也许一点点小小的改进能够为你的产品带来非同寻常的体验。

参考

Kinneret Yifrah《Microcopy: The Complete Guide》 Michael Aagaard：How to Write a Call to Action that Converts

一、Prompt 简介Prompt 在 Midjourney 中扮演着重要的角色（不仅 Midjourney，其他人工智能语言生成领域都是），因为我们要通过它把我们的想法和意图输送给 AI，从而得到我们想要的设计图或图片。来自百度百科：Prompt 作名词时译为“提示、提词、（电脑屏幕上的）提示符”。更多关键词教...

一、Prompt 简介 Prompt 在 Midjourney 中扮演着重要的角色（不仅 Midjourney ，其他人工智能语言生成领域都是），因为我们要通过它把我们的想法和意图输送给 AI，从而得到我们想要的设计图或图片。

来自百度百科：Prompt 作名词时译为“提示、提词、（电脑屏幕上的）提示符”。

更多关键词教程：

50个保姆级咒语，带你彻底玩转二次元AI绘画神器Niji V5 近期 Midjourney 推出了最新的 Niji Version 5，很多用户反馈，在插画和动漫制作方面，niji V5 要比 V4 的作图能力强很多倍。

阅读文章 >

本文配图是由本人使用 Midjourney 生成

二、Midjourney 的通用公式及组成要素 就像我们初高中写作文的时候需要时间、地点、人物、起因、经过、结果六要素，现在我们出图也需要主题、背景/环境气氛、构图/镜头、风格化/参考方向、图像设定这些要素，不是每次出图都要用到所有要素，只需根据自己实际需要选择一个或者几个要素来进行描述即可。那么很明显，通用公式就是由这几要素组成的。

1. 通用公式

主题 + 背景、环境气氛 + 构图、镜头 + 风格化、参考方向 + 图像设定

知道了公式，那公式里的组成要素具体是什么样的呢？

2. 组成要素

3. 主题内容

你想画一个什么，例如，一只小猫、一盆花等等。也包括对主题的一些稍详细的描述，比如，一只白色的戴着帽子的小猫等等，这里就不多赘述了。

4. 环境、背景气氛

主题在什么环境、背景氛围中，例如给定某些地点或物件，比如，桌子上、足球场、下雨天或水面有倒影等等，主要包括以下几个方面的内容：

地点：室内、室外、森林里、月球上、外太空、非洲等

材质：做旧、哑光、浮雕、金、红宝石等等

色调：鲜艳的、柔和的、明亮的、单色的、多彩的、黑白、粉色等等

光线/光效：柔和、阴天、霓虹灯、摄影棚灯、环境光等等

情绪/氛围：开心的、难过的、惊喜的、平静的、喧闹、浪漫等等

5. 构图，镜头

想要什么样的构图或者镜头，比如，全身、头像、半身像、特写等，强调物体位置的，居中构图、正视图等，强调景深，中景、广角等。

例如，一匹马在草地上奔跑，它的俯瞰图和特写镜头

（在这里说一个小 tips，我写 8K 是想要设计图高清，但是个人感觉加进去图片质量并没有多大变化，反而景深效果会更明显。）

6. 风格化，参考方向

想要什么样的风格，可以是风格描述、艺术网站、艺术家名字，或者直接写参考网站，比如 dribble、3d。最后，个人也把特效渲染归到此类中。

7. 图像设定

Midjourney 中的一些后缀词，例如：

-- v 4 代表版本号（style 4b）意思是使用 V4 模型，在 setting 中可以设置；

--ar 代表图像宽高比，比如--ar 3:4 代表生成 3:4 比例的设计图；

--no 否定关键词，不希望图片中出现某元素，比如--no hand，详见

更多后缀知识：

AI绘画进阶必看！9种 Midjourney 常用后缀参数 大家好，这里是和你们聊设计的花生~ 最近 AI 绘画真的越来越火了啦，开始有越来越多的设计师将 Midjourney 用到自己的设计工作流中，让它们生成各种设计灵感或素材。

阅读文章 >

三、出图逻辑及三种生图方式 1. 出图逻辑

描述 prompt 关键词，AI 进行计算，然后生成图像

2. 三种生图方式

① 纯关键字描述

即在输入框里输入"/imagine"然后输入自己的描述关键词，确认无误后，发送，等待结果

② 图加关键字

先点击加号，上传所需要用到的图片，在输入框里输入"/imagine"然后输入图片链接，空一格，再输入自己的描述关键词，确认无误后，回车，等待结果

③ 图加图

用的是 blend 功能，在输入框里输入"/blend"会有上个拖入图片的框，把所需要用到的图片，直接分别拖入框中，回车，等待结果。另外，这里不止能导入 2 张图，最多可以导入 5 张图，具体做法这里就不赘述了。

这里有一个小技巧需要注意一下，两张图的比例尽量是相同的，这样生成的图会比较规整。

四、实际应用案例--3D 风格 B 端运营图标设计 首先写出你的关键词，根据公式，把我们的想法和要求一一列出来，这样可以避免遗漏，而且各种要素一目了然还可以提醒自己有没有其他需要完善的描述词。

举个 ：我想要设计一个，C4D 风格的，蓝色透明的磨砂玻璃质感的关于网络安全的图标，要有科技感，工业设计风格，白色背景，影棚灯光，3d，c4d，blender 渲染，高细节，参考一下 dribble 和 behance

1. 写出关键词： 构思，理清思路，想要什么

根据以上想法，按照公式来整理思路，如下图：

2. 找到参考图用来垫图

我们现在按照上边说的第二种生图方法，图片加关键词的方法来生成设计图，利用图片生成能更好的控制生成图片的风格和品质。这里需要注意的是，参考图尽量选择质量比较高的，这样生成的图大概率也是质量很高的。

根据这个案例实际情况，需要选择结构清晰，背景干净的图用来当作垫图。如果找的一张图片实在符合自己口味，就有一点美中不足，那就去 PS 里简单的抠一下，然后再拿来使用。

3. 打开 Discord，开工

现在一切准备工作都做好了，就可以开始设计了，打开我们的 Discord，可以开工了。可以按照步骤拆解，一点一点的加入关键词，这样能一步步看到生成的效果，以及如果出现什么意外，可以及时发现问题出现在哪里，毕竟关键词的细微差别，带来的结果可是千差万别的。在设计的过程中可以根据实际情况进行关键词的调整。

① 先输入主题信息

先输入主题信息，看看生成的是什么，然后再逐步进行输出。

输入：

一个玻璃质感的盾牌形状的图标，有倒影 a blue glass textured shield with a reflection,

感觉图标整体上来看，结构太复杂了，我们的目标是简单一点的，就做出如下调整，强调一下简单的这一特征，具体变化如上图。

② 加背景、环境气氛

感觉生成的图的效果已经出现自己想要的效果了，可以点击刷新按钮，多刷新几次，多出几组图片，以供选择。接下来可以根据自己满意的某张图进行扩展，加入环境相关的描述词。

输入：

一个玻璃质感的盾牌形状的图标，有倒影，浅色的背景，明亮的，居中构图 a blue glass textured shield with a reflection, light background, bright, Center the composition,

另外，这里说一下居中构图这个关键词，居中构图在这里可以用也可以不用，因为我们这个场景比较简单，一般出来都是居中的，但是如果是复杂场景就要强调一下，写上「居中构图 Center the composition」关键词，以防后期 AI 有自己想法，生成的效果不尽如人意，导致重新做或者调整，这样会无形中增加我们工作量。

③ 构图/镜头和风格

如上，添加上背景、氛围相关的关键词，生成的结果，第 2 个图片和第 4 个图片的效果感觉都还挺可以，但是差点意思，可以再加入些想要的风格，如，艺术家名字、参考方向（dribble、behance 等等），这里加入 3d、和参考下 dribbble 网站上的风格。

输入：

一个玻璃质感的盾牌形状的图标，有倒影，浅色的背景，明亮的，居中构图，特写，3d 风格，参考 dribbble a blue glass textured shield with a reflection, light background, bright, Center the composition, Headshot, 3d, dribbble,

选择一个效果比较满意的图，进行扩展，这里我选择了第 2 个和第 4 个图片进行扩展，即点击“V2、V4”按钮。配合混合模式加入关键词「Headshot」「3d, dribbble」，咒语及结果如下图所示：

这里补充一下知识点：U 按钮（Upscale 放大），可以放大对应序号的图片的比例，来提高其分辨率；V 按钮（Variation 变化延展），可以基于原描述词，生成对应序号图片的变体，画面对比母版，图片的细节会出现随机变化。

点击“V2、V4”按钮以后的情况如下：

④ 图像设定及输出结果

这里图像设定，“--ar 1:1”就不写了，因为系统默认就是 1:1 的图，如果你要 3:4 或者 16:9 的图，是需要设定一下的。

经过以上步骤，从出来的扩展效果来看，2 种情况的第 4 张图（纯属巧合）无论是图片的整体感觉还是细节的处理上都还是挺好的，两种图都是锁定了第 4 张图，可以分别点击“U4”按钮对图片进行放大处理。结果如下

补充下，Midjourney 的 V5 版本生成大图以后没有继续细化的功能按钮。V4 版本生成大图以后还会有继续细化的操作按钮，比如“light/beta Upscale Redo ”可以对图片进行细节优化，如下图

4. 总结，输出结果应用到工作中

最后，经过以上步骤，制作出了符合要求（令我们自己满意）的设计图，就可以应用到工作中，产生生产力啦。

把图导入到 figma、sketch，PS 里进行后期细化加工，设计出自己所需要的物料。效率绝对杠杠的～

无需过多处理，即出即用，简单快捷。

后续，我会持续输出相关的 Midjourney 在 B 端应用中的系列教程文章，期待与大家一起沟通探讨。

欢迎与我交流：

按钮是我们在平时做产品设计时使用频率较高的一个组件，比较常见的有主按钮、次按钮、文字按钮，虽然它们名称不同，但都是用于触发操作的可点击元素，用来传达用户可以执行的操作并允许用户与页面交互。在设计按钮时很多人会忽略按钮文案的使用体验，有的时候，对按钮的文案进行一些小小的优化，就能给你的业务带来不错的提升。更多文案技...

按钮是我们在平时做产品设计时使用频率较高的一个组件，比较常见的有主按钮、次按钮、文字按钮，虽然它们名称不同，但都是用于触发操作的可点击元素，用来传达用户可以执行的操作并允许用户与页面交互。在设计按钮时很多人会忽略按钮文案的使用体验，有的时候，对按钮的文案进行一些小小的优化，就能给你的业务带来不错的提升。

更多文案技巧：

UX文案设计该如何做？我总结了这份原则和规范！ 想要做好 UX 文案，首先必须要懂产品，其次要懂体验专业知识。

阅读文章 >

一、CTA 按钮：专注于价值而非动作 我们经常会在网上看到一些对 CTA 按钮优化而使产品整体转化率提升的案例。什么是 CTA 呢？CTA 是英文 “call-to-action”的简写，又名行为召唤按钮，是 Web 和移动软件应用中最常用的交互元素，比如常见的“立即注册”“免费下载”，其主要作用就是引导人们进行点击、发表评论、访问在线商店、进行购买等，从而提高产品的转化率。

当用户在点击某个按钮的时候，按钮的形状和颜色有助于吸引用户注意按钮所在的位置，但是决定其最终是否点击的一大因素其实是按钮的文案。那么，优秀的 CTA 文案应该如何设计呢？Micheal Aagaard 曾经对按钮进行了四年的测试，并提出以下公式：

在文章《How to Write a Call to Action that Converts》中，Aagaard 写道，我们不需要在按钮上写明用户做什么（动作），而需要明显地写明用户能得到什么（价值）。例如，当他将按钮上的文案从“Order information”更改为“Get information”时，转化率上升了近 40%！原因是“Order”按钮强调的是用户能做什么，而不是他们要得到什么。

当然，按钮中仅传递价值是不够的，Aagaard 提出的第二个变量是关联性，关联性是指文案具有人性化的特点，联系上下文，口语化，通俗易懂。为了获更好的效果，按钮的文本应该与潜在客户所处的特定场景相关。

再来看一个例子，这是一个论文网站，尽管“Get Instant Access Now”（中文可以理解为立即获得访问权限）传递了价值，但是当设计者将按钮文案改为“Read Full Essay Now”（立即阅读全文），它的转化率大大提升了。你会发现而「访问权限」这个词更像是一个开发者说的话，并且“获取访问权限”似乎需要很高的操作门槛，而“阅读全文”这个词是站在用户角度出发的，口语化的表达方式也更容易被用户所理解。

二、我到底要取消什么？ 取消按钮是平常容易被用错的一个例子。笼统来说，取消表达的是停止、撤销某个操作或行为，但在不同场景下其表达的含义却大相径庭。假设你在购物网站购买商品，在准备付款的一刹那，突然发现自己不想要这件商品，这个时候你可以选择不付款，即“取消”订单，当然，如果你想临时做点其他事情一会儿再来付款，你可以选择退出当前流程（通常也可以用“取消”来表达）。

因此，在具体使用按钮时，需要考虑清楚究竟取消的是什么？是取消当前操作还是取消请求？若当前操作项为逆向（如取消某个订单），那么按钮文案应指明具体操作的动作，则按钮文案为动词+宾语（如取消订购单）。

若操作项为正向操作（如退出），则按钮文案直接显示为动词（即按钮文案为退出），不直接使用“确定/取消”，避免产生歧义。

没有用户有时间和意愿来阅读长篇大论的文字以辅助 ta 做决定，因此好的按钮文案需要符合的原则是，在用户不阅读确认文案的情况下，仅查看按钮文案就能轻松做出决策。

三、简洁才是王道 不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。—尼尔森

尼尔森十大可用性原则中的优美且简约原则在按钮的文案中也同样适用，按钮上的文案越多用户就需要理解的越多。此外按钮文案应该突出按钮的重点功能或目的，让用户一眼就能够看到。使用简单易懂的语言，避免使用生僻词或专业术语，也能降低用户的理解负担。

四、合适的语气 文案的语气可以根据不同的目的和受众来进行调整。比如有些品牌喜欢用幽默、轻松的语气来吸引年轻人的注意，而有些品牌则更倾向于使用严肃、专业的语气来展示自己的专业性和可靠性。一般来说，文案的语气应该是客观、中性的，不带有过多的情感色彩。但是，在某些情况下，可以适当地使用一些情感化的语言，以便更好地引起读者的共鸣和注意。假设当前产品是一款 SaaS 工具，其整体定位是严谨、专业的，那么在用词上也应该符合其品牌调性。“我知道了”传递出用户对于当前的信息已知晓，是比较通用的用法，相比之下，“朕知道了”其实是用皇帝的口吻来传递出使用者高高在上的感觉，反而让用户和系统之间产生隔阂。使用与产品“性格”相符的文案能够拉近用户和产品之间的距离，从而产生信任感。

写在最后 使用贴切的按钮文案可以帮助用户更好地理解按钮的功能和作用，提高用户的操作效率和满意度，并且减少用户因为误解按钮功能而发生的误操作，避免用户的不必要的麻烦和困惑。相反，不恰当的文案让用户觉得困惑、沮丧。在日常的设计工作中，关注细节，也许一点点小小的改进能够为你的产品带来非同寻常的体验。

参考

Kinneret Yifrah《Microcopy: The Complete Guide》 Michael Aagaard：How to Write a Call to Action that Converts

一、Prompt 简介Prompt 在 Midjourney 中扮演着重要的角色（不仅 Midjourney，其他人工智能语言生成领域都是），因为我们要通过它把我们的想法和意图输送给 AI，从而得到我们想要的设计图或图片。来自百度百科：Prompt 作名词时译为“提示、提词、（电脑屏幕上的）提示符”。更多关键词教...

一、Prompt 简介 Prompt 在 Midjourney 中扮演着重要的角色（不仅 Midjourney ，其他人工智能语言生成领域都是），因为我们要通过它把我们的想法和意图输送给 AI，从而得到我们想要的设计图或图片。

来自百度百科：Prompt 作名词时译为“提示、提词、（电脑屏幕上的）提示符”。

更多关键词教程：

50个保姆级咒语，带你彻底玩转二次元AI绘画神器Niji V5 近期 Midjourney 推出了最新的 Niji Version 5，很多用户反馈，在插画和动漫制作方面，niji V5 要比 V4 的作图能力强很多倍。

阅读文章 >

本文配图是由本人使用 Midjourney 生成

二、Midjourney 的通用公式及组成要素 就像我们初高中写作文的时候需要时间、地点、人物、起因、经过、结果六要素，现在我们出图也需要主题、背景/环境气氛、构图/镜头、风格化/参考方向、图像设定这些要素，不是每次出图都要用到所有要素，只需根据自己实际需要选择一个或者几个要素来进行描述即可。那么很明显，通用公式就是由这几要素组成的。

1. 通用公式

主题 + 背景、环境气氛 + 构图、镜头 + 风格化、参考方向 + 图像设定

知道了公式，那公式里的组成要素具体是什么样的呢？

2. 组成要素

3. 主题内容

你想画一个什么，例如，一只小猫、一盆花等等。也包括对主题的一些稍详细的描述，比如，一只白色的戴着帽子的小猫等等，这里就不多赘述了。

4. 环境、背景气氛

主题在什么环境、背景氛围中，例如给定某些地点或物件，比如，桌子上、足球场、下雨天或水面有倒影等等，主要包括以下几个方面的内容：

地点：室内、室外、森林里、月球上、外太空、非洲等

材质：做旧、哑光、浮雕、金、红宝石等等

色调：鲜艳的、柔和的、明亮的、单色的、多彩的、黑白、粉色等等

光线/光效：柔和、阴天、霓虹灯、摄影棚灯、环境光等等

情绪/氛围：开心的、难过的、惊喜的、平静的、喧闹、浪漫等等

5. 构图，镜头

想要什么样的构图或者镜头，比如，全身、头像、半身像、特写等，强调物体位置的，居中构图、正视图等，强调景深，中景、广角等。

例如，一匹马在草地上奔跑，它的俯瞰图和特写镜头

（在这里说一个小 tips，我写 8K 是想要设计图高清，但是个人感觉加进去图片质量并没有多大变化，反而景深效果会更明显。）

6. 风格化，参考方向

想要什么样的风格，可以是风格描述、艺术网站、艺术家名字，或者直接写参考网站，比如 dribble、3d。最后，个人也把特效渲染归到此类中。

7. 图像设定

Midjourney 中的一些后缀词，例如：

-- v 4 代表版本号（style 4b）意思是使用 V4 模型，在 setting 中可以设置；

--ar 代表图像宽高比，比如--ar 3:4 代表生成 3:4 比例的设计图；

--no 否定关键词，不希望图片中出现某元素，比如--no hand，详见

更多后缀知识：

AI绘画进阶必看！9种 Midjourney 常用后缀参数 大家好，这里是和你们聊设计的花生~ 最近 AI 绘画真的越来越火了啦，开始有越来越多的设计师将 Midjourney 用到自己的设计工作流中，让它们生成各种设计灵感或素材。

阅读文章 >

三、出图逻辑及三种生图方式 1. 出图逻辑

描述 prompt 关键词，AI 进行计算，然后生成图像

2. 三种生图方式

① 纯关键字描述

即在输入框里输入"/imagine"然后输入自己的描述关键词，确认无误后，发送，等待结果

② 图加关键字

先点击加号，上传所需要用到的图片，在输入框里输入"/imagine"然后输入图片链接，空一格，再输入自己的描述关键词，确认无误后，回车，等待结果

③ 图加图

用的是 blend 功能，在输入框里输入"/blend"会有上个拖入图片的框，把所需要用到的图片，直接分别拖入框中，回车，等待结果。另外，这里不止能导入 2 张图，最多可以导入 5 张图，具体做法这里就不赘述了。

这里有一个小技巧需要注意一下，两张图的比例尽量是相同的，这样生成的图会比较规整。

四、实际应用案例--3D 风格 B 端运营图标设计 首先写出你的关键词，根据公式，把我们的想法和要求一一列出来，这样可以避免遗漏，而且各种要素一目了然还可以提醒自己有没有其他需要完善的描述词。

举个 ：我想要设计一个，C4D 风格的，蓝色透明的磨砂玻璃质感的关于网络安全的图标，要有科技感，工业设计风格，白色背景，影棚灯光，3d，c4d，blender 渲染，高细节，参考一下 dribble 和 behance

1. 写出关键词： 构思，理清思路，想要什么

根据以上想法，按照公式来整理思路，如下图：

2. 找到参考图用来垫图

我们现在按照上边说的第二种生图方法，图片加关键词的方法来生成设计图，利用图片生成能更好的控制生成图片的风格和品质。这里需要注意的是，参考图尽量选择质量比较高的，这样生成的图大概率也是质量很高的。

根据这个案例实际情况，需要选择结构清晰，背景干净的图用来当作垫图。如果找的一张图片实在符合自己口味，就有一点美中不足，那就去 PS 里简单的抠一下，然后再拿来使用。

3. 打开 Discord，开工

现在一切准备工作都做好了，就可以开始设计了，打开我们的 Discord，可以开工了。可以按照步骤拆解，一点一点的加入关键词，这样能一步步看到生成的效果，以及如果出现什么意外，可以及时发现问题出现在哪里，毕竟关键词的细微差别，带来的结果可是千差万别的。在设计的过程中可以根据实际情况进行关键词的调整。

① 先输入主题信息

先输入主题信息，看看生成的是什么，然后再逐步进行输出。

输入：

一个玻璃质感的盾牌形状的图标，有倒影 a blue glass textured shield with a reflection,

感觉图标整体上来看，结构太复杂了，我们的目标是简单一点的，就做出如下调整，强调一下简单的这一特征，具体变化如上图。

② 加背景、环境气氛

感觉生成的图的效果已经出现自己想要的效果了，可以点击刷新按钮，多刷新几次，多出几组图片，以供选择。接下来可以根据自己满意的某张图进行扩展，加入环境相关的描述词。

输入：

一个玻璃质感的盾牌形状的图标，有倒影，浅色的背景，明亮的，居中构图 a blue glass textured shield with a reflection, light background, bright, Center the composition,

另外，这里说一下居中构图这个关键词，居中构图在这里可以用也可以不用，因为我们这个场景比较简单，一般出来都是居中的，但是如果是复杂场景就要强调一下，写上「居中构图 Center the composition」关键词，以防后期 AI 有自己想法，生成的效果不尽如人意，导致重新做或者调整，这样会无形中增加我们工作量。

③ 构图/镜头和风格

如上，添加上背景、氛围相关的关键词，生成的结果，第 2 个图片和第 4 个图片的效果感觉都还挺可以，但是差点意思，可以再加入些想要的风格，如，艺术家名字、参考方向（dribble、behance 等等），这里加入 3d、和参考下 dribbble 网站上的风格。

输入：

一个玻璃质感的盾牌形状的图标，有倒影，浅色的背景，明亮的，居中构图，特写，3d 风格，参考 dribbble a blue glass textured shield with a reflection, light background, bright, Center the composition, Headshot, 3d, dribbble,

选择一个效果比较满意的图，进行扩展，这里我选择了第 2 个和第 4 个图片进行扩展，即点击“V2、V4”按钮。配合混合模式加入关键词「Headshot」「3d, dribbble」，咒语及结果如下图所示：

这里补充一下知识点：U 按钮（Upscale 放大），可以放大对应序号的图片的比例，来提高其分辨率；V 按钮（Variation 变化延展），可以基于原描述词，生成对应序号图片的变体，画面对比母版，图片的细节会出现随机变化。

点击“V2、V4”按钮以后的情况如下：

④ 图像设定及输出结果

这里图像设定，“--ar 1:1”就不写了，因为系统默认就是 1:1 的图，如果你要 3:4 或者 16:9 的图，是需要设定一下的。

经过以上步骤，从出来的扩展效果来看，2 种情况的第 4 张图（纯属巧合）无论是图片的整体感觉还是细节的处理上都还是挺好的，两种图都是锁定了第 4 张图，可以分别点击“U4”按钮对图片进行放大处理。结果如下

补充下，Midjourney 的 V5 版本生成大图以后没有继续细化的功能按钮。V4 版本生成大图以后还会有继续细化的操作按钮，比如“light/beta Upscale Redo ”可以对图片进行细节优化，如下图

4. 总结，输出结果应用到工作中

最后，经过以上步骤，制作出了符合要求（令我们自己满意）的设计图，就可以应用到工作中，产生生产力啦。

把图导入到 figma、sketch，PS 里进行后期细化加工，设计出自己所需要的物料。效率绝对杠杠的～

无需过多处理，即出即用，简单快捷。

后续，我会持续输出相关的 Midjourney 在 B 端应用中的系列教程文章，期待与大家一起沟通探讨。

欢迎与我交流：

作为公司的产品老油条，大小也面了不下 50 个产品，产品经验横跨 0~3 年、3~5 年。这么多次面试中，我每次都喜欢问一个问题“你大概了解几种 UI 组件（前端组件）呢，能举例说明一下吗？”然而每次给我的答复 80% 是“什么是组件？

作为公司的产品老油条，大小也面了不下 50 个产品，产品经验横跨 0~3 年、3~5 年。这么多次面试中，我每次都喜欢问一个问题“你大概了解几种 UI 组件（前端组件）呢，能举例说明一下吗？”

然而每次给我的答复 80% 是“什么是组件？”有时我会继续说“在页面内的所有内容都可以称为组件”候选人给我的反馈，还是一脸懵逼。

剩余的 20% 能答出“轮播、对话框、列表”等常见组件，就算产品基础能力一般的了。

我真的很想问他们，难道你在设计原型的时候，连自己做的是什么都不知道吗？那你的页面是怎么设计出来的？后续的一系列交互反馈，又是依据什么进行设计？

一、什么是组件？ 创新，是在一系列约束条件下，对基础元素的排列组合。

一些爱偷懒的产品，发现了 产品设计 的套路，他们熟知不同的大厂组件库，了解 50+ 组件样式和组件类型，再依据不同功能、场景、需求，将各种组件进行排列、组合，完成页面、功能、乃至模块的高效设计。

那什么是组件呢？组件（Component）常见于互联网的设计和开发工作中。

用于 UI 设计时，组件是界面的组成部分，包含了不同的类型、行为和状态。而在开发领域，组件指的是对数据和功能的简单封装。

如图为京东首页，你认得几种组件呢

我对组件的理解是，组件是具有特定样式和用途的内容组合。

多个页面基本元素（例如文本、字体、字色、形状等）组成了组件，而多个组件又能组合成不同的页面。

简单来说，页面内的任意内容，都可称作组件。

二、组件的五种类型 我们可以把大多数组件，归类为五种常见类型：基础、导航、输入、展示、反馈。

基础：基础元素 导航：位置指引 输入：数据录入 展示：数据显示 反馈：数据交互 如图为有赞的 vant 组件库，大致包含了 5 种类型，约 70+ 个组件，不同的组件有各自的样式和用途。

基础 基础组件是一些常见的页面基础元素。

基础组件主要有：图标、文本、按钮、图片、单元格、遮罩层、弹出层等。

导航 导航类组件，主要帮助用户了解当前位置和指引各个页面跳转。

该类组件包括宫格、导航栏、标签栏、索引栏、分页器等。

输入 输入类组件一般用于数据录入，例如选择内容、输入文本等操作。

常见的输入类组件有：单选框、复选框、输入框、表单、选择器等。

展示 展示类组件，主要用于显示相关数据内容。

头像、徽标、标签、列表、通知栏等组件都属于展示类组件。

反馈 用户进行操作后，引发的一系列数据交互，即为反馈类组件。数据交互可以是内容提示、状态过渡、数据录入等。

常见的反馈组件包含了对话框、吐司提示、气泡提示、动作面板、下拉刷新等。

三、一些大厂的相关组件库 1. Ant Design

Ant Design 是蚂蚁集团（体验技术部）基于大量业务实践和项目总结，抽象构建出的企业级产品的设计体系。Ant Design 基于自然、确定性、意义感、生长性四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

2. Zan Design

Zan Design 是有赞出品的一套服务于产品设计的设计模式和实践方法。

它主要由产品原则、设计原则、内容策略、布局与模式、视觉、动效、资源、组件等几大部分组成。Zan Design 的组件库支持桌面端、移动端、小程序等多端组件。

3. Arco Design

Arco Design 是字节跳动 UED 团队出品的企业级设计系统，字节旗下的今日头条、番茄小说、头条号、火山引擎等优秀产品都使用了 Arco Design，同时它还支持多国语言、定制主题等特性。

4. 其他组件库

除了上述的组件库之外，还有：

小程序组件：微信、支付宝、百度、字节、360 等； 后台组件：Element、Semi Design、King Design、58 同城 matrix 等； web 组件：NutUI、Cube UI、VUX UI 等； 综合组件：Taro、uView UI。 总结 组件，是具有特定样式和用途的内容组合，主要有五种类型：基础、导航、输入、展示、反馈。

基础：基础组件是一些常见的页面基础元素，例如图标、文本； 导航：主要帮助用户了解当前位置和指引各个页面跳转； 输入：一般用于数据录入，例如选择内容、输入文本等操作； 展示：主要用于显示相关数据内容； 反馈：用户进行操作后，将会引发一系列数据交互。 不懂上述基础组件，产品设计就像是盲人摸象。只能依靠以往的产品经验、或找几个竞品功能抄抄完事，下次遇到新需求又得重头思考。所以，掌握组件概念，已经成为初级产品的必备知识。

欢迎关注作者微信公众号：「产品之外」