UI设计师必须具备的常用操作系统有哪些？

元件库是提高效率的有力工具，使用的数量可以更大程度的提高我们的工作效率。从设计规范到构件库，再到开发和修复，构件库搭建了一座桥梁。本文将深入分析构件库的概率、重要性、构建思路、构建过程，希望对大家有所帮助。

在设计系统中，最熟悉、最常用的组件应该是设计组件，它包括文字、图标、按钮、输入框、表单等一系列小元素。而这些小元素的组合就是作者要讲的组件库。

合理使用组件库可以保持界面视觉效果的一致性，使开发高度还原，给业务带来一致的设计语言，大大提高团队的工作效率。本文将深入分析构件库的概率、重要性、构建思路、构建过程，希望对大家有所帮助。

当我们设计一个界面的形式时，我们不会。t在确定了输入框的大小、笔画、颜色值等属性后形成可复用的组件，所以如果我们需要在后续的其他界面中使用表单，只能重新绘制或者找一个之前已经做好的界面的副本，容易忽略值，混淆属性，错误率极高。如果需要统一调整大小或颜色值，则需要单独修改。对于稍微大一点的项目(几百或几百个界面表单)，重复无所事事的工作是一场灾难。

不难看出，一次性设计会让设计师变成只忙着画画的工具人。如果提前将已有的构件直接调入构件库，既能提高设计输出效率，又能保证整体视觉效果的统一性，节省更多时间思考业务需求，提升设计价值。

一、组件库的基础知识

组件库是将界面中的通用元素组件/控件进行汇总整理，形成统一规范的组件集，从而达到快速复用和批量修改的目的。

组件库是一个强大的工具库，方便设计人员随时调用。修改其中一个元素会同步更新被调用的组件，非常有利于团队合作。它帮助设计师和研发人员。d .通过清晰、标准化的指导，高效、一致地创建大量应用程序，确保用户体验的一致性。

1. 为什么需要组件库

2013年，前端开发工程师Brad Forst在他的书《Atomic Design》中提到 在化学世界里，一切物质都是由原子构成的，原子的组合构成分子，分子的组合构成有机物，最终形成宇宙万物。 布拉德福斯特(Brad Forst)认为，设计组件应该由原子、分子、组织、模板和界面五个内容层次组成，最终构建一个完整的产品界面。

Atom:构成界面最基本、最不可分割的元素，可以是颜色、字体、图标。分子由两个或两个以上原子组成的、具有明确功能的组件，如搜索框、表单、按钮等。组织将多个不同的分子组合起来，形成一个完整的功能模块，如不同的信息区。模板通过原子、分子、组织的关联得到的模板框架，如列表页、详情页等。页面在模板的基础上提供真实的内容和完善的细节，最终形成完整的高保真界面。关于原子 论，这里只做一个简单的理解，后面会单独发表详细的文章。

2. 什么是组件库

3. 结合原子 论

在一个产品中，每个业务都要基于不同的场景来传达信息，多样场景的设计表现也会不同。有了组件库的约束，团队可以在既定的框架内按照统一的规范进行设计，保证输出质量，给用户带来一致的体验。

二、组件库的作用

新成员加入团队，无论是职场新人还是经验丰富的设计师，在正式开始工作之前，都需要花费一定的时间和成本去了解项目的设计语言，然后才能跟上工作的节奏。，有了成熟的组件库作为设计参考，他们可以用更低的通信成本和试用快速上手

1. 保持一致性

对于设计人员来说，当产品中多个页面使用相同的元素或组件时，可以直接从组件库中调用，减少重复设计。需要对组件进行统一修改。只要在构件库中单独修改，共享的构件就可以同步更新，效率可以飙升。

对于开发来说，一些常用的组件样式可以封装起来，在任何页面需要的时候直接调用，可以减少冗余，优化性能，不仅减少不必要的工作量和软件包的大小，还可以减少与设计的沟通，提高开发效率，让后期维护更加方便。

2. 新人低成本

品牌基因的某些部分，如颜色、字体、图标风格等。是组件库的一部分。一致的视觉风格可以保持设计风格的统一，给用户带来统一的品牌印象，让他们更好的记住这个产品。

3. 提升团队效率

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

4. 稳固品牌形象

5. 遵守用户习惯

色彩作为产品设计风格的基本元素，可以建立符合产品调性的视觉形象，清晰地梳理界面中的信息层次，达到视觉上的平衡。，我们需要根据功能属性定义所有需要使用的颜色，比如主色、辅色、中性色、功能色等。并从中提取渐变颜色和色阶，然后分组命名，方便随时调用。

三、元素组件的构成

文字样式主要包括字体、字号、字粗、行高。根据不同的使用场景，创建相应的字体大小和字重，通过表格对文字渐变和属性的使用方式进行描述、排序和分类，并添加相应的大使。

用说明。

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

3. 图标

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

4. 基础组件

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

四、组件库构建思维

1. 理解产品结构

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

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

2. 组件整理归类

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

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

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

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

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

3. 结构细分

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

4. 命名规则

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

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

按钮/主操作/大按钮/待激活按钮/主操作/小按钮/可操作表单/输入框/初始状态……

五、常见问题及注意事项

1. 先易用、再复用

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

2. 不要过于纠结命名

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

3. 组件与创意的冲突

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

4. 利用间歇维护和更新

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

六、

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

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

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

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

专栏作家

大漠飞鹰；公众号能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

ui设计组件功能有哪些 ui设计组件功能有哪些