网站顶部导航栏，通常称为 header，是用户进入网站后最先看到的地方，决定着用户对网页的第一印象，其重要性不言而喻，顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需要的目标。本文将以竞品分析的方式优化产品顶部结构。更多导航设计干货：复杂网站的导航模式要怎么设计才合理舒适？

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

本文将以竞品分析的方式优化产品顶部结构。

更多 导航设计 干货：

复杂网站的导航模式要怎么设计才合理舒适？我总结了7个方面！ 编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路： 具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表

阅读文章 >

一、竞品选择 以下依次为 SMB、北森、Moka、飞书，header 主要展示内容有：品牌 logo、菜单、登录/注册、留资入口、联系方式及其他入口；

主要菜单数量分别为 SMB 为 7 个、北森为 6 个、Moka 为 5 个、飞书为 5 个；

整体都没超过 7 个，符合 7±2 法则，全部产品以聚合下拉的形式，信息整理更加简约，用户能够能更加直观清晰的查找自己想要的内容。

注：7±2 法则又称米勒定律，由美国心理学家 George A. Miller1956 年发布的论文提出，他发现，人类头脑最好的状态能记忆含有 7(±2)项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

用超多案例，帮你认识无处不在的「米勒定律」 今天给大家带来一个无处不在的定律，虽然它很常见，但它很安静。

阅读文章 >

二、主要菜单展开形式 1. SMB

菜单进行分类整理，以下拉展开的形式，展开样式为 2.5D 图标+标题+说明文案、图标+名称以及纯文字 3 种形式展示；

优点：

对所有菜单进行分类，既有“保留”也有“舍弃”，分类的形式整体信息层级清晰，清爽简洁，用户的注意力可以更好的集中在重要信息上，隐藏的功能也能根据分类随时随地呈现出来；

缺点：

同样的位置展开样式有 3 种，2.5D 图标+标题+说明文案、图标+名称、纯文字 3 种形式；从表现层来看，高度、宽度不够统一，整体缺少统一性，方案展开后间距较拥挤，与帮助展开间距宽度也不够统一，整体缺乏完善的规范性。

2. 北森

内容很多，通过信息梳理，将菜单分类整理，展开样式统一为分类标题+具体标题+说明文案；

优点：

在结构层和框架层进行了清晰的分类，整体信息展示清晰，比较统一，不会额外增加用户的学习成本；

公司相关的信息统一入口，分类展示公司介绍、动态及招聘信息，清晰简洁，功能与统一相辅相成；

菜单展开右侧展示最新的文章、攻略等文章链接、以及下载入口，导航的分类和展示深入洞察了用户心理及业务需求。

缺点：

在整体宽度适配上较死板，小于 1200 宽度时未做精细的交互适配，完全隐藏了菜单，需要点击浮窗展开，对小屏用户不够友好。

3. Moka

导航在结构层和框架层做了信息梳理，菜单展开整体是按分类展示，标题+具体产品名称，或标题+具体企业 logo 展示，右侧展示链接文章，推荐案例等

优点：

产品功能按系统分类，右侧展示相关的链接，解决方案和客户案例除了行业分类，在每个行业类别里加入了雇主品牌的露出，巧妙的结合，深入洞察了用户心理，以品牌做行业背书，更加具有信服力。

缺点：

产品功能展开宽度大于 1200，在小屏幕上会出现展示不全的问题；且所有的展开宽度及高度不够统一，以及文字大小不统一的情况；

整体宽度也未做精细的适配，小于 1280 宽度时完全截断的形式对小屏用户不够友好。

三、产品现状 1. header 设计

展示内容有：品牌 logo、主站跳转入口、菜单、登录/注册、留资入口、联系方式；

主要菜单为 8 个，所有产品以罗列的形式全部展示，整个 header 展示内容较多，导致每个选项间间距过密造成视觉负担；

“牛客招聘研究院”“用词容易增加用户的认知成本，不容易记忆；

“免费试用”进入后为留资页面，不能马上试用，文案可能会造成与预期不符。

2. 主要菜单展开形式

菜单未分类整理，所有产品以罗列的形式展示；

信息未根据产品自身实际情况取舍，全部放在导航区增加用户的使用负担，注意力会被分散；

“牛客招聘研究院”展开有更多内容，但缺少视觉指引，不易发现，且样式以普通下拉菜单的样式，缺少主次

四、改进建议 1. header

在官网设计中，根据 7±2 法则，顶部导航栏在页面初始状态下，菜单数量基本都会保持在 5-9 个。

定律本身没有问题，但要善于与产品本身的特征结合运用，如 7±2 法则运用到产品设计中，就需要与产品的功能特征、交互特征、设计规范结合思考。

如上图数据展示，大部分人在短时间的信息容量都可以到达 7 条信息，然而从第 5 条信息开始，已经有一小部分人感受到信息负担，能达到 7 条信息以上的人也是非常少的一部分。

2. 改进建议

从产品为多数人而设计的理念出发，信息过度加载会增加用户的使用负担，注意力会被分散，应该结合 7±2 法则的设计特征，web 端顶部栏选项卡数量不超过 7 个，视觉和体验上才最佳。

并且 7 条以内找某个选项或信息条目会更有效率，过多选项或信息条目可能需要更多的时间去操作；

因此，在设计的时候我们要根据产品自身的实际情况进行取舍，整体菜单数量应控制在 7 个及以内。

3. 方案尝试

欢迎关注作者微信公众号：「防脱发药水」

网站顶部导航栏，通常称为 header，是用户进入网站后最先看到的地方，决定着用户对网页的第一印象，其重要性不言而喻，顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需要的目标。本文将以竞品分析的方式优化产品顶部结构。更多导航设计干货：复杂网站的导航模式要怎么设计才合理舒适？

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

本文将以竞品分析的方式优化产品顶部结构。

更多 导航设计 干货：

复杂网站的导航模式要怎么设计才合理舒适？我总结了7个方面！ 编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路： 具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表

阅读文章 >

一、竞品选择 以下依次为 SMB、北森、Moka、飞书，header 主要展示内容有：品牌 logo、菜单、登录/注册、留资入口、联系方式及其他入口；

主要菜单数量分别为 SMB 为 7 个、北森为 6 个、Moka 为 5 个、飞书为 5 个；

整体都没超过 7 个，符合 7±2 法则，全部产品以聚合下拉的形式，信息整理更加简约，用户能够能更加直观清晰的查找自己想要的内容。

注：7±2 法则又称米勒定律，由美国心理学家 George A. Miller1956 年发布的论文提出，他发现，人类头脑最好的状态能记忆含有 7(±2)项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

用超多案例，帮你认识无处不在的「米勒定律」 今天给大家带来一个无处不在的定律，虽然它很常见，但它很安静。

阅读文章 >

二、主要菜单展开形式 1. SMB

菜单进行分类整理，以下拉展开的形式，展开样式为 2.5D 图标+标题+说明文案、图标+名称以及纯文字 3 种形式展示；

优点：

对所有菜单进行分类，既有“保留”也有“舍弃”，分类的形式整体信息层级清晰，清爽简洁，用户的注意力可以更好的集中在重要信息上，隐藏的功能也能根据分类随时随地呈现出来；

缺点：

同样的位置展开样式有 3 种，2.5D 图标+标题+说明文案、图标+名称、纯文字 3 种形式；从表现层来看，高度、宽度不够统一，整体缺少统一性，方案展开后间距较拥挤，与帮助展开间距宽度也不够统一，整体缺乏完善的规范性。

2. 北森

内容很多，通过信息梳理，将菜单分类整理，展开样式统一为分类标题+具体标题+说明文案；

优点：

在结构层和框架层进行了清晰的分类，整体信息展示清晰，比较统一，不会额外增加用户的学习成本；

公司相关的信息统一入口，分类展示公司介绍、动态及招聘信息，清晰简洁，功能与统一相辅相成；

菜单展开右侧展示最新的文章、攻略等文章链接、以及下载入口，导航的分类和展示深入洞察了用户心理及业务需求。

缺点：

在整体宽度适配上较死板，小于 1200 宽度时未做精细的交互适配，完全隐藏了菜单，需要点击浮窗展开，对小屏用户不够友好。

3. Moka

导航在结构层和框架层做了信息梳理，菜单展开整体是按分类展示，标题+具体产品名称，或标题+具体企业 logo 展示，右侧展示链接文章，推荐案例等

优点：

产品功能按系统分类，右侧展示相关的链接，解决方案和客户案例除了行业分类，在每个行业类别里加入了雇主品牌的露出，巧妙的结合，深入洞察了用户心理，以品牌做行业背书，更加具有信服力。

缺点：

产品功能展开宽度大于 1200，在小屏幕上会出现展示不全的问题；且所有的展开宽度及高度不够统一，以及文字大小不统一的情况；

整体宽度也未做精细的适配，小于 1280 宽度时完全截断的形式对小屏用户不够友好。

三、产品现状 1. header 设计

展示内容有：品牌 logo、主站跳转入口、菜单、登录/注册、留资入口、联系方式；

主要菜单为 8 个，所有产品以罗列的形式全部展示，整个 header 展示内容较多，导致每个选项间间距过密造成视觉负担；

“牛客招聘研究院”“用词容易增加用户的认知成本，不容易记忆；

“免费试用”进入后为留资页面，不能马上试用，文案可能会造成与预期不符。

2. 主要菜单展开形式

菜单未分类整理，所有产品以罗列的形式展示；

信息未根据产品自身实际情况取舍，全部放在导航区增加用户的使用负担，注意力会被分散；

“牛客招聘研究院”展开有更多内容，但缺少视觉指引，不易发现，且样式以普通下拉菜单的样式，缺少主次

四、改进建议 1. header

在官网设计中，根据 7±2 法则，顶部导航栏在页面初始状态下，菜单数量基本都会保持在 5-9 个。

定律本身没有问题，但要善于与产品本身的特征结合运用，如 7±2 法则运用到产品设计中，就需要与产品的功能特征、交互特征、设计规范结合思考。

如上图数据展示，大部分人在短时间的信息容量都可以到达 7 条信息，然而从第 5 条信息开始，已经有一小部分人感受到信息负担，能达到 7 条信息以上的人也是非常少的一部分。

2. 改进建议

从产品为多数人而设计的理念出发，信息过度加载会增加用户的使用负担，注意力会被分散，应该结合 7±2 法则的设计特征，web 端顶部栏选项卡数量不超过 7 个，视觉和体验上才最佳。

并且 7 条以内找某个选项或信息条目会更有效率，过多选项或信息条目可能需要更多的时间去操作；

因此，在设计的时候我们要根据产品自身的实际情况进行取舍，整体菜单数量应控制在 7 个及以内。

3. 方案尝试

欢迎关注作者微信公众号：「防脱发药水」

设计师在做设计的过程中，会遇到用户与平台之间的冲突；不用用户角色之间的冲突；功能与平台之间的冲突。设计价值观是什么？个人认为设计价值观就是：当用户利益和平台冲突时，你的侧重点是什么？

设计师在做设计的过程中，会遇到用户与平台之间的冲突；不用用户角色之间的冲突；功能与平台之间的冲突。

设计价值观是什么？个人认为设计价值观就是：

当用户利益和平台冲突时，你的侧重点是什么？ 当不同角色的用户冲突时，你的侧重点是什么？ 当某个功能和平台冲突时，你的侧重点是什么？ 当不同用户、功能和平台三者产生冲突时，你的侧重点是什么？ 面对上述情况，设计师的侧重方向，就是个人 设计价值观 的体现。本篇文章大纲如下：

工作流程问题 用户视角与平台视角 不同角色用户的视角 功能视角与平台视角 设计师 的视角转换 后记 作者往期干货：

为什么有人工作8年还是大头兵，有人5年就成了设计经理？ 上周收到优设网主编程远的邀请，让我写一篇职场习惯的文章。

阅读文章 >

一、工作流程问题 设计师的工作流程通常是：设计师接到产品经理的文档，设计师基于产品文档，转化成设计稿。

而产品文档可能会存在一些问题，例如：因为业务原因、开发原因和产品经理自身对于设计理解等问题。

而设计师在设计过程中会潜移默化地将部分问题合理化，由于缺乏其他角色的视角，导致设计出来的设计稿存在一些问题。

接下来我们从各种不同视角来感受其差异性。

二、用户视角与平台视角 下图是淘宝和拼多多两个电商平台的消息聊天界面。淘宝做了一键清除未读消息功能。而拼多多没有做这个功能。

站在用户的视角来看：一键清理这个功能真好，那么多消息挨个清理真麻烦。增加了一键清理，真方便。

站在平台的视角来看：一键清理对消息系统伤害大，对消息的触达不利，消息系统的本质是通过徽标数触达给用户，push 用户去阅读和回复。增加了一键清理功能，让消息系统丧失了本该有的功能。

这个例子就是用户视角和平台视角产生了冲突。

再来看一个例子。

在 2013 年 5 月 10 日，QQ 就上线了群助手。群助手可以帮助用户将不重要的群或者打扰的群放在群助手里，减少用户的打扰。

对于用户侧而言，减少用户的打扰。是一个非常好的功能。

那么这么好的功能微信在 2021 年 9 月 26 日，上线群折叠。

做群折叠站在平台侧来说，危害是：降低群活跃度，而提升群活跃是一个重要的指标，QQ 的群助手进一步诱使群变成死群。

作为设计师，我们一直在说做好用户体验，是因为做好用户体验对平台是有好处的。

下图所示：做好用户体验，可以给用户带来更多的好处/利益。这样可以更好地留存用户，获得更好的口碑，带来更多的新用户增长，从而平台的日活增加，日活的增加，意味着平台未来有更好的发展。

但是做好用户体验的前提是这个用户体验对平台负面影响小于带给平台收益。

三、不同角色用户的视角 不同角色的用户诉求也不一样。

如下图所示：QQ 可以定制字体。下图可以看到，每个用户都有自己的字体，导致字体被滥用，一个页面，每个字体不一样，有的字体识别性很差，阅读起来体验很差。

而微信并没有做定制字体。虽然缺少个性，但是整体阅读体验好。

对于 QQ 发送者来：可以定制字体字号和颜色的需求，这是一个很好的功能。

但是对于信息接收者来说：阅读困难。在上面这个 QQ 群里面。一个人是发送者，另外 1946 个人是接受者。整体来说，接受者角色伤害会更大一些。

微信群发助手，限制群发人数不能超过 200 人。

对于发送者的视角来说，微信体验很差，不给放开限制。但是如果放开的话，接受者会受到微商等群发消息的轮流轰炸。

对于发送者视角来说，牺牲了体验，但是对于接受者来说，获得了更健康的生态环境。从角色人数上来说，群发用户的使用人数，是远远低于接受者的。

之前 QQ iOS 端安装包里面内置 800M+虚幻游戏引擎。至于为什么要这么做，知乎上有人回答说是为了推出新的 3d 虚拟形象。

QQ 会为了少部分目标用户的需求，强行让全部 iOS 用户承担该伤害。

通过以上可以得出结论：

QQ 普遍只关注部分用户的需求，从而忽略其他用户的需求。 微信在产品功能体验更具备全局视角。当然微信也不全是好的，例如多份文件重复下载，不做映射和去重，导致微信占据空间大得离谱。 四、功能视角与平台视角 站在不同立场，得出的结论也是不一样的。

如下图所示：用户点完美团外卖后，在旧版美团上，将订单状态以卡片的形式展示在首页。

而后面美团改版后，将订单状态收到了外卖模块中，未在首页展示。

对于外卖功能的产品经理：希望在首页展示，提升外卖用户的体验和粘性.

对于首页功能的产品经理：对于已购买的信息在首页展示，会牺牲其他复购模块的曝光率。这时候，就会存在功能视角和平台视角产生冲突。

那么接下来看朋友圈为什么不独立做一个 tab。

对于朋友圈产品经理的视角：希望独立 tab 展示，非 tab 中的一个列表。

对于平台的产品经理：朋友圈独立 tab，使得微信更像一个真正的社交工具，而不是一个生活方式了。

从格局上说，生活方式的想象力远高于社交工具。同时朋友圈作为一个模块，可以很好地将一部分流量分发到视频号、购物、游戏、扫一扫及小程序等模块中。

五、设计师的视角转换 作为设计师，需要先有业务视角，了解业务。然后将业务流程转换成设计视角。

最后需要从用户视角，站在用户的角度去看待。最后在全局看待用户、功能和平台三者之间的关系。

六、后记 回到最初的标题，什么是设计价值观？

如果你能看到最后，将会有自己的答案，或许看这篇文章之前你已经有了个人的价值观了。

本篇文章仅供参考，不一定对，仅仅是我的个人观点。

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

大家好，这里是和你们一起探索 AI 绘画的花生~3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能，不过服务是由 OpenAI ...

大家好，这里是和你们一起探索 AI 绘画的花生~

3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能，不过服务是由 OpenAI 的 DALL·E 提供的；Adobe 则是推出 了 Firefly，目前包含文本生成图像和文本生成字效两种功能。

对我们 设计师 来说可用的 AI 绘画工具越来越多了，那它们之前的出图效果如何，又各自有什么特点呢？为了一探究，我决定用相同的提示词在不同的 AI 绘画工具中进行出图测试，测试对象包括 Midjourney、DreamStudio、微软 Bing Image Create、Adobe Firefly 4 款国外软件和百度文心一格、Tiamat 2 款国内软件。想知道测试结果如何吗？一起来看看吧 ~

（ DreamStudio 是 Stability AI 官方开发的在线绘画软件，内置了最新的 Stable Diffusion v-2.1 模型）

往期回顾：

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

阅读文章 >

免费开放！人人都能轻松上手的AI绘画工具DreamStudio 大家好，我是和你们聊设计的花生~ 之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce

阅读文章 >

一、写实风景 首先测试的是写实风景的出图效果，提示词中我没有加入很多的修饰词，也没有用特别命令和强调符号，仅描述了画面的主体，然后用“专业摄影”确定图片的性质。6 款工具生成的风景图像质量都非常高，只在画面风格和氛围上有一些区别，比如 Bing Image Create 的图像光感很强，颜色绚烂柔和，仿佛加了一层柔光滤镜。Tiamat 的生成效果最令我意外，因为在它的图像中森林也被白雪覆盖了，更像是“冬日雪景图"，和其他 5 张图像有明显区别。

二、人物肖像 在进行人物肖像测试的时候，6 款工具有了较明显的差距。从人像完成度上看，质量最好的是 Midjourney V5 和 Adobe Firefly，效果非常逼真，几乎看不出来是 AI 生成的，不过 V5 的正面半身照样式更符合我想要的效果。Dreamstudio 和 Bing Image Create 生成的图像分辨率较低，五官也有一些不自然。

然后是 Tiamat，我测试了好几次，对提示词的内容也进行了微调，但是生成的效果都是厚涂插画，不是摄影照片。使用的都是通用基础模型，生成的风景照是写实的，人物肖像却是 插画 类型的，不知道是什么原因。

最后是文心一格，也是调整了好几次，生成的效果都不是很理想。要么是人物不居中，要么是画面中出现了莫名其妙的摄像机，人物质感也很假，五官严重扭曲失真，可能是我还没有掌握到合适的关键词。

三、二次元画风 再来测试一下大家非常喜欢的二次元画风。为了体现二次元风格，我在提示词中加入了关键词“anime”，指定动漫画风。Midjourney、Bing 和 Adobe Firefly 生成的质量都很不错。文心一格和 Tiamat 都有专门的“二次元/动漫”模型，我在测试也使用了对应的模型，因此生成的质量非常高，细节精致丰富，甚至接近厚涂风了。

相比之下 Dreamstudio 的生成效果就差很多了，为了提升质量我特地在它的提示中加入了“Pixiv”（日本的绘画社区，有很多高质量的二次元插画），但是效果不太明显。看来 Stable Diffusion 的二次元图像生成效果远比不上 C 站上大神们自己训练出来的模型。

四、概念场景 然后又测试了一下侧重表现大场面的概念场景，记得 AI 绘画工具刚出现时虽然不擅长画人，但是很擅长各种恢弘大气的场景，最后测试结果也如预期一样，都有很不错的效果。

其中 Dreamstudio 第一次的测试效果并不好，于是我在提示词内补充“superb quality, bright color, crazy detail, Artstation”，图像生成的质量有了明显的提升，看来 stable diffusion 模型需要更全面细致的提示词才能得到好的效果。

Adobe Firefly 生成的图像仿佛真的是广角镜头拍出来的，很有视觉冲击力；文心一格和 Tiamat 则是专门的“概念场景”模型，所以生成质量也很高； 而 Bing 只支持 1:1 的画面，虽然内容质量也很高，但是在表现性上比较受限。

五、3D 人偶/手办 最近经常看到用 Midjourney 生成的各种可爱的 3D 人物形象，于是决定测试一下不同的 AI 绘画工具处理 3D 人物的效果。

从结果上来看 Midjourney、Tiamat 和 Adobe Firefly 的生成质量都不错，Dreamstudio 的细节太粗糙，而 Bing 生成的人物质感不太好。文心一格的 3D 人物效果也还行，但好像完全忽略了“向日葵”这一描述。测试过程中我发现文心一格不接受英文提示词，也就是 C4D/3D/Blender/ POP MART/Chibi 这些关键词不能使用，于是替换为了“泡泡玛特、二次元手办、三维建模”。

六、扁平风插画 最后一个测试的是扁平插画风，除了 Dreamstudio 之外，其他 5 个工具生成的图像质量都还可以。测试时又发现文心一格会提示“输入的内容无法识别，请修改后重试”，但没有指明是提示词中的哪个词语不能识别，只能一个个的测试修改，从使用体验上来说不是很好。

以上就是现在比较热门的 6 款 AI 绘画工具在 6 种不同类型的图像上的出图效果对比，测试的范围虽然有限，但是也能从中看出不同工具的特点，看完之后大家感觉哪一款更合适自己呢？

我最大的感受就是 Midjourney V5 太能打了，在各种风格上都有很好的表现；国产的 2 款 AI 绘画工具表现不算差，在特定的类型上很有优势；Adobe Firefly 则是最令人感到惊喜的，虽然是最新推出的产品，但在写实、人像、3D 等方面都有很好的效果，也希望未来这些 AI 绘画工具给我们带来更棒的使用体验。

下面是 6 款 AI 绘画工具的官网链接及简介，大家可以自己去体验一下。喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的 AI 绘画干货知识 ~

① Midjourny： https://www.midjourney.com/

需要魔法，目前没有免费使用额度了，会员最低 10 美元/月

② Dreamstudio : DreamStudio

需要魔法，新用户有 200 点的免费生成额度

③ 文心一格： https://yige.baidu.com/

新用户有 50 点的免费生成额度

④ Tiamat： https://www.tiamat.world/

新用户需要注册登录，然后申请内测，通过后有 20 次的免费生成额度

⑤ Bing Image Create： https://www.bing.com/images/create

需要魔法和微软账号，新用户有 25 次的免费生成额度

⑥ Adobe Firefly： Adobe Firefly （Beta）

需要魔法和 Adobe 账号，需要申请内测，通过后不限次数免费生成

推荐阅读：

AIGC新神器！Adobe Firefly内测版全方位评测（附内测申请流程） 哈喽大家好，我是包大！

阅读文章 >

AI绘画必学！5种 Midjourney 进阶提示用法 大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数，可以帮助我们生成更符合自己需要的图像。

阅读文章 >

原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。前言原子设计理论是当下比较火热也非常实用的设计理念，它是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。原子设计是指导设计实践的基础理论，并非什么高大上的原则，...

原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。

前言

原子设计理论是当下比较火热也非常实用的设计理念，它是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。原子设计是指导设计实践的基础理论，并非什么高大上的原则，它套用了英国化学家/物理学家约翰·道尔顿提出的“物质的最小单位是原子”这一理论，即宇宙中已知所有物体都可以分解为一组有限的原子。在人们的认知中，原子不管发生任何化学变化都是不可再分的最小单位，也是构成各种物质的基础。（PS：微粒（原子）在化学反应中不可分割，但在物理状态中可以分割。比原子更小的单位有电子，中子，质子，介子，光子，夸克等）。在互联网非常发达的今天，原子设计理论更是成为了 UI 设计中不可分割的一部分，既增加了团队工作效率、降低成本，同时更易于 产品设计 维护、推动着迭代与更新。那么就有设计师会好奇，原子设计理论到底是什么、如何运用、能解决什么问题？现在笔者就和大家一起聊一聊，相信会对原子设计有一个全新的理解。

原子设计 干货：

这篇文章帮你轻松入门「原子设计」方法论！ 大家好，我是 Clippp。

阅读文章 >

一、原子设计的基础知识 1. 源于现实世界

由于化学变化中的最小单位是原子，绝大多数物品都是从原子级别开始、经过一系列化学物理反应而生，所以从这个角度出发，可以把物品的构成从小到大分为：原子<分子<材料<结构<物品，在生物学中也是类似这种概念，即：细胞<组织<器官<系统<生物体。在现实世界中，所有物质都是按照这种结构，逐渐从基础到复杂的一个过程。如果将现实世界中物质的这种组成方式应用在数字产品中，从构建一个基础元素开始，如文字、色彩、按钮、图标、输入框等，按照一级一级的过程来设计，最终就成了大家所看到的用户界面，也就是本文笔者要讲的从分子到界面的整个过程。

2. 原子设计理论背景

原子设计是一个比较早的设计理念，是由国外网页设计师 Brad Frost 从化学元素周期表中得到的理论概念，即宇宙中所有已知事物都可以分解为一组有限的原子，原子构成分子、分子构成组织，组织成为生命体。Brad Frost 通过化学中的元素找到灵感，发现页面也可以按照不同的维度拆分，与化学中的原子、分子、组织进行类比，在 2013 年提出原子设计理论并将其应用于界面设计。

Brad Frost“打散重组式”的设计思路被广泛应用于产品界面设计中，当底层模版相同时，用户界面为反应内容所发生的动态变化将直接影响基础分子、组织以及模版的构建方式，因此，在清楚这些变化后所创建的页面更有助于打造弹性、动态的设计系统。

3. 什么是原子设计

原子设计是创建设计系统的一种思维模式，它由原子、分子、组织、模块和页面 5 个层级组成，每个层面都不尽相同，利用各元素之间的相互协作构建出统一且富有层次的设计系统。

通过原子设计理论，我们将它和页面关联成一个有机整体，其中的每个元素都发挥着至关重要的作用，基于不同元素的结合衍生出更多的层次结构，以形成有效的界面。

4. 为什么能作为理论指导

原子设计从抽象到具象、从元素到组件，让设计师从底层思考，为制作设计系统提供了清晰的方法。当项目一开始时就可以对产品设计的质量进行严格把控，使后续的界面视觉效果更加统一。原子设计可以最大程度的保证设计师的组件库与开发组件一一对应，当某个组件需要批量修改时，能确保同一个组件的更新可以同步覆盖到任何一个已使用的这个组件中去，省时省力。

二、从原子到页面的五个阶段 从原子到页面，每一个阶段在界面设计系统层级中都扮演着非常重要的角色，它像是一个心智模型帮助我们将用户界面看作是一个连贯的整体，也可以是整体与部分的集合。下面，让我们深入了解每一个阶段。

1. 原子-基础元素

如果说现实世界中的原子是构成物质的基础部分，那么在用户界面中的原子就是构成设计的基础元素了，例如颜色、文字、图标、分隔线等，这些小元素本身并不具备特有功能，但需要高度重视，因为页面中的任何内容都是由原子组成。在设计系统中，原子清晰地展示了各种基本样式，只要动手开始设计页面，就要将页面中的原子进行设定，以保持风格的统一。后续管理维护设计系统时，这也是一份极其重要的参考指南。

2. 分子-原子的组合

分子由多个原子以一定的次序和排列方式结合，便形成了一个简单、便捷的可复用性组件，这些分子可帮助设计、开发人员减少混乱并提高效率。

分子具有明确的功能意义，例如搜索框有文字、图标、色块这些原子，每个单独的原子本身并不会产生任何作用，但结合在一起后，便被赋予了独有的功能，文字和图标相互配合传达含义，色块界定了可操作范围，再通过栅格为搜索框定义了一个固定的尺寸与规范。

3. 组织-界面组件

组织（有机体）是由多个分子、原子构成并具有特定功能的集合体，设计师可利用组织建立模块化意识，以便对页面结构有更深入的理解。组织是界面中较为复杂的部件，其扩展性和复用性很强，在解放设计师生产力方面有着重要作用，例如承载各类信息的卡片、列表、表单等，通过这些部件便形成了界面的不同部分。

部分设计师容易将分子和组织混淆，需要明确一点，分子是较小的元素单位，而组织是逻辑复杂且较大的元素单位。以按钮为例，一组文字和一个色块组成按钮（分子），但多个按钮组合在一起、以不同的颜色区分选中的按钮便形成了一个按钮导航或筛选器（组织）。

4. 模板-页面框架

原子、分子和组织能帮助我们有意识地构建设计系统，但需要有一个合适的产品形态来描述我们最终产出的语言，这个形态就是模版，也可以将其理解为产品的低保真线框图。在这个阶段中，设计师并不知道具体的填充内容是什么，但可以根据业务需求，合理地限定内容性质及展示区间，搭建出一个抽象的产品框架，为最后的页面做铺垫。模版并不是最终内容，可以随时调整，通过多模版的不同方案对比来确保页面底层结构的合理性，降低后续的改动和沟通成本。

5. 页面-最终产出

当模版的合理性验证通过，就要在其中填充真实的数据内容（图片、文字等）和完善细节，以便向用户精准的传达信息，最终形成完整的高保真效果图，即视觉稿。需要注意的是，在此阶段的模版进一步验证中，若存在问题需要返回上一阶段继续优化，直到通过为止。一旦填充了具有代表性的真实内容后再回去优化，则会事倍功半，这也是很多设计师容易犯下的错误。

6. 阶段小总结

经过从原子到页面五个阶段的深入了解，大致总结如下：

原子：构成界面的最基础且不可再分的元素，可以是一种颜色、一种字体或一个图标等。 分子：由多个原子组合在一起、具有明确功能性的组件，如搜索框、表单、按钮等。 组织：将不同的分子、原子组合在一起，形成一个完整的功能模块，如列表、承载各类信息的卡片等。 模版：通过原子、分子、组织的相互关联而得到的模版框架，即低保真原型图。 页面：在模版的基础上提供真实的内容并完善细节，最终形成完整的高保真界面。 三、原子理论的实际运用 1. 构建设计系统

对于中大型企业，需要有一个稳定的设计系统来提升设计与开发的工作效率，原子设计可作为核心理论指导我们进行实操，一步步构建、完善设计系统，以解决后续工作效率低、界面效果不统一的问题。

2. 界面设计分析

很多时候，设计师在设计之前会被各个模块及内容的差异所牵绊、而设计之后又被诸多的元素干扰，很难找出问题具体出在哪里，无法进一步优化。当了解原子设计理论后，有了设计系统的存在，就可以分别从五个维度进行分析，在问题的源头一次性处理。

3. 产品更新迭代

不管是视觉还是交互，都可以通过原子设计实现快速迭代更新。例如产品设计风格升级，尤其是小元素属性（色值、圆角、尺寸...）的调整，一处修改、全局响应。

四、原子设计能解决什么问题 1. 存在问题

在 20 世纪 60 年代以前，软件设计通常是为了一个特定应用在指定的计算机上设计和编制，属于个人使用、个人操作、自给自足的私人定制化方式，几乎没有系统化的概念。而到了 60 年代中期，在计算机应用范围迅速扩大、软件开发迅速增长的加持下，私人定制再也无法满足大规模、高复杂度的软件系统，导致代码无法复用，效率低下，后续的管理维护也极难进行。

1968 年，NATO 在国际学术会议上首次将上述事件定义为软件危机（Software crisis），并在 1968、1969 年连续两次的会议中由 Douglas McIlroy 提出软件工程的概念，利用组件式开发思路来解决代码无法扩展复用造成的低效率问题。而在互联网巅峰时期的今天，设计领域同样存在着类似问题：

效果不统一：即便手速再快，很多地方绘制了自以为相同的元素，可设计的出入总在不经意间，身在其中很难察觉，发现问题总在产品上线后。 团队多成员：每个设计师分别负责单独的业务版块，没有一个统一的规则约束，即时表达总是会有理解上的偏差，各自埋头苦干的产出物并不像来自于同一个产品。 设计效率低：没有可复用的组件库，就是活生生的工具人，时间都用在了重复画图上，更别说有时间去研究用户、优化细节、提升体验了。 开发效率低：设计的随意性以及重复工作出现的偏差，是开发不断重复写代码的原罪，而开发这些大量的无意义劳动所增加的数行代码，也成了设计效果还原的最大障碍。 2. 解决问题

引用原子理论后的组件化设计，能给设计师带来意想不到的效果。虽然原子设计理论不是唯一，但却能解决下列这些常见的问题：

效果一致：无论将元素组件用在哪个页面，设计和开发都有了一致的样式效果，也保证了用户体验的一致性。 提高效率：在面对新的需求时，设计和开发可以将系统中的元素组件无限复用，快速搭建出界面模版，既节省了大量的时间，也减少了不必要的沟通成本。 灵活性高：有了设计系统，可以从原子、分子开始极速完成简单的界面设计，也可以从组织、模版开始快速构建复杂的界面，根据实际需求灵活选择原子设计中的任一阶段。 便于管理：对元素组件的统一整理，有效避免团队在多设计师的情况下重复设计一个组件或提供样式相差无几的版本，UI组件的数量、质量得以控制，减少团队成员理解上的偏差，更有利于后期的管理维护。

五、结语 从自然组成到人造物品、再到现在的互联网应用，原子设计理论的运用范围之广毋庸置疑，虽然这只是诸多方法论中的一种，但用来构建科学、严谨的设计系统的确非常有效。原子设计理论以全新的方式助力设计师打造好每一个元素组件，通过应用规则和组织原理，对设计系统的建立和团队之间的相互协作都具有极为重要的指导意义，如此，广大设计师都有必要将其掌握，以便在后续的实际项目中熟练运用。

欢迎关注作者微信公众号：「能量眼球」

设计师在做设计的过程中，会遇到用户与平台之间的冲突；不用用户角色之间的冲突；功能与平台之间的冲突。设计价值观是什么？个人认为设计价值观就是：当用户利益和平台冲突时，你的侧重点是什么？

设计师在做设计的过程中，会遇到用户与平台之间的冲突；不用用户角色之间的冲突；功能与平台之间的冲突。

设计价值观是什么？个人认为设计价值观就是：

当用户利益和平台冲突时，你的侧重点是什么？ 当不同角色的用户冲突时，你的侧重点是什么？ 当某个功能和平台冲突时，你的侧重点是什么？ 当不同用户、功能和平台三者产生冲突时，你的侧重点是什么？ 面对上述情况，设计师的侧重方向，就是个人 设计价值观 的体现。本篇文章大纲如下：

工作流程问题 用户视角与平台视角 不同角色用户的视角 功能视角与平台视角 设计师 的视角转换 后记 作者往期干货：

为什么有人工作8年还是大头兵，有人5年就成了设计经理？ 上周收到优设网主编程远的邀请，让我写一篇职场习惯的文章。

阅读文章 >

一、工作流程问题 设计师的工作流程通常是：设计师接到产品经理的文档，设计师基于产品文档，转化成设计稿。

而产品文档可能会存在一些问题，例如：因为业务原因、开发原因和产品经理自身对于设计理解等问题。

而设计师在设计过程中会潜移默化地将部分问题合理化，由于缺乏其他角色的视角，导致设计出来的设计稿存在一些问题。

接下来我们从各种不同视角来感受其差异性。

二、用户视角与平台视角 下图是淘宝和拼多多两个电商平台的消息聊天界面。淘宝做了一键清除未读消息功能。而拼多多没有做这个功能。

站在用户的视角来看：一键清理这个功能真好，那么多消息挨个清理真麻烦。增加了一键清理，真方便。

站在平台的视角来看：一键清理对消息系统伤害大，对消息的触达不利，消息系统的本质是通过徽标数触达给用户，push 用户去阅读和回复。增加了一键清理功能，让消息系统丧失了本该有的功能。

这个例子就是用户视角和平台视角产生了冲突。

再来看一个例子。

在 2013 年 5 月 10 日，QQ 就上线了群助手。群助手可以帮助用户将不重要的群或者打扰的群放在群助手里，减少用户的打扰。

对于用户侧而言，减少用户的打扰。是一个非常好的功能。

那么这么好的功能微信在 2021 年 9 月 26 日，上线群折叠。

做群折叠站在平台侧来说，危害是：降低群活跃度，而提升群活跃是一个重要的指标，QQ 的群助手进一步诱使群变成死群。

作为设计师，我们一直在说做好用户体验，是因为做好用户体验对平台是有好处的。

下图所示：做好用户体验，可以给用户带来更多的好处/利益。这样可以更好地留存用户，获得更好的口碑，带来更多的新用户增长，从而平台的日活增加，日活的增加，意味着平台未来有更好的发展。

但是做好用户体验的前提是这个用户体验对平台负面影响小于带给平台收益。

三、不同角色用户的视角 不同角色的用户诉求也不一样。

如下图所示：QQ 可以定制字体。下图可以看到，每个用户都有自己的字体，导致字体被滥用，一个页面，每个字体不一样，有的字体识别性很差，阅读起来体验很差。

而微信并没有做定制字体。虽然缺少个性，但是整体阅读体验好。

对于 QQ 发送者来：可以定制字体字号和颜色的需求，这是一个很好的功能。

但是对于信息接收者来说：阅读困难。在上面这个 QQ 群里面。一个人是发送者，另外 1946 个人是接受者。整体来说，接受者角色伤害会更大一些。

微信群发助手，限制群发人数不能超过 200 人。

对于发送者的视角来说，微信体验很差，不给放开限制。但是如果放开的话，接受者会受到微商等群发消息的轮流轰炸。

对于发送者视角来说，牺牲了体验，但是对于接受者来说，获得了更健康的生态环境。从角色人数上来说，群发用户的使用人数，是远远低于接受者的。

之前 QQ iOS 端安装包里面内置 800M+虚幻游戏引擎。至于为什么要这么做，知乎上有人回答说是为了推出新的 3d 虚拟形象。

QQ 会为了少部分目标用户的需求，强行让全部 iOS 用户承担该伤害。

通过以上可以得出结论：

QQ 普遍只关注部分用户的需求，从而忽略其他用户的需求。 微信在产品功能体验更具备全局视角。当然微信也不全是好的，例如多份文件重复下载，不做映射和去重，导致微信占据空间大得离谱。 四、功能视角与平台视角 站在不同立场，得出的结论也是不一样的。

如下图所示：用户点完美团外卖后，在旧版美团上，将订单状态以卡片的形式展示在首页。

而后面美团改版后，将订单状态收到了外卖模块中，未在首页展示。

对于外卖功能的产品经理：希望在首页展示，提升外卖用户的体验和粘性.

对于首页功能的产品经理：对于已购买的信息在首页展示，会牺牲其他复购模块的曝光率。这时候，就会存在功能视角和平台视角产生冲突。

那么接下来看朋友圈为什么不独立做一个 tab。

对于朋友圈产品经理的视角：希望独立 tab 展示，非 tab 中的一个列表。

对于平台的产品经理：朋友圈独立 tab，使得微信更像一个真正的社交工具，而不是一个生活方式了。

从格局上说，生活方式的想象力远高于社交工具。同时朋友圈作为一个模块，可以很好地将一部分流量分发到视频号、购物、游戏、扫一扫及小程序等模块中。

五、设计师的视角转换 作为设计师，需要先有业务视角，了解业务。然后将业务流程转换成设计视角。

最后需要从用户视角，站在用户的角度去看待。最后在全局看待用户、功能和平台三者之间的关系。

六、后记 回到最初的标题，什么是设计价值观？

如果你能看到最后，将会有自己的答案，或许看这篇文章之前你已经有了个人的价值观了。

本篇文章仅供参考，不一定对，仅仅是我的个人观点。

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

大家好，这里是和你们一起探索 AI 绘画的花生~3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能，不过服务是由 OpenAI ...

大家好，这里是和你们一起探索 AI 绘画的花生~

3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能，不过服务是由 OpenAI 的 DALL·E 提供的；Adobe 则是推出 了 Firefly，目前包含文本生成图像和文本生成字效两种功能。

对我们 设计师 来说可用的 AI 绘画工具越来越多了，那它们之前的出图效果如何，又各自有什么特点呢？为了一探究，我决定用相同的提示词在不同的 AI 绘画工具中进行出图测试，测试对象包括 Midjourney、DreamStudio、微软 Bing Image Create、Adobe Firefly 4 款国外软件和百度文心一格、Tiamat 2 款国内软件。想知道测试结果如何吗？一起来看看吧 ~

（ DreamStudio 是 Stability AI 官方开发的在线绘画软件，内置了最新的 Stable Diffusion v-2.1 模型）

往期回顾：

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

阅读文章 >

免费开放！人人都能轻松上手的AI绘画工具DreamStudio 大家好，我是和你们聊设计的花生~ 之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce

阅读文章 >

一、写实风景 首先测试的是写实风景的出图效果，提示词中我没有加入很多的修饰词，也没有用特别命令和强调符号，仅描述了画面的主体，然后用“专业摄影”确定图片的性质。6 款工具生成的风景图像质量都非常高，只在画面风格和氛围上有一些区别，比如 Bing Image Create 的图像光感很强，颜色绚烂柔和，仿佛加了一层柔光滤镜。Tiamat 的生成效果最令我意外，因为在它的图像中森林也被白雪覆盖了，更像是“冬日雪景图"，和其他 5 张图像有明显区别。

二、人物肖像 在进行人物肖像测试的时候，6 款工具有了较明显的差距。从人像完成度上看，质量最好的是 Midjourney V5 和 Adobe Firefly，效果非常逼真，几乎看不出来是 AI 生成的，不过 V5 的正面半身照样式更符合我想要的效果。Dreamstudio 和 Bing Image Create 生成的图像分辨率较低，五官也有一些不自然。

然后是 Tiamat，我测试了好几次，对提示词的内容也进行了微调，但是生成的效果都是厚涂插画，不是摄影照片。使用的都是通用基础模型，生成的风景照是写实的，人物肖像却是 插画 类型的，不知道是什么原因。

最后是文心一格，也是调整了好几次，生成的效果都不是很理想。要么是人物不居中，要么是画面中出现了莫名其妙的摄像机，人物质感也很假，五官严重扭曲失真，可能是我还没有掌握到合适的关键词。

三、二次元画风 再来测试一下大家非常喜欢的二次元画风。为了体现二次元风格，我在提示词中加入了关键词“anime”，指定动漫画风。Midjourney、Bing 和 Adobe Firefly 生成的质量都很不错。文心一格和 Tiamat 都有专门的“二次元/动漫”模型，我在测试也使用了对应的模型，因此生成的质量非常高，细节精致丰富，甚至接近厚涂风了。

相比之下 Dreamstudio 的生成效果就差很多了，为了提升质量我特地在它的提示中加入了“Pixiv”（日本的绘画社区，有很多高质量的二次元插画），但是效果不太明显。看来 Stable Diffusion 的二次元图像生成效果远比不上 C 站上大神们自己训练出来的模型。

四、概念场景 然后又测试了一下侧重表现大场面的概念场景，记得 AI 绘画工具刚出现时虽然不擅长画人，但是很擅长各种恢弘大气的场景，最后测试结果也如预期一样，都有很不错的效果。

其中 Dreamstudio 第一次的测试效果并不好，于是我在提示词内补充“superb quality, bright color, crazy detail, Artstation”，图像生成的质量有了明显的提升，看来 stable diffusion 模型需要更全面细致的提示词才能得到好的效果。

Adobe Firefly 生成的图像仿佛真的是广角镜头拍出来的，很有视觉冲击力；文心一格和 Tiamat 则是专门的“概念场景”模型，所以生成质量也很高； 而 Bing 只支持 1:1 的画面，虽然内容质量也很高，但是在表现性上比较受限。

五、3D 人偶/手办 最近经常看到用 Midjourney 生成的各种可爱的 3D 人物形象，于是决定测试一下不同的 AI 绘画工具处理 3D 人物的效果。

从结果上来看 Midjourney、Tiamat 和 Adobe Firefly 的生成质量都不错，Dreamstudio 的细节太粗糙，而 Bing 生成的人物质感不太好。文心一格的 3D 人物效果也还行，但好像完全忽略了“向日葵”这一描述。测试过程中我发现文心一格不接受英文提示词，也就是 C4D/3D/Blender/ POP MART/Chibi 这些关键词不能使用，于是替换为了“泡泡玛特、二次元手办、三维建模”。

六、扁平风插画 最后一个测试的是扁平插画风，除了 Dreamstudio 之外，其他 5 个工具生成的图像质量都还可以。测试时又发现文心一格会提示“输入的内容无法识别，请修改后重试”，但没有指明是提示词中的哪个词语不能识别，只能一个个的测试修改，从使用体验上来说不是很好。

以上就是现在比较热门的 6 款 AI 绘画工具在 6 种不同类型的图像上的出图效果对比，测试的范围虽然有限，但是也能从中看出不同工具的特点，看完之后大家感觉哪一款更合适自己呢？

我最大的感受就是 Midjourney V5 太能打了，在各种风格上都有很好的表现；国产的 2 款 AI 绘画工具表现不算差，在特定的类型上很有优势；Adobe Firefly 则是最令人感到惊喜的，虽然是最新推出的产品，但在写实、人像、3D 等方面都有很好的效果，也希望未来这些 AI 绘画工具给我们带来更棒的使用体验。

下面是 6 款 AI 绘画工具的官网链接及简介，大家可以自己去体验一下。喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的 AI 绘画干货知识 ~

① Midjourny： https://www.midjourney.com/

需要魔法，目前没有免费使用额度了，会员最低 10 美元/月

② Dreamstudio : DreamStudio

需要魔法，新用户有 200 点的免费生成额度

③ 文心一格： https://yige.baidu.com/

新用户有 50 点的免费生成额度

④ Tiamat： https://www.tiamat.world/

新用户需要注册登录，然后申请内测，通过后有 20 次的免费生成额度

⑤ Bing Image Create： https://www.bing.com/images/create

需要魔法和微软账号，新用户有 25 次的免费生成额度

⑥ Adobe Firefly： Adobe Firefly （Beta）

需要魔法和 Adobe 账号，需要申请内测，通过后不限次数免费生成

推荐阅读：

AIGC新神器！Adobe Firefly内测版全方位评测（附内测申请流程） 哈喽大家好，我是包大！

阅读文章 >

AI绘画必学！5种 Midjourney 进阶提示用法 大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数，可以帮助我们生成更符合自己需要的图像。

阅读文章 >

原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。前言原子设计理论是当下比较火热也非常实用的设计理念，它是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。原子设计是指导设计实践的基础理论，并非什么高大上的原则，...

原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。

前言

原子设计理论是当下比较火热也非常实用的设计理念，它是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。原子设计是指导设计实践的基础理论，并非什么高大上的原则，它套用了英国化学家/物理学家约翰·道尔顿提出的“物质的最小单位是原子”这一理论，即宇宙中已知所有物体都可以分解为一组有限的原子。在人们的认知中，原子不管发生任何化学变化都是不可再分的最小单位，也是构成各种物质的基础。（PS：微粒（原子）在化学反应中不可分割，但在物理状态中可以分割。比原子更小的单位有电子，中子，质子，介子，光子，夸克等）。在互联网非常发达的今天，原子设计理论更是成为了 UI 设计中不可分割的一部分，既增加了团队工作效率、降低成本，同时更易于 产品设计 维护、推动着迭代与更新。那么就有设计师会好奇，原子设计理论到底是什么、如何运用、能解决什么问题？现在笔者就和大家一起聊一聊，相信会对原子设计有一个全新的理解。

原子设计 干货：

这篇文章帮你轻松入门「原子设计」方法论！ 大家好，我是 Clippp。

阅读文章 >

一、原子设计的基础知识 1. 源于现实世界

由于化学变化中的最小单位是原子，绝大多数物品都是从原子级别开始、经过一系列化学物理反应而生，所以从这个角度出发，可以把物品的构成从小到大分为：原子<分子<材料<结构<物品，在生物学中也是类似这种概念，即：细胞<组织<器官<系统<生物体。在现实世界中，所有物质都是按照这种结构，逐渐从基础到复杂的一个过程。如果将现实世界中物质的这种组成方式应用在数字产品中，从构建一个基础元素开始，如文字、色彩、按钮、图标、输入框等，按照一级一级的过程来设计，最终就成了大家所看到的用户界面，也就是本文笔者要讲的从分子到界面的整个过程。

2. 原子设计理论背景

原子设计是一个比较早的设计理念，是由国外网页设计师 Brad Frost 从化学元素周期表中得到的理论概念，即宇宙中所有已知事物都可以分解为一组有限的原子，原子构成分子、分子构成组织，组织成为生命体。Brad Frost 通过化学中的元素找到灵感，发现页面也可以按照不同的维度拆分，与化学中的原子、分子、组织进行类比，在 2013 年提出原子设计理论并将其应用于界面设计。

Brad Frost“打散重组式”的设计思路被广泛应用于产品界面设计中，当底层模版相同时，用户界面为反应内容所发生的动态变化将直接影响基础分子、组织以及模版的构建方式，因此，在清楚这些变化后所创建的页面更有助于打造弹性、动态的设计系统。

3. 什么是原子设计

原子设计是创建设计系统的一种思维模式，它由原子、分子、组织、模块和页面 5 个层级组成，每个层面都不尽相同，利用各元素之间的相互协作构建出统一且富有层次的设计系统。

通过原子设计理论，我们将它和页面关联成一个有机整体，其中的每个元素都发挥着至关重要的作用，基于不同元素的结合衍生出更多的层次结构，以形成有效的界面。

4. 为什么能作为理论指导

原子设计从抽象到具象、从元素到组件，让设计师从底层思考，为制作设计系统提供了清晰的方法。当项目一开始时就可以对产品设计的质量进行严格把控，使后续的界面视觉效果更加统一。原子设计可以最大程度的保证设计师的组件库与开发组件一一对应，当某个组件需要批量修改时，能确保同一个组件的更新可以同步覆盖到任何一个已使用的这个组件中去，省时省力。

二、从原子到页面的五个阶段 从原子到页面，每一个阶段在界面设计系统层级中都扮演着非常重要的角色，它像是一个心智模型帮助我们将用户界面看作是一个连贯的整体，也可以是整体与部分的集合。下面，让我们深入了解每一个阶段。

1. 原子-基础元素

如果说现实世界中的原子是构成物质的基础部分，那么在用户界面中的原子就是构成设计的基础元素了，例如颜色、文字、图标、分隔线等，这些小元素本身并不具备特有功能，但需要高度重视，因为页面中的任何内容都是由原子组成。在设计系统中，原子清晰地展示了各种基本样式，只要动手开始设计页面，就要将页面中的原子进行设定，以保持风格的统一。后续管理维护设计系统时，这也是一份极其重要的参考指南。

2. 分子-原子的组合

分子由多个原子以一定的次序和排列方式结合，便形成了一个简单、便捷的可复用性组件，这些分子可帮助设计、开发人员减少混乱并提高效率。

分子具有明确的功能意义，例如搜索框有文字、图标、色块这些原子，每个单独的原子本身并不会产生任何作用，但结合在一起后，便被赋予了独有的功能，文字和图标相互配合传达含义，色块界定了可操作范围，再通过栅格为搜索框定义了一个固定的尺寸与规范。

3. 组织-界面组件

组织（有机体）是由多个分子、原子构成并具有特定功能的集合体，设计师可利用组织建立模块化意识，以便对页面结构有更深入的理解。组织是界面中较为复杂的部件，其扩展性和复用性很强，在解放设计师生产力方面有着重要作用，例如承载各类信息的卡片、列表、表单等，通过这些部件便形成了界面的不同部分。

部分设计师容易将分子和组织混淆，需要明确一点，分子是较小的元素单位，而组织是逻辑复杂且较大的元素单位。以按钮为例，一组文字和一个色块组成按钮（分子），但多个按钮组合在一起、以不同的颜色区分选中的按钮便形成了一个按钮导航或筛选器（组织）。

4. 模板-页面框架

原子、分子和组织能帮助我们有意识地构建设计系统，但需要有一个合适的产品形态来描述我们最终产出的语言，这个形态就是模版，也可以将其理解为产品的低保真线框图。在这个阶段中，设计师并不知道具体的填充内容是什么，但可以根据业务需求，合理地限定内容性质及展示区间，搭建出一个抽象的产品框架，为最后的页面做铺垫。模版并不是最终内容，可以随时调整，通过多模版的不同方案对比来确保页面底层结构的合理性，降低后续的改动和沟通成本。

5. 页面-最终产出

当模版的合理性验证通过，就要在其中填充真实的数据内容（图片、文字等）和完善细节，以便向用户精准的传达信息，最终形成完整的高保真效果图，即视觉稿。需要注意的是，在此阶段的模版进一步验证中，若存在问题需要返回上一阶段继续优化，直到通过为止。一旦填充了具有代表性的真实内容后再回去优化，则会事倍功半，这也是很多设计师容易犯下的错误。

6. 阶段小总结

经过从原子到页面五个阶段的深入了解，大致总结如下：

原子：构成界面的最基础且不可再分的元素，可以是一种颜色、一种字体或一个图标等。 分子：由多个原子组合在一起、具有明确功能性的组件，如搜索框、表单、按钮等。 组织：将不同的分子、原子组合在一起，形成一个完整的功能模块，如列表、承载各类信息的卡片等。 模版：通过原子、分子、组织的相互关联而得到的模版框架，即低保真原型图。 页面：在模版的基础上提供真实的内容并完善细节，最终形成完整的高保真界面。 三、原子理论的实际运用 1. 构建设计系统

对于中大型企业，需要有一个稳定的设计系统来提升设计与开发的工作效率，原子设计可作为核心理论指导我们进行实操，一步步构建、完善设计系统，以解决后续工作效率低、界面效果不统一的问题。

2. 界面设计分析

很多时候，设计师在设计之前会被各个模块及内容的差异所牵绊、而设计之后又被诸多的元素干扰，很难找出问题具体出在哪里，无法进一步优化。当了解原子设计理论后，有了设计系统的存在，就可以分别从五个维度进行分析，在问题的源头一次性处理。

3. 产品更新迭代

不管是视觉还是交互，都可以通过原子设计实现快速迭代更新。例如产品设计风格升级，尤其是小元素属性（色值、圆角、尺寸...）的调整，一处修改、全局响应。

四、原子设计能解决什么问题 1. 存在问题

在 20 世纪 60 年代以前，软件设计通常是为了一个特定应用在指定的计算机上设计和编制，属于个人使用、个人操作、自给自足的私人定制化方式，几乎没有系统化的概念。而到了 60 年代中期，在计算机应用范围迅速扩大、软件开发迅速增长的加持下，私人定制再也无法满足大规模、高复杂度的软件系统，导致代码无法复用，效率低下，后续的管理维护也极难进行。

1968 年，NATO 在国际学术会议上首次将上述事件定义为软件危机（Software crisis），并在 1968、1969 年连续两次的会议中由 Douglas McIlroy 提出软件工程的概念，利用组件式开发思路来解决代码无法扩展复用造成的低效率问题。而在互联网巅峰时期的今天，设计领域同样存在着类似问题：

效果不统一：即便手速再快，很多地方绘制了自以为相同的元素，可设计的出入总在不经意间，身在其中很难察觉，发现问题总在产品上线后。 团队多成员：每个设计师分别负责单独的业务版块，没有一个统一的规则约束，即时表达总是会有理解上的偏差，各自埋头苦干的产出物并不像来自于同一个产品。 设计效率低：没有可复用的组件库，就是活生生的工具人，时间都用在了重复画图上，更别说有时间去研究用户、优化细节、提升体验了。 开发效率低：设计的随意性以及重复工作出现的偏差，是开发不断重复写代码的原罪，而开发这些大量的无意义劳动所增加的数行代码，也成了设计效果还原的最大障碍。 2. 解决问题

引用原子理论后的组件化设计，能给设计师带来意想不到的效果。虽然原子设计理论不是唯一，但却能解决下列这些常见的问题：

效果一致：无论将元素组件用在哪个页面，设计和开发都有了一致的样式效果，也保证了用户体验的一致性。 提高效率：在面对新的需求时，设计和开发可以将系统中的元素组件无限复用，快速搭建出界面模版，既节省了大量的时间，也减少了不必要的沟通成本。 灵活性高：有了设计系统，可以从原子、分子开始极速完成简单的界面设计，也可以从组织、模版开始快速构建复杂的界面，根据实际需求灵活选择原子设计中的任一阶段。 便于管理：对元素组件的统一整理，有效避免团队在多设计师的情况下重复设计一个组件或提供样式相差无几的版本，UI组件的数量、质量得以控制，减少团队成员理解上的偏差，更有利于后期的管理维护。

五、结语 从自然组成到人造物品、再到现在的互联网应用，原子设计理论的运用范围之广毋庸置疑，虽然这只是诸多方法论中的一种，但用来构建科学、严谨的设计系统的确非常有效。原子设计理论以全新的方式助力设计师打造好每一个元素组件，通过应用规则和组织原理，对设计系统的建立和团队之间的相互协作都具有极为重要的指导意义，如此，广大设计师都有必要将其掌握，以便在后续的实际项目中熟练运用。

欢迎关注作者微信公众号：「能量眼球」

我们总结了 7 个最受欢迎的风格趋势和关键词，本文所涉及到的关键词，都经过Midjourney实际测试，基本无需喂图，输入文字即可出图，希望对大家的学习有所帮助。更多AI绘画技巧：AI绘画必学！5种 Midjourney 进阶提示用法大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种...

我们总结了 7 个最受欢迎的风格趋势和关键词，本文所涉及到的关键词，都经过 Midjourney 实际测试，基本无需喂图，输入文字即可出图，希望对大家的学习有所帮助。

更多 AI绘画 技巧：

AI绘画必学！5种 Midjourney 进阶提示用法 大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数，可以帮助我们生成更符合自己需要的图像。

阅读文章 >

一、剪纸风格

核心词：

paper art（剪纸艺术）

关键技巧：

主体物：可以换成任意主角，Chinese illustration （中国风插画）；艺术风格：paper art （剪纸艺术）是核心词，可以延伸词组为：（multi dimensional paper quilling）多维剪纸，配合构图形式使用； 版本参数：v4，不要用新版本的 v 5，效果没有 v 4 好； 补充单词：构图：elevationperspective（立面透视图）；色彩：morandi color（莫兰迪色）；灯光设置：warm light（暖光）。 完整描述：

Chinese illustration on blue background,auspicious clouds, 3d, ravine stream,mountain range,Many houses,paper art, exquisite details, warm light,elevationperspective，morandi color --v 4

二、卡通 IP

核心词：

Pixar（皮克斯艺术）

POPMART blind box（泡泡马特盲盒）

关键技巧：

主体物：可以换成男孩，Cute girl （可爱的女孩）；艺术风格：Pixar（皮克斯风格）是核心词。配合 3D rander 使用； 补充单词：背景：warm color background（暖色背景）。 版本参数：V5 完整描述：

Cute girl with bangs short hair, blue dress, white apron, holds blender, pink headband, big eyes, frontal view of the character, Waving action, brown color palette, double layer cake, biscuits, warm color background, Pixar, 3d rendering

三、微缩景观

核心词：

isometric view（无透视视图）

关键技巧：

主体物：town （古风小镇）；艺术风格：isometric view（无透视视图）是核心词，配合 ultra wide shot（超广角镜头）使用； 补充单词：氛围感：film photography（电影镜头）。 完整描述：

A old town among ancient mountains, ultra wide shot, Country style, film photography, isometric view, Unreal Engine

四、新海诚

核心词：

Makoto Shinkai（新海诚）

关键技巧：

主体物：girl 或者 boy；艺术风格：Makoto Shinkai animation style（新海诚艺术风格）是核心词； 补充单词：人物风格：anime（漫画）。 完整描述：

Makoto Shinkai animation style, a anime girl walking on water, close-up, moon, dark sky, colorful shooting star

五、镭射艺术

核心词：

Holographic（镭射）

关键技巧：

主体物：apple logo or cute cat；艺术风格：Holographic（镭射）是核心词，可以延伸词组为：（pink and white and blue holographic）多彩镭射； 提醒：如果垫了图片，效果会更好； 补充单词：背景：smooth color background（渐变背景）。 完整描述：

apple logo solid, profile, sleek glass thickness, transparent, pink and white and blue holographic, smooth color background, cinematic lighting, rendering

六、香水渲染图

核心词：

a bottle of perfume（一瓶香水）

关键技巧：

主体物：可以换成任意主角，a bottle of 香水（一瓶香水）； 补充单词：照明：studio lighting（工作室照明）。 完整描述：

a bottle of perfume, surrounded by flowers, grass, C4D

七、拆解图

核心词：

knolling（排列摄影）

关键技巧：

主体物：可以换成任意主角，Iron man （钢铁侠）；艺术风格：knolling （排列摄影）是核心词； 补充单词：3D 渲染：C4D。 完整描述：

Spider Man suit, knolling, deconstruction, many parts, C4D

欢迎关注作者微信公众号：「 设计师 阿哲」