## 资源 - [Atomic Design Methodology | Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/chapter-2/) - 第二章![[Pasted image 20220227101307.png|575]] ## Voice and tone 声音和语调 人们通过大量的渠道和媒体与品牌进行互动。除了我们到目前为止讨论过的数字媒体，品牌还经营印刷、零售、户外、广播、电视和其他渠道。当一个品牌必须跨越如此多的接触点进行沟通时，以统一、一致的方式表达对于一个品牌的成功至关重要。 ## Writing 网络和内容管理网站的兴起使得一个组织内的许多人比以往任何时候都更容易发布内容。当然，这可能是一把双刃剑，因为对于一个拥有多种声音的组织来说，保持一致的写作风格可能是一种挑战。写作风格指南为每个作者提供了一些指导方针和保障。 ## Code style guides 团队必须编写易读、可伸缩、可维护的代码。但是，如果没有一种方法来提高和加强代码的一致性，事情就很容易分崩离析，让每个开发人员自生自灭。 ## Pattern Libraries 现在是重头戏。模式库(也称为前端样式指南、 UI 库或组件库)正迅速成为现代界面设计的基石 **将样式指南作为流程的核心，会使用户界面更加统一和可信，这有助于用户更快地完成任务，并使他们能够掌握界面。** 随着从事一个项目的人数的增加，交流中断的发生变得太容易了。不同的学科对同一个模块有不同的名称，并且每个人都会胡作非为，发明自己的命名约定，这种情况并不少见。为了实现真正的协作，团队使用通用语言是必不可少的。风格指南有助于建立共享的词汇。 **风格指南在参与项目的每个人之间建立了一个一致的、共享的词汇表，鼓励学科之间的合作，减少沟通障碍。** ## 设计系统应具备扩展性 The beautiful thing about interface design systems is that they can and should be modified, extended, and refined for years to come. 界面设计系统的美妙之处在于，它们可以而且应该在未来几年内得到修改、扩展和完善。 ## 挑战 也许最大、最不可避免的挑战是，时尚指南的创作需要耗费大量时间。我不知道你怎么想，但是我不会每天去上班，无所事事，不知道如何安排我的时间。我从来没有遇到过一个人不感到工作的压力，这种压力自然会导致他专注于主要的网络项目。不幸的是，积极进取的时间表和有限的预算会减少让时尚指南发生的努力，即使团队致力于这项事业。 ## 不好好维护，也会夭折。 即使时间和金钱被分配用来建立时尚指南，如果这些有价值的工具没有得到发挥其真正潜力所需的关注，它们通常也会夭折。 维护和治理策略对于风格指南的成功至关重要。样式指南将被扔进垃圾桶，并且如果没有一个合适的策略来管理、维护和执行它们，它们就会被抛弃。 # 进入原子设计 ## 界面元素周期表 ![[Pasted image 20220227101535.png]] ![[Pasted image 20220227101808.png]] ## Atoms 原子 20220514新的理解，虽然原著把Atoms定义为了基本的控件，但是看了[[Lightning Design System#^8b917a]]的规范，他们把基础的Design token视觉定义为了原子，所以我现在也站这一种说法，毕竟和国内大厂主流观念有吻合。 If atoms are the basic building blocks of matter, then the **atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces**. These atoms include [basic HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional. 如果原子是物质的基本构件，那么我们接口的原子就是构成我们所有用户接口的基本构件。这些原子包括基本的 HTML 元素，如表单**标签、输入、按钮**，以及其他不能被进一步分解而不停止运行的元素。 ![[Pasted image 20220227101853.png]] ## Molecules 分子 In interfaces, **molecules are relatively simple groups of UI elements functioning together as a unit**. For example, a form label, search input, and button can join together to create a search form molecule 在界面中，分子是一组相对简单的 UI 元素，它们作为一个单元共同发挥作用。例如，表单标签、搜索输入和按钮可以连接在一起创建一个搜索表单分子。 当这些抽象的原子结合在一起时，突然就有了意义。标签原子现在定义输入原子。单击按钮原子现在提交表单。其结果是一个简单、可移植、可重用的组件，可以放置在任何需要搜索功能的地方。 ![[Pasted image 20220227101934.png]] 搜索框的分子由标记原子、输入原子和按钮原子组成。 ## Organisms 有机体 让我们回顾一下我们的搜索形式分子。一个搜索表单经常可以在许多网站体验的标题中找到，所以让我们把这个搜索表单分子放到顶部导航栏有机体的上下文中。 ![[Pasted image 20220227102236.png]] ## Templates 模板 模板是页面级对象，它将组件放置到布局中，并清晰地表达设计的底层内容结构。在前面的例子的基础上，我们可以使用头部 Organisms 并将其应用到主页模板。 模板的另一个重要特征是它们专注于页面的底**层内容结构**，**而不是页面的最终内容**。设计系统必须考虑到**内容的动态特性**，因此明确表达组件的重要属性非常有帮助，**比如标题和文本段落的图像大小和字符长度。** ![[Pasted image 20220227102954.png]] > You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content _made_ from, not what your content _is_.[Mark Boulton](http://www.markboulton.co.uk/journal/structure-first-content-always) > 你可以在不知道内容的情况下创造良好的体验。如果你不知道你的内容结构，你就不能创造 出好的体验。你的内容是由什么构成的，而不是你的内容是什么。马克 · 博尔顿 ## Pages 页数 页面是模板的特定实例，可以显示具有真正代表性内容的 UI 是什么样子。在前面的例子的基础上，我们可以获取主页模板并将代表性的文本、图片和媒体倒入模板中，以显示实际的内容。 页面阶段是原子设计中最具体的阶段，由于一些相当明显的原因，页面阶段非常重要。毕竟，当用户访问你的体验时，他们会看到并与之交互。这就是你的利益相关者将要签署的。在这里你可以看到所有这些组件结合在一起，形成了一个漂亮的功能性用户界面。激动人心！ ![[Pasted image 20220227103341.png]] ## 原子到页面的总结 - **Atoms** are UI elements that can’t be broken down any further and serve as the elemental building **blocks of an interface**. - **Molecules** are collections of atoms that form relatively **simple UI components**. - **Organisms** are relatively complex components that form discrete **sections of an interface.** - **Templates** place components within a layout and demonstrate the design’s underlying content structure. - **Pages** apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system. ## 原子设计优势？ 原子设计提供的最大优势之一是能够在**抽象和具体之间快速转换**。我们可以同时看到我们的界面分解成原子元素，也可以看到这些元素如何结合在一起形成我们最终的体验。 > 画家在远离画架的地方，可以从这个有利的位置对整个作品进行评估和分析。他仔细观察和倾听，选择下一笔作画，然后走近画布去做。然后，他又退后一步，看看他在整体上做了些什么。这是一个切换上下文的舞蹈，一个在工作室地板上来回踱步的拍子，在做标记和评分之间产生一个紧密的反馈循环。弗兰克 · 奇默罗 当设计师和开发人员在制作一个特定的组件时，我们就像画布上的画家，创造出细节的笔触。当我们在一个有真正代表性内容的布局中观察这些组成部分时，我们就像画家离画布几英尺远，评估他们的细节笔触如何影响整个构图。为了确保它的功能性、可用性和美观性，有必要将注意力集中在一个特定的组件上。但是，也有必要确保组件在最终 UI 的上下文中是功能性的、可用的和漂亮的。