2021-12-27 12:26:29|已浏览：228次
随着项目的不断发展，设计团队在不断壮大，设计师之间的协作也越来越多，相应的沟通和协作成本在不断增加。如何才能更高效的合作，并把设计质量和一致性做的更好，是我们需要去解决的问题。
本文将以QQ动漫设计系统为例，分享一些过程中的思考和经验，抛砖引玉，希望对大家有所帮助。
问题之源—本地组件库
在项目初期，团队设计师的协作方式是通过一个本地的sketch规范文件，以复制粘贴的方式来复用一些元素和控件。在设计师协作人数不多，UI控件改动频繁的情况下，这套流程可以比较快速的完成需求。
但随着项目逐渐成熟，协作设计师人数变多、UI控件逐渐趋于稳定且需要复用的地方逐渐变多时，之前流程的不足就逐渐凸显出来。
1.更新通知缺乏自动化
文件更新难以做到及时有效的通知到所有设计师，且需要人工在群里发通知，告知大家更新了文件。有些设计师暂时可能没有相应的设计需求，可能会忽略更新后的文件，造成设计的不同步。或者等到需要的时候才去群里找更新的规范文件，版本容易搞错且费时费力。
2.全局组件更新困难
由于组件样式是通过复制或修改的方式应用到界面设计中，当规范文件更新时，无法智能的自动更新修改相应的组件，需要设计师人工核对哪些地方有修改。这样很难保证大家的设计版本都能得到统一的更新，当大家使用的组件版本不一致时，输出的界面就会出现杂乱无章的情况。
3.代码复用率低
开发没法全局调用代码样式，有些样式可能需要反复复制使用，耗时费力，并因此产生的代码臃肿，还会直接影响产品性能。
解决之道——云端组件库
鉴于设计师目前多使用sketch+xshow的工作流程，而xshow正好也具备云端管理的能力，故决定以xshow作为桥梁，建立一个基于sketch+xshow的云端设计组件库，以非常低的迁移和学习成本完成流程优化。
优化后的流程是把sketch本地组件库通过xshow上传至云端服务器，设计师通过xshow云端功能添加到sketch中，并在设计文件中嵌入这些云端组件。
这样做能很好的解决上面说的问题：
1.更新通知自动化
更新文件不用再靠人工在群里发通知，设计师也不需要去找文件，而是在sketch中会自动进行提醒。一旦有更新，会在右上角显示提醒消息，设计师只需要点击提醒，下载最新组件文件即可完成更新。
2.全局组件一键更新
当更新组件库文件后，界面中所有之前使用过云端组件的控件元素都会自动比对更新前后的差异，方便设计师判断是否更新。这种更新最厉害的地方在于，更新是全局的，也就是一旦你确认了更新后的内容，所有界面都会自动按规范进行更新而无需设计师再逐个筛查。这样做既能保证设计稿的一致性，也能大幅提高设计效率。
3.开发效率和质量大幅提升
开发通过代码把一些常用的样式进行封装，在一些高度复用的场景中直接调用。一方面可以通过调用的形式减少重复样式代码的复制，精简代码，降低软件包体积，另一方面也可以减少不必要的工作量还能方便后期维护。
实践之行—云端组件库搭建
想要高效解决问题，正确的方法很关键，这里我们用到的方法就是原子设计理论。2013年前端工程师 Brad Forst 将此理论思想运用在界面设计中，形成一套设计系统，包含5个层次：原子、分子、组织、模板、页面，这套理论为组件库的搭建提供了思路和方法。
在实际搭建过程中，因为组件库的搭建工作量往往比较大，需要先明确流程和分工，主要包括以下几个关键步骤：
1.明确工具流程
因为是搭建云端组件库，所以首先需要有一个云端工具进行管理。针对以sketch为基础的云端组件库来说，常用的工具流程包括sketch cloud，各类云同步盘，第三方云数据库自主部署等等。我们选择的sketch+xshow工作流也是基于xshow具备云端管理功能，与其他流程本质上是一样的，大家根据项目实际情况合理选择就好。
2.全面汇总并分类
按原子理论由小到大来对常规控件进行汇总并分类。对于QQ动漫项目来说，常见的控件类别包括：颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同，原则就是对要复用的元素进行整理。
3.制作样式模板
为了便于维护和提升合作效率，将组件库拆分为几个不同的独立文件，每一个文件由组件库搭建小组成员独立负责，减少混乱。
如果是有多位设计师参与时，因为组件库的元素存在相互调用的情况，会遇到到底谁先做的问题。解决流程分2步：
1）由一位设计师把组件库的原子级组件（主要包括颜色，字体，图标）先做好，并建立分类组件标准模板，其他设计师在这些模板基础上进行完善，保证组件库在逻辑层级统一。
2）如果过程中遇到，自己组件中需要调用对方组件，比如某个图标没有在图标组件文件中，但自己的列表中又需要，可以先用其他组件中的图标代替，等图标组件库更新后，再同步更新这里的组件即可。
QQ动漫组件库一共分了5个不同文件，分别是：基础、操作、导航、反馈和内容。
本文由培训无忧网千锋教育专属课程顾问整理发布。更多动漫设计培训课程欢迎关注培训无忧网动漫设计培训或添加老师微信：15033336050
注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-10300.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注动漫设计频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050
