恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
组件库 | UI设计师必会的组件系统!
162.2°
2023-02-22 原创文章 经验/观点 举报 30591 528 265 4

合理使用组件库能保持界面视觉效果的一致性,让开发高度还原,还为业务带来一致的设计语言,大大提高了团队的工作效率。

前言

在设计系统中,大家最熟悉、最常用的应该就是设计组件了,它包括文字、图标、按钮、输入框、表单...等一系列构成界面的小元素,而这些小元素的结合体就是笔者要讲的组件库。

合理使用组件库能保持界面视觉效果的一致性,让开发高度还原,还为业务带来一致的设计语言,大大提高了团队的工作效率。本文将从组件库的概率、重要性、构建思维及构建流程等多方面深度解析,希望能帮到大家。



分享目录

一、组件库的基础知识

二、组件库的作用

三、元素组件的构成

四、组件库构建思维

五、常见问题及注意事项

六、结语



一、组件库的基础知识

1.为什么需要组件库

当我们在设计某个界面的表单时,确定好输入框的大小、描边、色值等属性后,并没有形成可复用的组件,那么在后续其他界面中需要再次用到表单,就只能重新画、或者找到之前已做好的界面拷贝,很容易疏忽数值、混淆属性,出错率极高。如果需要统一调整尺寸或色值,就要每个单独修改,对于稍大点(上百或几百个界面表单排查)的项目来说,重复无功的劳动简直是一场灾难。

不难看出,一次性设计会将设计师沦为只忙于画图的工具人。若事先将已有组件形成组件库直接调用,既能提高设计输出效率、也能确保整体视觉效果的统一性,将省出来的时间更多投入到业务需求思考中,提升设计价值。


2.什么是组件库

组件库是将界面中具有通用性的元素组件/控件进行归纳整理,形成统一规范的组件集合,以此达到快速复用、批量修改的目的。

组件库是一个强大的工具库,方便设计师随时调用,对其中一个元素的修改都会将这个已调用过的组件同步更新,非常利于团队之间协作,它通过清晰、标准化的引导帮助设计师和研发高效一致的创建大量应用,确保了用户体验的一致性。


3.结合原子方法论

在2013年,前端开发工程师 Brad Forst 在《Atomic Design》一书中提到:“化学世界中,所有的物质都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成宇宙万物”。Brad Forst认为,设计组件应该由原子、分子、组织、模版、界面5个内容层面构成,最终构建成一张完整的产品界面。

◆ 原子:构成界面的最基础且不可再分的元素,可以是一种颜色、一种字体或一个图标等。

◆ 分子:由两个或两个以上的原子组合在一起、具有明确功能性的组件,如搜索框、表单、按钮等。

◆ 组织:将多个不同的分子组合在一起,形成一个完整的功能模块,例如不同的信息版块区域。

◆ 模版:通过原子、分子、组织的相互关联而得到的模版框架,如列表页、详情页等。

◆ 页面:在模版的基础上提供真实的内容并完善细节,最终形成完整的高保真界面。

关于原子方法论,这里只做简单了解,后续会单独出详细的文章。



二、组件库的作用

1.保持一致性

在一个产品中,每个业务都要基于不同的场景去传达信息,多样化的场景在设计表现上会有所不同,有了组件库的约束,就能让团队在既定的框架内按照统一的规范做设计,确保了输出质量,给用户带来一致性的体验。

2.新人低成本

当团队中有新成员加入时,不管是初入职场的设计新人、还是经验丰富的设计老手,正式工作之前都需要花费一定的时间成本去了解项目的设计语言,而后才能跟上工作节奏,但有了成熟的组件库作为设计参考,就能够以最低的沟通成本、试错成本实现快速上手。

3.提升团队效率

对设计师,当产品中有多个页面使用到相同的元素或组件时,可从组件库直接调用,减少重复性设计。对于某个组件有统一修改的需求,只要在组件库单独修改,已共用的组件即可同步更新,实现效率的飞升。

对开发,可以将一些常用的组件样式进行封装,在任何页面有需要时直接调用,减少冗余,优化性能,既能降低不必要的工作量以及软件包的体积,还能减少与设计之间的沟通,提升了开发效率,后期的维护也会更方便。

4.稳固品牌形象

品牌基因的部分板块如颜色、字体、图标风格...等都属于组件库的一部分,一致性的视觉样式能保持设计风格的统一,给用户带来统一的品牌印象,让其更好的记住这个产品。

5.遵守用户习惯

尽量不要违背用户的惯性思维,如绿色代表安全或通过、红色代表错误或警告、看到放大镜就想到搜索,除非合理的制造差异化或你的产品体量足以改变用户,否则就做好承担用户试错成本的损失。组件化设计能通过一致性的设计表现保持用户固有的使用习惯,减少不必要的思考。



三、元素组件的构成

1.颜色

颜色作为产品设计风格的基本元素,它能建立符合产品调性的视觉形象,并将界面中各信息层级关系梳理清晰,做到视觉上的平衡。首先我们需要按照功能属性对需要用到的所有颜色进行定义,比如主体色、辅助色、中性色、功能色等,并以此提炼出渐变色和色阶,然后将其分组分类命名,方便随时调用。

传送门UI配色方案 https://www.ui.cn/detail/545342.html?nopop=1


2.文字

文字样式中主要包括字体、字号、字重和行高,针对不同的使用场景分别创建相应的字号与字重,并给文字梯度和属性的使用方式予以描述,用表格整理归类,再加上对应的使用说明。

其他如段间距、字距、缩进、对齐方式等属性使用的较少,可根据实际情况而定,确定好使用频率后再决定是否纳入组件库。

传送门:字体规范 https://www.ui.cn/detail/641347.html?nopop=1


3.图标

绘制图标时,需用keyline栅格来控制不同形状的图标大小,完成后并将其转曲(面性),再定义好常用的颜色,在后续的开发过程中,程序可根据高保真效果图随时切换颜色。

传送门图标规范 https://www.ui.cn/detail/617012.html?nopop=1


4.基础组件

参考上述提到的原子方法论,将各个独立元素如原子、分子、组织形成各种组件,在将这些组件进行组合、逐层嵌套,精细化整理归类,最终形成基础组件的创建。例如按钮、弹窗、表单、选项控件...等。

传送门

按钮规范:https://www.ui.cn/detail/613646.html?nopop=1

弹窗规范:https://www.ui.cn/detail/615109.html?nopop=1

表单规范:https://www.ui.cn/detail/617329.html?nopop=1

底部Tab栏:https://www.ui.cn/detail/617624.html?nopop=1

下拉菜单:https://www.ui.cn/detail/623161.html?nopop=1

筛选控件:https://www.ui.cn/detail/626712.html?nopop=1

选项控件:https://www.ui.cn/detail/629234.html?nopop=1

标签规范:https://www.ui.cn/detail/629952.html?nopop=1

头像规范:https://www.ui.cn/detail/629926.html?nopop=1

小红点:https://www.ui.cn/detail/636860.html?nopop=1

顶部导航栏:https://www.ui.cn/detail/631301.html?nopop=1

间距规范:https://www.ui.cn/detail/634971.html?nopop=1

进度条:https://www.ui.cn/detail/636216.html?nopop=1

搜索框:https://www.ui.cn/detail/637982.html?nopop=1

消息通知:https://www.ui.cn/detail/639176.html?nopop=1

卡片规范:https://www.ui.cn/detail/637353.html?nopop=1

图片规范:https://www.ui.cn/detail/614898.html?nopop=1



四、组件库构建思维

1.理解产品结构

理解产品结构可以帮助设计师快速构建组件库的基本框架,以此为基础对组件作出分类及权重排序。

其次不同的业务属性,对界面布局的影响也会很大,但相同业务的结构布局基本大同小异,其组件复用性极高,并非设计师不想做差异化,而是在同行业中,相同的业务属性对多数用户来说已经有了一个较为成熟的结构布局,较大的变化会违背用户常用习惯,从而导致用户反感,得不偿失,所以通过对产品结构的了解,会将更多的差异化放在组件细节上,用户接受程度会更高。

2.组件整理归类

在UI层面上,可以将组件分为原生组件、扩展组件、自定义组件、封装组件四种,原生组件与扩展组件属于系统(Android & iOS & 小程序)自带,将其归类为基础组件,自定义组件和封装组件与产品功能有较强的关联性,因此成为属性组件。明确两种定义,能帮助我们合理规划构建组件库的前期工作,也有利于后期调用。

◆ 原生组件:系统本省自带的组件,例如按钮、弹窗、导航栏等。

◆ 扩展组件:基于原生组件进行扩展,例如toast弹窗中加入图标、导航栏中增加功能入口等。

◆ 自定义组件:忽略系统本身的组件,设计出具备产品特性的任何组件,如商品列表等。

◆ 封装组件:根据产品使用常见,进行组合封装的常用复杂组件,如日历组件等。

3.结构细分

结构细分是将本身独立的组件打散,拆分至单一元素的最小颗粒(原子),充分提高细小组件的复用率,需要修改时,独立调整、全局响应,而后再次整合重组,让不同的模块都可以交替变化。多次使用拆分、重组的方式,使最终呈现出来的组件样式、数量成倍数增长。

4.命名规则

合理的命名是整理和维护组件库的重要环节之一,一方面使后续的维护更加井井有条,另一方面能却确保已形成的组件便于设计索引与调用,如若没有一套所谓「正确」的命名规则,即便构建组件库的人能信手拈来,但并不符合团队中其他成员的使用习惯,无法快速调用,最终很难达成设计共识。

整理归类后,每一类都包含若干组件,每个组件又有若干状态,为了体现结构层次,会在组件名称中使用“/”(Sketch能自动识别“/”)符号分隔场景类别,并以此作为标志逐级命名,如下:

◆ 按钮/主操作/大按钮/待激活

◆ 按钮/主操作/小按钮/可操作

◆ 表单/输入框/初始状态

◆ ......



五、常见问题及注意事项

1.先易用、再复用

不管是多么复杂的产品,呈现给用户的永远都是优秀的界面和体验设计,而背后则是逻辑复杂的的无数行代码。组件也是一样,不要因为有组件库的存在就萌生偷懒的想法,毫无节制、退而求其次的高度复用,针对特殊场景,在符合产品易用性的前提下,有必要将已复用的组件解除关联,适当的做加/减法,也不要盲目的求复杂度或简约性,合适最好。


2.不要过于纠结命名

在构建组件库的过程中,不要将过多的时间花费在组件命名上,笔者的建议是用一些通俗易懂且常用的名称,怎么方便怎么来,类似按钮、表单、图标、弹窗等这些术语,基本一听就懂,没必要绞尽脑汁去想一些唬人、高大上的专业名词,毕竟组件库不是你一个人在用。


3.组件与创意的冲突

部分设计师觉得,有了组件库的存在,感觉拼组件就能快速完成设计需求,不仅自己没有进步还影响设计创意。其实不然,组件是为解决设计中遇到复用性高的重复性设计需求,如字体、配色、表单等,但在一些图形、动效、背景及界面氛围方面可以做出亮点,这样既能保持常用组件的一致性,又能为用户制造意外的惊喜,所以组件库与设计创意并没有实质性的冲突。


4.利用间歇维护和更新

众做周知,项目是按照一个一个版本逐渐更新迭代的,我们可以利用每个版本之间的间隔时间去复盘之前的设计组件,不断优化和完善组件细节,进行更新维护,避免过于陈旧影响设计效果。



六、结语

组件库是一个强大的提效工具,充分理解并合理运用能减少很多体力劳动,从设计规范到组件库,再到最终的开发还原,为设计与开发之间搭起了一座新的桥梁。

组件库的建立让内部有了统一的标注,对团队来说,工作效率得到显著提升的同时,一致性也得到了保障,让设计和开发将更多时间放在打磨产品细节上,实现设计向产品赋能。

从全局考虑,完成组件库只不过才刚刚开始,我们一定要学会整体思考,持续优化和完善组件,让组件库始终处于最佳状态,将作用发挥到最大。


组件/规范系列文章至此结束,后续将不再更新,全系列共24篇,内容较为基础,欢迎初/中级设计师随时预览。


Powered by Froala Editor

更新:2023-02-22

收藏

528人已收藏

大漠飞鹰CYSJ

要想快速升级,必须越级打怪。

  • 70

    作品

  • 2014

    粉丝

  • 8

    关注

  • 希克定律 | 设计师需要知道的设计原则!
  • 奥卡姆剃刀 | 设计师需要知道的设计原则!
  • 米勒定律 | 设计师需要知道的设计原则!
  • 帕累托原则 | 设计师需要知道的设计原则!

    猜你喜欢

      2023-02-22 原创文章 经验/观点 举报 30591 528 265 4

      组件库 | UI设计师必会的组件系统!

      162.2°

      你确定要举报组件库 | UI设计师必会的组件系统!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年02月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      265
      528
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录