基于组件的设计往往在大型复杂的设计项目中会被提到，但在这篇文章里，作者提供了许多实用的建议，让基于组件的设计在小型项目和团队中也可以发挥作用。

首先我们要向关于原子设计理念的作者，Brad Frost 先生致敬。是他向我们引入了这样的设计理念：当我们以为我们是在设计网页或是应用界面时，我们其实是在是设计设计系统。

但我们发现原子设计的某些理念会引起用户的迷惑，所以在借鉴学多其他优秀设计的基础上，我们总结出了一套基于组件设计的方法。

基于组件设计是什么？

基于元素设计的核心就是把 UI 分割成更小，更易操作的小部分，每个部分都有明确的名字。这些小部分可以分为以下六类。

1. 身份

六个分类的第一个部分就是身份。身份是指整个项目的元素要保持高度一致性，从而形成一个项目的整体身份认同。我们需要在这里定义整个项目的核心元素。界面、字体、一级和二级色彩都需要在这时候仔细地被定义。之后这些元素会贯穿在整个项目之中。

2. 元素

第二个部分包含了项目中可重复利用的最小部分，元素。一些众所周知的元素包括按钮，链接，输入框，下拉菜单等。所有这些都需要和它们所有的状态一起被定义好。这些状态包括悬停，聚焦和未激活。我们的口号是：一次性定义好，然后贯穿整个项目始终。

3. 组件

展开全文

接下里的一个部分就是组件。在做应用设计或是网页设计的时候，出现频率最高的就是组件了。组件是至少运用了一组元素的任何形式的设计。卡片，导航栏等都是经典的组件设计样式。不过他们也不一定需要从形式上看起来像一个模块。

对于每个设计组件，我们会对它提前做好响应式尺寸，从而适应不同屏幕尺寸大小。这样我们在设计的时候就不用返回去为了适配不同尺寸大小而重新修改设计。我们会提前跟客户沟通好目标响应式组件，然后再依据情况设计各个组件。

4. 组合

现在我们来到了规模更大一点的分组，也就是组合。组合是一个包含了多个组件的部分。它们定义了包含的组件应该如何呈现。

下图是一个简单的分栏布局。也是一个非常简单的组合。它只是定义了一些边缘的留白，上方的一个小标题和每个组件如何摆放形成逻辑。

5.布局

第五个分组，布局则是设计原则里面更加抽象的组合。这时候留白的数量，栅格和换行都做好了定义。当你像这样定义好了一个设计的时候，其他设计师就很容易用现有的设计风格和指导来进入一个项目。

6. 页面

最后的分组就是项目实际的页面（也可能是屏幕）。每个页面都是一些列组合和组件的排列。

样例

下面我们来看一个非常简单的基于组件设计的样例。

假设我们在某个活动的门票设计。有三种门票，每种门票都以同样的方式设计，只包含有限的元素——在这个例子里，只用按钮和一些文字。这也就意味着这个门票应该被看作一个组件（只包含元素）。

假设现在我们想在我们的主页上用一个三栏布局来拜访这些门票这时候我们就需要定义组合了。也就是「门票组合 」。这个组合明确了每个组件之间所留出的空间，以及上方的一个标题。

项目发出两天后，客户表示需要在门票上面加一些文字，表示已售罄。这也就意味着我们只需要更新「门票组合 」然后发给开发者就行了。快捷多了！

Sketch

大家都知道 Sketch 已经迅速成为 UX 和 UI 设计的新宠。巧妙运用 Sketch 里面的文字样式，符号以及 Artboard，可以极大地帮助我们润色基于组件的设计。我们设计了一个很棒的 Sketch 模板，内置了以上所有的设计原则。这样我们就可以随时快速开始一个项目了。

花一点时间在定义你所有的文字样式上，可以在长远为你省下大量的时间。

总结

总之，基于组件的设计让我们能快速设计出能够方便更新和维护的许多页面。由于所有的部分都已经清晰定义好，多个设计师可以方便地在一个项目里协作。

感谢阅读，希望对你们有帮助。

以上内容来自知乎专栏盒子以外，仅供学习交流