一篇读懂:用原子设计思维构建组件库

对于设计师来说组件库并不陌生,但是构建时往往是一头雾水,存在很多问题。比如说组件多了之后层级不明确,很多组件堆在一起比较混乱等等。这时候我们就可以运用原子设计思维来构建。那么什么是原子设计思维,以及如何运用它来构建组件库呢?且看我一一分解:

 

什么是原子设计思维

原子是构成物质的最小粒子,原子和原子构成分子。那么在我们的界面设计中,构成页面的最小元素(字体、颜色、图标、按钮)就可以理解为原子,元素和元素结合构成组件(搜索、卡片等),组件就可以理解为是分子。再往下推就是组件和组件结合可以构成模块,模块和模块组合就可以组成界面了。

 


 


 

构建组件

在构建组件的过程中,原子设计思维能够帮助我们梳理组件,清晰思路。有很多设计师觉得构建组件的过程过于繁琐,索性就放弃这一方法,直接人工重复。事实上,整理组件起初会有些麻烦,但是建成之后不管是复用还是修改都很方便。前提是一定要把众多组件合理分类、清晰命名,这样在后期使用时才能更快捷查找。下面就从这几个节点来说:

 

分类

构建组件库,虽然是从最小元素开始,但是在构建之前我们要先梳理出组件的类别、层级,便于后面对于组件进行归类整理。只有做到这样才能在很多组件的情况下,依然清晰不混乱。

 

我通常会将组件一级分类为:大组件、小组件、icon、按钮、其他。通常模块类、或者元素比较多的组件一般归类在大组件里。元素少一些的归在小组件,像是icon、按钮、色彩类的比较常用就单独归类,以及其他不常用的组件就归在“其他”里面。

二级分类通常是依据组件的功能来分,比如卡片、搜索、导航等明确功能分组;三级就以状态来分,比如样式名、选中、未选中等状态。

 

命名

命名不一定要懂英文,记缩写,只要自己能看清楚看明白,怎么命都行。当然,如果是团队协作的组件库,命名就另说了。在Sketch中,组件是根据命名自动分类的,中间以 “/” 区别层级,“/”前为上一级,“/”后为下一级。了解了前面的分类规则之后,命名规则也就顺理成章。通常是:一级名/二级名/三级名/…比如说界面中有多种样式的卡片时,就可以这样命名:小组件/卡片/样式1(样式2/3/4),软件就根据命名分组,当我们查找时就像下图这样分类层级都很明确。

这里要注意的是,在命名时斜杠“/”的输入法应该是英文的,否则软件无法识别,影响分类。

 

构建与应用

在起初做界面的时候要有预见性,需要复用、替换的都要做成组件,保证设计的规范、快捷。当然除了组件,页面中的文字、以及图层样式,都要做到规范统一。

 

组件

以sketch为例,在构建组件时,一个小的元素也要建成组件,因为组件是可以嵌套的,这样后面就可以直接用其他组件替换。下图中的卡片,就是组件套组件。复用的时候就可以任意替换同尺寸的元素。

当我们选中内容,触发创建组件按钮之后,会出现一个弹窗。弹窗的左下角“发送组件到组件页面”一般就是勾选的状态,建立完成之后直接就自动存储在组件页面,后面方便查找、整理。名称输入框下面的布局选择是什么作用呢?我们以页面中常见的城市组件来帮助大家理解。城市和定位图标的组合,字体和图标的间距是固定的,但是城市名字有长有短,下图是不同布局方式相应的效果。可见没有选择布局时,图标不会跟随字体长短变动,甚至会重叠在一起。因此我们作图时可以选择合适的布局方式。

 

下面我们一起来整理一个底部导航栏。底部图标通常是分为未选中、选中两种状态。我们可以将每个图标的一种状态建立一个组件。(在命名时要注意上面制定的规则:icon/底部/首页/选中)

 

单个图标建立好组件之后,再把底部栏和图标一同选中建立组件,就可实现组件的嵌套。后面选中该组件,可以在右侧覆盖层区域,替换其中的图标。

但是现在问题来了。假如说现在的产品突然要换主体色,那是不是每个图标都要一一点进去修改,页面其他元素也要一点点修改呢?这里就要用到“图层样式”和”文字样式“。

 

图层样式

首先说图层样式。比如说画一个色块,可以在右侧外观区域创建样式。这里要记得遵循上面所说的命名规则。通常色彩都会这样命名:彩色(无色)/纯色(渐变)/色彩名。

后面在绘制界面元素时可以直接调用已经建立的图层样式。如果界面中的某一图层样式需要修改,修改之后点选更新,那么界面中所有应用此样式的元素都会随着更新。省去了一一修改的麻烦。这里要注意的是页面中元素都要调用图层样式,避免其中没有应用样式的元素在修改更新时漏掉。

当然图层样式除了色彩之外,还有描边,投影等。比如说线性图标的描边、卡片的投影颜色大小,都可以建立成图层样式,方便后面复用。现在回过头再看,如果是要改主体色,那么只需要改图层样式,之后更新就可以了。页面中所有应用此样式的元素都会随之更新。也可以直接在右侧更改相应的图层样式。

 

文字样式

文字在界面设计中也是无处不在的,一个界面中存在着多种大小、粗细的文字。我们在做界面时要注意同等级文字的样式的一致,这就需要为文字建立文字样式。就如上面组件、图层样式一样,文字样式也具有快速复用、修改的特点。首先选中文字创建样式,命名一般是:颜色/字号/对齐方式/字重。这样命名的好处是,通用性强,还比较容易查找。

这里注意的是,为了保证所有文字的规范性,界面中尽量所有的文字都调用文字样式,这样在需要修改的时候,也能够保证不会有文字被漏掉。

 

划重点

设计中如果建了大量组件,每次自己都要找半天,那建组件的意义也就不存在了。界面不是只要画好看就可以,还要高效的管理设计稿,以及和团队合作无障碍。因此在建立组件库时,要做到分类清晰,命名规范,方便自己使用,以及团队设计师协作。

 

原文地址:
海盐社(公众号)
作者:山竹屁

 

0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码