基于界面设计中组件化和模块化的应用

1. 公司现状与问题

公司比较侧重软件开发，这会导致人员规模不断扩大，项目复杂度也会持续增长。而为了满足项目的快速上线，很难去落实统一的设计规范，在开发过程中由于UI缺乏标准导致问题不断凸显，具体会出现以下 4 个层面:

 • 设计层面：由于UI缺乏标准化设计规范，在不同软件及不同开发语言平台上设计风格不统一，用户体验不一致；设计资源与代码均缺乏统一管理手段，无法实现积累沉淀，无法适应新业务的开发需求。

 • 开发层面：组件代码实现碎片化，存在多次开发的情况，质量难以保证；各端代码API不统一，维护拓展成本较高，变更主题、适配Dark/Light等需求难以实现。

 • 测试层面：重复走查，频繁回归，每次发版均需验证组件质量。

 • 产品层面：版本迭代效率低，版本需求吞吐量低，不具备业务的快速拓展能力。

那么如何去解决？

2. 什么是组件和模块？

思量之后，我们决定通过组件库这一传统工具很好的解决了这些问题，但是在搭建和使用方式上做了适当的调整。

现在简单介绍下什么是组件和模块

组件：通过对功能及视觉中元素的拆解、归纳、重组；并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案。

模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。

3. 如何做抽象-灵活性和一致性的博弈

3.1 模式提取

我在设计T04项目中对模块提取并没有做好，在模块提取中需要明确哪些交互流程有必要被抽离成统一的模式。我们可以从2个维度进行判断：

可复用频率：我认为至少在3个以上主产品线有应用场景则有必要做模式抽离，复用频率越大的模式，节省设计开发成本收益更大，并且越可能出现由于设计不统一造成体验问题，更加需要被规范。

对体验的影响程度：那些含有复杂交互细节的流程，通常对体验的操作效率、易理解性、容错性等有较大影响，但又难以通过UI静态页面完全体现的，则有必要沉淀封装为交互模式。

3.2灵活性和一致性

基于不同交互模式针对的行为目标不同，我们把交互模式进行分类。对于每一个类型，将之前梳理的案例对应其中，经过反复思考讨论，将之前的N种具象设计方案抽取共性做归并。这个过程是挑战最大的环节，因为匹配的使用场景越广泛，就意味着要对很多差异化细节做出取舍，这就要在设计的灵活性和一致性之间不断博弈。

3.3 组件封装

选中要创建的组件的元素，点击创建组件，在组件中就可以看到该组件，修改组件样式，会发现所有使用该组件的样式都发生了改变。

不过需要注意的是，在封装组件的时候，需要考虑到组件的延展性，比如组件里哪些元素是可以被替换的，替换有哪些选项，凡是需要替换的，都要按照分子原则，创建成单独的Symbol，如以下示例

另外还有就是要考虑到组件的适配，比如很多地方的组件，需要根据文字长短来自适应，或者本身组件容器的长宽就不是固定的，而是变化的，比如标签。

特别是带图标跟文字的标签，标签宽度需要根据文字及图标的大小来进行变动，这样咱们在创建组件的时候，就可以勾选下面的适配对齐方式，以下面这个案例为例，我选择了从右开始适配

好了后，我们再在组件右边的属性面板中，输入相关文字，或者替换图标，你就可以发现画板里面的组件尺寸，也会自动调整。

4. 尺寸规则与命名

需要注意的是，Symbol组件的替换，往往跟命名及尺寸由很大的关系。比如一个组件里面包含了icon+文字，而icon是一套组合，这个时候，你想替换icon，那么icon的组件大小比例，就要设置成是一样的，如下图所示

由于Sketch中的嵌套逻辑，是根据命名来自动识别的，所以命名的规则，需要用斜杠来区分功能性质，由大从小。比如：

图标/操作区/名称_状态

图标/描边/名称大小

图标/填充/名称大小

命名之后，你会发现Sketch会自动把同类命名的组件进行收纳归组，在选择组件的时候，也会更方便。

设计组件封装后,开发还原精准度提高

开发人员在对界面的框架结构还原时，也是利用的Canvas画板，而开发的布局适配，要更为严谨一些，在开发的布局模型里面，所有的还原都是结构性的，结构是固定的，结构里面的内容，可以从服务端下发，或者是从本地读取。

这结构性布局，根我们的组件化思维是不谋而合的，所以我们的组件设计稿给到开发后，开发能很快速的明白组件的逻辑，这样还原起来，其实也是更加的方便，后面视觉还原的效率也会更高一些。

5. 团队内如何维护和管理？

有了组件库之后，负责规范的UI设计师，只需要把规范定义好的内容，制作成组件，这样设计团队的内部人员，只需要直接拖拽调用组件就可以，这些组件都是规范人员制定好的，所以产品线的视觉设计就能轻松与规范侧保持一致。

 

在以前公司的时候，他们是用团队成员各自的iCloud云盘进行组件库同步，免费而且很好用更新也很快，但是团队成员权限无法管理，导致 已经离职的我还可以看到他们的数据更新。组件库需要共享性，但权限性更重要。

如果是建立一个内部云同步的服务器，同时又得适应苹果电脑的随时调用，或者是会实时同步文件夹。这样规范人员在对组件改动之后，其他组员都会在sketch的右上角收到一条Push提醒，可以根据这个提醒，来决定是否使用新的组件。

在点击替换更新后，也会有弹窗进一步确认，改动之后的样式是否符合预期，如果需要更换升级，那么一键即可更新，再也不用繁琐的去调整源文件了。

组件设计的应用，使得包括视觉元素和框架布局在内的设计过程变得有迹可循，同时在一致性体验的基础上，基于丰富业态和产品策略，设计师可以不断去探索新的方向为公司节省了大量的经营成本

6. 结语

2020早已经过去，但我们并不会就此停歇，我们始终坚持以打造最美计量页面为目标，深度挖掘用户交互的体验场景，专注行业的精细化设计。同时我们也持续关注新设计趋势，探索更多的新体验。

如果你也想参与我们的UI一致性项目建设，😊欢迎加入我们！