为何原子设计在B端设计中这么关键?

无需加好友免费技术支持

原子设计能够帮助人们完成设计系统及页面设计。文中回答了原子设计定律中物种不同的实际界定，回答了为何原子设计在B端设计中这么至关重要，及其原子对页面设计产生的影响。我坚信在阅读了这篇文章以后，你能对原子设计有一个新的了解。

在日常审查环节中，大家长期用原子设计说：你页面不执行原子设计基础理论

因此会有一些好朋友好奇心什么叫原子设计基础理论，会对于我们的设计师造成什么危害。今天我们就来谈一谈 “汤圆”。

原子设计事实上是一个非常早期设计定义，最开始由外国设计师设计 Brad Frost 造就它的原因是因为 Brad Frost 在网页页面设计环节中，发觉全部页面能够针对不同的层面开展分割。与此同时，在化学中寻找原素特点的设计灵感，之后在网页页面中逐层嵌套结构关联 与化学中的原子和分子对比，构成了原子设计基础理论。

大家主要包括原子设计基础理论 原子、分子、机构、控制模块、页面，这五种不同类型的种类，它们关联由小到大，逐层嵌入，这种关系，就如同我们思考问题[1]逐层剖析寻找设计的设计灵感。

我们一起最先掌握这五种种类的实际界定：

在所有页面设计中，我们将要原子视作设计页面中最基本的元素模块。可以看作页面中的所有具体内容均是由它所组成的。

在实际应用原子设计理论环节中，我们可以将页面中颜色、文字、标志、投射、按键、分隔线和器皿视作我们自己的原子。

(不能没有汇总按键等桌面小组件，由于后面和 Figma 之中 Style 保持一致，在定义角度上，不必太纠结 : ）

恰好是因为这是大家页面的前提，而且只要让我们一起来制作页面，我们就要设定页面里的原子，以保证样式的统一。

原子设计在 Figma 它还会体现出来，由于页面设计会有一些基本上的设计风格，因此我们可以设定它基本 Style ，随后限定页面里的原子具体内容。

包含色调、文本、投射、分隔线 能够在房间里设定，因此欢迎来到 Figma 大家尽可能抑制赞扬。总而言之，针对赞扬， 原子限制关键是在页面上包括原子的所有元素 Style 才可以。

分子由好几个原子构成，2个原子能够形成一个分子。实际上，这是针对不同元件的必须搭建原子，随后产生分子。在对于分子的认知中，我们可以应用按键、文本框、下拉列表Tooltips、Popover、Popoverconfirm… 了解也是我们的分子。

他们的特点就是：

最先，具体内容不会很大，造成页面占有太多；部件相对独立性，是一个简单的键入输入，不会那么繁杂。实际上，分子能够相匹配大部分基本上部件，这就意味着我们正创建它 Figma Style 以后必须界定不同类型的部件具体内容。

在我们有这种想法时，在我们剖析一个部件时，你能很快知我想设计哪些。比如，大家现在需要设计一个Popoverconfirm 汽泡确定框可以选择一共包括什么原子。

组织是页面中相对性繁杂的构件，因为他必须在每一个页面上多次重复使用，并把它抽象化为机构。比如，比较常见的：高端表格、穿行框、表头分类、页面导航……

在日常工作中，组织与分子很易混，但我们可以了解分子一般是一个比较小的原素模块；组织是一个页面繁杂、逻辑性繁杂的大元素使模块。

比如，以这个页面为例子，你能发觉页面中的每一个控制模块，我们可以概括为一个组织来设计，是一个机构，我们自己的页面标准会变得越来越标准，用这种方式，能够器重好几个机构，便于迅速设计器重页面。

模板是由固定不动页面的构造和设计方式，将分子和管理放置于页面中，从而形成模板。一般，这类结构与方式能是页面原型。其目的是为了器重。设计师能通过致力于页面的规划构造，寻找系统内能够快速器重的结构类型。与此同时，模板的出现还可以协助精英团队有效的沟通，充分保证计划方案的高效完成。

页面实际是模板的高保真音响，它补充了页面中的实际源数据，关键是用有代表性的真正具体内容更换原形信息内容，让用户能够迅速认知页面。

在页面环节，关键是以视觉效果逐渐，目的是为了让所有人都迅速了解最后的实际效果，充分了解真正内容填充后，我们自己的模板、机构、分子 能不能解决现阶段的内容量。

在页面中，还需要限定具体内容量。比如，在下边的页面中，我们应该剖析具体内容的实际值，随后写设计注解，确保在设计页面时了解有哪些限定。

充分了解了原子设计的定律后，我们一起来分析一下：为何原子设计在B端设计中这么关键？

由于伴随着 B 伴随着商品在终端设备行业普及化，越来越多公司增加了产品系列，逐渐必须设计系统软件来提升开发设计设计工作效率（本质上）。因而，大家希望用设计系统软件来标准商品设计。生产制造设计师系统软件首先要了解原子设计基础理论，因为他能帮助我们逐渐搭建全部系统软件，以防止当你逐渐建立系统时所造成的各类问题：

页面不统一，设计系统软件间的页面相差太大，无法读取对应的页面信息内容。很多企业的设计系统软件一直给人一种机缘巧合的感觉了。在这样的情况下，我们可以 在界定原子和分子时，尽量减少因而了解产品基本上组成后，能够有一套关键基础理论来引导行实践活动。

许多学生拿到一个页面，一般会被视觉语言影响:例如这张图片漂亮吗？这一标志如何？我们不应该致力于某一层面的剖析。

在原子设计基础理论中，我们可以从五个维度进行筛选。比如，在研究时，我们能做的就是抽象地讲出页面难看，但具体丑恶在哪儿 1-2 点，无法完全遮盖。

根据对原子设计的逻辑分析，我们可以下结论：

a.原子:在原子方面，页面的所有元素风格都不统一。查询对应的色调绘图工具，发觉在所有页面一共用。 XX 色调显而易见不符大家页面的设计核心理念。

b.分子：在一个 在图示中，主要有两种完全不一样大小的字体，没法统一展现，所以在数据图表控制模块中，明显是不合理。

c.机构：页面不一样控制模块之间的差别太大，造成机构中间的总体设计不平衡。

d.模板：发生在同一地区 4 个操作台 在原形设计环节中，字段名显著欠缺整体规划，并没有思索。

e.页面：页面高保真音响视觉效果…… emmm~ 一言难尽~

原子设计能帮助商品不断迭代，不论是互动交流或是视觉效果，大家都能通过原子迅速调节页面，随后使商品不断迭代。在日常日常生活 B 端工作中分为两种迭代更新要求:焕肤和视觉效果提高。

焕肤能够完全根据 Figma 之中的 Style 迅速进行其实就是在调节原子设计基础理论 色调原子 迅速完成。

主要是针对视觉效果提高 色调、标志、圆弧、投射 调节好几个视觉语言，随后完成页面的总体改善。

这儿谈危害，通常是谈原子设计基础理论的缺陷。

我经常说 B 端设计要用手铐脚镣舞蹈。实际上，一样严格原子设计基础理论也是有多面性。一方面，它能够确保我们自己的设计低限更高一些，一样，它还限定了我们设计限制。

在一个页面上，这儿的内容在设计标准含有具体规定，因此在我们再度做设计时，我们能做的就是考虑到依照已有的要求完成这些数据。

因而，在艺术创意设计中，他其实会限定我们自己的思想活动。

比如，在一个业务组件中，已经存在 许多通用组件，我还要业务组件吗？这是一个典型性的缺陷，造成全部页面一直由这部分内容构成，看起来更加模板，难以应用。

对于原子，大家不必太过神密。实际上，这是一种简单剖析复杂事物的办法，但是我们经常会在设计环节中使用这些。

[2] 汽泡确定框一共包括 5 原子，各是 标志、文字、按键、器皿、投射

自由撰稿人

CE青年人，微信公众平台：CE年青人，每一个人都是产品运营自由撰稿人。致力于B端设计，一个2B行业2B设计师。

每一个人都是产品运营。未经同意许可，禁止转载

题图来源于Unsplash，根据CC0协议书。

文中仅代表创作者自己，每一个人都是产品运营服务平台，只提供数据内存空间服务项目。