本文首发于欧雷流。因为我会时不时对文章进行补充、修改和润色，为了保障所看到的是最新版本，请浏览原文。这是篇译文，原文是由 Audrey Hacq 写的一篇对于原子设计、设计体系的文章。本文由朱莉娅翻译，我来校对与润色。
现在，数字产品必须可能同时实用于任意和所有的设施、屏幕尺寸和媒介：
那咱们为毛还在按「页面」或按屏幕来设计咱们的产品呢？！
相同，无论设施、屏幕尺寸或环境（context）如何，咱们都要发明好看且易于拜访的内容。
布拉德·弗罗斯特（Brad Frost）牢记这一点并受到模块化设计的启发，构想出「原子设计」方法论，在其中万物皆始于界面的最小元素：原子。这个隐喻让咱们明确咱们正在发明什么，尤其是如何去发明的办法。
我为这个办法所折服，它最终使咱们能兼顾部分与整体，对产品或品牌领有全局视线，也更靠近开发者的工作形式。
所以，我心想：「当然，就是它了！咱们须要像这样工作！」但诚实说，我对如何去做毫无脉络……
在花了好几个月的工夫做了一些具体的我的项目之后，我才理解「原子设计（designing in atomic）」的真正含意，以及我作为一名设计师的日常生活中将会产生的扭转。
在本文中，将介绍一些我学到的常识与在用原子设计构建组件体系时须要牢记的注意事项。
针对哪种我的项目？
对我来说，每个我的项目，无论大小都能够在设计时思考其原子性。
它令团队围绕着独特愿景汇集起来。这些组件易于复用、编辑和组合在一起，从而使产品的演变变得更为简略。至于更小的我的项目……嗯，每个小我的项目总有一天会变成一个大我的项目，不是吗？
我还认为，与广泛的认识相同，原子设计方法论不仅实用于 Web 我的项目……事实上恰恰相反！我能将原子设计引入集体我的项目（一个用于清理通讯录的叫「TouchUp」的 iOS 利用），并且与我单干过的开发者对此办法示意很是观赏。当咱们想要疾速开发和迭代产品时，这种办法为咱们节俭了很多工夫。
至于那些想晓得是否能够在构建组件体系的同时又放弃创造性的人，我倡议读下这篇文章：《原子设计与创造性》。
与之前的有何不同？
人们常常问我：「然而这与咱们之前的工作形式有何不同？」
我认为原子设计是一种稍微不同的界面设计办法，但这种办法最终会产生极大影响。
部分影响整体，整体影响部分。
直到最近，咱们设计了产品的所有界面，而后将其宰割成小组件以制订标准或 UI 套件：
其中一个问题是，以这种形式创立的组件不是泛用的，并且它们之间彼此不依赖。因而，组件的复用十分无限：咱们的设计体系受到了限度。
现今，原子设计的理念起源于常见的原材料（原子），咱们能够用它来构建我的项目的其余部分：
因而，咱们不仅在所有界面间营造一个「家庭气氛」，也有了一个提供有限设计可能的体系！
所有始于品牌标识
当初你可能会想：「如果咱们要以原子的形式设计，那从何做起呢？」
对此，我的答复相当合乎逻辑：用原子 ;)
咱们要做的第一件事就是为咱们的产品设计一种独特的视觉语言作为终点。它将定义咱们的原子、原材料，并且显然与品牌标识很严密。
这个视觉语言肯定要有力度、易于扩大，并且独立于其展现于上的媒介；它必须在所有中央见效！
例如，Gretel agency 在 Netflix 的品牌标识上做得很不错：
得益于强有力的品牌标识，咱们感觉有了所有能够公布为首批原子的素材：色彩、排印抉择、表单、暗影、间距、节奏、动画准则……
因而，花精力设计标识是很有必要的，思考下如何能力不同凡响和放弃品牌或产品的独特性。
持续聊聊组件吧
既然咱们曾经有了原材料（目前还很形象），那当初咱们能够依据产品的指标和已确定的初始用户流来创立首批组件。
从要害个性开始
真正让那些开始创立组件体系的设计师感到胆怯的是，他们创立的组件与任何货色都毫无关联……显然，如果产品中没有购买的元素，那咱们就不会去创立购物篮组件！那没有任何意义！
首批组件会与产品或品牌指标严密相干。
而且，为了解脱「页面」的概念，我保持咱们专一于个性或用户流而不是界面……
咱们会专一于心愿用户执行的操作以及实现此操作所需的组件。界面的数量会随环境而变动：兴许在桌面须要半屏来显示这个组件，而在智能手机上却须要 3 个间断的界面……
丰盛体系
接下来，为了丰盛体系，咱们会在已有组件和新个性间周而复始：
首批组件有助于创立首个界面，而首个界面会有助于在体系中创立新的组件或扭转现有组件。
泛化思考
以原子理论进行设计时，咱们始终得牢记一点，同一组件会在截然不同的环境中复用。
因为，咱们要真正辨别元素的构造与内容。
例如，如果我创立一个「联系人列表」的特定组件，我会很快将它转换成一个简略的「列表」通用组件。
同时，我会思考这个组件的可能变体：如果我增加或移除一个元素会怎么？如果文本排成两行呢？组件的响应式行为会是什么呢？
对这些变体的预测使我可能利用这个组件创立出其余组件：
如果咱们心愿咱们的体系兼具可复用性和丰富性，那么这工作是必要的。
流体思考
咱们依然偏向于将响应式设计视为特定断点处进行块的重组。
然而，组件自身要有它们本人的断点和流体行为。
借助于 Sketch 这种软件，咱们终于能够测试组件的各种响应式行为，并明确哪些咱们想要其是流动的或放弃固定的：
咱们还能够设想失去，组件在一个环境中或另一个环境中会截然不同。
例如，桌面上的一个圆角按钮在智能手表上可能会变成一个带有图标的简略圆圈。
部分与整体
用原子设计构建组件体系的其中一件趣事是咱们晓得要创立一组相互依赖的元素。
而后，咱们一直地在咱们的工作中放大与放大视点。咱们会花些工夫在细节、微交互或组件的改良上，而后退一步来验证其在环境中的外观，再退一步去看作为一个整体的样子。
通过这种形式，咱们能够优化品牌标识，开发组件并验证体系的运作。
协同工作
所有的组件都与原子相连。因为一切都是连接起来的，咱们能够轻松地对体系的一部分进行批改，并验证其对体系其余部分的影响！
作为当代设计师的咱们是如此侥幸：咱们终于有了可用于构建充满活力、一直降级的体系的工具。
当然，像 Sketch 或 Figma 这样的程序能够让咱们创立共享款式，并且让类似的组件互相关联，然而我确信在不久的未来咱们会看到更多。
咱们最终能够像开发者一样，领有本人的格调指南，并按照这些格调指南构建残缺的体系。对咱们体系中原子的批改会主动地影响到所有用这个原子的组件：
咱们很快地意识到，组件的批改是如何可能影响到整个体系的。
将所有组件相互连接后，咱们还发现发明一个新组件会对体系的外围产生影响，而不仅仅是对一个独自的界面产生影响。
共享体系
体系的共享对于放弃不同产品之间的一致性至关重要。
咱们都晓得，在咱们单独实现一个我的项目时会很快失落这种一致性，但与其余设计师一起工作时会更为艰难，这种状况越来越频繁。
同样，咱们当初有了工具，能够让咱们以独特的体系为根底进行真正意义上的团队合作。
有一些共享库，如 Craft for Sketch 或 Adobe 的共享库，它们让咱们领有繁多的数据源，所有人都可拜访，且始终是最新版本：
共享库容许多个设计师从雷同的根底开始设计。
其实共享库还能够简化工作，因为如果咱们在共享库内更新组件，则批改将主动利用在应用此组件的任何设计师的所有文件中：
我测试了各种共享库，但目前我不得不抵赖我仍未找到一个齐全适宜与原子设计一起应用的库……依然短少原子和组件之间的这种强互相依赖性，这会影响咱们构建一个充满活力、一直降级的体系。
另一个问题是，咱们仍有两个不同的库：设计师的库和开发者的库……因而，必须同时保护这两个库，这会容易产生谬误并须要大量额定工作。
我对完满共享库的构想是，一个同时满足设计师和开发者需要的库：
当我看到一个相似于 React Sketch app 这样的插件（近期由 Airbnb 推出），该公司的人承诺能够间接在 Sketch 文件中应用已编码的组件，我心想完满的共享库并不边远……
结语
我想你们曾经明确了：我确信咱们要应用组件来设计界面，思考充满活力且一直降级的体系，并且在我看来原子设计方法论能够帮忙咱们无效地实现这项工作。
如果要围绕设计体系举办研讨会，你能够浏览《如何确定设计体系中组件的优先级？》和《如何掂量设计体系的胜利？》。
欢送关注微信公众号【Coding as Hobby】（微信中搜「coding-as-hobby」）以及时浏览最新的技术文章～ ;-)