在结构设计控制系统中，我们最熟悉、最常用的应该就是结构设计模块了，它包括文字、工具栏、按键、快捷方式、配置文件…等一系列构成介面的小原素，而这些小原素的混合体就是笔者要讲的模块库。

合理使用模块库能保持介面视觉效果的连续性，让合作开发高度还原成，还为销售业务带来完全一致的结构设计语言，大大提升了项目组的管理效率。责任编辑将从模块库的机率、必要性、构筑观念及构筑销售业务流程等各方面广度导出，期望能试试我们。

一、模块库的基本知识

当我们在结构设计某一介面的配置文件时，确定好快捷方式的大小、custom、色值等特性后，并没有逐步形成可F83E43Se的模块，那么在先期其他介面中须要再次加进配置文件，就只能重新画、或者找到之前已做好的介面复本，很容易疏失值、混为一谈特性，普遍化很高。如果须要技术标准调整体积或色值，就要每个单独修正，对于稍大点（上千或数百个介面配置文件摸查）的项目来说，重复无功而返的劳动简直是一场大灾难。

由此可见，纸制结构设计会将结构雕塑家已成只无暇顾及素描的辅助工具人。若预先将已有模块逐步形成模块库直接初始化，既能提升结构设计输出效率、也能保证整体声效的技术标准性，将省出来的时间更多投入到销售业务需求思索中，提升结构设计价值。

模块别列济夫将介面中具有适用性的原素模块/命令行进行概括整理，逐步形成技术标准规范的模块子集，以此达到快速F83E43Se、大批量修正的目的。

模块别列济夫两个强悍的辅助工具库，方便结构雕塑家随时初始化，对其中两个原素的修正单厢将这个已初始化过的模块并行更新，非常有利于项目组之间协同，它通过清晰、技术标准的引导协助结构雕塑家和研发高效率完全一致的创建大量应用，保证了用户新体验的连续性。

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

关于原子认识论，这里只做简单了解，先期会单独出详细的文章。

二、模块库的作用

在两个产品中，每个销售业务都要基于不同的场景去传达信息，多样化的场景在结构设计表现上会有所不同，有了模块库的约束，就能让项目组在既定的框架内按照技术标准的规范做结构设计，保证了输出质量，给用户带来连续性的新体验。

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

对结构雕塑家，当产品中有多个页面使加进相同的原素或模块时，可从模块库直接初始化，减少重复性结构设计。对于某一模块有技术标准修正的需求，只要在模块库单独修正，已共用的模块即可并行更新，实现效率的飞升。

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

品牌基因的部分板块如颜色、字体、工具栏风格…等都属于模块库的一部分，连续性的视觉样式能保持结构设计风格的技术标准，给用户带来技术标准的品牌印象，让其更好的记住这个产品。

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

三、原素模块的构成

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

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

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

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

参考上述提到的原子认识论，将各个独立原素如原子、分子、组织逐步形成各种模块，在将这些模块进行组合、逐层嵌套，精细化整理归类，最终逐步形成基础模块的创建。例如按键、弹窗、配置文件、选项命令行等。

四、模块库构筑观念

理解产品结构可以协助结构雕塑家快速构筑模块库的基本框架，以此为基础对模块作出分类及权重排序。

其次不同的销售业务特性，对介面布局的影响也会很大，但相同销售业务的结构布局基本大同小异，其模块F83E43Se性很高，并非结构雕塑家不想做差异化，而是在同行业中，相同的销售业务特性对多数用户来说已经有了两个较为成熟的结构布局，较大的变化会违背用户常用习惯，从而导致用户反感，得不偿失，所以通过对产品结构的了解，会将更多的差异化放在模块细节上，用户接受程度会更高。

在UI层面上，可以将模块分为原生模块、扩展模块、自定义模块、封装模块四种，原生模块与扩展模块属于控制系统（Android & iOS & 小程序）自带，将其归类为基础模块，自定义模块和封装模块与产品功能有较强的关联性，因此成为特性模块。明确两种定义，能协助我们合理规划构筑模块库的前期工作，也有有利于后期初始化。

原生模块：控制系统本省自带的模块，例如按键、弹窗、导航栏等。

扩展模块：基于原生模块进行扩展，例如toast弹窗中加入工具栏、导航栏中增加功能入口等。

自定义模块：忽略控制系统本身的模块，结构设计出具备产品特性的任何模块，如商品列表等。

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

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

合理的命名是整理和维护模块库的重要环节之一，一方面使先期的维护更加井井有条，另一方面能却保证已逐步形成的模块便于结构设计索引与初始化，如若没有一套所谓「正确」的命名规则，即便构筑模块库的人能信手拈来，但并不符合项目组中其他成员的使用习惯，无法快速初始化，最终很难达成结构设计共识。

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

五、常见问题及注意事项

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

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

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

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

六、结语

模块别列济夫两个强悍的增效辅助工具，充分理解并合理运用能减少很多体力劳动，从结构导则到模块库，再到最终的合作开发还原成，为结构设计与合作开发之间搭起了一座新的公路桥。

模块库的建立让内部有了技术标准的标注，对项目组来说，管理效率得到显著提升的同时，连续性也得到了保障，让结构设计和合作开发将更多时间放在打磨产品细节上，实现结构设计向产品赋能。

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

模块/规范系列文章至此结束，先期将不再更新，全系列共24篇，内容较为基础，欢迎初/中级结构雕塑家随时预览。

专栏作家

，即好看、好用。

责任编辑原创发布于人人都是产品经理，未经许可，禁止转载。

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

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