原子设计理论——概念

原子设计理论五个层面

把原子设计理论带入到用户界面中，原子设计就会产生五个不同层面的组成方法，这些层面相互影响，以叠加组成的方式来创建界面的系统。原子设计理论会把这五个层面进行划分，分别是：

原子（元素、要素）

分子（组件）

组织（模块）

模板（原型）

页面（填充内容）

接下来一个个解释它们的含义。

在《Atomic Design》的书中把这部分的知识定义为"生物体"，由于生物体的概念相对比较难理解，这里只简要概述一下它。分子为我们提供了一些基础的物质构成，如蛋白质、核酸 (DNA、RNA等)、糖类，这些常见的生物大分子构成了生物体。

生物体的概念影射到用户界面的构成中，元素和要素（原子）结合起来构成组件（分子），组件组合起来构成组织（生物体）。组织在用户界面中以模块的形式存在，例如网页的导航栏、产品信息、焦点图、关于我们模块；App的卡片、列表、瀑布流等。

模板

到了模板的层面，我们就应该和化学说再见了。原子、分子和组织这样一种有层次的结构，可以帮助我们去构件设计系统中的组件，并实现组件化。但最终我们还要根据用户需求、客户需求和场景的变化，来帮助它们解决设计上的问题，并使原子设计更具有意义。

模板可以使"组织"组合在一起形成产品页面的原型，产品原型可以概括的说是整个产品面市之前的一个框架设计。在这里我们可以看到设计整合在一起，并呈现出实际页面架构和布局。模板的特征就是专注于页面的基础内容结构，而不是页面的最终内容。

页面

页面层面是原子设计最具体的一个层面。所有模板整合在一起并形成页面，为用户提供具有代表性的内容，并准确描述用户最终看到的内容。页面也是高保真图，它能达到和实际页面类似的效果，正因为它更接近于实际页面，团队中大部分的人所耗的时间和精力，就是不断地去修正它并完善它。

当模板填充上了实际用户需要的内容，如图片、图标、文字后，就会逐渐形成页面，当内容全部填充完后就会形成高保真图。这里的高保真图可不是视觉稿，视觉稿只是基于UI设计层面，而高保真图是在产品和业务层面综合考虑的，包含完整的产品交互逻辑、页面流转、实际内容和界面设计等。比视觉稿更有逻辑，更准确，更接近于实际业务层面。

为什么要进行原子设计

原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤，能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来，因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。

通过模块化的设计系统调动组件，可以使我们开发新的产品时，从开始就可以对产品进行严格的把控与一定程度上的控制，进而规避了事后风险。开发之前什么都不确定好，毫无逻辑的去开发，开发到一半发现功能与需求对不上等问题逐渐产生，会导致产品的延期、人员成本的浪费、人员能动性降低、资金成本的增加，产品的迭代率的下降、进而影响市场先机与市场占有率。

在开发新的产品或项目之前就应该确定好目标和方向，这很像德国人的思维，在软件开发之前把一切都策划好，之后根据之前策划的步骤一步步去实施，如果中途发现哪里有弊端不会进行修改，要严格按照之前定制好的标准一步步执行，前期的项目规划尤为的重要。用中国人的设计思维去理解德国人这样的设计思维会觉得非常的愚蠢，但实际这样做效率更高，沟通成本低、产出率高，质量控制更好，品质也更高。

原子设计理论 - 总结

下面显示了逐步完成设计原子设计的过程，对于每一个层面都有相应的介绍。这五个不同的层面同时工作，以产生有效的用户界面设计系统。概括总结原子设计理论：

原子：无法进一步细分的UI元素，是界面的基本构成要素；

分子：形成相对简单的UI组件的原子的集合；

组织：形成界面离散部分的相对复杂的组件；

模板：组件放置在布局中，并演示设计的基础内容结构；

页面：将真实的内容应用于模板，并阐明变化形式以演示最终的UI并测试设计系统的弹性。

作者：罗耀

本文由罗耀创作，仅为学习交流

文章内容属人类共同财产

可不通知转载，禁止洗稿

转载要标注"来源于站酷"

更多内容请关注公众号"设计规则"

开心就点个赞

原文链接： http://mp.weixin.qq.com/s/uEUnkND3rYFYi9uvogqSdA

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/