怎样用原子设计思维来构建组件库

  • A+
所属分类:经验思维

本文来源: 山竹屁(公众号:海盐社), 共 2320 字

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

什么是原子设计思维

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

怎样用原子设计思维来构建组件库怎样用原子设计思维来构建组件库怎样用原子设计思维来构建组件库

构建组件

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

怎样用原子设计思维来构建组件库

分类

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

怎样用原子设计思维来构建组件库

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

怎样用原子设计思维来构建组件库

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

命名

命名不一定要懂英文,记缩写,只要自己能看清楚看明白,怎么命都行。当然,如果是团队协作的组件库,命名就另说了。在Sketch中,组件是根据命名自动分类的,中间以 “/” 区别层级,“/”前为上一级,“/”后为下一级。

了解了前面的分类规则之后,命名规则也就顺理成章。通常是:一级名/二级名/三级名/...

比如说界面中有多种样式的卡片时,就可以这样命名:小组件/卡片/样式1(样式2/3/4),软件就根据命名分组,当我们查找时就像下图这样分类层级都很明确。

怎样用原子设计思维来构建组件库

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

构建与应用

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

组件

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

怎样用原子设计思维来构建组件库

当我们选中内容,触发创建组件按钮之后,会出现一个弹窗。弹窗的左下角“发送组件到组件页面”一般就是勾选的状态,建立完成之后直接就自动存储在组件页面,后面方便查找、整理。

名称输入框下面的布局选择是什么作用呢?我们以页面中常见的城市组件来帮助大家理解。城市和定位图标的组合,字体和图标的间距是固定的,但是城市名字有长有短,下图是不同布局方式相应的效果。可见没有选择布局时,图标不会跟随字体长短变动,甚至会重叠在一起。因此我们作图时可以选择合适的布局方式。

怎样用原子设计思维来构建组件库

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

怎样用原子设计思维来构建组件库

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

怎样用原子设计思维来构建组件库

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

图层样式

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

怎样用原子设计思维来构建组件库

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

怎样用原子设计思维来构建组件库

当然图层样式除了色彩之外,还有描边,投影等。比如说线性图标的描边、卡片的投影颜色大小,都可以建立成图层样式,方便后面复用。

现在回过头再看,如果是要改主体色,那么只需要改图层样式,之后更新就可以了。页面中所有应用此样式的元素都会随之更新。也可以直接在右侧更改相应的图层样式。

怎样用原子设计思维来构建组件库

文字样式

文字在界面设计中也是无处不在的,一个界面中存在着多种大小、粗细的文字。我们在做界面时要注意同等级文字的样式的一致,这就需要为文字建立文字样式。就如上面组件、图层样式一样,文字样式也具有快速复用、修改的特点。

首先选中文字创建样式,命名一般是:颜色/字号/对齐方式/字重。这样命名的好处是,通用性强,还比较容易查找。

怎样用原子设计思维来构建组件库

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

划重点

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

更多内容可查看海盐社出版的UI书籍:



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: