模块化设计html,B端系统功能图标模块化设计心得

做过B端系统设计的同学都知道，B端系统中会有大量的专业功能性图标，作为文字性功能操作的图形化展示。当正面遭遇一大波文字图标时(如上图)，接稳了，别慌。这里有一些小心得来和大家探讨。

只需3步，图标设计思路清晰明了

① 拆解归类 、② 元件绘制 、③ 元件重组

一、拆解归类

再来重新看一下这个列表，从中找出文字图标的相同点和差异点，比如说：商品管理、商品发布管理、商品备案管理等，都是在“商品”这个主体的基础上，细化了类型，最终都停留在“管理”这个执行点上；再比如说：商品计划、清退计划、补货计划，都是在主体的基础上，完成“计划”这个任务点。这一大堆看似复杂的文字描述，其实都是有规律的。

很大一部分文字图标都具有“主题性、差异性、统一性”这个特点，根据特点推倒出文字图标的基本组成模式：主体人物+细分类型+任务执行。按照这种组成模式，把所有文字图标进行拆解，会得到一个巨大的词库。

举一个具体的栗子：

接下来需要对词库进行重新归类(我在做归类的时候，是以“任务执行 → 主体人物 → 细分类型”为维度的，因为任务执行是具有统一性的)，比如：管理执行点的先归为一大类，在大类里再做“主体人物”归类，最后是“细分类型”。

PS:这里强调一下，一定要做归类表格，一来清晰明了，二来防止遗漏。

这样，第1步就完成了。

二、元件绘制

元件绘制原则：遵循规则  |  极简易懂  |  风格化

遵循规则

就从最基础的图标设计标准延续，讲拆解完成的文字描述转化成图形，这个就不多说了，都懂。

2.极简易懂

文字描述到图形化的展示，需要极尽简洁易懂，确保在后面重组的时候，组合图标的清晰度。

接下来就是按照图标设计基础规则绘制拆解完成的大量的词库啦

3.风格化

词库的图形转化产出的基础元件，风格化也需要尽量简单，表达品牌内核就好。

词库的绘制是从“文字化 → 元件 → 模块化”的转化，建立大量的基础元件，才能更高效、有效的完成图标组合。

三、元件重组

元件重组规则：元件分级  |  重组规则  |  风格统一

1.元件分级

系统图标的呈现为了清晰度和识别度，一般情况下最多可容纳3个极简图形的组合。按照文字图标“主体人物、细分类型、任务执行”的拆解归类原则，可以把一个图标的组合元件分为1、2、3级，“主体人物”为1级，功能基本都是围绕“主体人物”设定，比如说：商品、库、采购。“细分类型”为2级，是“主体人物”的细化内容，比如：商品备案、库存、采购价。“任务执行”为3级，作为1级，或1级和2级的操作执行任务，比如说：商品备案管理、库存计划，采购价预估。

这样，图标的重组其实就变成了1、2、3级元件的组合方式，是不是一下子就简单了。其实就这几种方式

2.重组规则

为“二合一”和“三合一”分别制定具体的组合标准，严格按照组个标准用基础图标去拼装就好啦。

当基础元件作为3级元件应用的时候，需要再次简化，确保组合图标清晰可识别。

举个栗子：

3.风格统一

原则就是保证元件本身的风格化的基础上，保证组合图标的整体性，如果每个元件都带着风格化来组合，会让整个图标看起来特别零散，所以需要做取舍。

做好模块化元件库和组合标准之后，无论遇到多么刁钻的B端功能图标，都可以清晰，高效的完成，并且很成体系。

最后还有一种具有专属性的特定图标，它可能代表了另一个系统或者一种专属功能。这种图标只需要保证风格统一，字面意思图形化直译就好。

四、总结一下

B端系统功能性图标3步曲：

元件组合的关键点：

按照之前梳理好的列表整理所有图标。整体输出风格统一，类目清晰。

谢谢~欢迎来探讨拍砖，大家给的意见和建议，是对我最大的帮助！