如何使用基于组件的设计方法

　　基于组件的设计方法通常在大型复杂的设计项目中才会谈论到。在这篇文章中，我们将说明的是，它对于小型项目和团队来说也是非常有益的。无论项目大小，运用这个方法，设计效果都是立竿见影的。

　　首先，我们要向布拉德弗罗斯特先生致敬，他写下了关于原子设计的书籍。他在书中表明了对于设计的想法：不管是在设计网页或者应用程序，实际上我们是在构建一个设计系统。

　　然而，我们发现这个关于原子设计的隐喻使不少用户感到困惑。特别是抽象的命名方式令人望而生畏。因此，我们将自己团队定义的基于组件的设计流程与大家分享，当然其中借鉴了不少优秀设计师的想法。

　　什么是基于组件的设计?

　　实质上，基于组件的设计是将UI分解成更小，命名清晰且更易于管理的组件。这些组件被分为以下六个部分。

　　1、一致性

　　这六个部分中的第一个要讲的就是一致性，在这里我们定义了项目的核心品牌元素。字体，排版，主要和次要颜色都经过精心指定。之后，这些将在整个项目中使用。

　　

　　2、元素

　　第二个定义了项目中可复用部分的最小层级：元素。譬如按钮，链接，输入框，下拉列表等都是常见的元素。每一个元素它们的状态被定义为：如悬停，获取焦点和禁用按钮。我们的准则是：Define Once,Reuse Throughout The Project!

　　

　　3、组件

　　当我们的工作到达一定规模时，就要用到第三个可复用的部分-- 组件。在我们设计应用程序和网页设计时，屏幕上的模块都是组件。组件可以是由多个元素组成的，像主角卡片和导航菜单就是典型的例子。然而，组件也并不一定要模块化。

　　

　　在设计组件时，我们还会为每个项目的响应大小(或断点)立即创建它们的版本。这样我们就不用回溯到几周前设计的屏幕上，并且设法让它们适用于智能手机。响应目标与客户端事先达成一致，以确保每个组件都是相应设计的。

　　4、组合

　　我们的工作再进一规模，就到了第四部分：组合。组合是包含多个不同组件，它们定义了它内部组件的行为方式。

　　下面是一个简易的单列布局例子，它只定义了组合的组件间距，标题以及组件内容的循环使用!

　　

　　5、布局

　　第五大部分布局是更抽象的设计原则集合。这里定义了间距，栅格和包装器的元素数量。通过这样定义，其他设计者可以轻松地进入项目并使用现有的样式规范。

　　

　　6、页面

　　最后一个部分是项目的实际页面。每个页面由各种组合和组件的排列组成。

　　所有超出预期的东西都是在页面这个层级中定义的。例如营销部门的朋友认为联系人页面应该是蓝色的背景，那么我们只在页面级别添加，不涉及其他层级。

　　

　　让我们来看一个非常简单的基于组件设计的例子。

　　我们正在出售一些门票，需要展示三种不同风格的门票卡片。每个卡片的呈现方式是一致的，都只包含按钮和一些文字。在这种情况下，门票卡片就应该被设计为组件，即所谓的门票组件。

　　

　　现在，我们要将三种门票编为一组同时展示在页面上。这就需要我们来设计门票构成组合。这个组合规范了各个门票组件的间距,以及标题。

　　

　　在项目推出几天后，客户表示门票售完需要增添。这意味着我们只需更新门票组合并将其发送给开发人员。非常快捷!

　　Sketch

　　总所周知，Sketch已成为设计师进行UI/UX设计的首选。利用Sketch的文字样式，元件和画板，我们可以极快地分析和调整我们基于组件的设计工作流程。我们开发了一个精美的Sketch模板，其中涵盖了所有这些原则，因此我们可以快速地设计项目。

　　花更少的时间来定义所有的文字样式可以节省大量的时间。

　　后记

　　简而言之，基于组件的设计使我们能够快速设计出许多易于维护和更新的项目。多个设计师可以同时地在一个项目上工作也能保持项目的一致性，因为一切组件都被明确定义。

　　译文/Cherry 微信公众账号：Mockplus

　　喜欢 0

*请认真填写需求信息，我们会在24小时内与您取得联系。