为什么要做组件库(深度解析大厂B端组件库从零到一搭建)

编辑导语:有一套合适B端产品设计师的组件库就能够大大提高自己的办公效率。那么,怎样建立自己的组件库呢?在本篇文章中,作者对组件库进行了解析,总结了如何打造B端设计组件库。感兴趣的小伙伴,一起来看看吧!

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(1)

各位B端设计师们在求职面试的时候,有没有发现面试官都非常关注你有没有搭建组件库的能力,而且入职后每个团队都会有一个负责组件库的小组,那作为新手设计师怎么快速加入?如果公司目前没有组件库,设计师怎样推动建设?这篇文章详细的为大家分享大厂设计师是怎么从零到一搭建组件库、过程中如何推动、和其他部门怎样进行配合,来帮助各位新手设计师提升自己的职场竞争力。

一、组件库的价值

组件库是一个设计界面元素的集合仓库,要把各个场景中反复出现的控件沉淀下来,使用的时候不需要单独设计,直接调用即可。

比如在B端业务中一些表格表单也会被大量使用,那么我们就需要对表格、表单进行规范,在任何场景下都遵循这一规范,增加研发团队的确定性节省不必要的设计,保持系统一致性,让设计师专注于创意最需要的地方。

组件库带给团队的价值是一致、高效、灵活。

一致:一套标准化的设计规则可以传达给用户统一的品牌调性,减少用户学习成本培养用户习惯,让产品拥有良好的用户体验。

高效:组件的使用规范和各种状态只要搭建一次就可以重复使用,设计师在设计新的需求的时候直接调用组件,不需要大量重复工作,把时间花在更有价值的事情上。研发侧直接调用封装好的组件就可以,避免重复造轮子,同时也降低了沟通成本

灵活:所有页面的都是原子,在产品后期迭代中,只要调整原子、按照不同的方式进行排布就可以获得一个信息系统,这样全局灵活性非常强,也非常便于系统维护。

二、原子设计理论

原子设计其实是老生常谈一套理论了,但是要讲组件库绕不开原子设计,在这里我就再啰嗦几句关于原子设计的起源和概念。

在化学领域中,世界上一切万物都是由化学元素周期表组成的原子组成,原子组成分子,分子组成有机物,有机物构成生命。网页设计师Brad Forst从这里找到了灵感,我们设计的页面是不是也有相对应的原子,通过这些原子不同的排列组成呢?于是在2013年将此理论结合设计领域的知识,创建了一套设计方法论——原子设计(Atomic Design),原子设计是我们搭建组件库非常重要的一种思维模式,从底层开始思考从元素到页面,这样会对设计有更清晰的理解。

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(2)

原子设计理论分为五个层面:原子、分子、组织、模板、页面。对应到设计中我们的颜色、字体、圆角等作为原子,通过各种组合排列最终搭建出页面。根据原子设计理论,需要把原子设计的五个层面和我们组件的内容进行一一对应,先从最基础的核心元素入手,进行组件库搭建。

原子 (Atom):是构成一般物质的最小单位,不可再分的基本微粒。对应组件:文字、颜色、图标、布局、阴影。在界面中没有办法细分并且随意改变不会对整体等共恩感有影响。

分子 (Molecule):是由原子按照一定等顺序和空间排列而结合在一起的整体,对应在组件库就是单个组件,按钮、搜索框、表单这些,是由文字、颜色、图标、布局、阴影进行组合构成的控件。

组织 (Organization) :是指有诸多原子分子按照一定方式相互联系起来的系统,在界面中可以理解相对复杂的组件,例如弹窗、导航栏、列表等。

模板(Template):模版就开始有页面的雏形了,由多个组织结合而成的模块,一些常用典型页面可以沉淀成模版页面,像表单页、列表页、详情页。

页面(Page)页面是模板的具体实例,将实际内容填充进模版后形成页面,是我们最后产出的高板镇视觉稿,也是产品的最终形态。

三、定位团队现状

在开始动手之前需要明确自己所在团队处于哪种阶段,没有一双鞋适合所有人,精致名贵的高跟鞋配上跑马拉松的运动员显然是不合适的。组件库也是如此,没有最好的只有最合适的,要根据团队当前的不同阶段去进行判断。越到后期需要投入的资源越多,同时给团队带来的价值也越大。下面列举三种不同的团队发展阶段,来匹配你们团队的情况吧:

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(3)

团队创建初期:产品定位不明确,设计师只有一两个人,设计师主要通过粗暴的复制粘贴设计稿就可以满足,这个阶段可以牺牲一些体验上的一致性,目的是项目需要快速上线进行验证;

快速发展阶段:随着业务方向越来越清晰,团队规模的不断扩张,设计团队会有新的伙伴加入,每个设计师都有自己的想法,如果没有一套明确的设计规则,会导致页面一致性差,随意的设计也会增加开发成本;对于研发侧每一个新的样式都需要单独写一套,出现大量重复无意义的工作。这个阶段是搭建组件库的时机,需要去定义常用组件的视觉和交互保证页面的一致性、避免一次性设计;

团队成熟阶段:第三个阶段是产品已经非常成熟,也有了基本组件的规范定义,同时有大量B端后台页面,而B端后台页面基本上都是表格页、表单页、详情页,这些复用性强的页面,这时候如果每个页面都要设计师对应产品文档去调整字段,设计师的性价比就会变得极低。所以在这个阶段的组件库的服务对象不仅仅是设计师,设计师非常完善的制定出现率高的典型页面布局规范后,产品经理、研发、运营人员等团队所有的职能人员,可以直接跳过设计节,根据典型页面规范套用生成页面。

四、确定人力资源

根据自己所在团队的不同阶段,需要去申请搭建组件库的资源,搭建一套完善的组件库就跟搭建一款产品一样,绝对不是设计师可以独立完成的,需要多方配合。这时候呢可以列举一些关于组件库遇到的问题,完成后可以带给团队什么价值,去和leader申请设计资源,以及跨部门申请研发的人力资源。

正式立项后,作为搭建组件库的的owner需要定义好整个时间节点,什么时间点完成什么事情,并且定期开会来同步大家的设计进度,来推动这件事情的顺利进行。

设计过程中要和研发随时保持沟通,避免出现信息差,了解技术实现的边界在哪,确认之后在开始进入设计阶段,避免盲目设计完了以后,进入评审阶段被告知实现不了,再重新返工浪费时间同时设计过程中要和相关研发随时保持沟通,避免出现信息差。

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(4)

举例在上家公司遇到的问题,当时的背景是整个大团队分为7个业务线,每个业务线都搭建了自己的组件库,前端技术选型都不同,导致设计规范,业务组件等基建成果不可移植、全局的重复建设、资源浪费。现有Figma组件使用低效,源文件命名不规范组件不全等问题。

团队内部也意识到了问题的存在,开始从0-1重新搭建,成立搭建组件库的虚拟小组,由一个设计小组和研发小组共同组成。设计师的工作负责搭建、核查。完成搭建后小组成员同学一起集中check,记录修改点、争论点,鼓励充分讨论;修改完成后在进行复验,全员无异议后锁定画板交付开发评审并更进实现,在整个项目周期定期进行周会同步各方进度,及风险点。

五、组件库的产出

接下来就可以正式进入设计阶段了,需要产出的设计内容有设计原则、设计语言、组件库和说明文档。

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(5)

设计原则:设计原则是做设计的标准,用来指导和衡量设计方案的优略,搭建一套组件库,每个元素都需要围着这个设计原则展开执行,他的意义是为接下来的设计提供方向。

设计语言:需要秉承设计原则和业务调性的基础上进行定义,主要表现为形、色、字、质、构这些视觉元素。比如

Figma控件:通过设计原则、基础样式可以定义出来我们组件的样式,就像一个仓库一样,包含了各种组件的所有样式。

说明文档:组件仓库搭建好了,还需要配上使用说明书,具体某个组件该怎么使用、什么情况下使用哪种状态,都需要一一说明,防止设计师面对玲琅满目的组件原件不知道从何下手。

六、设计原则

在执行过程中首先调研业内成熟的设计原则:例如苹果的设计原则为创意审美的重要性、隐喻的价值、易用性原则和及时的反馈。蚂蚁的AntDesign就是将自然、确定性、意义性和生长性作为它的设计价值观。在结合自己业务的愿景和使命进行头脑风暴,罗列出你认为影响所处行业的关键词是什么,一起对应关键词进行分类聚拢,最后抽离出适合自己业务的设计原则。

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(6)

七、设计语言

在这之前要明确一个概念Design Token,即储存样式的载体,“Token”原本的意思是“令牌”,在工程逻辑中用于用户身份与服务器端进行验证,而在设计体系中,Design Token 则可以简单理解为封装的视觉样式参数。

Design Token 最重要的意义是通过规定样式的参数、和统一的命名规则做到设计与研发的样式完全打通,进行无损耗的沟通,增强系统的可维护性。在真实产品设计、研发过程中,设计和研发命名不一致,数量少还好,当数量多了以后全局维护就变得困难了很多,但如果我们直接将这些参数分装管理,整个过程的新增、改版就会清晰很多。

1. 颜色

颜色是页面整体风格表现的重要基本元素,好的色彩配置可以准确的传达有效信息和品牌感,梳理页面的视觉层级关系,突出内容并平衡其他视觉元素。一般而言,一个产品的颜色体系会包含:主色、中性色、功能色。接下来根据颜色分类,将不同分类的颜色样式逐一罗列出来。

主色:产品的品牌色,也是界面中出现最多的颜色,比如按钮的颜色、重点操作等状态。

中性色:在界面中调和色彩搭配,用来衬托其他颜色,一般应用在字体、分割线、背景色等。

功能色:向用户明确传达成功、警告、错误等状态。

2. 文字

不同的字体大小和颜色文字信息,可以体现出内容的主次。在文字样式中会包括:字号、字重、行高和字距等。选择一款字体(推荐中文:微软雅黑、英文:Aria),如果使用苹方则Win系统中会出现字体丢失的情况,这里建议样式创建要克制,尽可能保证样式库精简适用。

字号:PC端最小可识别字体是12px ,需要区分字体层级,一般以偶数来进行间隔。

字重:除了使用字号,还可以通过字重来突出层级,常用采用 Regular 以及 Medium 的两种字体重量,分别对应代码中的 400 和 500。

行高:建议行号是字体的150%,通常字体越大行高越小。

间距:根据 WCAG 中的 AAA 标准,段落间距至少为字体大小的 1.5 倍。

3. 投影

阴影是存在于画布元素中并通常会在背景边框中延伸出对象。主要有外阴影、内阴影。阴影值应该遵循现实物理世界中物体的特性,物体的高度直接影响阴影,离地面越高阴影越大,模糊值越高,反之相反。

为了在不同层级使用阴影更加丰富,通常阴影定义三个层级,一级卡片阴影、二级选择下拉popover阴影、三级对话框阴影。

八、Figma控件

1. 结构细分

首先要将原本的组件进行打散、细化、整合、重组,我们需要把一个组件中可以拆分成几个模块,使每个模块都可以进行独立的变化替换,这样组件呈现出来的尝试可以满足全部场景。举例:抽屉控件,可以分为出现位置(上下左右)、抽屉尺寸(大中小)、标题区域(副标题、头像、标签、更多操作、tabs标签)、按钮区域这四个模块,每个模块可以独立产生新的样式。拆解维度到按钮、图标等最细颗粒后通常不会再进行拆分。

为什么要做组件库(深度解析大厂B端组件库从零到一搭建)(7)

2. 新建组件

选中要组件化的元素,点击顶部工具栏“Greate Componer”健即可创建成功,快捷健是“command option k”,创建成功的组件元素有实心的紫色菱形图标,变为紫色边框。

创建好的组件分为父级和子级

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页