一、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

抖音和腾讯，似乎终于接受了王兴所言的“竞合才是新常态”。 近日，抖音和腾讯视频达成版权合作，抖音旗下的抖音、西瓜视频、今日头条等平台用户可以对腾讯视频授权的长视频进行二次创作。 短视频与长视频平台达成二次创作并不稀奇。抖音与搜狐视频、与爱奇艺都达成过类似合作，

近日，又有短视频和长视频平台之间达成合作的消息传出来了，而这次的对象，是抖音和长视频平台，二者之间达成了版权合作，抖音旗下的抖音、西瓜视频等平台用户，可以对腾讯视频授权的长视频内容进行二次创作。那么此次二者之间达成合作背后，隐藏着哪些原因呢？

抖音和腾讯，似乎终于接受了王兴所言的“竞合才是新常态”。

近日，抖音和腾讯视频达成版权合作，抖音旗下的抖音、西瓜视频、今日头条等平台用户可以对腾讯视频授权的长视频进行二次创作。

短视频与长视频平台达成二次创作并不稀奇。抖音与搜狐视频、与爱奇艺都达成过类似合作，稀奇的是合作发生在抖音与腾讯这一对宿敌之间。

腾讯和抖音官司比合作多，腾讯视频和抖音之间的矛盾就更趋尖锐。两年前，腾讯视频CEO孙忠怀曾将批评的矛头直至抖音，称（短视频）这种非常反智、低俗的娱乐消费品，真的是迅速地就把一代人的审美品位拉下去了，“你喜欢猪食，看到的就全是猪食，没有别的。”

但合作也正在水面下悄悄进行。

2021年11月，抖音微信公众号发布了一篇《关于腾讯与抖音商谈对等开放的说明》，直白地将腾讯如何邀请抖音接入腾讯创作服务平台的邮件晒了出来，“腾讯创作服务平台有大量全网热门的影视综独家版权作品的二创短视频可以外发到抖音，补充抖音内容生态。”

腾讯率先放下了身段，但抖音并未买账，在《说明》中盛赞腾讯此举是“响应了工信部关于互联互通的要求”，腾讯伸出的手悬在了半空中。

“针对腾讯的这次申请，我们已经回复邮件，双方产品技术人员将尽快推进相关细节”，抖音当初的回复看似是场面话，如今看所言不虚。

在尚有增长的流量红利期，互联网巨头们愿意投入更多的精力、财力争夺增量，进入到零和博弈阶段，理论上竞争应该更惨烈，但事实是，它们都无余力再继续激斗。打仗，不如握手言和，合作共赢。

从腾讯早早发出邀约邮件便能看出，腾讯希望通过合作获得更多的版权收入，抖音握手，则可避免无止境地陷入版权官司。

腾讯和抖音，迈出了“合”的一步，但两强对峙的竞争格局并未发生多大变化。

日前据The Information报道，字节跳动 2022 年收入超 800 亿美元，相比2021年的约600亿美元增长30%以上。文章指出，字节跳动的营收水平已经与腾讯相当。

字节获得的广告增长中，想必有一部分来自腾讯。腾讯2022年网络广告收入为827.29亿元，2021年为886.66亿元。

腾讯并非始终位于守方，去年11月，腾讯总裁刘炽平曾指出，视频号广告的一部分来自于客户目前在其他短视频平台的投放和电商广告，这里的其他平台，或许就包括抖音。

01 从与搜狐视频合作开始，可以明显看到抖音转变了与长视频合作的策略，这或许与版权官司判赔的金额连年攀升有关。

去年10月，因平台存在大量用户上传的《云南虫谷》的剪辑片段，抖音被判赔偿腾讯3200万元。

《云南虫谷》为腾讯出品的影视剧，共16集，法院酌定腾讯因侵权行为遭受的经济利益损失为平均每集200万元，这创造了此类案件的赔偿记录。

此前，快手曾因侵权播放爱奇艺享有版权的《琅琊榜》《老九门》，而判赔218万元。

在与搜狐视频、爱奇艺达成版权合作后，抖音手上已经有了不少可供创作者二创的版权，但创作者们不会管他们要解说的视频版权是归属于爱奇艺还是腾讯， 只要不达成合作，抖音就会不断收到侵权警告函。

为了维护自己的版权利益，腾讯视频兵分两路，红脸白脸一起唱：2021年11月，腾讯向抖音发出了接入腾讯创作服务平台的邀请邮件；而同时，据《云南虫谷》案的判决文书，腾讯自2021年8月30日至2022年3月16日，约向抖音发送了108次侵权警告函达108次，6299条侵权链接。

腾讯在维权上的态度，要比爱奇艺、搜狐视频强硬的多。字母榜在企查查上查询到，截止4月7日，北京抖音信息服务有限公司涉及的司法案件共3489件，45.57%的案件案由为侵害作品信息网络传播权纠纷。其中，与腾讯有关的共计608件，与优酷有关的119件，与爱奇艺有关的共计75件。

不买下腾讯视频版权，抖音要么要付出逐年上涨的侵权赔偿，要么就要加强审核，付出更高的运营成本，同时还要冒着损害创作生态的风险。

腾讯视频手上握着不少独家影视版权，倘若禁止影视类目创作者解说这些视频，显然会极大影响他们的内容创作范围，而影视类目已经是抖音内容生态的一大品类。

据新榜发布的数据，2020年12月，TOP150榜单中，内容类型所占比重最大的正是影视类内容，占比为17.33%。影视类内容除可以贡献不菲的日活外，还可以贡献较长的用户时长，在某些影视剧热播期间，这类内容的表现可能更佳。

抖音虽然是视频时代流量最丰沛的流量主，但眼下同样面临“增长天花板”这一互联网公司共同的时代命题，视频号也正虎视眈眈。

新榜发布的视频号500强数据显示，2022年7月，影视娱乐账号是当月top500账号中占比最高的类目，共有124个账号。视频号，也正成为影视类目创作者挖掘流量的新宝地。

摆高姿态有助于抖音在口水战中获得胜利，但握手言和更符合抖音的利益。往长远看，卸掉版权诉讼官司，走在上市之路的抖音也能走得更轻快。

02 从腾讯2021年底率先向抖音发出合作邀约的姿态看，腾讯视频在这场合作中的动力很强，到2022年，腾讯的合作动力只会更强。

据《晚点LatePost》报道，去年12月中旬年度员工大会上，马化腾少见地公开批评许多部门花钱大手大脚、内部贪腐现象严重、管理层懈怠没有进取心。“业务的盈利情况如果不好，该砍还是得砍”,虽然马化腾没直接说腾讯视频，但腾讯视频的处境外界一望便知。

腾讯最新发布的财报显示，去年腾讯媒体广告收入下降20%至107亿元，原因之一为，腾讯视频广告收入由于内容排播延后而下滑；腾讯去年三季度财报则提及，由于内容排播延后，腾讯视频付费会员数小幅降至1.2亿元。

腾讯视频若不能“增效”，只好继续“降本”了，可见腾讯视频的压力之大。

效从哪里来？爱奇艺的财报可以证明，会员收入和广告收入，都已没有太多爆发式的增长空间。

去年一季度至四季度，爱奇艺会员收入分别为45亿元、43亿元、42亿元和47亿元；在线广告收入分别为，13亿元、12亿元、12亿元、16亿元。当然，随着今年广告行业复苏，视频平台的广告收入也会从低谷中爬出来。

而向短视频平台售卖版权，恰可以带来一部分新收入。

与搜狐视频、爱奇艺的合作，抖音和合作方们均未披露合作金额，本次与腾讯视频的合作依旧如此，爱奇艺财报披露的收入来源或可以作为参考。

去年7月，爱奇艺与抖音达成版权合作。二季度，爱奇艺内容分发营收为4.793亿元，其他营收为6.984亿元；三季度，爱奇艺的内容分发营收为7.297亿元，其他营收为13亿元，环比都出现大涨的趋势。

除了最直接的版权收入，视频平台也能在流量丰沛的抖音进行内容宣发，这对正在播放的新剧和老剧集同样适用。

资深制片人陈佳男曾向字母榜表示，很多没有涉及剧透的影视二创会对影视剧带来明显的正向宣传，版权方很需要这部分流量，在影视剧宣传期，版权方甚至会主动发起二创活动，鼓励剪刀手们再创作；对平台上的老剧集来说，在短视频平台增加曝光，也能为作品带来二次热度。

03 从晒出腾讯的合作邀约邮件，到发出双方达成合作，抖音和腾讯之间的火药味似乎淡了些，抖音也确实做出了自己的让步。

2021年晒出腾讯合作邮件时，抖音曾在蓝底的海报上用白字写着《关于腾讯与抖音商谈对等开放的说明》，说明最后，还特意写明，“此前，我们也多次申请微信开放平台恢复抖音和西瓜视频的分享、登录功能。”

如今，抖音视角里的“对等”并未彻底实现，抖音视频依旧无法正常分享到微信里，但抖音和腾讯视频的合作先一步达成。

这是互联网世界竞合关系的又一范例。

2017年6月，王兴接受《财经》杂志采访时，便立场鲜明地指出，美团并不指望完全消灭敌人，“所有人在下半场都要接受竞合才是新常态”。

2018年6月，腾讯官方曾声明，因字节跳动公司多次恶意诋毁腾讯公司，对企业声誉造成了巨大损失，决定暂停与北京字节跳动科技有限公司和北京微播视界科技有限公司的相关合作。

尽管近年腾讯和抖音依旧针尖对麦芒，两家的合作却在悄悄恢复中。据36氪报道，抖音与腾讯音乐已于2019年年末达成音乐转授权合作。

2021年1月，腾讯游戏品牌“Spark More（去发现，无限可能）”在抖音投放了一则开屏广告，此后也不断有网友发现，腾讯旗下多个产品皆在抖音上进行投放。

巨量引擎人士曾向媒体回应称，2021年，腾讯旗下的游戏、企业微信、音乐、金融等产品均提交了抖音投放需求，巨量引擎按照正常的标准给予了审核，符合规范者予以通过。

而抖音同样也从腾讯手里买了广告。AppGrowing数据显示，今年一季度，抖音App投放，92.69%在巨量引擎、巨量千川，另有4.98%在腾讯广告，番茄小说也有类似的投放分布。

同为内容平台，抖音与腾讯四处开战，这次停战的长视频版权可能是受到较多关注的领域，但在长视频之外，抖音和腾讯的连天炮火仍然没有停息之势。

作者：谭宵寒；编辑：王靖

来源公众号：字母榜（ID：wujicaijing），让未来不止于大。

本文由人人都是产品经理合作媒体@字母榜 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

{{{path> 收藏 已收藏 {{ postmeta.bookmark }} {{{path> 点赞 已赞 {{ postmeta.postlike }}

今天来做一个比较简单的分享，也是很多在做 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 案例，也可以在下方留言。

我们下篇再贱～

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

面包屑导航是从网站技术兴起就伴随出现的老组件了，至今还在使用，为用户提供了许多好处，而对设计几乎没有任何成本，前辈们也做了大量的研究和实践，证明是可行的。所以这次分析面包屑导航设计，希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。更多导航设计干货：如何做好B端产品的导航栏设计？

面包屑导航是从网站技术兴起就伴随出现的老组件了，至今还在使用，为用户提供了许多好处，而对设计几乎没有任何成本，前辈们也做了大量的研究和实践，证明是可行的。所以这次分析 面包屑导航 设计，希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。

更多 导航设计 干货：

如何做好B端产品的导航栏设计？来看高手的5000字总结！ 编辑导读：导航栏是用户对产品架构了解的第一途径，是作为产品各个功能之间的桥梁，能够对产品功能进行分发、引导。

阅读文章 >

一、什么是面包屑

面包屑，英文：Breadcrumbs 直译过来，来源于格林童话中《汉赛尔与格莱特》，讲述的是一对兄妹在继母的怂恿下遭到父亲的遗弃，通过石子或面包屑做标记，找回家的路，虽然面包屑被鸟吃掉了，没找到回家的路，但面包屑的思路在网站的设计中沿用了下来，形成我们现在口中的面包屑组件。其中这个面包屑的作用是：留下返回路径。

什么是面包屑(breadcrumbs)?

面包屑是一种导航组件，用于显示用户在网站或应用程序中的位置，并能向上返回。

二、面包屑的形态 1. 面包屑的样式

以下是面包屑的常用样式，当前正在查看的页面的名称不应该是可点击的链接，因为重新加载活动页面只会令人困惑。这 1 和 2 为面包屑的常用样式，两者都可以接受，功能是没有差别的，推荐使用“>”字符，箭头指向，前进路径更形象；3-7 为面包屑的样式扩展，可根据实际的业务场景对应选择。

面包屑不仅只存在于 PC 端，面包屑不是 PC 端的专利，移动端也是可以考虑加上面包屑的，值得探讨的是，移动端加上面包屑的成本大于收益，不仅影响视觉/布局，交互上体验也较差，所以导致现在移动端的基本看不到面包屑。

若任务允许，也是可以加入面包屑的。移动端设计面包屑需要注意：

不要使用太小或太拥挤的面包屑； 不要使用包含多行的面包屑； 考虑缩短面包屑路径以仅包含最后一个级别 2. 面包屑的位置

据国外的研究发现，面包屑的位置在它被点击的频率中所起到重要作用。

 

显示在页面顶部的典型位置，就在全局导航栏的下方。轨迹显示当前页面在站点层次结构中的位置。

将面包屑直接放在页面标题上方或旁边；直接放置在页面标题附近的面包屑获得了高达 82% 的所有面包屑点击量。

3. 面包屑的分类

当前设计中主要使用了 2 种面包屑类型，1 是基于位置，2 是基于属性。

还有一种是基于路径的面包屑导航，这个很少见，这种类型的导航更像是历史记录，他们的功能基本上是和前进和后退的按钮是一样的，不推荐用于导航目的，因为它并没有真正的帮助。对于登录网站深处页面的人来说，它甚至可能会感到困惑。

面包屑的另一种思考

面包屑的目的是帮助我们找到回去的路，箭头方向指向左，不是更好吗？

是的，指向左的箭头效果更好，设计中可考虑：

跟移动端保持一致，尽量减少用户体验的差异； 冗余较少，可以减少当前页的显示，页面少一个元素让用户处理，反过来提高页面的可用性； 跟面包屑的初衷设计是一样的。 4. 面包屑的作用

研究表明面包屑在 6% 的情况下被用作导航工具。相比之下，40% 的用户点击了嵌入式链接，31% 的用户点击了浏览器后退按钮，22% 的用户点击了导航栏。同一项研究表明，当没有面包屑路径存在时，导航栏和后退按钮的使用频率更高。

另一研究表明，在研究过程中，研究人员向参与者指出了面包屑路径，并要求参与者在可行的情况下使用面包屑。接受面包屑使用指导的测试参与者完成任务的速度比没有接受指导的参与者快得多。

在互联网上搜索了这个问题的答案，可以确认，面包屑可以改善 SEO，但不要在这方面投入太多，只通过面包屑改善 SEO 效果很小。

三、面包屑如何使用 虽然眼下很多网站都流行使用面包屑导航，但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。

层级较深，层级达到三层或三层以上的网站； 功能逻辑紧密，功能模块之间有关联，网站内容结构上独立不交叉结。

最后的总结 面包屑导航是一种辅助形式的导航，减少了用户访问特定页面所需的点击次数，这有助于防止用户跳出。它甚至不会占用太多空间，因此没有正当的理由，建议还是加上面包屑导航。

设计建议：

面包屑不应取代全局导航栏或部分内的本地导航。 面包屑路径应该以指向主页的链接开头，完整的链接，无点击链接是不可取的（除当前页面）。 用于页面分层排列的大型网站和复杂产品（在设计三层或三层以上的网站时使用面包屑），让登陆页面的用户可以快速知道自己在哪里。 在产品中，确保面包屑不会在视觉上压倒页面，面包屑可以通过较短的名称或自动折叠来适应导航状态。 将面包屑放在屏幕左上角，页面标题上方或旁边。 参考文献

https://www.nngroup.com/articles/breadcrumbs/ https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html https://arco.design/docs/spec/breadcrumb https://ant.design/components/breadcrumb-cn/?theme=compact https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 欢迎关注团队微信公众号：兆日 UCD