今儿聊 4 个 iPhone 图标和它背后有趣的传奇故事。苹果产品中那些鲜为人知的设计，经常玩些小彩蛋来撩动人心。如此精心设计的细节就让我「用心」的去扒一扒藏着深处等待被看见的故事。

今儿聊 4 个 iPhone 图标和它背后有趣的传奇故事。

苹果产品中那些鲜为人知的设计，经常玩些小彩蛋来撩动人心。如此精心设计的细节就让我「用心」的去扒一扒藏着深处等待被看见的故事。一起盘盘 4 个故事里，哪个设计一步小心撩到你了？

苹果工作轶事：

在苹果做设计师，我学会了这 10 件事情 编者按：在以设计著称的苹果公司做设计是怎样的体验？

阅读文章 >

一、Face ID 面容 「微笑图标」 在 iPhone X 之后「人脸解锁」的功能对这个图标应该很熟悉啦，也就是面容 ID 解锁，这个 Face ID 笑脸图标其实是几十年前的电脑开机画面!

笑脸图标诞生在一本 2.5 美元的速写本，其作者是 Susankare“人称 icon 之母”（画外音：速写本的每个四方格对应屏幕上的一个像素，所以速写本就算是图标的始祖）

Susan Kare 是个有思想力的艺术家，性格平和谦逊，造就她的设计风格：亲和、自然、流畅、寓意深远。也因此开启一种全新的、用户友好的计算界面构建原型。深入了解她和她的团队对冰冷的电脑界面的改造，人性化、直观，吸引力的设计理念是深入人心，这也使之奠定成 Macintosh 视觉和用户体验的重要基础。

1983—1986 为Apple从事电脑 图标设计 ，在苹果企业的第一份工作是为Mac OS设计字体。仅仅一年时间，她建立了Macintosh的核心视觉语言，包括图标和众多字体，并构成了Apple产品最初的视觉体验。

Susan Kare 为 Mac 电脑设计的原始图标和字体具有革命性的意义，它们给没有生命的电脑带来了温暖和个性，至今的 Mac 仍在使用它们。

我想这也是苹果 Face ID 使用笑脸图标，以此致敬作者本身、也是对她开创的“亲和、自然、流畅”设计语言的一种肯定吧。

「故事叨叨」

我的心动点：把自己作为方法

设计师的个人品质决定了设计产品的最终呈现形态，卓越设计前提努力成为卓越的人；用自己的方式传达的观点，用设计进行交流传递价值。

设计思考点：设计语言的力量

设计语言可以温柔且富有个性，可以赋予冰冷的物品是更具人性化、富有沟通力。

二、Safari 阅读列表：「圆形眼镜」 你留意过 Safaria 浏览器里的图标吗？为什么是眼镜？为什么是圆形眼镜？

其实，浏览器里藏着一副乔布斯的眼镜。Safaria 浏览器 Reading List 的图标从 iOS 7 开始变成了乔老爷子经典的圆形眼镜。

乔布斯先生在发布完 iPhone4 后就离世了，给世界留下的创新+艺术+商业+迎合未来的产品和思想，绝对是笔超级财富。iOS7 的 Add to Reading List（阅读列表）图标发生了变化，从 iOS6 中的那个款型变成了乔布斯眼镜的款型。

「故事叨叨」

我的心动点：你在浏览器里看世界，看世界的人在用眼镜看你

他不是神，他是个普通人，但他所做的一切，都会在历史上留下浓重的一笔。让世界变得更美更好的人，理应值得铭记。

设计思考点：情怀/价值设计，也可以很品牌（苹果）

找到一种能赋予你的品牌以特殊意义，并能够在与用户进行互动的接触点上体现你设计价值的信念。

三、桌面 Safari「指南针图标」 不知道你发现了没有呢。在 iOS 11 Beta 4 的图标设计中，Safari 的指针朝向发生了轻微的偏移。而做出这样微小的改变是因为在现实地球中的地磁北极也在持续的发生变化，在过去的 150 年里向北移动了超过 1000 公里。这比之前 400 年的移动速度有所提高。

地磁北极继续“跑偏”，你还能找到北吗？科学家发现，地磁北极正以一年近 64 公里的速度，向俄罗斯西伯利亚方向移动，2011 年美国佛罗里达州坦帕国际机场因为地磁方位出现改变，要更改跑道编码，方便飞行员用指南针协助飞机起降。按目前速度计算，50 年后地磁北极将从加拿大北部挪到西伯利亚。

地磁北极正加速偏移目前不会影响手机导航，但是影响了桌面 Safari「指南针图标」

「故事叨叨」

我的心动点：想点大事，一种纵观全局的思维方式

我们每个人都生活在一个比自己大得多的世界之中，每个人都需要面对超出自身感受的事件和趋势。用有大的思维格局，在小的行动都是有会更有价值。

设计思考点：大思维里小改变，情绪回应

面对大事除了感叹外，作为一名「设计师」通过图标微小的改变来回应、传递让人产生情感通感，调动人原始的感觉和情绪。

四、Emoji 里的「备忘录」 细心的用户一定知道的 emoji 表情藏匿的 设计细节 ，比如「地球」的表情，会根据你打字是输入位置、习惯匹配不同的大洋洲图形。当你以为和朋友打出是同一个地球其实...实际....可能...它们长的并不一样哦 。不过，这个不是我们今天的主角，大家聊聊「备忘录」极富情怀的设计。

放大后，很容易看到上面有设计的细节，图标里面内嵌了文字；继续放到文字，可以看到这样的一段英文。

我….给大家翻译（百）翻译（度）

Here’s to the crazy ones.

向那些疯狂的家伙们致敬。

The misfits. The rebels. The troublemakers. The round pegs in the square holes

他们特立独行，他们桀惊不逊，他们惹是生非，他们格格不入。

The ones who see things differently.

他们用与众不同的眼光看待事物。

They’re not fond of rules.

他们不喜欢墨守成规

这段文本摘录：苹果经典广告：“ Think Different（非同凡响）”。只有那些疯狂到以为自己能改变世界的人，才能真正的改变世界。

当我第一眼看到这个段话时，内心确实被打动了。除了文案本身写的不错外，更让人动容的是设计师埋进图标的细节（把文字放到备忘录的图标颇有意境）。纵观整个历史，真正的梦想家总是逆潮而上、想法与众不同，每次打出「备忘录」图标时，好像时刻提醒“想点不同吧，在备忘录记下你与世界不同的想法，即使看上去这些想法与世界格格不入。”

「故事叨叨」

我的心动点：致敬疯子，文案撩动并攻击了我那该死的文学情怀；

设计思考点：情感设计不止“表面部分”，关心那些隐藏部分，可以潜入情绪深处，在心灵深处触动。细节已经不再单单是细节，所有一切都同等重要。

最后想说 Face ID 面容 「微笑图标」之 设计语言的力量 Safari 阅读列表「圆形眼镜」之 情怀设计很品牌 桌面 Safari「指南针图标」之大思维里小改变，情绪回应 Emoji 里的「备忘录」情感设计不止“表面部分” 以上4个 iPhone 上的图标，藏在设计背后的故事都是在历史上留下浓重的一笔、让世界变得更美更好的人或事。通过小小设计彩蛋去致敬经典，是设计师这个职业拥有的情感价值。

也许还有很多我们不知道但早就被精心设计的细节等待被发现。在整理上述设计细节时，一位网友评论也引起我的一点小小思考

我的疑惑

这些细节设计真正的价值点是什么在于？（难道大费周章只为了打动你吗？）

设计带来的某种情绪和感受，能对商业有多少的推动力？（人愿意为情绪感受买单）

有一个产品价值的公式：产品价值=功能价值+情绪价值+资产价值，

为了探究情绪价值的设计原则带着这样的困惑，我翻阅看了两本关于苹果设计两本书籍《苹果的品牌设计之道》《苹果的产品设计之道》，和大家浅浅的分享。

观点 1: 设计改变一切 ，美观、创新和魅力造就独一无二的竞争优势

一些公司和品牌（以及个人）天生就独具魅力，这种与生俱来的魅力部分来自 DNA 遗传。但建立并维持那样的魅力需要耗费大量的时间、资源、才智和强大的领导力。若长时间致力于设计的方式将会给自己产品打造超凡的魅力。

观点 2: 以人为本的情感化设计

怀抱着一种以人为本的设计理念，这种方式不仅要求设计师能够理解别人的感受，实际上还要深入细节，在产品的细节上投入巨大，图标形象能有力地传递让人产生通感，调动人原始的感觉和情绪，带来美好的感受。

我的小感悟

刻进产品 DNA 的是人性化原理 —— 情感化设计。

情感魅力是我们每个人的终极追求，相信设计的力量并用设计去创造情感共鸣，也许这个方法让产品、服务脱颖而出吧～

课后小思考

你有多大程度会为产品的情绪情怀买单？ 有没有发现生活中的其他的设计小彩蛋呢？

一、AI 绘画工具的选择与运用1. 工作场景下 AI 绘画工具的选择目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。如果要在实际工作场景中应用，我更推荐 Stable Diffusion。另一个热门平台的基础教程：超详细！

一、AI 绘画工具的选择与运用 1. 工作场景下 AI 绘画工具的选择

目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。如果要在实际工作场景中应用，我更推荐 Stable Diffusion 。

另一个热门平台的基础教程：

超详细！AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法： 新用户可免费创作 25 张图片，超过需要办会员 版权问题：会员生成的图片版权归创作者所有 Midjourney相关资讯： 二、注册/链接 服务器 温馨提示：下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网，右下角选择"J

阅读文章 >

通过对比，Stable Diffusion 在数据安全性（可本地部署）、可扩展性（成熟插件多）、风格丰富度（众多模型可供下载，也可以训练自有风格模型）、费用版权（开源免费、可商用）等方面更适合我们的工作场景。

那么如何在实际工作中应用 Stable Diffusion 进行 AI 绘画？

要在实际工作中应用 AI 绘画，需要解决两个关键问题，分别是：图像的精准控制和图像的风格控制。

2. 图像精准控制

图像精准控制推荐使用 Stable Diffusion 的 ControlNet 插件。在 ControlNet 出现之前，AI 绘画更像开盲盒，在图像生成前，你永远都不知道它会是一张怎样的图。ControlNet 的出现，真正意义上让 AI 绘画上升到生产力级别。简单来说 ControlNet 它可以精准控制 AI 图像的生成。

ControlNet 主要有 8 个应用模型：OpenPose、Canny、HED、Scribble、Mlsd、Seg、Normal Map、Depth。以下做简要介绍：

 OpenPose 姿势识别

通过姿势识别，达到精准控制人体动作。除了生成单人的姿势，它还可以生成多人的姿势，此外还有手部骨骼模型，解决手部绘图不精准问题。以下图为例：左侧为参考图像，经 OpenPose 精准识别后，得出中间的骨骼姿势，再用文生图功能，描述主体内容、场景细节和画风后，就能得到一张同样姿势，但风格完全不同的图。

 Canny 边缘检测

Canny 模型可以根据边缘检测，从原始图片中提取线稿，再根据提示词，来生成同样构图的画面，也可以用来给线稿上色。

HED 边缘检测

跟 Canny 类似，但自由发挥程度更高。HED 边界保留了输入图像中的细节，绘制的人物明暗对比明显，轮廓感更强，适合在保持原来构图的基础上对画面风格进行改变时使用。

Scribble 黑白稿提取

涂鸦成图，比 HED 和 Canny 的自由发挥程度更高，也可以用于对手绘线稿进行着色处理。

Mlsd 直线检测

通过分析图片的线条结构和几何形状来构建出建筑外框，适合建筑设计的使用。

Seg 区块标注

通过对原图内容进行语义分割，可以区分画面色块，适用于大场景的画风更改。

Normal Map 法线贴图

适用于三维立体图，通过提取用户输入图片中的 3D 物体的法线向量，以法线为参考绘制出一副新图，此图与原图的光影效果完全相同。

Depth 深度检测

通过提取原始图片中的深度信息，可以生成具有同样深度结构的图。还可以通过 3D 建模软件直接搭建出一个简单的场景，再用 Depth 模型渲染出图。

ControlNet 还有项关键技术是可以开启多个 ControlNet 的组合使用，对图像进行多条件控制。例如：你想对一张图像的背景和人物姿态分别进行控制，那我们可以配置 2 个 ControlNet，第 1 个 ControlNet 使用 Depth 模型对背景进行结构提取并重新风格化，第 2 个 ControlNet 使用 OpenPose 模型对人物进行姿态控制。此外在保持 Seed 种子数相同的情况下，固定出画面结构和风格，然后定义人物不同姿态，渲染后进行多帧图像拼接，就能生成一段动画。

以上通过 ControlNet 的 8 个主要模型，我们解决了图像结构的控制问题。接下来就是对图像风格进行控制。

3. 图像风格控制

Stable Diffusion 实现图像风格化的途径主要有以下几种：Artist 艺术家风格、Checkpoint 预训练大模型、LoRA 微调模型、Textual Inversion 文本反转模型。

Artist 艺术家风格

主要通过画作种类 Tag（如：oil painting、ink painting、comic、illustration），画家/画风 Tag（如：Hayao Miyazaki、Cyberpunk）等控制图像风格。网上也有比较多的这类风格介绍，如：

https://promptomania.com https://www.urania.ai/top-sd-artists 但需要注意的是，使用艺术家未经允许的风格进行商用，会存在侵权问题。

Checkpoint 预训练大模型

Checkpoint 是根据特定风格训练的大模型，模型风格强大，但体积也较大，一般 5-7GB。模型训练难度大，需要极高的显卡算力。目前网上已经有非常多的不同风格的成熟大模型可供下载使用。如： https://huggingface.co/models?pipeline_tag=text-to-image

LoRA 微调模型

LoRA 模型是通过截取大模型的某一特定部分生成的小模型，虽然不如大模型的能力完整，但短小精悍。因为训练方向明确，所以在生成特定内容的情况下，效果会更好。LoRA 模型也常用于训练自有风格模型，具有训练速度快，模型大小适中，配置要求低（8G 显存）的特点，能用少量图片训练出风格效果。常用 LoRA 模型下载地址：

https://stableres.info https//civitai.com （友情提醒：不要在办公场所打开，不然会很尴尬）

Textual Inversion 文本反转模型

Textual Inversion 文本反转模型也是微调模型的一种，它是针对一个风格或一个主题训练的风格模型，一般用于提高人物还原度或优化画风，用这种方式生成的模型非常小，一般几十 KB，在生成画作时使用对应 Tag 在 prompt 中进行调用。

自有风格模型训练

Stable Diffusion 的强大之处还在于能够自定义训练风格模型，如果现有风格无法满足要求，我们还可以自己训练特定风格模型。Stable Diffusion 支持训练大模型和微调模型。我比较推荐的是用 LoRA 模型训练方法，该方法训练速度快，模型大小适中（100MB 左右），配置要求低（8G 显存），能用极少量图片训练出风格效果。例如：下图中我用了 10 张工作中的素材图，大概花了 20 分钟时间训练出该风格的 LoRA 模型，然后使用该模型就可以生成风格类似的图片。如果将训练样本量增大，那么训练出来的风格样式会更加精确。

了解了 Stable Diffusion 能干什么后，再来介绍下如何部署安装使用它。

二、AI 绘画工具的部署安装 以下主要介绍三种部署安装方式：云端部署、本地部署、本机安装，各有优缺点。当本机硬件条件支持的情况下，推荐本地部署，其它情况推荐云端方式。

1. 云端部署 Stable Diffusion

通过 Google Colab 进行云端部署，推荐将成熟的 Stable Diffusion Colab 项目复制到自己的 Google 云端硬盘运行，省去配置环境麻烦。这种部署方式的优点是：不吃本机硬件，在有限时间段内，可以免费使用 Google Colab 强大的硬件资源，通常能给到 15G 的 GPU 算力，出图速度非常快。缺点是：免费 GPU 使用时长不固定，通常情况下一天有几个小时的使用时长，如果需要更长时间使用，可以订阅 Colab 服务。

推荐两个目前比较好用的 Stable Diffusion Colab，选择相应模型版本运行即可：

Stable Diffusion Colab： github.com/camenduru/stable-diffusion-webui-colab （不带 ControlNet） ControlNet Colab： github.com/camenduru/controlnet-colab （带 ControlNet）

Colab 运行界面如下，点击连接虚拟机，连接成功后点击左侧运行代码，等待环境自动配置完成后，点击 WebUI URL 即可运行 Stable Diffusion。

Stable Diffusion WebUI 运行界面如下，在后面的操作方法里我会介绍下 Stable Diffusion 的基础操作。

2. 本地部署 Stable Diffusion

相较于 Google Colab 云端部署，本地部署 Stable Diffusion 的可扩展性更强，可自定义安装需要的模型和插件，隐私性和安全性更高，自由度也更高，而且完全免费。当然缺点是对本机硬件要求高，Windows 需要 NVIDIA 显卡，8G 以上显存，16G 以上内存。Mac 需要 M1/M2 芯片才可运行。

本地部署方式主要分四步，以 Mac M1 为例：

第 1 步：安装 Homebrew 和 Python3.10 环境

Homebrew 是一个包管理工具，具体安装方法可参考： https://brew.idayer.com/

Python3.10 安装：brew install cmake protobuf rust python@3.10 git wget

第 2 步：克隆 Stable Diffusion WebUI 项目仓库

推荐下载 AUTOMATIC1111 的 Stable Diffusion WebUI，能很好的支持 ControlNet 扩展。

克隆项目仓库：git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui

第 3 步：下载并存放 Stable Diffusion 模型

Stable Diffusion 模型可以下载官方提供的 1.5 或 2.0 版本的 ckpt 文件，其它风格模型则根据自己需要下载。下载地址： huggingface.co/models?pipeline_tag=text-to-image

下载完后找到 stable-diffusion-webui 文件夹，把下载的 ckpt 大模型文件存放到 stable-diffusion-webui/models/Stable-diffusion 目录下。

如果下载了 LoRA 模型的 safetensors 文件，则存放到 stable-diffusion-webui/models/Lora 目录中。

Textual Inversion 文本反转模型的 pt 文件，存放到 stable-diffusion-webui/embeddings 目录中。

第 4 步：运行 Stable Diffusion WebUI

模型文件存放完成后，运行 Stable Diffusion WebUI：

先输入 cd stable-diffusion-webui 再输入 ./webui.sh，程序会自动完成下载安装。

运行完毕后显示：Running on local URL: http://127.0.0.1:7860 To create a public link, set `share=True` in `launch()`

在浏览器中打开 http://127.0.0.1:7860 ，即可运行 Stable Diffusion WebUI

需要用到的资源：

Homebrew 包管理工具： brew.idayer.com/guide/ Python 安装： www.python.org/downloads/ Stable Diffusion 项目仓库： github.com/AUTOMATIC1111/stable-diffusion-webui Stable Diffusion 模型： huggingface.co/models?pipeline_tag=text-to-image ControlNet 的安装

安装完 Stable Diffusion WebUI 后，我们再安装 ControlNet 扩展，以便进行图像的精准控制。

安装方法：

第 1 步：安装 ControlNet 插件

点击扩展，选择从 URL 安装，输入插件地址 https://github.com/Mikubill/sd-webui-controlnet ，点击 Install 后重启 WebUI。

第 2 步：安装 ControlNet 模型

打开模型下载页面 https://huggingface.co/lllyasviel/ControlNet/tree/main

将 annotator 目录中的人体检测预处理模型 body_pose_model.pth 和 hand_pose_model.pth 下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/annotator/openpose 目录。 将深度图模型 dpt_hybrid-midas-501f0c75.pt 下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/annotator/midas 目录 将 models 目录中的文件下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/models 目录 重启 WebUI 即可使用 ControlNet

解决 ControlNet 在 Mac M1 上无法运行问题

对于 Mac M1 芯片的电脑来说，直接运行 ControlNet 会报错，导致无法使用 ControlNet。原因是 CUDA 是适用于 NVIDIA GPU 的计算框架，当前 Mac OS 无法使用此框架，因此脚本会尝试使用 CPU，但 M1 不支持半精度数字。因此我们需要跳过 CUDA 并使用 no-half。

解决方法：

找到 webui-macos-env.sh 文件 添加 export COMMANDLINE_ARGS="--precision full --no-half --skip-torch-cuda-test"

3. 本机安装 DiffusionBee

如果觉得云端部署和本地部署比较繁琐，或对使用要求没有那么高，那就试下最简单的一键安装方式。下载 Diffusionbee 应用： diffusionbee.com/download 。优点是方便快捷，缺点是扩展能力差（可以安装大模型，无法进行插件扩展，如 ControlNet）。

三、AI 绘画工具的操作技巧 1. Stable Diffusion 基础操作

文生图

如图所示 Stable Diffusion WebUI 的操作界面主要分为：模型区域、功能区域、参数区域、出图区域。

txt2img 为文生图功能，重点参数介绍： 正向提示词：描述图片中希望出现的内容 反向提示词：描述图片中不希望出现的内容 Sampling method：采样方法，推荐选择 Euler a 或 DPM++ 系列，采样速度快 Sampling steps：迭代步数，数值越大图像质量越好，生成时间也越长，一般控制在 30-50 就能出效果 Restore faces：可以优化脸部生成 Width/Height：生成图片的宽高，越大越消耗显存，生成时间也越长，一般方图 512x512，竖图 512x768，需要更大尺寸，可以到 Extras 功能里进行等比高清放大 CFG：提示词相关性，数值越大越相关，数值越小越不相关，一般建议 7-12 区间 Batch count/Batch size：生成批次和每批数量，如果需要多图，可以调整下每批数量 Seed：种子数，-1 表示随机，相同的种子数可以保持图像的一致性，如果觉得一张图的结构不错，但对风格不满意，可以将种子数固定，再调整 prompt 生成

图生图

img2img 功能可以生成与原图相似构图色彩的画像，或者指定一部分内容进行变换。可以重点使用 Inpaint 图像修补这个功能：

Resize mode：缩放模式，Just resize 只调整图片大小，如果输入与输出长宽比例不同，图片会被拉伸。Crop and resize 裁剪与调整大小，如果输入与输出长宽比例不同，会以图片中心向四周，将比例外的部分进行裁剪。Resize and fill 调整大小与填充，如果输入与输出分辨率不同，会以图片中心向四周，将比例内多余的部分进行填充 Mask blur：蒙版模糊度，值越大与原图边缘的过度越平滑，越小则边缘越锐利 Mask mode：蒙版模式，Inpaint masked 只重绘涂色部分，Inpaint not masked 重绘除了涂色的部分 Masked Content：蒙版内容，fill 用其他内容填充，original 在原来的基础上重绘 Inpaint area：重绘区域，Whole picture 整个图像区域，Only masked 只在蒙版区域 Denoising strength：重绘幅度，值越大越自由发挥，越小越和原图接近

ControlNet

安装完 ControlNet 后，在 txt2img 和 img2img 参数面板中均可以调用 ControlNet。操作说明：

Enable：启用 ControlNet Low VRAM：低显存模式优化，建议 8G 显存以下开启 Guess mode：猜测模式，可以不设置提示词，自动生成图片 Preprocessor：选择预处理器，主要有 OpenPose、Canny、HED、Scribble、Mlsd、Seg、Normal Map、Depth Model：ControlNet 模型，模型选择要与预处理器对应 Weight：权重影响，使用 ControlNet 生成图片的权重占比影响 Guidance strength(T)：引导强度，值为 1 时，代表每迭代 1 步就会被 ControlNet 引导 1 次 Annotator resolution：数值越高，预处理图像越精细 Canny low/high threshold：控制最低和最高采样深度 Resize mode：图像大小模式，默认选择缩放至合适 Canvas width/height：画布宽高 Create blank canvas：创建空白画布 Preview annotator result：预览注释器结果，得到一张 ControlNet 模型提取的特征图片 Hide annotator result：隐藏预览图像窗口

LoRA 模型训练说明

前面提到 LoRA 模型具有训练速度快，模型大小适中（100MB 左右），配置要求低（8G 显存），能用少量图片训练出风格效果的优势。

以下简要介绍该模型的训练方法：

第 1 步：数据预处理

在 Stable Diffusion WebUI 功能面板中，选择 Train 训练功能，点选 Preprocess images 预处理图像功能。在 Source directory 栏填入你要训练的图片存放目录，在 Destination directory 栏填入预处理文件输出目录。width 和 height 为预处理图片的宽高，默认为 512x512，建议把要训练的图片大小统一改成这个尺寸，提升处理速度。勾选 Auto focal point crop 自动焦点裁剪，勾选 Use deepbooru for caption 自动识别图中的元素并打上标签。点击 Preprocess 进行图片预处理。

第 2 步：配置模型训练参数

在这里可以将模型训练放到 Google Colab 上进行，调用 Colab 的免费 15G GPU 将大大提升模型训练速度。LoRA 微调模型训练工具我推荐使用 Kohya，运行 Kohya Colab： https://colab.research.google.com/github/Linaqruf/kohya-trainer/blob/main/fast-kohya-trainer.ipynb

配置训练参数：

先在 content 目录建立 training_dir/training_data 目录，将步骤 1 中的预处理文件上传至该数据训练目录。然后配置微调模型命名和数据训练目录，在 Download Pretrained Model 栏配置需要参考的预训练模型文件。其余的参数可以根据需要调整设置。

第 3 步：训练模型

参数配置完成后，运行程序即可进行模型训练。训练完的模型将被放到 training_dir/output 目录，我们下载 safetensors 文件格式的模型，存放到 stable-diffusion-webui/models/Lora 目录中即可调用该模型。由于直接从 Colab 下载速度较慢，另外断开 Colab 连接后也将清空模型文件，这里建议在 Extras 中配置 huggingface 的 Write Token，将模型文件上传到 huggingface 中，再从 huggingface File 中下载，下载速度大大提升，文件也可进行备份。

2. Prompt 语法技巧

文生图模型的精髓在于 Prompt 提示词，如何写好 Prompt 将直接影响图像的生成质量。

提示词结构化

Prompt 提示词可以分为 4 段式结构：画质画风 + 画面主体 + 画面细节 + 风格参考

画面画风：主要是大模型或 LoRA 模型的 Tag、正向画质词、画作类型等 画面主体：画面核心内容、主体人/事/物/景、主体特征/动作等 画面细节：场景细节、人物细节、环境灯光、画面构图等 风格参考：艺术风格、渲染器、Embedding Tag 等

提示词语法

提示词排序：越前面的词汇越受 AI 重视，重要事物的提示词放前面 增强/减弱：(提示词:权重数值)，默认 1，大于 1 加强，低于 1 减弱。如 (doctor:1.3) 混合：提示词 | 提示词，实现多个要素混合，如 [red|blue] hair 红蓝色头发混合 + 和 AND：用于连接短提示词，AND 两端要加空格 分步渲染：[提示词 A:提示词 B:数值]，先按提示词 A 生成，在设定的数值后朝提示词 B 变化。如[dog:cat:30] 前 30 步画狗后面的画猫，[dog:cat:0.9] 前面 90%画狗后面 10%画猫 正向提示词：masterpiece, best quality 等画质词，用于提升画面质量 反向提示词：nsfw, bad hands, missing fingers……, 用于不想在画面中出现的内容 Emoji：支持 emoji，如 ? 形容表情，? 修饰手

常用提示词举例：

3. ChatGPT 辅助生成提示词

我们也可以借助 ChatGPT 帮我们生成提示词参考。

给 ChatGPT 一段示例参考： https://dreamlike.art/guides/using-openai-chat-gpt-to-write-stable-diffusion-prompts 根据参考生成 Prompts，再添加细节润色

4. Stable Diffusion 全中文环境配置

在实际使用中，我们还可以把 Stable Diffusion 配置成全中文环境，这将大大增加操作友好度。全中文环境包括了 Stable Diffusion WebUI 的汉化和 Prompt 支持中文输入。

Stable Diffusion WebUI 汉化

安装中文扩展插件：点击 Extensions 选择 Install from URL，输入 https://github.com/VinsonLaro/stable-diffusion-webui-chinese ，点击 Install，并重启 WebUI 切换到中文模式：在 Settings 面板中，将 User interface 中的 Localization 设置成 Chinese 中文模式，重启 WebUI 即可切换到中文界面

Prompt 中文输入

下载提示词中文扩展插件： https://github.com/butaixianran/Stable-Diffusion-Webui-Prompt-Translator ，将项目作为 zip 文件下载，解压后放到 stable-diffusion-webui/extensions 目录中，重启 WebUI 调用百度翻译 API：去 api.fanyi.baidu.com 申请一个免费 API Key，并将翻译服务开通。在管理控制台的开发者信息页中确认 APP ID 和 密钥 在 Stable Diffusion WebUI 的 Prompt Translator 面板中，选择百度翻译引擎，并将申请的 APP ID 和 密钥填写进去，点击保存 使用：在 Stable Diffusion WebUI 页面顶部会出现一个翻译工具栏，我们在提示词输入框中输入中文，点击工具栏中的翻译就能自动把提示词替换成英文

结语 本文简要介绍了 AI 绘画工具 Stable Diffusion 的安装使用，以及如何通过 ControlNet 实现图像的精准控制，如何通过模型加载和自有风格模型训练来控制图像画风。可以说这些技术的出现使得 AI 绘画具备了实际的生产能力， 设计师 们可以充分利用好这些强大的生产工具来提升设计效率。

一、AI 绘画工具的选择与运用1. 工作场景下 AI 绘画工具的选择目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。如果要在实际工作场景中应用，我更推荐 Stable Diffusion。另一个热门平台的基础教程：超详细！

一、AI 绘画工具的选择与运用 1. 工作场景下 AI 绘画工具的选择

目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。如果要在实际工作场景中应用，我更推荐 Stable Diffusion 。

另一个热门平台的基础教程：

超详细！AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法： 新用户可免费创作 25 张图片，超过需要办会员 版权问题：会员生成的图片版权归创作者所有 Midjourney相关资讯： 二、注册/链接 服务器 温馨提示：下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网，右下角选择"J

阅读文章 >

通过对比，Stable Diffusion 在数据安全性（可本地部署）、可扩展性（成熟插件多）、风格丰富度（众多模型可供下载，也可以训练自有风格模型）、费用版权（开源免费、可商用）等方面更适合我们的工作场景。

那么如何在实际工作中应用 Stable Diffusion 进行 AI 绘画？

要在实际工作中应用 AI 绘画，需要解决两个关键问题，分别是：图像的精准控制和图像的风格控制。

2. 图像精准控制

图像精准控制推荐使用 Stable Diffusion 的 ControlNet 插件。在 ControlNet 出现之前，AI 绘画更像开盲盒，在图像生成前，你永远都不知道它会是一张怎样的图。ControlNet 的出现，真正意义上让 AI 绘画上升到生产力级别。简单来说 ControlNet 它可以精准控制 AI 图像的生成。

ControlNet 主要有 8 个应用模型：OpenPose、Canny、HED、Scribble、Mlsd、Seg、Normal Map、Depth。以下做简要介绍：

 OpenPose 姿势识别

通过姿势识别，达到精准控制人体动作。除了生成单人的姿势，它还可以生成多人的姿势，此外还有手部骨骼模型，解决手部绘图不精准问题。以下图为例：左侧为参考图像，经 OpenPose 精准识别后，得出中间的骨骼姿势，再用文生图功能，描述主体内容、场景细节和画风后，就能得到一张同样姿势，但风格完全不同的图。

 Canny 边缘检测

Canny 模型可以根据边缘检测，从原始图片中提取线稿，再根据提示词，来生成同样构图的画面，也可以用来给线稿上色。

HED 边缘检测

跟 Canny 类似，但自由发挥程度更高。HED 边界保留了输入图像中的细节，绘制的人物明暗对比明显，轮廓感更强，适合在保持原来构图的基础上对画面风格进行改变时使用。

Scribble 黑白稿提取

涂鸦成图，比 HED 和 Canny 的自由发挥程度更高，也可以用于对手绘线稿进行着色处理。

Mlsd 直线检测

通过分析图片的线条结构和几何形状来构建出建筑外框，适合建筑设计的使用。

Seg 区块标注

通过对原图内容进行语义分割，可以区分画面色块，适用于大场景的画风更改。

Normal Map 法线贴图

适用于三维立体图，通过提取用户输入图片中的 3D 物体的法线向量，以法线为参考绘制出一副新图，此图与原图的光影效果完全相同。

Depth 深度检测

通过提取原始图片中的深度信息，可以生成具有同样深度结构的图。还可以通过 3D 建模软件直接搭建出一个简单的场景，再用 Depth 模型渲染出图。

ControlNet 还有项关键技术是可以开启多个 ControlNet 的组合使用，对图像进行多条件控制。例如：你想对一张图像的背景和人物姿态分别进行控制，那我们可以配置 2 个 ControlNet，第 1 个 ControlNet 使用 Depth 模型对背景进行结构提取并重新风格化，第 2 个 ControlNet 使用 OpenPose 模型对人物进行姿态控制。此外在保持 Seed 种子数相同的情况下，固定出画面结构和风格，然后定义人物不同姿态，渲染后进行多帧图像拼接，就能生成一段动画。

以上通过 ControlNet 的 8 个主要模型，我们解决了图像结构的控制问题。接下来就是对图像风格进行控制。

3. 图像风格控制

Stable Diffusion 实现图像风格化的途径主要有以下几种：Artist 艺术家风格、Checkpoint 预训练大模型、LoRA 微调模型、Textual Inversion 文本反转模型。

Artist 艺术家风格

主要通过画作种类 Tag（如：oil painting、ink painting、comic、illustration），画家/画风 Tag（如：Hayao Miyazaki、Cyberpunk）等控制图像风格。网上也有比较多的这类风格介绍，如：

https://promptomania.com https://www.urania.ai/top-sd-artists 但需要注意的是，使用艺术家未经允许的风格进行商用，会存在侵权问题。

Checkpoint 预训练大模型

Checkpoint 是根据特定风格训练的大模型，模型风格强大，但体积也较大，一般 5-7GB。模型训练难度大，需要极高的显卡算力。目前网上已经有非常多的不同风格的成熟大模型可供下载使用。如： https://huggingface.co/models?pipeline_tag=text-to-image

LoRA 微调模型

LoRA 模型是通过截取大模型的某一特定部分生成的小模型，虽然不如大模型的能力完整，但短小精悍。因为训练方向明确，所以在生成特定内容的情况下，效果会更好。LoRA 模型也常用于训练自有风格模型，具有训练速度快，模型大小适中，配置要求低（8G 显存）的特点，能用少量图片训练出风格效果。常用 LoRA 模型下载地址：

https://stableres.info https//civitai.com （友情提醒：不要在办公场所打开，不然会很尴尬）

Textual Inversion 文本反转模型

Textual Inversion 文本反转模型也是微调模型的一种，它是针对一个风格或一个主题训练的风格模型，一般用于提高人物还原度或优化画风，用这种方式生成的模型非常小，一般几十 KB，在生成画作时使用对应 Tag 在 prompt 中进行调用。

自有风格模型训练

Stable Diffusion 的强大之处还在于能够自定义训练风格模型，如果现有风格无法满足要求，我们还可以自己训练特定风格模型。Stable Diffusion 支持训练大模型和微调模型。我比较推荐的是用 LoRA 模型训练方法，该方法训练速度快，模型大小适中（100MB 左右），配置要求低（8G 显存），能用极少量图片训练出风格效果。例如：下图中我用了 10 张工作中的素材图，大概花了 20 分钟时间训练出该风格的 LoRA 模型，然后使用该模型就可以生成风格类似的图片。如果将训练样本量增大，那么训练出来的风格样式会更加精确。

了解了 Stable Diffusion 能干什么后，再来介绍下如何部署安装使用它。

二、AI 绘画工具的部署安装 以下主要介绍三种部署安装方式：云端部署、本地部署、本机安装，各有优缺点。当本机硬件条件支持的情况下，推荐本地部署，其它情况推荐云端方式。

1. 云端部署 Stable Diffusion

通过 Google Colab 进行云端部署，推荐将成熟的 Stable Diffusion Colab 项目复制到自己的 Google 云端硬盘运行，省去配置环境麻烦。这种部署方式的优点是：不吃本机硬件，在有限时间段内，可以免费使用 Google Colab 强大的硬件资源，通常能给到 15G 的 GPU 算力，出图速度非常快。缺点是：免费 GPU 使用时长不固定，通常情况下一天有几个小时的使用时长，如果需要更长时间使用，可以订阅 Colab 服务。

推荐两个目前比较好用的 Stable Diffusion Colab，选择相应模型版本运行即可：

Stable Diffusion Colab： github.com/camenduru/stable-diffusion-webui-colab （不带 ControlNet） ControlNet Colab： github.com/camenduru/controlnet-colab （带 ControlNet）

Colab 运行界面如下，点击连接虚拟机，连接成功后点击左侧运行代码，等待环境自动配置完成后，点击 WebUI URL 即可运行 Stable Diffusion。

Stable Diffusion WebUI 运行界面如下，在后面的操作方法里我会介绍下 Stable Diffusion 的基础操作。

2. 本地部署 Stable Diffusion

相较于 Google Colab 云端部署，本地部署 Stable Diffusion 的可扩展性更强，可自定义安装需要的模型和插件，隐私性和安全性更高，自由度也更高，而且完全免费。当然缺点是对本机硬件要求高，Windows 需要 NVIDIA 显卡，8G 以上显存，16G 以上内存。Mac 需要 M1/M2 芯片才可运行。

本地部署方式主要分四步，以 Mac M1 为例：

第 1 步：安装 Homebrew 和 Python3.10 环境

Homebrew 是一个包管理工具，具体安装方法可参考： https://brew.idayer.com/

Python3.10 安装：brew install cmake protobuf rust python@3.10 git wget

第 2 步：克隆 Stable Diffusion WebUI 项目仓库

推荐下载 AUTOMATIC1111 的 Stable Diffusion WebUI，能很好的支持 ControlNet 扩展。

克隆项目仓库：git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui

第 3 步：下载并存放 Stable Diffusion 模型

Stable Diffusion 模型可以下载官方提供的 1.5 或 2.0 版本的 ckpt 文件，其它风格模型则根据自己需要下载。下载地址： huggingface.co/models?pipeline_tag=text-to-image

下载完后找到 stable-diffusion-webui 文件夹，把下载的 ckpt 大模型文件存放到 stable-diffusion-webui/models/Stable-diffusion 目录下。

如果下载了 LoRA 模型的 safetensors 文件，则存放到 stable-diffusion-webui/models/Lora 目录中。

Textual Inversion 文本反转模型的 pt 文件，存放到 stable-diffusion-webui/embeddings 目录中。

第 4 步：运行 Stable Diffusion WebUI

模型文件存放完成后，运行 Stable Diffusion WebUI：

先输入 cd stable-diffusion-webui 再输入 ./webui.sh，程序会自动完成下载安装。

运行完毕后显示：Running on local URL: http://127.0.0.1:7860 To create a public link, set `share=True` in `launch()`

在浏览器中打开 http://127.0.0.1:7860 ，即可运行 Stable Diffusion WebUI

需要用到的资源：

Homebrew 包管理工具： brew.idayer.com/guide/ Python 安装： www.python.org/downloads/ Stable Diffusion 项目仓库： github.com/AUTOMATIC1111/stable-diffusion-webui Stable Diffusion 模型： huggingface.co/models?pipeline_tag=text-to-image ControlNet 的安装

安装完 Stable Diffusion WebUI 后，我们再安装 ControlNet 扩展，以便进行图像的精准控制。

安装方法：

第 1 步：安装 ControlNet 插件

点击扩展，选择从 URL 安装，输入插件地址 https://github.com/Mikubill/sd-webui-controlnet ，点击 Install 后重启 WebUI。

第 2 步：安装 ControlNet 模型

打开模型下载页面 https://huggingface.co/lllyasviel/ControlNet/tree/main

将 annotator 目录中的人体检测预处理模型 body_pose_model.pth 和 hand_pose_model.pth 下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/annotator/openpose 目录。 将深度图模型 dpt_hybrid-midas-501f0c75.pt 下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/annotator/midas 目录 将 models 目录中的文件下载至本地 stable-diffusion-webui/extensions/sd-webui-controlnet/models 目录 重启 WebUI 即可使用 ControlNet

解决 ControlNet 在 Mac M1 上无法运行问题

对于 Mac M1 芯片的电脑来说，直接运行 ControlNet 会报错，导致无法使用 ControlNet。原因是 CUDA 是适用于 NVIDIA GPU 的计算框架，当前 Mac OS 无法使用此框架，因此脚本会尝试使用 CPU，但 M1 不支持半精度数字。因此我们需要跳过 CUDA 并使用 no-half。

解决方法：

找到 webui-macos-env.sh 文件 添加 export COMMANDLINE_ARGS="--precision full --no-half --skip-torch-cuda-test"

3. 本机安装 DiffusionBee

如果觉得云端部署和本地部署比较繁琐，或对使用要求没有那么高，那就试下最简单的一键安装方式。下载 Diffusionbee 应用： diffusionbee.com/download 。优点是方便快捷，缺点是扩展能力差（可以安装大模型，无法进行插件扩展，如 ControlNet）。

三、AI 绘画工具的操作技巧 1. Stable Diffusion 基础操作

文生图

如图所示 Stable Diffusion WebUI 的操作界面主要分为：模型区域、功能区域、参数区域、出图区域。

txt2img 为文生图功能，重点参数介绍： 正向提示词：描述图片中希望出现的内容 反向提示词：描述图片中不希望出现的内容 Sampling method：采样方法，推荐选择 Euler a 或 DPM++ 系列，采样速度快 Sampling steps：迭代步数，数值越大图像质量越好，生成时间也越长，一般控制在 30-50 就能出效果 Restore faces：可以优化脸部生成 Width/Height：生成图片的宽高，越大越消耗显存，生成时间也越长，一般方图 512x512，竖图 512x768，需要更大尺寸，可以到 Extras 功能里进行等比高清放大 CFG：提示词相关性，数值越大越相关，数值越小越不相关，一般建议 7-12 区间 Batch count/Batch size：生成批次和每批数量，如果需要多图，可以调整下每批数量 Seed：种子数，-1 表示随机，相同的种子数可以保持图像的一致性，如果觉得一张图的结构不错，但对风格不满意，可以将种子数固定，再调整 prompt 生成

图生图

img2img 功能可以生成与原图相似构图色彩的画像，或者指定一部分内容进行变换。可以重点使用 Inpaint 图像修补这个功能：

Resize mode：缩放模式，Just resize 只调整图片大小，如果输入与输出长宽比例不同，图片会被拉伸。Crop and resize 裁剪与调整大小，如果输入与输出长宽比例不同，会以图片中心向四周，将比例外的部分进行裁剪。Resize and fill 调整大小与填充，如果输入与输出分辨率不同，会以图片中心向四周，将比例内多余的部分进行填充 Mask blur：蒙版模糊度，值越大与原图边缘的过度越平滑，越小则边缘越锐利 Mask mode：蒙版模式，Inpaint masked 只重绘涂色部分，Inpaint not masked 重绘除了涂色的部分 Masked Content：蒙版内容，fill 用其他内容填充，original 在原来的基础上重绘 Inpaint area：重绘区域，Whole picture 整个图像区域，Only masked 只在蒙版区域 Denoising strength：重绘幅度，值越大越自由发挥，越小越和原图接近

ControlNet

安装完 ControlNet 后，在 txt2img 和 img2img 参数面板中均可以调用 ControlNet。操作说明：

Enable：启用 ControlNet Low VRAM：低显存模式优化，建议 8G 显存以下开启 Guess mode：猜测模式，可以不设置提示词，自动生成图片 Preprocessor：选择预处理器，主要有 OpenPose、Canny、HED、Scribble、Mlsd、Seg、Normal Map、Depth Model：ControlNet 模型，模型选择要与预处理器对应 Weight：权重影响，使用 ControlNet 生成图片的权重占比影响 Guidance strength(T)：引导强度，值为 1 时，代表每迭代 1 步就会被 ControlNet 引导 1 次 Annotator resolution：数值越高，预处理图像越精细 Canny low/high threshold：控制最低和最高采样深度 Resize mode：图像大小模式，默认选择缩放至合适 Canvas width/height：画布宽高 Create blank canvas：创建空白画布 Preview annotator result：预览注释器结果，得到一张 ControlNet 模型提取的特征图片 Hide annotator result：隐藏预览图像窗口

LoRA 模型训练说明

前面提到 LoRA 模型具有训练速度快，模型大小适中（100MB 左右），配置要求低（8G 显存），能用少量图片训练出风格效果的优势。

以下简要介绍该模型的训练方法：

第 1 步：数据预处理

在 Stable Diffusion WebUI 功能面板中，选择 Train 训练功能，点选 Preprocess images 预处理图像功能。在 Source directory 栏填入你要训练的图片存放目录，在 Destination directory 栏填入预处理文件输出目录。width 和 height 为预处理图片的宽高，默认为 512x512，建议把要训练的图片大小统一改成这个尺寸，提升处理速度。勾选 Auto focal point crop 自动焦点裁剪，勾选 Use deepbooru for caption 自动识别图中的元素并打上标签。点击 Preprocess 进行图片预处理。

第 2 步：配置模型训练参数

在这里可以将模型训练放到 Google Colab 上进行，调用 Colab 的免费 15G GPU 将大大提升模型训练速度。LoRA 微调模型训练工具我推荐使用 Kohya，运行 Kohya Colab： https://colab.research.google.com/github/Linaqruf/kohya-trainer/blob/main/fast-kohya-trainer.ipynb

配置训练参数：

先在 content 目录建立 training_dir/training_data 目录，将步骤 1 中的预处理文件上传至该数据训练目录。然后配置微调模型命名和数据训练目录，在 Download Pretrained Model 栏配置需要参考的预训练模型文件。其余的参数可以根据需要调整设置。

第 3 步：训练模型

参数配置完成后，运行程序即可进行模型训练。训练完的模型将被放到 training_dir/output 目录，我们下载 safetensors 文件格式的模型，存放到 stable-diffusion-webui/models/Lora 目录中即可调用该模型。由于直接从 Colab 下载速度较慢，另外断开 Colab 连接后也将清空模型文件，这里建议在 Extras 中配置 huggingface 的 Write Token，将模型文件上传到 huggingface 中，再从 huggingface File 中下载，下载速度大大提升，文件也可进行备份。

2. Prompt 语法技巧

文生图模型的精髓在于 Prompt 提示词，如何写好 Prompt 将直接影响图像的生成质量。

提示词结构化

Prompt 提示词可以分为 4 段式结构：画质画风 + 画面主体 + 画面细节 + 风格参考

画面画风：主要是大模型或 LoRA 模型的 Tag、正向画质词、画作类型等 画面主体：画面核心内容、主体人/事/物/景、主体特征/动作等 画面细节：场景细节、人物细节、环境灯光、画面构图等 风格参考：艺术风格、渲染器、Embedding Tag 等

提示词语法

提示词排序：越前面的词汇越受 AI 重视，重要事物的提示词放前面 增强/减弱：(提示词:权重数值)，默认 1，大于 1 加强，低于 1 减弱。如 (doctor:1.3) 混合：提示词 | 提示词，实现多个要素混合，如 [red|blue] hair 红蓝色头发混合 + 和 AND：用于连接短提示词，AND 两端要加空格 分步渲染：[提示词 A:提示词 B:数值]，先按提示词 A 生成，在设定的数值后朝提示词 B 变化。如[dog:cat:30] 前 30 步画狗后面的画猫，[dog:cat:0.9] 前面 90%画狗后面 10%画猫 正向提示词：masterpiece, best quality 等画质词，用于提升画面质量 反向提示词：nsfw, bad hands, missing fingers……, 用于不想在画面中出现的内容 Emoji：支持 emoji，如 ? 形容表情，? 修饰手

常用提示词举例：

3. ChatGPT 辅助生成提示词

我们也可以借助 ChatGPT 帮我们生成提示词参考。

给 ChatGPT 一段示例参考： https://dreamlike.art/guides/using-openai-chat-gpt-to-write-stable-diffusion-prompts 根据参考生成 Prompts，再添加细节润色

4. Stable Diffusion 全中文环境配置

在实际使用中，我们还可以把 Stable Diffusion 配置成全中文环境，这将大大增加操作友好度。全中文环境包括了 Stable Diffusion WebUI 的汉化和 Prompt 支持中文输入。

Stable Diffusion WebUI 汉化

安装中文扩展插件：点击 Extensions 选择 Install from URL，输入 https://github.com/VinsonLaro/stable-diffusion-webui-chinese ，点击 Install，并重启 WebUI 切换到中文模式：在 Settings 面板中，将 User interface 中的 Localization 设置成 Chinese 中文模式，重启 WebUI 即可切换到中文界面

Prompt 中文输入

下载提示词中文扩展插件： https://github.com/butaixianran/Stable-Diffusion-Webui-Prompt-Translator ，将项目作为 zip 文件下载，解压后放到 stable-diffusion-webui/extensions 目录中，重启 WebUI 调用百度翻译 API：去 api.fanyi.baidu.com 申请一个免费 API Key，并将翻译服务开通。在管理控制台的开发者信息页中确认 APP ID 和 密钥 在 Stable Diffusion WebUI 的 Prompt Translator 面板中，选择百度翻译引擎，并将申请的 APP ID 和 密钥填写进去，点击保存 使用：在 Stable Diffusion WebUI 页面顶部会出现一个翻译工具栏，我们在提示词输入框中输入中文，点击工具栏中的翻译就能自动把提示词替换成英文

结语 本文简要介绍了 AI 绘画工具 Stable Diffusion 的安装使用，以及如何通过 ControlNet 实现图像的精准控制，如何通过模型加载和自有风格模型训练来控制图像画风。可以说这些技术的出现使得 AI 绘画具备了实际的生产能力， 设计师 们可以充分利用好这些强大的生产工具来提升设计效率。

大家好，这里是和你们一起聊设计的花生~才送走“雨纷纷”的清明，我们又要迎来一个跟雨相关的节气“谷雨”了，它也是春天的最后一个节气。大家知道“谷雨”名称的由来是什么吗？相关的借势海报中又有哪些常用的意象呢？

大家好，这里是和你们一起聊设计的花生~

才送走“雨纷纷”的清明，我们又要迎来一个跟雨相关的节气“谷雨”了，它也是春天的最后一个节气。大家知道“ 谷雨 ”名称的由来是什么吗？相关的借势海报中又有哪些常用的意象呢？今天就一起来看看吧 ~

往期回顾：

借势海报必看！ 二十四节气之清明海报设计常用意象总结 大家好，这里是和你们聊设计的花生~ 武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。

阅读文章 >

一、“谷雨”简介 谷雨是二十四节气的第 6 个节气，也是春季的最后一个节气，于每年公历 4 月 19 - 21 日交节。“谷雨”这个名称源自古人的“雨生百谷”之说，谷雨前后降水明显增加，而田中的秧苗初插、作物新种，正是最需要水的时候，充沛及时的降雨正好有利于谷类作物的茁壮生长，故名“谷雨”。

谷雨与雨水、小雪、大雪等节气一样，不仅反映自然降水现象，也体现了我国的农耕文化。相对应的，“降雨”和“播种插秧”也成为了谷雨的借势海报中常用的两种意象，二者通常会结合使用。零食品牌百草味在谷雨借势海报中将开心果作为“雨滴’，落在正在插秧的田间，溅起串串涟漪，既体现了节气特征，又巧妙的融入了自家的产品，非常有创意。

二、“谷雨”习俗 谷雨的节气习俗有吃春、喝谷雨茶、赏牡丹等，其中以“谷雨茶”的意象在海报中使用的最多。

① 喝谷雨茶

谷雨茶就是用谷雨这天采的鲜茶叶制成的茶，也叫雨前茶、二春茶，茶叶还必须是上午采的。谷雨茶色泽翠绿，叶质柔软，富含多种维生素和氨基酸，香气宜人，喝了能清火、辟邪、明目，所以谷雨这天不管是什么天气，人们都会去茶山摘一些新茶回来喝。

借势海报中常展示谷雨采茶的场景，或者延伸展示品茶饮茶的相关意象。消费服务平台美团则是在海报中将浸泡着茶叶的水做为湖底世界，湖面是一个小人在攀爬巨大的“茶叶山”，夸张的大小对比带来了十分具有冲击力的视觉感受，令人印象深刻。

② 吃春

所谓的“吃春”就是采摘食用嫩树叶“香椿”。民间有俗语“雨前香椿嫩如丝”，鲜椿芽醇香爽口、营养价值高，人们常将它与鸡蛋一起炒制，是一道特色的春日菜品。记得看《舌尖上的中国》时就对香椿印象深刻，据说它有一种特殊香气，有人喜欢有人不喜欢，不知道大家吃过没有？

③ 赏牡丹

“谷雨三朝看牡丹”，谷雨赏牡丹的习俗已绵延千年，牡丹花也被因此称为谷雨花。如今在山东菏泽、河南洛阳等地，谷雨时节依旧会举行牡丹花会，供人们观赏游玩。

三、“谷雨”常用意象 ① 春去夏来

谷雨是春季的最后一个节气，之后是立夏了。春日将尽，入夏后又是一个阶段、一番新景象，因此不少品牌都在借势海报中体现“告别春日，迎接夏天”的意象。收集谷雨海报时，看到饮料品牌百事在借势海报中使用“百事竞更新，不觉夏已近”的文案，觉得特别好。 既融入了品牌名称，又体现出春季万物生长变化极快，人们抓紧时光忙着耕耘奋斗而不觉光阴飞逝的内涵，很有“连雨不觉春去，一晴方知夏深”的感觉。

② 植物花草

古代物候历将谷雨分为三候：“第一候萍始生；第二候鸣鸠拂其羽；第三候为戴胜降于桑。”意思是说谷雨后降雨量增多，浮萍开始生长，接着布谷鸟便开始提醒人们播种了，然后是桑树上开始见到戴胜鸟。二十四番花信风中谷雨三侯则为“一候牡丹、二候荼蘼、三候楝花。其中布谷鸟、戴胜、牡丹都是谷雨海报中常见动画植物元素。

好啦以上就是本期为大家整理的二十四节气中谷雨 海报设计 的常用意象，喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的设计干货知识 ~

推荐阅读：

优设字美体正式上线！优设网出品的第2套可商用手写字体 过去这 5 年里，优设连续推出了 5 款字体，既有速度感和力量感兼具的国民级字体「优设标题黑」，也有圆润柔美的「优设好身体」和可爱俏皮的「优设字由棒棒体」，当然，去年热度最高的，当属磅礴大气的手写书法体「优设书华体」，凭借极低的价格和广泛的应用场景，赢得国内许多大公司和设计师的青睐。

阅读文章 >

AI绘画哪家强？Midjourney、文心一格等 6 大工具出图效果大比拼 大家好，这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能

阅读文章 >

大家好，这里是和你们一起聊设计的花生~才送走“雨纷纷”的清明，我们又要迎来一个跟雨相关的节气“谷雨”了，它也是春天的最后一个节气。大家知道“谷雨”名称的由来是什么吗？相关的借势海报中又有哪些常用的意象呢？

大家好，这里是和你们一起聊设计的花生~

才送走“雨纷纷”的清明，我们又要迎来一个跟雨相关的节气“谷雨”了，它也是春天的最后一个节气。大家知道“ 谷雨 ”名称的由来是什么吗？相关的借势海报中又有哪些常用的意象呢？今天就一起来看看吧 ~

往期回顾：

借势海报必看！ 二十四节气之清明海报设计常用意象总结 大家好，这里是和你们聊设计的花生~ 武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。

阅读文章 >

一、“谷雨”简介 谷雨是二十四节气的第 6 个节气，也是春季的最后一个节气，于每年公历 4 月 19 - 21 日交节。“谷雨”这个名称源自古人的“雨生百谷”之说，谷雨前后降水明显增加，而田中的秧苗初插、作物新种，正是最需要水的时候，充沛及时的降雨正好有利于谷类作物的茁壮生长，故名“谷雨”。

谷雨与雨水、小雪、大雪等节气一样，不仅反映自然降水现象，也体现了我国的农耕文化。相对应的，“降雨”和“播种插秧”也成为了谷雨的借势海报中常用的两种意象，二者通常会结合使用。零食品牌百草味在谷雨借势海报中将开心果作为“雨滴’，落在正在插秧的田间，溅起串串涟漪，既体现了节气特征，又巧妙的融入了自家的产品，非常有创意。

二、“谷雨”习俗 谷雨的节气习俗有吃春、喝谷雨茶、赏牡丹等，其中以“谷雨茶”的意象在海报中使用的最多。

① 喝谷雨茶

谷雨茶就是用谷雨这天采的鲜茶叶制成的茶，也叫雨前茶、二春茶，茶叶还必须是上午采的。谷雨茶色泽翠绿，叶质柔软，富含多种维生素和氨基酸，香气宜人，喝了能清火、辟邪、明目，所以谷雨这天不管是什么天气，人们都会去茶山摘一些新茶回来喝。

借势海报中常展示谷雨采茶的场景，或者延伸展示品茶饮茶的相关意象。消费服务平台美团则是在海报中将浸泡着茶叶的水做为湖底世界，湖面是一个小人在攀爬巨大的“茶叶山”，夸张的大小对比带来了十分具有冲击力的视觉感受，令人印象深刻。

② 吃春

所谓的“吃春”就是采摘食用嫩树叶“香椿”。民间有俗语“雨前香椿嫩如丝”，鲜椿芽醇香爽口、营养价值高，人们常将它与鸡蛋一起炒制，是一道特色的春日菜品。记得看《舌尖上的中国》时就对香椿印象深刻，据说它有一种特殊香气，有人喜欢有人不喜欢，不知道大家吃过没有？

③ 赏牡丹

“谷雨三朝看牡丹”，谷雨赏牡丹的习俗已绵延千年，牡丹花也被因此称为谷雨花。如今在山东菏泽、河南洛阳等地，谷雨时节依旧会举行牡丹花会，供人们观赏游玩。

三、“谷雨”常用意象 ① 春去夏来

谷雨是春季的最后一个节气，之后是立夏了。春日将尽，入夏后又是一个阶段、一番新景象，因此不少品牌都在借势海报中体现“告别春日，迎接夏天”的意象。收集谷雨海报时，看到饮料品牌百事在借势海报中使用“百事竞更新，不觉夏已近”的文案，觉得特别好。 既融入了品牌名称，又体现出春季万物生长变化极快，人们抓紧时光忙着耕耘奋斗而不觉光阴飞逝的内涵，很有“连雨不觉春去，一晴方知夏深”的感觉。

② 植物花草

古代物候历将谷雨分为三候：“第一候萍始生；第二候鸣鸠拂其羽；第三候为戴胜降于桑。”意思是说谷雨后降雨量增多，浮萍开始生长，接着布谷鸟便开始提醒人们播种了，然后是桑树上开始见到戴胜鸟。二十四番花信风中谷雨三侯则为“一候牡丹、二候荼蘼、三候楝花。其中布谷鸟、戴胜、牡丹都是谷雨海报中常见动画植物元素。

好啦以上就是本期为大家整理的二十四节气中谷雨 海报设计 的常用意象，喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的设计干货知识 ~

推荐阅读：

优设字美体正式上线！优设网出品的第2套可商用手写字体 过去这 5 年里，优设连续推出了 5 款字体，既有速度感和力量感兼具的国民级字体「优设标题黑」，也有圆润柔美的「优设好身体」和可爱俏皮的「优设字由棒棒体」，当然，去年热度最高的，当属磅礴大气的手写书法体「优设书华体」，凭借极低的价格和广泛的应用场景，赢得国内许多大公司和设计师的青睐。

阅读文章 >

AI绘画哪家强？Midjourney、文心一格等 6 大工具出图效果大比拼 大家好，这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能

阅读文章 >

引言在这个流量见顶的时代，互联网竞争越来越惨烈，各公司业务的渗透难度变高，产品模式方面管理成本的越来越重，而运营效率越来越举足轻重，互联网的巨头们也开始布局 2G/2B 领域，来进一步对传统的企业和行业进一步提升效率、促动变革，最终实现创新和颠覆。这一系列的现象给 B 端市场打开了空前的局面，然而业务种类的丰富及...

引言

在这个流量见顶的时代，互联网竞争越来越惨烈，各公司业务的渗透难度变高，产品模式方面管理成本的越来越重，而运营效率越来越举足轻重，互联网的巨头们也开始布局 2G/2B 领域，来进一步对传统的企业和行业进一步提升效率、促动变革，最终实现创新和颠覆。

这一系列的现象给 B 端市场打开了空前的局面，然而业务种类的丰富及用户使用场景的越来越复杂，一定程度上给用户处理业务增加了负担，这时一个好的 工作台设计 变得更为重要，那作为优秀的交互 设计师 ，如何进行 B 端的工作台设计呢？接下来我们针对这个问题跟大家展开讨论一下。

更多工作台干货：

5000字干货！从四个方面完整分析B端工作台的设计流程和方法 编者按：B端工作台如何设计？

阅读文章 >

一、了解工作台 1. 工作台的定义

工作台从字面上理解“工作的台面”，跟工作相关，那最根本目的就是增效，怎么帮助用户提高工作效率并快速的进入工作的状态。

对应 B 端的产品中， 工作台就是以展示与用户相关概要信息的页面。通过各种概要信息帮助使用者快速了解之前的工作情况、当前的任务进度以及之后的工作安排等，从而达到提高效率的目的。

2. 工作台的特点

B 端产品的业务种类越来越多，信息系统越来越繁杂，那我们讨论工作台的特点时就不再脱离开 B 端产品的业务属性来分析，以下我们将通过对 B 端业务维度，进行了常见工作台类型的分析，从而帮助大家拆解工作台的功能寻求设计机会点。

① 功能聚合类

钉钉、飞书这类是典型的功能聚合型平台，主要业务特色是功能大而全，具有很强的普适性；那最需要解决的问题是怎么帮助用户在大量的应用中快速找到所需的功能 。

在这一特色下，设计的机会点可重点突出常用功能，通过用户实际的使用频率或者用户个性化设置自定义常用功能；同时可根据需求程度增加全功能搜索等辅助功能帮助用户查找。

② 强数据类

最典型的是 IB 数据分析平台，例如神策数据、growing io 等 ，该类型工作台比较明显的特点是通过大量的数据来传递关键性信息，借助图形化的手段，清晰有效地传达与沟通信息，从而促成用户的决策。下图中列举了两个图表组件平台供设计师们参考使用。

主要设计机会点在于一个是如何从各式各样的图表中选择出符合用户所需要的数据图表，另一个就是通过对图表细节的的处理，既能表达出复杂数据关系，又能统计到不同场景下的数据维度；然而这是另一个大的课题遂不展开论述。

③ 强业务类

强业务属性的平台一般多个使用角色，业务种类繁多，使用场景复杂，具有很强的平台特色。其工作台的设计也不再具有明显特征，那我们通过查找相关竞品罗列出一些常见工作台功能模块。

待办事项

待办事项或任务用于提醒用户当前待处理的工作事项，一般会辅助一些具体数值来起到强提醒的目的，在设计中可适当考虑在当前页面通过弹窗的方式能快捷处理，避免下钻到更深页面提交工作效能。

不同平台不同角色的待办内容不同，客户管理类平台的待办更多是强业务指引，例如待审核订单、待发货订单、待处理退款等；企业后台类的待办任务更多的是流程审批，比如请假审批、报销审批、用章审批。

常用功能

快捷功能板块是承载用户常用功能的快链入口，帮助用户节省从导航栏上逐个下钻的时间，快速定位至想要功能开展对应工作。为满足用户个人习惯偏好可设置通过用户的使用频率或自定义常用功能。

核心业务数据概览

一般以具体的数值 或者可视化图表的方式呈现。客户管理类平台常根据需求统计一些关键节点的的信息，比如支付订单数、支付金额、支付人数和访问数等，从而方便用户通过数据进行客户活动的策略调整。

资讯公告

通常业务通知、系统级或企业级的公告及平台一些专业资讯信息，在首页集中展示最主要方便用户快速查看，避免重要信息遗漏。

营销推广

一般平台用来推广新功能、新业务或者广告等会在工作台首页中外漏流量转化入口；入口样式可看推广力度，大到横条 Banner，小到文字链；

个人信息

针对多角色使用的平台，可通过个人信息快速进行身份识别，例如企业网银系统中一些中小型企业可能一人兼职两种角色，不同角色的使用权限不同，清晰的标识用户的基础信息及角色标识有利于更迅速的开展接下来工作。

工作台的设计对于不同的平台属性、不同的角色，所需功能模块不同，而相同功能模块的重要程度也不同，因此要根据具体平台有针对性地进行合理布局。下面我们将针对如何进行 B 端工作台设计进行展开分析。

二、工作台的设计剖析 近期我们刚好接到九江企业网银的体验优化项目，该项目是典型的强业务性平台，根据上文介绍的常见工作台功能模块，九江企业网银又是如何搭建的属于本平台特色工作台的呢？我们进行了如下设计深挖：

1. 明确设计目标

本次项目伊始，我们和行内业务人员及典型企业代表进行了深入的探讨和沟通，且针对行业内标杆的企业网银进行全方位的竞品分析。

针对整个工作台页面明确一个主线的叙事逻辑。首先明确该页面的主要核心是什么，其次是可以通过什么兴趣点来撬动用户，最后是整体页面的延伸点。这样我们的设计目标就有了明确的定义。

2. 定义人群分层

随着用户群越来越大，不同的用户群体分割越来越明显，不同用户的生长周期也发生了一些变化，那么不同的用户所需的信息需要不同的页面来承载；

那我们在不同的人群分层可以根据项目成熟度分为两种方式，一种通过认知和意愿进行分层处理，在现有成熟的数据基础上，将用户可以分为全新用户、尝试型用户、成长型用户、核心用户等等一些更细分的领域；那比较普适的分层，可以简单直接的把用户分为新用户和老用户两种。

九江银行的用户体量还未进一步提高，为保证分析的准确性，我们采用普适分层法，分为新用户和老用户两种。

3. 提取分层人群的特征

根据实际数据确定人群的占比，明确该角色重点专注的问题，通过怎么帮助用户解决问题进行内容策略的制定，然后再进一步确定设计策略。

在 B 端平台中往往会存在多角色使用的场景，所以在用户分层特征提取前，需要先一步关键角色的概括，这样分层人群的特征会更细致准确。九江企业网银中我们分为老板和财务人员 ，针对两种角色进行以下的分层人群特征提取。

根据上述分析，提取关键词， 明确人群分层关键特征。

4. 定义分层信息框架

结合前面我们针对该页面主体叙事逻辑定义，梳理出整个页面的功能模块优先层级，再结合角色人群分层结论进行信息框架制定，该环节需按照具体平台分析结论综合考虑后设计。

5. 具体设计点展示

老板-新用户

为了更贴近的老板使用场景及整个平台全员快速使用户，将初始操作任务化，能更清晰引导老板完成企业初期的权限分配任务，降低学习成本。

老板-老用户

企业正常运作一段时间后，老板更多专注企业内部经营状况，通过数据图表化的方式更清晰传递数据，帮助老板决策进行企业管理，例如公司支取业务 top10、资产负债一览图等。

财务-新用户

通过关键数据的显示及外露对应的业务快捷操作入口，提高财务工作效率，以及根据个人习惯自定义常用功能来帮助用户更快识别产品的业务，为进一步财务工作全面增效。

财务-老用户

待办事项中以业务指标为基准明确工作进度，以数量多少为前提强化任务操作和查看。常用功能个人习惯自定义常用功能来帮助用户更快识别产品的业务，为进一步财务工作全面增效。

三、总结 体验之路，任重道远。工作台的体验优化需符合平台调性，贴切用户自身的特点，以提升使用效率，满足用户内心价值点为设计出发。

以上就是 B 端工作台设计的所有内容了，希望此文对设计的小伙伴们有所帮助，如果有不同见解也欢迎大家留言交流。

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

引言在这个流量见顶的时代，互联网竞争越来越惨烈，各公司业务的渗透难度变高，产品模式方面管理成本的越来越重，而运营效率越来越举足轻重，互联网的巨头们也开始布局 2G/2B 领域，来进一步对传统的企业和行业进一步提升效率、促动变革，最终实现创新和颠覆。这一系列的现象给 B 端市场打开了空前的局面，然而业务种类的丰富及...

引言

在这个流量见顶的时代，互联网竞争越来越惨烈，各公司业务的渗透难度变高，产品模式方面管理成本的越来越重，而运营效率越来越举足轻重，互联网的巨头们也开始布局 2G/2B 领域，来进一步对传统的企业和行业进一步提升效率、促动变革，最终实现创新和颠覆。

这一系列的现象给 B 端市场打开了空前的局面，然而业务种类的丰富及用户使用场景的越来越复杂，一定程度上给用户处理业务增加了负担，这时一个好的 工作台设计 变得更为重要，那作为优秀的交互 设计师 ，如何进行 B 端的工作台设计呢？接下来我们针对这个问题跟大家展开讨论一下。

更多工作台干货：

5000字干货！从四个方面完整分析B端工作台的设计流程和方法 编者按：B端工作台如何设计？

阅读文章 >

一、了解工作台 1. 工作台的定义

工作台从字面上理解“工作的台面”，跟工作相关，那最根本目的就是增效，怎么帮助用户提高工作效率并快速的进入工作的状态。

对应 B 端的产品中， 工作台就是以展示与用户相关概要信息的页面。通过各种概要信息帮助使用者快速了解之前的工作情况、当前的任务进度以及之后的工作安排等，从而达到提高效率的目的。

2. 工作台的特点

B 端产品的业务种类越来越多，信息系统越来越繁杂，那我们讨论工作台的特点时就不再脱离开 B 端产品的业务属性来分析，以下我们将通过对 B 端业务维度，进行了常见工作台类型的分析，从而帮助大家拆解工作台的功能寻求设计机会点。

① 功能聚合类

钉钉、飞书这类是典型的功能聚合型平台，主要业务特色是功能大而全，具有很强的普适性；那最需要解决的问题是怎么帮助用户在大量的应用中快速找到所需的功能 。

在这一特色下，设计的机会点可重点突出常用功能，通过用户实际的使用频率或者用户个性化设置自定义常用功能；同时可根据需求程度增加全功能搜索等辅助功能帮助用户查找。

② 强数据类

最典型的是 IB 数据分析平台，例如神策数据、growing io 等 ，该类型工作台比较明显的特点是通过大量的数据来传递关键性信息，借助图形化的手段，清晰有效地传达与沟通信息，从而促成用户的决策。下图中列举了两个图表组件平台供设计师们参考使用。

主要设计机会点在于一个是如何从各式各样的图表中选择出符合用户所需要的数据图表，另一个就是通过对图表细节的的处理，既能表达出复杂数据关系，又能统计到不同场景下的数据维度；然而这是另一个大的课题遂不展开论述。

③ 强业务类

强业务属性的平台一般多个使用角色，业务种类繁多，使用场景复杂，具有很强的平台特色。其工作台的设计也不再具有明显特征，那我们通过查找相关竞品罗列出一些常见工作台功能模块。

待办事项

待办事项或任务用于提醒用户当前待处理的工作事项，一般会辅助一些具体数值来起到强提醒的目的，在设计中可适当考虑在当前页面通过弹窗的方式能快捷处理，避免下钻到更深页面提交工作效能。

不同平台不同角色的待办内容不同，客户管理类平台的待办更多是强业务指引，例如待审核订单、待发货订单、待处理退款等；企业后台类的待办任务更多的是流程审批，比如请假审批、报销审批、用章审批。

常用功能

快捷功能板块是承载用户常用功能的快链入口，帮助用户节省从导航栏上逐个下钻的时间，快速定位至想要功能开展对应工作。为满足用户个人习惯偏好可设置通过用户的使用频率或自定义常用功能。

核心业务数据概览

一般以具体的数值 或者可视化图表的方式呈现。客户管理类平台常根据需求统计一些关键节点的的信息，比如支付订单数、支付金额、支付人数和访问数等，从而方便用户通过数据进行客户活动的策略调整。

资讯公告

通常业务通知、系统级或企业级的公告及平台一些专业资讯信息，在首页集中展示最主要方便用户快速查看，避免重要信息遗漏。

营销推广

一般平台用来推广新功能、新业务或者广告等会在工作台首页中外漏流量转化入口；入口样式可看推广力度，大到横条 Banner，小到文字链；

个人信息

针对多角色使用的平台，可通过个人信息快速进行身份识别，例如企业网银系统中一些中小型企业可能一人兼职两种角色，不同角色的使用权限不同，清晰的标识用户的基础信息及角色标识有利于更迅速的开展接下来工作。

工作台的设计对于不同的平台属性、不同的角色，所需功能模块不同，而相同功能模块的重要程度也不同，因此要根据具体平台有针对性地进行合理布局。下面我们将针对如何进行 B 端工作台设计进行展开分析。

二、工作台的设计剖析 近期我们刚好接到九江企业网银的体验优化项目，该项目是典型的强业务性平台，根据上文介绍的常见工作台功能模块，九江企业网银又是如何搭建的属于本平台特色工作台的呢？我们进行了如下设计深挖：

1. 明确设计目标

本次项目伊始，我们和行内业务人员及典型企业代表进行了深入的探讨和沟通，且针对行业内标杆的企业网银进行全方位的竞品分析。

针对整个工作台页面明确一个主线的叙事逻辑。首先明确该页面的主要核心是什么，其次是可以通过什么兴趣点来撬动用户，最后是整体页面的延伸点。这样我们的设计目标就有了明确的定义。

2. 定义人群分层

随着用户群越来越大，不同的用户群体分割越来越明显，不同用户的生长周期也发生了一些变化，那么不同的用户所需的信息需要不同的页面来承载；

那我们在不同的人群分层可以根据项目成熟度分为两种方式，一种通过认知和意愿进行分层处理，在现有成熟的数据基础上，将用户可以分为全新用户、尝试型用户、成长型用户、核心用户等等一些更细分的领域；那比较普适的分层，可以简单直接的把用户分为新用户和老用户两种。

九江银行的用户体量还未进一步提高，为保证分析的准确性，我们采用普适分层法，分为新用户和老用户两种。

3. 提取分层人群的特征

根据实际数据确定人群的占比，明确该角色重点专注的问题，通过怎么帮助用户解决问题进行内容策略的制定，然后再进一步确定设计策略。

在 B 端平台中往往会存在多角色使用的场景，所以在用户分层特征提取前，需要先一步关键角色的概括，这样分层人群的特征会更细致准确。九江企业网银中我们分为老板和财务人员 ，针对两种角色进行以下的分层人群特征提取。

根据上述分析，提取关键词， 明确人群分层关键特征。

4. 定义分层信息框架

结合前面我们针对该页面主体叙事逻辑定义，梳理出整个页面的功能模块优先层级，再结合角色人群分层结论进行信息框架制定，该环节需按照具体平台分析结论综合考虑后设计。

5. 具体设计点展示

老板-新用户

为了更贴近的老板使用场景及整个平台全员快速使用户，将初始操作任务化，能更清晰引导老板完成企业初期的权限分配任务，降低学习成本。

老板-老用户

企业正常运作一段时间后，老板更多专注企业内部经营状况，通过数据图表化的方式更清晰传递数据，帮助老板决策进行企业管理，例如公司支取业务 top10、资产负债一览图等。

财务-新用户

通过关键数据的显示及外露对应的业务快捷操作入口，提高财务工作效率，以及根据个人习惯自定义常用功能来帮助用户更快识别产品的业务，为进一步财务工作全面增效。

财务-老用户

待办事项中以业务指标为基准明确工作进度，以数量多少为前提强化任务操作和查看。常用功能个人习惯自定义常用功能来帮助用户更快识别产品的业务，为进一步财务工作全面增效。

三、总结 体验之路，任重道远。工作台的体验优化需符合平台调性，贴切用户自身的特点，以提升使用效率，满足用户内心价值点为设计出发。

以上就是 B 端工作台设计的所有内容了，希望此文对设计的小伙伴们有所帮助，如果有不同见解也欢迎大家留言交流。

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

今天来做一个比较简单的分享，也是很多在做 B 端项目的同学发出过的疑问，那就是既然浏览器中可以使用页面标签，那为什么在项目中还需要使用这个组件和交互框架的形式。更多B端干货：新手科普！4个方面帮你快速熟悉UI组件中的瀑布流编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流...

今天来做一个比较简单的分享，也是很多在做 B 端项目的同学发出过的疑问，那就是既然浏览器中可以使用 页面标签 ，那为什么在项目中还需要使用这个组件和交互框架的形式。

更多B端干货：

新手科普！4个方面帮你快速熟悉UI组件中的瀑布流 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。

阅读文章 >

网页中的页面标签认识 页面标签是用来反应系统中已打开的页面的标识，最常见于浏览器顶部，每当我们新建一个页面，就会创建一个新的标签。我们不仅可以通过它来判断打开了多少页面，也可以用通过点击它们来切换当前聚焦的页面或关闭页面。

当然，除了浏览器外，还有很多其它的软件也热衷于使用页面标签组件，如我们常用的设计软件、办公软件和通讯软件。

以软件层面来说，页面标签的使用可以说非常的普及，但是在网站的系统中，这个组件普及度并不高，第一个能想到的应该就是邮箱系统了。

而日常会接触到的 B 端 SAAS 工具里，也很少会用到这个组件。想必大家都能理解背后的原因，因为网站系统也需要浏览器访问，浏览器自带了页面标签，直接使用浏览器的标签不就行了！

所以问题来了，为什么在网站页面里再做一个页面标签组件？这就要先从页面标签组件出现的过程说起了，在上古时期……

全球使用最广泛的浏览器当然是非 Windows 的 IE ( Internet Explorer) 浏览器莫属。这个浏览器是 Windows 系统捆绑自带的浏览器，从 1995 年上线，在短短几年间成功成为全球开发者最痛恨的浏览器，阻碍整个互联网发展的脚步，苟活到 2022 年 6 月 15 日 21:00 正式停止更新（普天同庆）。

IE 不仅本身的引擎内核一般，而且和 Windows 捆绑的特性而获取的庞大用户体量，成为所有网页新技术普及的最大阻力。因为绝大多数网站开发，都不可能忽视这个群体，就需要花费大量的精力去适配稀烂的老版 IE。

比如在 2010 年以前做网站的时候，如果想要使用已经发布很多年的 CSS 来做样式，你就要首先解决怎么在 Windows 2000 和 XP 默认安装的 IE5、6 能正常显示（对 CSS 支持极差），它们是所有网页前端和 设计师 的噩梦。

而早期 IE 还有个很重要的缺陷，就是它们本身是没有页面标签栏的，Windows 会将打开的软件窗口显示在底部栏中，如果打开的页面较多，则会进行折叠，通过点击折叠菜单后展开。

这是一个非常低效的操作方法，因为当时的显示器普遍在 1280 或 1440 宽，一旦打开网页稍多，展开的菜单就不够放，选择之前打开的网页就很麻烦。

不是没有人没注意到这个问题，现代浏览器的先驱 Oprea，在 1995 年发布上线后就首个支持多窗口文档模式（页面标签前身，如下图版本形式）。但这个优秀的交互因为软件本身的普及度不够高，无法代表真正的用户使用场景。

于是，逐渐兴起的网页管理系统（从本地软件转移到浏览器访问），就开始继承并普及这个交互框架，通过在一个类似软件的页面中，以标签的形式打开站内的新页面，而不用让浏览器窗口被折叠起来，提升交互的效率。

这有一定的主观成分，我也不能确定是哪个欧美管理系统最先使用这个交互框架，但从最早期了解到和自己项目的实际情况分析，这是产生最关键影响的因素。

当然，它也不是仅仅具备这一个优点而已，它还同时包含另一个优点 —— 提升加载效率。

正常加载一个网页，就是客户端向服务器获取相关文本代码和外部资源的过程，代码即服务器返回的 HTML、CSS、JS 等代码，外部资源即图片音视频等文件。

理论上每打开一个页面，你就需要重新和服务器获取一遍这些内容，虽然存在缓存的优化机制，但不管怎么优化，还是会产生很多额外的请求和资源的重复加载。而页面标签的这种模式，就可以避免大量的重复请求和加载，提升页面核心内容的打开效率。

看过 HTML 课程的话，都应该知道一个标准的 HTML 文档必然会包含 、 两个标签。其中 head 标签的内容是不可见的，而且包含很多需要预加载的引用文件，本身就能消耗很多带宽资源。

而在 body 部分中，全局组件等模块也无需重新加载，只需要将全部重心放在对应页面的内容区域即可，可能加载数据量仅为原先的一半，这对拨号上网的年代来讲是具体的减负。

除此之外，在高频切换页面的使用场景中，就可以减少很多白底背景和视觉界面交替出现的 “闪烁感”，这是一种非常折磨人的过程，只有大量使用 SAAS 服务的同学才能感同身受。

这些优势虽然都很明显，但它们主要是建立在过去的技术条件和背景上的。随着时代发展，IE 的消亡，浏览器普遍自带页面标签，网速提升数十倍，这些优势就变得越来越小，而缺点则越来越明显。

那就是网页内的页面标签会很容易和浏览器中标签 “打架”，它不仅会占用本就不多的窗口高度，还在样式和操作上都和浏览器标签很像，导致识别内容效率很难提升。更要命的是，网页里做的页面标签操作体验和浏览器的可没法比……

所以今天的 B 端系统中，使用这个组件的项目越来越少，虽然不是消亡，但它确实已经完成了自己的主要历史使命。

那到底在今天它还有什么存在的场景和价值呢？

这个我很难给出统一的答案，可以肯定的是，其中有一部分设计被老板和甲方强制要求添加页面标签，是基于过去的习惯出发，仅仅是 “路径依赖”。

而其它原因，到底是项目需要提升加载的效率，如网络很差，页面数据量太庞大，还是不新建页面的模式能带来更好的操作连贯性，如深色背景但新建页面是白色，就需要自己去探寻，找到合适的理由了。

所以，针对页面标签组件的使用建议，就是：

如果找不到明确的理由，就不放！如果别人让你放且说不出理由，那就是他们的偏执，没有争论的必要。职位比你高就做，没你高就拒绝。

结尾 以上就是关于页面标签的分享，如果有什么其它的看法，或者有应用页面标签的优秀 SAAS 案例，也可以在下方留言。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

今天来做一个比较简单的分享，也是很多在做 B 端项目的同学发出过的疑问，那就是既然浏览器中可以使用页面标签，那为什么在项目中还需要使用这个组件和交互框架的形式。更多B端干货：新手科普！4个方面帮你快速熟悉UI组件中的瀑布流编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流...

今天来做一个比较简单的分享，也是很多在做 B 端项目的同学发出过的疑问，那就是既然浏览器中可以使用 页面标签 ，那为什么在项目中还需要使用这个组件和交互框架的形式。

更多B端干货：

新手科普！4个方面帮你快速熟悉UI组件中的瀑布流 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。

阅读文章 >

网页中的页面标签认识 页面标签是用来反应系统中已打开的页面的标识，最常见于浏览器顶部，每当我们新建一个页面，就会创建一个新的标签。我们不仅可以通过它来判断打开了多少页面，也可以用通过点击它们来切换当前聚焦的页面或关闭页面。

当然，除了浏览器外，还有很多其它的软件也热衷于使用页面标签组件，如我们常用的设计软件、办公软件和通讯软件。

以软件层面来说，页面标签的使用可以说非常的普及，但是在网站的系统中，这个组件普及度并不高，第一个能想到的应该就是邮箱系统了。

而日常会接触到的 B 端 SAAS 工具里，也很少会用到这个组件。想必大家都能理解背后的原因，因为网站系统也需要浏览器访问，浏览器自带了页面标签，直接使用浏览器的标签不就行了！

所以问题来了，为什么在网站页面里再做一个页面标签组件？这就要先从页面标签组件出现的过程说起了，在上古时期……

全球使用最广泛的浏览器当然是非 Windows 的 IE ( Internet Explorer) 浏览器莫属。这个浏览器是 Windows 系统捆绑自带的浏览器，从 1995 年上线，在短短几年间成功成为全球开发者最痛恨的浏览器，阻碍整个互联网发展的脚步，苟活到 2022 年 6 月 15 日 21:00 正式停止更新（普天同庆）。

IE 不仅本身的引擎内核一般，而且和 Windows 捆绑的特性而获取的庞大用户体量，成为所有网页新技术普及的最大阻力。因为绝大多数网站开发，都不可能忽视这个群体，就需要花费大量的精力去适配稀烂的老版 IE。

比如在 2010 年以前做网站的时候，如果想要使用已经发布很多年的 CSS 来做样式，你就要首先解决怎么在 Windows 2000 和 XP 默认安装的 IE5、6 能正常显示（对 CSS 支持极差），它们是所有网页前端和 设计师 的噩梦。

而早期 IE 还有个很重要的缺陷，就是它们本身是没有页面标签栏的，Windows 会将打开的软件窗口显示在底部栏中，如果打开的页面较多，则会进行折叠，通过点击折叠菜单后展开。

这是一个非常低效的操作方法，因为当时的显示器普遍在 1280 或 1440 宽，一旦打开网页稍多，展开的菜单就不够放，选择之前打开的网页就很麻烦。

不是没有人没注意到这个问题，现代浏览器的先驱 Oprea，在 1995 年发布上线后就首个支持多窗口文档模式（页面标签前身，如下图版本形式）。但这个优秀的交互因为软件本身的普及度不够高，无法代表真正的用户使用场景。

于是，逐渐兴起的网页管理系统（从本地软件转移到浏览器访问），就开始继承并普及这个交互框架，通过在一个类似软件的页面中，以标签的形式打开站内的新页面，而不用让浏览器窗口被折叠起来，提升交互的效率。

这有一定的主观成分，我也不能确定是哪个欧美管理系统最先使用这个交互框架，但从最早期了解到和自己项目的实际情况分析，这是产生最关键影响的因素。

当然，它也不是仅仅具备这一个优点而已，它还同时包含另一个优点 —— 提升加载效率。

正常加载一个网页，就是客户端向服务器获取相关文本代码和外部资源的过程，代码即服务器返回的 HTML、CSS、JS 等代码，外部资源即图片音视频等文件。

理论上每打开一个页面，你就需要重新和服务器获取一遍这些内容，虽然存在缓存的优化机制，但不管怎么优化，还是会产生很多额外的请求和资源的重复加载。而页面标签的这种模式，就可以避免大量的重复请求和加载，提升页面核心内容的打开效率。

看过 HTML 课程的话，都应该知道一个标准的 HTML 文档必然会包含 、 两个标签。其中 head 标签的内容是不可见的，而且包含很多需要预加载的引用文件，本身就能消耗很多带宽资源。

而在 body 部分中，全局组件等模块也无需重新加载，只需要将全部重心放在对应页面的内容区域即可，可能加载数据量仅为原先的一半，这对拨号上网的年代来讲是具体的减负。

除此之外，在高频切换页面的使用场景中，就可以减少很多白底背景和视觉界面交替出现的 “闪烁感”，这是一种非常折磨人的过程，只有大量使用 SAAS 服务的同学才能感同身受。

这些优势虽然都很明显，但它们主要是建立在过去的技术条件和背景上的。随着时代发展，IE 的消亡，浏览器普遍自带页面标签，网速提升数十倍，这些优势就变得越来越小，而缺点则越来越明显。

那就是网页内的页面标签会很容易和浏览器中标签 “打架”，它不仅会占用本就不多的窗口高度，还在样式和操作上都和浏览器标签很像，导致识别内容效率很难提升。更要命的是，网页里做的页面标签操作体验和浏览器的可没法比……

所以今天的 B 端系统中，使用这个组件的项目越来越少，虽然不是消亡，但它确实已经完成了自己的主要历史使命。

那到底在今天它还有什么存在的场景和价值呢？

这个我很难给出统一的答案，可以肯定的是，其中有一部分设计被老板和甲方强制要求添加页面标签，是基于过去的习惯出发，仅仅是 “路径依赖”。

而其它原因，到底是项目需要提升加载的效率，如网络很差，页面数据量太庞大，还是不新建页面的模式能带来更好的操作连贯性，如深色背景但新建页面是白色，就需要自己去探寻，找到合适的理由了。

所以，针对页面标签组件的使用建议，就是：

如果找不到明确的理由，就不放！如果别人让你放且说不出理由，那就是他们的偏执，没有争论的必要。职位比你高就做，没你高就拒绝。

结尾 以上就是关于页面标签的分享，如果有什么其它的看法，或者有应用页面标签的优秀 SAAS 案例，也可以在下方留言。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」