我把设计组件库做好后,总监都惊呆了!

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
38853 33 864 2020-11-23

今天这个标题稍微有点咳咳,不过内容非常干货


本文主要分享一些有关设计组件化协作提效经验,视觉、交互都用得上。

前段时间有小伙伴在群里问,日常设计团队里的源文件如何管理,一些可以复用的设计如何做成组件,大家如何完成配合的。



相信看完今天这篇文档,你就能Get到啦~干货建议提前收藏


壹、为什么要做组件化 

组件化后 对设计有哪些价值?

 Why do zujian hua?

凡事都讲究性价比,大家每一分钟时间都很宝贵

所以,在动手制作组件之前,首先得明白为什么要做组件,组件化到底能带来哪方面的提升?究竟值不值得投入精力去做组件化

接下来,我就来简单给大家盘点,组件化的方便之处


1)源文件图层更清晰,查找修改资源更方便

很多同学会有将源文件打组的好习惯,但虽然是打了组,但组里面的内容查找起来层级太深,还是非常的不方便,需要一个一个手动的查找到相应图层,然后再对其进行调整



而且麻烦的地方,是如果多个画板里面有同一个元素,那么其中一个地方想修改,后面的地方都得通过图层面板,去一个一个找到,去替换修改,很耗时间

而当把这些比较固定的内容,做成组件后,查找起来就非常方便了,一方面只需要按住 Alt+C,就能轻松调用出组件列表,对组件进行编辑定位



其次对组件里的元素改动后,所有用了组件的地方,都会被自动同步非常方便



2)组件复用起来更方便,极大减少不必要的工作量

除了定位到组件外,高效灵活的复用同样也是提效的一个步骤。

试想一下,之前要想复用一个现成的设计,你需要先找到相应的源文件,然后手动一个一个的找到相应图层,然后再进行复制再拖拽到新的画板,相当的麻烦,一不小心可能还把之前的源文件弄乱了

而有了组件之后,只需要从组件库的列表里,找到相应组件,直接拖拽就能使用。



组件还提供了丰富的可替换字段,比如文字跟icon,甚至都不用再对组件进行打散,直接在组件右边列表输入相应的文字内容,左边对的设计稿就进行自动替换调整了,非常方便。




3)设计组件封装后,开发还原精准度提高

开发人员在对界面的框架结构还原时,也是利用的 Canvas画板,而开发的布局适配,要更为严谨一些,在开发的布局模型里面,所有的还原都是结构性的,结构是固定的,结构里面的内容,可以从服务端下发,或者是从本地读取

用过安卓手机的同学,应该知道开发者选项里面有个布局边界功能,打开就能看到代码绘制的结构性布局



这个结构性布局,根我们的组件化思维是不谋而合的,所以我们的组件设计稿给到开发后,开发能很快速的明白组件的逻辑,这样还原起来,其实也是更加的方便,后面视觉还原的效率也会更高一些。



贰、组件化集合-组件库 

设计组件库 Design Library 

Why do design library ?


当若干个组件集合在一起以后,为了方便统一管理维护,其实就形成了组件库Library,目前大厂的产品线里面,也都有属于自己的组件库,比如WeChat.library、Antdesign.library 等,文末有详细介绍及打包下载链接,点击下载按钮就能下载到我说的这些,所以大家先安心往下继续读文。



为什么大厂都这么热衷的搭建自己团队的组件库呢?


1)方便设计团队内部的规范维护管理

其中一个重要的原因,就是规范是需要维护、迭代、升级,如果规范文档pdf或者以ketynote的形式进行传播,那么设计师需要再重新根据 pdf 里面的内容,重新画一遍界面,非常耗时



而有了组件库之后,负责规范的中台设计师,只需要把规范定义好的内容,制作成组件,这样设计团队的内部人员,只需要直接拖拽调用组件就可以,这些组件都是规范人员制定好的,所以产品线视觉设计就能轻松与规范侧保持一致

这样团队内部的规范维护,就很方便了,中台设计师只需要充分考虑好组件的样式,以及高复用度。而前台的设计师,直接调用组件就好,协作非常的方便。


2)全局迭代优化非常方便

另外如果 组件库library 所在的地址,如果是建立在云同步的服务器,或者是会实时同步文件夹。这样规范人员在对组件改动之后,其他组员都会在sketch的右上角收到一条Push提醒,可以根据这个提醒,来决定是否使用新的组件。



在点击替换更新后,也会有弹窗进一步确认,改动之后的样式是否符合预期,如果需要更换升级,那么一键即可更新,再也不用繁琐的去调整源文件了。



这样可以在一定程度上,保证大家设计稿里,都是最新的组件,而不用再麻烦的一步一步进行替换。


三、组件化怎么做? 

Sketch 组件制作指南 

How do you do ?


前面分享了为什么要做组件,以及设计组件带来的价值。接下来,就来聊聊具体的组件,怎么来落实。


1)分子原则

首先组件的落实,需要遵循分子原则,那么什么是分子原则?

其实这个是为了方便大家理解,我随便起的名(也不完全是)。



大家可以理解,一个物体,其实会由很多个零件组成,但每个零件,其实都是由大量的分子来组成的。所以所谓的分子原则,就是我们需要从最细的角度,来搭建组件

比如从基础的文字、图标、颜色、按钮等小元素



文字图标的组合,可以变成 Tab bar,Views 等,这些组合,又可以变成很多功能性质的组合,比如弹窗、卡片、列表等等。

基础的组件,可以按照我下面提供的这张表,来进行梳理


2)Sketch组件封装

封装组件其实很简单,只需要在Sketch中,把图层整理好以后,右键创建控件Symbol,就封装好了。



不过需要注意的是,在封装组件的时候,需要考虑到组件的延展性,比如组件里哪些元素是可以被替换的,替换有哪些选项,凡是需要替换的,都要按照分子原则,创建成单独的Symbol,如以下示例



另外还有就是要考虑到组件的适配,比如很多地方的组件,需要根据文字长短来自适应,或者本身组件容器的长宽不是固定的,而是变化的,比如标签



特别是带图标跟文字的标签,标签宽度需要根据文字及图标的大小来进行变动,这样咱们在创建组件的时候,就可以勾选下面的适配对齐方式,以上面这个案例为例,我选择了从左开始适配



好了后,我们再在组件右边的属性面板中输入相关文字,或者替换图标,你就可以发现画板里面的组件尺寸,也会自动调整



所以一个组件,在使用分子原则搭建好以后,是可以适配到多种不同形态的,以上面这个标签为例,可以通过配置右边的属性面板,来达成多种样式



标签还是那个标签,只不过我可以通过修改组件的预设参数来实现不同的效果,而这些预设,也正是可以通过规范管理的。



除了这个标签,包括按钮的宽度样式以及一些需要变化控件,也可以设置成自适应的,按钮宽度根据文字的多少进行自动调整,这样按钮的规范肯定就是非常一致的。



具体这块大家可以自己多尝试,其实非常的方便!也很提升效率,所有的内容替换,都可以通过侧边的组件面板,来进行操作!


3)尺寸规则与命名

需要注意的是,Symbol组件的替换,往往跟命名尺寸由很大的关系。比如一个组件里面包含了icon+文字,而icon是一套组合,这个时候,你想替换icon,那么icon的组件大小比例,就要设置成是一样的,如下图所示



由于Sketch中的嵌套逻辑,是根据命名来自动识别的,所以命名的规则,需要用斜杠区分功能性质,由大从小。比如:


  • 系统组件/按钮/小按钮/正常态

  • 系统组件/按钮/小按钮/置灰态



命名之后,你会发现Sketch会自动把同类命名的组件进行收纳归组,在选择组件的时候,也会更方便。


当然,嫌自己命名麻烦的,也可以去下载一个插件『 Sketch Symbols Manager 』,快速对 Symbol 重命名或拖拽改变嵌套




PS:有一点要注意,这个插件的 Free 试用期为7天,建议等组件做好后,再安装这个插件对组件进行调整。


另外也不用担心这个插件去哪下载,贴心的我为大家准备好了下载地址,请继续下滑阅读文章。


肆、组件库下载 

大厂 组件库资源 

You can download


文末的最后,为了让大家更好的理解组件库怎么制作的,最好的办法是先去看看优秀组件库里有哪些内容。所以我也去收藏了一批大厂现有组件库,还有上面提到的那个插件



有了这堆组件,做设计提效那真的是杠杠的。所有的元素控件基本上都有现成的,按住Alt+C,组件随便拖拽,自己改改也就能用了



 资源打包下载方式 


下载方式也很简单,微信搜索公众号『 UX小学 』,关注后发送回复『 组件库 』就能 Get 了。当然,嫌搜索起来麻烦的,可以点击文末的 下载按钮 ,也能下载到这些组件啦


还有就是,这篇文章我写了足足一整天,喜欢的话,真的不来个赞再走吗?



Powered by Froala Editor

全部评论:33

  • 王木木_

    2022-04-28 16:22

    下载不了了呜呜

  • 妖艳世界

    2021-08-11 11:45

    全是sketch的 没有 XD的吗

  • 冰心.

    2021-08-02 10:59

    看完下来我都没看明白组件库到底是怎么建的,具体一二三四..步是什么,对于组件库完全没有概念的人来说,看的很懵

  • Jane1105

    2021-06-04 15:25

    怎么下载不了了?

  • 立的虎

    2021-02-04 14:37

    花里胡哨。

  • 陈文静_CC

    2021-01-08 10:40

    @: 在组件里就把图切好,在蓝湖上也是可以下载的

  • 后北北

    2020-12-30 14:17

    不想给你赞,说的很直白

  • 森林吧

    2020-12-24 00:59

    为啥我有组件,按option+c没反应?

  • 2020-12-08 17:29

    页面拖进了组件库,蓝湖切图就切不了了

  • zw2008

    2020-12-05 16:48

    请问为何我新建控件的时候没有选择布局的选项呀。。。

  • Amber078

    2020-12-03 10:18

    666

  • 元气大木

    2020-12-03 08:24

    @湖畔的骚年: 好真实

  • 2020-12-02 14:56

    @爱笑的Plus: 文字排版确实看得有点累

  • 2020-12-02 11:02

    对于成熟的团队来说,组件库很重要,能够快速的提升工作效率

  • 维生素C片

    2020-12-01 16:13

    多团队做同一套设计,这个规范库的整理还是蛮必要的,就一个人负责一个产品,还是直接设计上手效率更快~ 全部都有所体验~ 亲测

  • cheche

    2020-11-30 09:22

    @水墨三藏: sketch软件下使用/创建这些组件;必须事mac电脑才可以使用这个软件

  • 平静的普通上班族

    2020-11-27 15:19

    how do you do......

  • 2020-11-27 10:39

    太赞了

  • 湖畔的骚年

    2020-11-26 18:16

    总监惊呆了。你马上去财务室结算工资,明天别来了。

  • 小设魔

    2020-11-26 13:53

    同一套项目下还行,但是不同项目之间我更愿意挑战新的风格,新的布局

  • 水墨三藏

    2020-11-26 11:04

    新手,这个是在哪组件的?怎么组件?是要下载什么软件吗?

  • 爱笑的Plus

    2020-11-26 08:03

    UI中国的这个文章排版真的是让人无力吐槽,记得改版之前的还好好的 ...........

  • 今昔何昔

    2020-11-25 14:02

    这标题 帮

  • DOMOHAHA

    2020-11-25 10:26

    太贴心了

  • Tom

    2020-11-24 18:53

    很棒啊

  • 2020-11-24 16:26

    配色眼熟

  • 木木想吃肉

    2020-11-24 14:58

    感谢

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票