经常在网上看到「B 端产品 C 端化」的讨论。
一开始我以为这个概念是说 B 端产品以前做得太差了，但随着竞争越来越激烈，以后也要像 C 端产品那样注重用户体验，更加轻量化、趣味性和人文关怀才行。
当时我还挺不以为然，感觉像是噱头或者自嗨。
把用户体验做好虽然重要，但是这对 B 端公司的实际业务（钱）未必有什么直接影响。
因为对于绝大部分客户来说，功能、效率和价格才是真正的硬指标，而且光是能找到能同时满足这三点的产品就很不容易了！
然而，我最近刚开始参与一个 B 端项目，为了做竞品调研，我试用了国内外十多款产品（国外为主）。
做完之后，我深刻反思了自己过去对「B 端产品 C 端化」的理解还是太肤浅。
其实 B 端产品 C 端化，并不是因为传统的 B 端产品没 C 端好用（不是这么比的）。
其实关键还是获客模式的转变。
传统的 B 端产品是销售驱动，销售人员通过电话、上门拜访等形式促使客户下单。
一旦成功卖出，只要后续的服务不太差，客户就没必要更换迁移。
现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强，传统销售模式开始变为互联网营销。
B 端产品在网上发布信息并投放广告，吸引客户自己前来试用并购买，只需提供少量客服人员即可。
这与以往的 B 端业务模式有很大不同，所以就需要变革。
所谓「B 端产品 C 端化」，表面上是学习 C 端的用户体验，背后的真正意图是要学习人家 C 端的互联网获客能力。
我发现 B 端产品的 C 端化程度，和他们的互联网广告投放力度成正相关。
例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。
先不说好不好用（毕竟我也不是目标客户），我发现他们用起来真的很有「C 端感」，和传统的 B 端产品果真不一样。
倒不是什么“轻量化、趣味性和人文关怀”，而是因为他们在我打开网站的那一刻，就开始不断吸引我探索使用。
我拿 GitLab 和 Monday 的官网首页对比一下，也许你就能感受到了：
前者像是一板一眼的「老实人」，后者则像是对你笑眯眯的「绿茶妹」，高下立判。
“轻量化、趣味性和人文关怀”这些东西，并不足以打动用户试用和购买，顶多只能算是「低段位」手段。
只有「高段位」手段，才能让用户不自主地地被吸引，心甘情愿地掏钱。
可是要做到「高段位」真的很不容易，我今天就总结几个技巧吧～
1. 直接坦诚
遇到两个陌生人：一个打官腔又遮遮掩掩的；另一个说话友善接地气又诚实，你会更喜欢哪个？
可能大多数人跟我一样会喜欢第二个。
C 端化做得好的 B 端产品，会把自己的产品预览图直接放到首页供人观看，而不是搞一张概念图外加一堆高大上的广告词。
前面放过的那张案例，这里也可能拿来用：
GitLab 的官网画了一些很抽象的概念图，写了一些很抽象的描述，给人感觉很模糊。
Monday 的官网明确把自己的业务类型列了出来供用户选择，还把每种业务对应的图标和展示方式画了出来，感觉很明确清晰。
2. 有效互动
遇到两个健身房销售：一个上来就说一个劲地介绍服务；另一个则先确认你平时的健身习惯，再根据你的情况介绍服务，你会更愿意听谁说话？
我肯定更喜欢第二个。
C 端化做得好的 B 端产品，不是简单地展示信息，而是先了解用户，再根据用户的需求提供不同的信息甚至服务。
Zendesk 的网站，会把自己的功能列出来给用户，给的图像和描述又很抽象，毫无互动感。
而 Asana 会让用户选择自己需要的功能，并直接给出具体案例的界面展示图。
3. 降低门槛
遇到商场逛街时遇到两个陌生餐馆，一家在二楼；另一家在一楼，你会愿意尝试哪家？
肯定是第二个。
很多 C 端化做的好的 B 端产品，会把表单用弹窗的样式放在产品上面，让用户感觉只要填写完就能立即使用了。
比起 Trello，Smartsheet 只是在表单展示了一下产品内部，就让用户感觉门槛低了好多。
即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已，要填的一点不少，但这时都已经快填完了……
4. 循序渐进
两家陌生的两家餐厅都把菜单摆出来了，一家的菜单写得密密麻麻；另一家的菜单虽然菜品不多，但是推荐菜品和菜式分类很清晰，你会更愿意尝试哪家？
我相信很多人都会更愿意尝试后者。
C 端化做得好的 B 端产品，不会太在意自己的产品是不是看起来功能齐全，而是更在意用户是否能够很好的理解产品，不要造成心理负担。
上图来源：Figma 这些交互细节，B 端设计也值得借鉴
Sketch 和 Figma 的属性面板在功能上其实没有很大的差异，但是后者看起来却清晰简洁许多，对新用户更加友好。
B 端产品 C 端化这个理念其实很好，但如果被误以为只是向 C 端学习用户体验那就可惜了。
用户体验只是手段，关键目的是在没有销售人员参与的情况下，如何从互联网获客。
这次的经验的提醒我，以后如果再看到一些很火概念，不要简单的从表面理解，而是要站在决策者的角度，多思考背后的真实意图。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
“组件”是平台级产品非常重要的组成部分，设计组件不仅可以节约设计和开发成本，更是设计理念的约束性体现。但是，随着平台级产品业务场景的复杂度不断增加，过往沉淀的设计组件的交互模式和视觉形式，却跟不上业务发展的诉求。因此，我们思考：如何建立和迭代一个优秀的组件库——不仅能保持良好的普适性，解决全平台产品的体验一致性的问题；并且能够保持各个业务线的特色和定制化需求，即所谓平台级组件的“和而不同”。
随着近两年业务的发展，早期沉淀的组件渐渐无法满足业务诉求，一部分组件的使用率和覆盖率很低。
因此我们决定对贝壳平台组件进行一次全新的升级。我们的目标不仅是针对“基础组件”进行优化，保持其良好的通用性，达到“和”的目的；更希望能够承载业务线（二手房、新房和租房）更多体验场景的需要，做到服务于业务的“不同”。
为了更好的实现升级目标，我们思考了以下几个问题：
1. 设计组件库的使用人员有哪些不同的角色？他们的诉求是否有区别？
在我们眼里，设计组件是对设计工作的一种管理，而设计工作从产出到落地的完整链条上，主要有三种角色的人群：
贝壳平台设计师和各个业务线设计师：平台设计师穷举组件使用场景的同时，提炼业务诉求，帮助业务线设计师通过组件更省时省力的高效完成设计工作。
开发团队：通过设计师的输出，明确组件开发的具体框架和自由度（例如按钮颜色是否支持不同业务自定义等）
产品团队：通过设计组件文档明确设计的标准，在各角色有共同标准的认知下，需求中可使用组件搭建的部分无需重复提需求，节约各方成本。
因此，设计师需要产出的并不是一份简单的组件库源文件，而是一份以不同角色合作伙伴的视角，都能看得懂的设计组件表达文档。
△ 图 1 给设计、产品和开发不同的文件样式
2. 组件真的是越多越好吗？
我们给出的结论是：面面俱到反而无从下手。在做设计组件时，大多数同学都会有患得患失的心理，认为组件足够多，就可以应对更多的使用场景，规范也足够细致和统一。
但是这是一个比较理想的状态，过于低微的颗粒度下，设计反而会失衡。这里的失衡是指，创新和规范之间的平衡被打破，显然不是我们想要的。并且平台级组件库是具备再生和持续发展的生长能力的，因此不必一味追求数量。
3. 采用什么方法可以合理的控制组件的质量和数量，挑选出通用度高的组件呢？
我们优先梳理了贝壳平台流量 TOP30 的核心关键页面，依据数据圈定范围，然后进行组件的整理。如下图，我们发现使用率最高的前十名组件，按照降序排列依次为：tabs 选择>Navbar>房源卡片（业务通用组件）>经纪人展位（业务通用组件）>按钮>通知与提示>弹层>搜索框>操作菜单>标准悬浮球。
△ 图 2 贝壳平台流量 TOP30 页面组件应用情况
这样，我们就可以按照以上优先级，优先设计和代码化使用频次较高的组件。
我们将贝壳原有组件库的全部组件打散，重新定义后分成三大类别：
平台基础组件：指不具有业务属性的元件及基础组件，例如：按钮/表单/列表/搜索栏/系统反馈弹层/操作栏/Navbar 等。
业务通用组件：指横跨多业务，但在不同的业务场景中略有变化，有公共元件可提炼，例如：经纪人展位/房源卡片。
业务特性组件：指只属于某一业务应用范畴的组件，无公共元件可提炼，但是在单一业务线复用率较高。
组件的明确分类，可以帮助我们在日后每当有新增组件时，以统一的标准和原则进行归纳和整理。
除了优化平台基础类型的组件外，我们还对其中使用频率很高的业务通用组件——房源列表进行了优化。
房源列表是在贝壳平台通常以线性结构呈现的。用户通过纵向扫读来获取房源宏观信息，横线浏览来了解单个房源条目的细节信息并进行相关操作。它在二手房、新房、租赁、海外等等业务线，都会经常被使用到。贝壳平台原房源列表样式，由于业务的发展，需要展示的信息逐步增多，依次罗列在列表中，导致展示效率变低，无吸引用户的亮点，最终导致用户对房源列表的“决策效率降低”。
而想要提升决策效率，并且优化后的列表能够在各个业务线使用，我们先要了解，在不同业务场景中，房源卡片都要展示哪些内容？这里我们应用到了先前研究得出的结论——用户浏览房源列表的心智模型。
△ 图 3 用户浏览房源的心智模型
在心智模型的指导下，我们进行了“元素穷举”。
△ 图 4 元素穷举
得到了具体展示哪些元素后，我们开始思考，一个包容性强的列表底层结构应该是什么样子？经过几次的反复推敲和尝试，我们得出如图所示的三层结构：容器背板层、可交互操作层、内容展示层。
△ 图 5 房源列表的三层结构
容器背板层：它是承载列表内部所有内容的盒子，我们在这一层，定义了容器的形状，圆角等属性，使它成为一个统一的底层模版。
可交互操作层：这一层放置的是用户关于列表可进行的全部操作，例如关注，查看 VR 图片等。并且，我们针对具体每一种操作行为，定义了统一的交互方式。
内容展示层：这一层涵盖所有用户可以查看的具体信息，包含房源标题、楼盘名称、房源详细信息和价格的动态浮动变化信息。
通过三个层次的划分，我们可以清晰的定义每个层次的具体的职责是什么，这有利于我们后期面对复杂业务场景和海量信息内容时，可以更好的去归纳和组织信息的呈现。
在完成了元素穷举和结构分层之后，我们绘制了一个基础框架模版，如下图：
△ 图 6 房源列表基础框架
然后我们将不同业务线的具体细节信息，嵌入模版中，设计成各个针对不同业务和不同场景使用的房源列表。带着这样的设计结果，我们与业务线的产品经理和设计师同学进行了一次深入的探讨，并且确定可推行迭代的节奏。
综合 14 天数据，二手房改版后，CTR 由原来的 44.65%提升到 51.35%。这对于房源列表来说，是非常难得的。
△ 图 7 改版后的数据结果
以上就是本文的全部内容，相信大家已经掌握了 C 端组件库建立的基本方法，这里我们总结一下组件库的创建流程：
△ 图 8 C 端组件库的创建流程
组件库是每一位用户体验设计师，在日常工作中积累的设计资产。组件要做到“和而不同”，“和”是指用规范化的底层容器，将抽离出复用率高的元素包裹起来，形成体验一致，交互一致的封装模块。“不同”是指，每条业务线可以根据自身具体的使用场景，去定义各自在内容展示层要展示的元素，保证了一定的自由度和各自生长的能力。
房源列表在贝壳平台首页已经上线有半年左右的时间了，通过改版，用户使用房源列表时的决策效率有一定程度的提升，业务覆盖也逐步扩大。在研发老师的协同下，实现了 Native 和 Flutter 组件的封装，大大缩短了开发时长，从而提升了产品整体的研发效率。
希望能给同样正在建立组件库的设计师同学们带来一些启发，贝壳用户体验团队也会继续致力于更多业务特性组件的深挖，期待你的关注。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。
公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。
到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。
1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。
1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。
随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。
今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。
页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。
要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。
网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。
接下来通过几个图例来详细解释下。
列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。
槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。
边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。
介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。
有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？
比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。
因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px
使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。
基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。
在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。
固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。
流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。
自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。
响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。
最后用图例展示下如何利用网格系统在网页设计上进行页面布局。
在 figma 上的设置如图：
我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。
在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。
这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。
https://www.figma.com/community/file/1076073453929437640/8pt-web-grid
最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。
切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。
参考文献：
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
配图取自文章《以B端产品为例，帮你深入浅出掌握「设计系统」》
设计系统 = 设计价值观和原则+设计规范+场景定义+工具包
设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产，是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案，能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发！
问题 1:
随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。
问题 2:
无统一的设计规范和交互原则，没有统一的 UI 组件库和代码库，各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。
问题 3：
产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。
产品侧：
保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。
设计侧：
把设计师逐渐从不必要、重复性劳动中解放出来，节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘，如果每个设计师都具备产品用研、交互、组件化等一条龙能力，才能体现 tob 产品设计师的价值，才不会被别人称作是拖拽组件的“工具人”。
开发侧：
形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同一个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发。做到开箱即用。
测试侧：
标准化的设计规范，是测试人员最喜欢看到的。1 是 1，2 是 2 的设计准则，提升了测试效率。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
主流设计系统-他山之石可以攻玉！
无需犹豫，直接基于现有的优秀的开源设计系统。
设计系统的打造不必从 0-1 构建， 例如：Ant Design 业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。
1. 原子理论设计介绍
首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。
原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～
2. 原子层(Atoms)：
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。
简单概述下来就五个字：色、形、质、构、质；
3. 分子(Molecules)层
在界面中，分子就像是一个由 UI 元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。
以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。
4. 组织(Organisms)层
分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。
以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。
5. 模板(Templates)层
由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。
本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。
6. 页面(Pages)层
带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。
误区 1：设计体系就是设计规范或者组件库吗？
许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；
误区 2：设计体系的存在扼制了组织内创造力，会替代掉设计师？
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难认同这个的，对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；
好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！
误区 3：设计系统是一劳永逸的吗？
设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将静态的设计规范曲解成了设计体系。
误区 4：设计系统由少数人员生产，我们负责用就行了？
正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；
设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！
当然设计体系也容易出现一些缺点，这些问题需要设计体系的构建者们去摸索去克服；
尽管有一系列潜在的问题，但总的来说设计体系带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。
今天就跟大家分享到这了，一点拙见，设计系统的话题这个我们分三期跟大家进行交流，如有兴趣，铁子们可以加个关注
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
