原子用例组件_在原子设计系统中对组件进行分组
原子用例组件
[1] March 20, 2020 Update: Reader Luca Brognara made me realize input groups can easily be mistaken for groups of input fields. To prevent confusion, I’ve crossed input groups from the molecule’s classification. My suggestion is to keep all types of input units as molecules and refer to groups of multiple inputs simply as forms.
[1] 2020年3月20日更新 ：读者 Luca Brognara 让我意识到， 输入组 很容易被误认为 输入字段组。 为了避免混淆，我将分子分类中的输入组交叉。 我的建议是将所有类型的输入单位保留为分子，并将多个输入的组简单地称为 形式。
Organizing and classifying components in a design system is an art-form in itself. Coming up with a consistent taxonomy, finding a grouping principle for the different types, and keeping track of dependencies are all challenging endeavors.
Órganizing并在设计系统进行分类部件是一种艺术形式本身。 提出一致的分类法，找到不同类型的分组原则，并跟踪依赖项都是具有挑战性的工作。
To make sense of all this chaos, I usually like to adhere to the methodology proposed by Brad Frost in his book Atomic Design. The book provides a useful framework to classify components into a nested taxonomy.
为了弄清所有这些混乱情况，我通常喜欢坚持Brad Frost在他的《 原子设计》一书中提出的方法。 本书提供了一个有用的框架，可以将组件分类为嵌套分类法。
If you haven’t read it yet, I highly recommend you do. It’s one of my three favorite design books on design together with Sprint and Don’t Make Me Think.
如果您还没有阅读它，我强烈建议您阅读。 与Sprint和《 不要让我思考》一起，这是我最喜欢的三本设计书籍之一。
问题 (THE PROBLEM)
There is one problem, though. As the design system grows, so does its complexity, and that’s when things can get intricate. Sometimes it’s difficult to discern in which group a specific component should go.
不过，有一个问题。 随着设计系统的发展，它的复杂性也在增加，这就是事情变得复杂的时候。 有时，很难确定特定组件应该属于哪个组。
Atomic Design states groups all components into:
原子设计状态将所有组件分为以下几类：
- Atoms 原子
- Molecules 分子
- Organisms 生物体
- Templates 范本
- Pages 页数
However, templates and pages are not categories of components but rather the upper layers of the hierarchy that allow you to group those components to build your product.
但是，模板和页面不是组件的类别，而是层次结构的上层，允许您将这些组件分组以构建产品。
This means we have effectively three groups only:
这意味着我们实际上只有三组：
- Atoms 原子
- Molecule 分子
- Organisms 生物体
But then, the question is, what goes where? Should a pop-up dialog be a molecule or an organism? And what about grids?
但是，问题是，去哪儿了？ 弹出对话框是分子还是生物？ 那网格呢？
Confused? Read on (Gif from Giphy.com)
困惑？ 继续阅读(来自Giphy.com的Gif)
The book doesn’t go into great detail about these questions, so I’d like to offer an easy-to-follow guideline.
本书没有对这些问题进行详细介绍，因此我想提供一个易于遵循的指南。
原子 (ATOMS)
Populating the atoms group, it’s usually the easiest part. The rule of thumb is, if you can’t divide without it becoming useless, then it’s an atom.
填充原子组，通常是最简单的部分。 经验法则是，如果您不能分裂而变得无用，那就是原子。
Here’s a list of typical atoms:
以下是典型原子的列表：
- Typographic styles 印刷风格
- Color swatches 色板
- Icons 图示
- Radio buttons 单选按钮
- Checkboxes 选框
- Sliders 滑杆
- Toggles 切换
- Profile pictures placeholders 个人资料图片占位符
- Product pictures placeholders 产品图片占位符
- Buttons 纽扣
- Links 链接
- Input fields (without labels) 输入字段(无标签)
- Tabs 标签
- Pills 药丸
- Badges 徽章
- Tags 标签
- Tooltips 工具提示
分子 (MOLECULES)
Molecules can often be mistaken for organisms and vice-versa. The rule of thumb here is groups of atoms that work as a single component with a single function.
分子常常被误认为有机体，反之亦然。 经验法则是一组原子，它们作为具有单个功能的单个组件起作用。
Here’s a list of common molecules:
以下是常见分子的列表：
- Dropdown menus 下拉菜单
- Radio buttons inside regular buttons 常规按钮内的单选按钮
- Dropdown buttons 下拉按钮
- Date pickers 日期选择器
- Search components 搜索组件
- Blockquotes 块引用
- Breadcrumbs 面包屑
- Input fields (with labels) 输入字段(带标签)
-
I̶n̶p̶u̶t̶ ̶g̶r̶o̶u̶p̶s̶ * removed as per update [1]
Iupdaten̶p̶u̶t̶g̶r̶o̶u̶p̶s̶* 已根据更新内容移除[1]
- Media uploaders 媒体上传者
- Loading components 加载组件
- Notifications 通知事项
- Pagination 分页
- Informative pop-ups e.g., error messages 信息弹出窗口，例如错误消息
- Boolean modals e.g., This site uses cookies: accept/cancel 布尔模式，例如，此站点使用cookie：接受/取消
- Tiles 瓷砖
有机体 (ORGANISMS)
Now that we’ve defined the classifying principle for molecules, all you need to remember is that organisms are combinations of multiple molecules and have more than one function.
既然我们已经为分子定义了分类原理，那么您需要记住的是，生物是多种分子的组合，并且具有多种功能。
Here are some organisms:
以下是一些生物：
- Navigation bars 导航栏
- Tab bars 标签栏
- Video players 影片播放器
- Music players 音乐播放器
- Media grids 媒体网格
- Progress indicator 进度指示器
- Tables 桌子
- Carousels 轮播
- Forms 形式
I have been following these guidelines for a while, and I’ve had great results. Hopefully, they’ll be helpful to you as well when organizing and inventorying your design system.
我遵循这些准则已有一段时间了，并且取得了不错的成绩。 希望它们在组织和清点设计系统时也对您有所帮助。
Was this helpful to you? Do you know a better way to classify design systems? Let me know in the comments below!
这对您有帮助吗？ 您知道更好的设计系统分类方法吗？ 在下面的评论中让我知道！
翻译自: https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45
原子用例组件