网站顶部导航栏，通常称为 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. 方案尝试

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

继入淘（淘宝）、入支（支付宝）、入饿（饿了么）后，口碑在阿里内的第四次“流浪”，落子高德。 3月，高德宣布和阿里本地生活的到店业务口碑正式合并。对此，高德方面回应称：新团队的加入有助于平台提供更好的“到目的地”服务。 随后，3月21日，高德联合星巴克中国推出“

过去十年，本地生活赛道几乎是“一超多强”局面。然而近两年，抖音强势入局，美团也不得不严阵以待，如今高德又合并口碑，本地生活赛道由此组成新的“三国杀”棋局。这场“三国杀”中，究竟每家平台“葫芦里卖的什么药”？

继入淘（淘宝）、入支（支付宝）、入饿（饿了么）后，口碑在阿里内的第四次“流浪”，落子高德。

3月，高德宣布和阿里本地生活的到店业务口碑正式合并。对此，高德方面回应称：新团队的加入有助于平台提供更好的“到目的地”服务。

随后，3月21日，高德联合星巴克中国推出“沿街取”服务，用户可在高德地图App里点单、支付，再去沿途的星巴克门店取餐。目前该服务已经在北京100家星巴克门店上线。

一言一行，剑指本地生活。

“万亿市场”，这是形容生活服务赛道常用的词语。据艾瑞咨询，2020年中国本地生活服务市场规模为19.5万亿元，到2025年预计增长至35.3万亿元。

过去十年，本地生活赛道几乎是“一超多强”局面，美团全方位布局“吃喝住行娱”，携程、飞猪、饿了么等在细分领域与美团竞争，但没有一方能完全“鲸吞”另一方。

正如阿里本地生活CEO俞永福所言，本地生活是一场 “不激烈但很残酷” 的竞赛。不激烈是因为选手数量不多，残酷是因为没有一招制胜的方法。

但，鲶鱼来了。

2020年起试水本地生活的抖音，现在全方位启动除医美、医疗外的到店类目招商。据地歌网了解，今年抖音本地生活的GMV目标为1600亿元。

抖音强势入局，让本地生活竞争的激烈度和残酷度再次提升；美团也不得不严阵以待，内部计划将投入更多预算与抖音竞争；如今，高德又合并口碑，本地生活赛道由此组成新的“三国杀”棋局。

这场“三国杀”中，究竟每家平台“葫芦里卖的什么药”？

01 高德：工具模式出路难 自“千团大战”时代以来，阿里本地生活业务已经多次调整。

最近一次调整，也是阿里成立24年来最重要的组织架构变革中，本地生活集团独立成军，主营业务包括高德、饿了么。

调整后，阿里本地生活的业务界限更为明确：饿了么主攻到家、高德在原有的出行业务之上，与口碑一同开拓到店业务。

不过，高德与口碑的“抱团取暖”，很难给阿里本地生活带来“1+1>2”的商业效果。

2008年被阿里收购的口碑，起初还是阿里本地生活的一支重要生力军，与淘点点共同发力外卖业务，但最终却成为依附于不同业务和辅助实现各种业务目标的“流浪者”。

据消息人士透露，2022 年初，口碑餐饮业务的直营城市从40座缩减至11座，其余城市转为代理商模式。

商家供给不足、战略定位模糊的口碑，合并后能给高德带来的增量效益极为有限。但合并后业务界限的明晰，意味着高德将对到店业务“力出一孔”，积极迎战本地生活。

2017年推出聚合打车模式的高德，目前已经是网约车市场的“亚军”，市场份额仅次于滴滴。每天有1.2亿活跃用户打开高德，用来叫车或者导航路线。

基于地图导航功能的用户积累，以及在网约车市场的后发优势，高德在2020年进军酒旅和餐饮团购业务，到2021年升级成为“出门好生活开放服务平台”。

理想丰满，但现实骨感。

一位出行领域专业人士表示，采取聚合模式的高德，无法深入沉淀出行数据；而在缺少自营司机的情况下，高德也很难向金融、租车，乃至造车等产业链上游延伸。

更何况，高德最核心的地图导航业务，工具属性更强，用户停留更浅。

即使高德采取滴滴的网约车平台模式，在“用完即走”的浅层用户行为之下，从出行叫车跳转到吃喝玩乐乃至电商消费等服务，平台跨赛道转化的壁垒极高。

2020年，互联网巨头纷纷进军社区团购，滴滴也顺势推出橙心优选，但供应链和地面推广等能力均不占优的橙心，随着监管叫停过度补贴，橙心优选随即撤出多地市场。

正如饿了么曾连续发动过“夏季战役”“暖冬计划”，但沉淀的用户规模有限；最终，为商家提供更多单量和SaaS系统支持的美团，市场份额依然领先。

本地生活核心能力的建设，显然无法用“烧钱补贴”来弥补，只能在残酷竞争中逐步强化。

虽然，高德在网约车和地图业务上具备一定优势，但要扛旗到店生服（生活服务）业务，在商家供给规模、消费习惯培养等方面，高德还要继续造业务轮子。

而在高德“造轮子”的同时，抖音已经和美团开始“捉对厮杀”。

02 抖音：一切为了交易 本地生活，尤其是到店团购业务，商业模式并不复杂。一边是源源不断的流量，另一边是持续补齐商家供给，平台在中间收取佣金和广告费。

如今，抖音已经具备拓展本地生活模式的“天时地利”。

目前，抖音拥有超过7.5亿的日活跃用户，近11亿的月活跃用户，并且在放大“人性弱点”的极致算法模型之下，用户粘性极强，行为数据沉淀更深。

据极光大数据，2022年第三季度，抖音人均单日时长达140分钟，超过快手的129分钟，远超微信视频号的35分钟。

左手是流量优势，右手便是不断补齐商家供给。

截至2022年10月，抖音生活服务已经覆盖全国377座城市，合作门店超过100万。

对商家而言，多一个流量渠道多一份收入，现阶段抖音给出的佣金率也十分优惠，餐饮业务的技术服务费率仅为2.5%，远低于美团、饿了么等平台。

当然，抖音作为平台方，主要赚取的是商家广告费。

地歌网走访了多位抖音团购商家，他们一致表示，在抖音如果不拍短视频、不做直播，团购套餐很难有订单，即使自己不做内容，也要找达人、服务商来帮你用内容引流。

对于没时间或不擅长运营内容的商家而言，抖音已经搭建起完整的产品体系，比如撮合达人商单的星图平台、比DOU+更精准的生活服务类投流工具“本地推”，还有抖音之下海量的服务商。

一位抖音内部人士向地歌网透露，抖音做本地生活和餐饮外卖，不能简单将其理解为餐饮平台，抖音主要还是“营销平台”。

当抖音内部流量达到较高量级并且活跃度稳定后，依托于流量规模本身和抖音搭建的营销产品，平台向广告主收费、向商家收费，甚至向创作者收费，以取得流量变现收益。

平台庞大的用户规模背后，一切都是为了转化交易。

具体到生活服务行业，依托于“吃喝玩乐”等消费场景，抖音进一步深耕用户在平台上的消费习惯，拓宽用户画像的多样性，更有利于之后流量产品的快速变现。

将每一次观看和播放的商业价值最大化，抖音正在不断推进这一目标。

短视频成为大趋势之一，抖音又极大满足了用户的娱乐需求，当平台坐拥流量增长的势头，抖音可以不断外扩自身的业务边界，这也是让竞争对手为之警惕的关键因素。

强于交易转化的抖音本地生活已然火力全开，不过，美团对外并未激烈反应。

2022年年报发布后，美团CEO王兴表示，目前来看，短视频平台提供的还仅限于有第三方参与的团餐配送服务，“这种模式对我们的影响有限。”

“淡定”的原因何在？

03 美团：复用核心“轮子” 抖音的交易转化很强势，但美团强于“规模效应”。

2022年年报显示，美团交易用户数量为6.78亿，活跃商家数高达930万；同时，去年共有624万骑手在美团取得收入。

规模效应不止于消费者和商家体量的庞大，基于每天上千万笔订单交易，以及平台在运力调配技术、商家SaaS服务系统上的沉淀，无论软体经验还是硬件基础，美团都形成了强大的商家及运力板结。

比如配送方面，美团的“智能决策平台”针对全场景的复杂订单需求，实现统一调配智能分发，能为骑手智能识别小区封闭入口、部分禁行区域等。

夯实本地生活核心能力，进而形成商业壁垒，源于美团“聚焦核心、苦练基本功”的基本战略。

对于抖音本地生活的进击，王兴表示，“美团在骑手、运营网络和商户质量方面都非常有信心……美团建立了非常广阔的网络，能够去满足更大的需求尤其是峰值时的外卖需求。”

“美团的运营网络未来会更可靠、更高效”，王兴说。

当下的美团，正在复用曾经的核心能力，快速进入本地零售赛道。

2022年二季度时，王兴曾表示“美团闪购的长期单位经济效益潜力与外卖相似，并相信它们能够在未来发挥更大的协同效应。”

自上市以来，美团一直在推动由生活服务电商向实物电商转型，并在提出“科技+零售”战略后，以新的商业模式结合平台原有优势，分兵突进打造实物电商矩阵。

比如美团优选，美团复用当年“千团大战”“外卖大战”所积累的BD地推能力，迅速完成“千城计划”；再比如美团闪购及闪电仓，美团调用本地骑手，在非餐时段进行错峰配送，有效提升运力效率。

美团曾经推出过类似淘宝的货架式电商，也试水过社群电商，但在选品、售后服务上很难做出差异化优势，也无法展现美团作为生活服务电商的本地能力。

如今，通过美团优选、买菜和闪购等业务，美团得以布局上游供应链，更大范围锁定本地优质供给；并且通过闪电仓、美团优选等低成本的“社会协作”模式，美团在全国深入完善本地履约网络。

以本地电商模式进击实物零售领域，美团正在编织全新的零售天网。

对美团而言，核心的业务“轮子”已经造好，接下来就是继续夯实核心能力，并在验证新商业模式的过程中高效复用“轮子”。

短时间内，即使抖音来势汹汹，也难以撼动美团的规模效应。

但美团也不会“淡定”太久。多位投资人士透露，越来越多的生活服务商户开始将营销预算从美团分拨了出来，转移到抖音、快手等平台，形成多平台经营的趋势。

事情正在起变化。

04 尾声：山雨欲来 高德、抖音、美团之外，本地生活赛道正是“山雨欲来风满楼”。

3月28日，“微信公开课PRO”活动上，视频号表示正内测售卖兑换券的功能，用于到店核销/自提或同城上门配送的业务场景，预计 5 月上线。

另外，快手本地生活正在测试官方小程序，目前已小范围定向邀请餐饮、茶饮等连锁品牌入驻；拼多多旗下社群团购平台快团团也低调进军本地生活业务，面向餐饮、住宿等类目进行招商。

到店团购的商业模型简单，流量增势足够活跃的平台都可以尝试，这也是对平台商业化和流量价值的进一步深耕。

不过，对抖音、美团而言，本地生活一战，双方“醉翁之意不在酒”。

据《晚点LatePost》，抖音内部各个目标的优先级已经调整，比如“用户出于非娱乐需求打开抖音的频次”等指标越来越被看重，曾与日活并重的“用户使用时长”的优先级有所下降。

过去，抖音是一家“小型游乐场”，娱乐设施（直播、短视频）相当丰富，用户为此停留的时间越来越长，但用户交易频次很低，因为相关的交易设施很少，或者不完整。

现在，抖音要成为迪士尼一样的“综合游乐园”，内部不仅娱乐设施丰富，电商、生活服务等交易设施同样完备，用户会花更多时间在平台停留，还会为平台提供的“吃喝住行”服务买单。

抖音集团 CEO 张楠在去年的一次内部会上也表示，抖音要成为用户移动端的万能入口，用户不仅在无聊的时候可以打开抖音刷内容；也可以用来购物、选餐厅，定旅游计划、买机票订酒店。

一言以蔽之，抖音要成为涵盖娱乐、生活服务等功能的超级APP。

反观美团，王兴曾对内表示，零售的终极形态是机器猫，你想要一个东西，它就能立刻给你掏出来。

如今，美团旗下的闪购、买菜和优选业务依托于本地供应链和仓配体系，都在本地市场开展业务，闪购与买菜主打即时交付，前者以快消、日用百货为主，后者聚焦生鲜品类，优选的核心是“次日达”。

三种业态组合在一起，美团正将本地电商模式悄然布局到全国各主要城市。而这张本地电商的天网，正是王兴口中“机器猫零售”的雏形。

继团购、外卖之后，本地电商将是美团发展的关键一役，这不仅是是雄心壮志，更是一场彻底的供应链、本地化经营及电商消费模式的变革。

抖音和美团，二者的征程都是一场“豪赌”，是一场足以撼动互联网格局的“无限游戏”。

本文由 @IT老友记 原创发布于人人都是产品经理，未经许可，禁止转载。

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

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

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

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

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

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

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

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

为什么有人工作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组件的数量、质量得以控制，减少团队成员理解上的偏差，更有利于后期的管理维护。

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

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