为工作流优化组件库应用

为工作流优化组件库应用

李奇李奇
在之前的文章中提到了在团队中更好的协作,不可避免的会涉及关于组件化相关的工作,但这件事被持续推进时就会遇到一个严重的问题:

我们在设计组件时往往产出的是一个个文件,文件中包含了组件的各种状态、使用方式、最佳实践、更新日志等等信息(如下)。

我们在日常的设计中会打开这些文件,在里面找到自己需要的部分粘贴进自己的设计稿,在这样的日常行为中会产生几个问题:

  1. 一个一个打开这些文件太烦了,一不小心还会错误修改
  2. 组件更新时已经用过的其他文件并不会随之更新
  3. 现有的设计工具提供的共享样式无法自己定义粒度

被这个问题折磨了很久之后开始思考一个问题:如何在多人协作的项目中良好的调用不同的组件?

启发

在我们的日常工作中会经常听到一些词:共用、抽象、第三方库…这些名词大都来自工程师,他们很看重一段代码能否被复用、能否被其他人很好的放进自己的项目中,这或许能给我们优化设计工作流带来启发?

如果有同学了解代码上的实现,那一定在源文件中见过类似下面的东西

#import "RCTBridge.h"

如果没见过上面这种,那在 HTML 里肯定有看过这样的东西:

<script src="xxx.js"></script>

看不懂没关系(我也看不懂 -.-),语意上已经很明显了:引入 RCTBridge.h,那我们是否也能在设计流程中采用类似的机制来解决我们遇到的问题呢?

import *.sketch

按照之前的思路,我们的设计流程就会变成下面这个样子:

当我们在设计时只需要在设计工具中引入事先实现好的组件库,之后应该可以在当前的设计稿中看到上述三个组件中的内容,因为在设计中并不会需要组件中的所有内容,因此还需要在设计组件时基于某种约定将其他可能会在设计中用到的部分单独呈现,比如在一个特定的 Page 中。引入后所有的组件将会分门别类呈现,相较于之前的方式更加灵活。

在日常的使用中,我们可以把组件库放在远端,当我们更新组件库时将会自动通知到各个设计师提醒升级。打开一个旧版本的设计稿时,如果没有用到最新的组件时,也将提示是否需要升级组件库,这样可以确保所有的设计都是基于当前最新的组件库完成,而不用发愁这个版本是不是最新的等等。

组件设计师也可以单独维护自己的组件,单独提供升级,而不用每次都改动整个文件。

引入的组件库本身无法直接修改,每一个组件都通过 Group 组织,需要修改的部分通过其中创建的 Symbol 和 Share Style 进行:样式通过 Share Style 维护、存在可变字段的组件通过 Symbol 维护,这样可以在得到更高自由度的同时不牺牲效率。

通过这样的方式,我们就可以在协作中解决之前提到的问题,让组件化设计的效率提高,降低沟通成本。

未来

设计这类生产力工具在某种程度上其实就是在设计使用者的工作流程,设计者对工作流的理解将会直接反映到提供的产品中。为 1~3 个人的团队设计产品和为 10~30 个人的团队设计产品完全不一样,这里提到的组件库只是其中很小的一部分,还有版本控制、Review、真实数据在设计中的应用等等,这些步骤和流程的自动化和智能化或许是一个机会和方向,毕竟将你的产品融入一个工作流程后,对这个工具的依赖将会随着团队规模逐步提升,迁移成本也会随之变高。

正如每一名工程师都需要开发环境一样,也许未来的某天,设计师在工作开始前也会需要一个「设计环境」,我们将在这里解决所有关于设计效率的问题,让每一名设计师都能更加专注在设计本身上。

-----

最后知乎设计团队在招人哟,实习全职均可!有兴趣的老师请快联系我!

当然我们超酷的前端团队也在招人,如果你是一个强而有力的前端工程师请火速发简历给我呀!今天投简历明天就上班儿!

「给你的手留个香吧~」
4 人赞赏
vicente
微信用户
Imior
文章被以下专栏收录
10 条评论
推荐阅读