如何基于组件设计

我们不是在设计页面,我们在设计可复用的系统组件库。—– Brad Frost

我们常常挂在口头上的组件好像更倾向于让人联想到大型复杂项目。然而在这篇帖子里,我们将要用实例证明:小型项目和团队同样适用组件化。基于组件设计适用于任何一个项目,无关乎项目规模大小。

首先,我(作者)得向前辈Brad Frost脱帽致礼他最早把组件化设计的理念精准地诠释在了网页原子设计模式(Atomic Design)这本书上:我们不是在设计页面,我们在设计可复用的系统组件库。

然而我们发现,通过自然界的原子设计的借喻只会让我们设计师更摸不着头脑,尤其光是这个生僻抽象的学术命名足以让我们望而却步。因此,是时候定义了一套适合我们自己的、基于组件化设计的规则,当然其中的部分理论很大程度借鉴和沿袭了其他杰出的设计师们。

寻本溯源:它是什么?

本质上,基于组件设计就是进行将用户界面拆解成更小、更容易管理的部分,并且用清晰的命名规则去约束规范他们的一次设计实践。如果细化下去的话可分为6个层级。

 

 

1.一致性 Identity

第一大层级是品牌定义。这里我们定义了一些核心品牌元素:字体,排版,主色,辅色等等越具体越好,因为这些元素在接下来的整个项目中都将会被沿用。

 

2.元素 Elements

第二个层级定义了这个项目中最小的可拆解单位–元素,其中一些大家熟知的元素组成有类似按钮,链接,输入框,下拉选项等等,定义它们的同时也要定义他们可能出现的状态,比如一个按钮分悬停,聚焦,禁用等不同状态。我们的口号是:一次定义,全程复用。

3.组件 Components

顺着这个套路继续深挖,没错第三个层级就是我们心心念念的组件。我们在日常的WEB和移动设计过程中,和我们打交道最多模块就是它们。(狭义上)一个组件可以是包含了至少任意一个元素的集合。像是卡片,主题页面,导航菜单都是传统的组件的典型。当然,他们没有必要非得长成一个样式。

当我们设计组件的同时,我们同样需要随即依照不同设备(设断点)订制不同的响应式布局方案,这样的话我们就不用在碰到网页搬迁到移动的版本的时候,再去追溯到几个星期前的设计版本,在此基础上做响应适配。响应式方案必须是基于提前和客户沟通过的,通过响应式处理规则定义的组件块去实现。

4.组件集成块 Compositions

紧接着第四个层级便是组件集成块,一个组件集成块包含多个组件,它定义了里面组件的布局规则和交互行为。举个例子,下面是一个分栏布局的最基础的组件集成块。它仅仅定义了组件间间隔,标题样式,以及里面的组件按照怎样的规则循环。

5.布局Layout

第五个层级,布局,是一个更为复杂的设计原则组成单元。这里我们定义了留白数量,栅格,及如何封装,通过这样定义的方式可以帮助其他设计师,利用既定的样式和规范迅速地融入一个项目。

6.页面

最后一层就是项目的实际产出页面(界面),每个页面由一些组件集成块或者组件构成。

其他所有无由来的设计我们都堆叠在页面层,就拿这里的联系我们页面来说,我们之所以页面头部设定成蓝色,仅仅是因为市场部的兄弟说要设计成这样。所以我们只能把它加在页面层。

 

举一反三:

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

这里设定个场景,比如我们需要基于某个活动设计一套购买券的样式。有三种不同的券我们可以获得,每种券都呈现同样结构,包含一些指定的元素,比如这里的一个按钮和一段文本。这意味着这里的券需要被包装成组件的样式,即“券组件”。

现在,让我们基于这三张券在我们的主页上设计一个简单的三栏布局的专题页面,这里我们就需要考虑设计一个组件集合块–“券组件集合块”。这个集合块定义了券组件之间的间隔,以及头上的一个标题样式。两天后项目启动了,客户来提出要在券上更新一个已售空的状态,这意味着我们仅需要将“券组件”更新下,然后重新发给开发。就是这么高效神速!

Sketch

Sketch想必总所周知,成为了一个成功转型UI/UX设计工具开发的典范(前身 DrawIt 是一款矢量绘图软件)。借助Sketch的文本样式预设,symbols,和画板功能,能够帮助我们实时微调我们基于组件设计的工作流,极大地提升设计开发效率。我们一旦基于以上的设计原则制作了一套Sketch模版,我们就能迅速开始一个项目,甩开别人不仅仅是几条街的距离。

砍柴不误磨刀功,磨刀嚯嚯向猪羊… 而你仅需要花点时间从定义一下你的文本样式开始。

 

 

封装

简而言之,基于组件设计帮助我们快速设计数量庞大的页面并且更容易管理维护和升级。
骚年,赶快迈入你的组件化设计之旅吧!

遥想一下,同一个梦想,同一片屋檐,你和你的设计师基友们琴瑟和谐友好和睦地参与同一个项目,你们彼此心照不宣,因为所有的设计细节都被定义的很清晰,基于组件的设计让你们心系彼此,互相成就…

 

原文链接:https://medium.com/@lewisplushumphreys/how-were-using-component-based-design-5f9e3176babb#.j2gqwse7g

 

刷牙君

View posts by 刷牙君
处女座设计师一枚,涉及的专业领域视觉,交互,前端。

Leave a Reply

Your email address will not be published. Required fields are marked *