2018下旬-挖财宝组件库项目复盘分享

项目时间：

• 2018年下旬

项目背景：

• 这套组件库是基于当时挖财宝APP线上版本进行归纳和总结。

• 当时设计工作中，因为Ui设计师人数的增加，工作中发现各自的设计输出经常会遇到输出样式不统一的问题；主要集中体现在间距、字号、颜色等设计元素的样式不统一， 也因为项目短平快输出紧张的原因，最后上线项目时常出现类似的设计问题。

• 内部之前进行过设计改版的探索，在研究的过程中意识到了此问题的解决的必要性，恰巧2018年中旬sketch推出了library功能，增强了团队文件的联动功能，再加上当时挖财宝设计团队人数并不大，便于实现，让我萌生了为团队做一套全新组件库的想法。

  
  

项目目标：

• 挖财宝APP属于挖财旗下P2P理财平台，因为团队规模和设计团队（大部分阶段1-2UI）等原因，始终维持非常小的规模，所以并没有自身系统详细的设计规范，更没有组件库方便设计师调用。

• 所以希望这套UIkit，可以帮助团队内设计师规范设计元素，做到最终输出的尽可能统一，减少设计师和开发的对接成本，降低开发对设计的理解成本。

设计过程：

• 这套项目是一开始是自发驱动的，利用业余时间完成，在保证日常业务需求完成的基础上，完成这套组件库，虽然产品体量小，但是大部分利用碎片时间完成。

• 首先遇到的第一个问题，是线上版本设计稿历经多代设计师，源文件从PSD到Sketch杂乱且有部分缺失。我加入团队后帮助团队工具全部转为sketch；然后对线上首页入口的图标以及线上还在用的PSD版本页面，进行了重绘；重绘过程进行克制的微弱优化，首页入口图标只进行了颜色上的微弱提纯，没有进行较大改动。

• 这套组件库的因为个人业余碎片时间完成，时间和精力不够，1.0目标是基本完整搭建能够做到基本的可用性，所以颗粒度定位并没有很细，个人意愿是通过1.0版本的设计，可以通过团队成员共同迭代的方式，打造我们自己的2.0、3.0...

• 分组的主要思考主要是通过组件的基本形态进行归纳区分，通过bar - list - ActingSheet - Toast - Button - Icon/illustrator等维度去区分；一开始打算首先按照基础公共-业务这样的大维度去区分，但是因为精力不够而且业务需求变化快，所以1.0的的基础上放弃。

• 因为最终目的是做成sketchlibrary组件库，所以设计规范文档层面并不是这次的首要目的，但是在做的过程中，我还是做了一套简单的基础设计规范，供其他设计同事参考，颜色和字阶层面参考了蚂蚁的Antdesign，通过里面的算色器算出了部分颜色做为设计参考。

• 设计建议简易在1倍图的基础上，方面开发，采用8PT步进方式，4PT为间距步进基础，字号最小字号为12pt（色阶和字阶参考了Ant design），左右边距为16，采用六列网格系统。

• 组件库我简单重新排了下，因为之前我是横排的，而且站酷传图总是拉伸，大家将就看下吧；现在来看，颗粒度还是远远不够细，但是在当时自己默默完成的情况下，我觉得是满意的（后来想了下，遮挡了大部分，就先不全部露出了）。

• 设计过程中遇到的另一个问题，就是分组和命名，这是一项消耗耐心的事情，漫长的整理中，逐步对组件的性质，和原生UI的结构有了重新一次的学习，同时对分组命名和文件结构合理性的有了更高的认知。

• 最终整理到初具规模的时候，把每个组编辑成symbols元件，这样用户就可以在不编辑元件的基础上，进行见到的缩放和文案替换，这里要注意的是，在做symbol的时候，组内各个元件的对应关系应该是设定好，否则外部应用的时候可能会出现错误。

• 最终我看了市面上国内可以用的大部分同步盘工具，选择了坚果云，把sketch 文件做成library，同步在2-4名UI同事的电脑中，方面后续更新的实时响应。

结语

• 感谢大家的观看，这是我第一次在站酷用文章的形式发作品，也很久没有在站酷发作品了，因为一些原因，我这套作品可能内部已经不再使用了，但是我不想让它一直安静的躺在硬盘里，我既当作项目复盘给自己，也当作分享给大家，现在我也做了一些新的B端的设计，也接触了很多大公司的设计中台，我这套小东西无论从体量和颗粒度准确度可就真的小巫见大巫了，不过作为一段时光的见证，和一段付出的证明，我依然觉得意义很大，再次感谢您可以看到这里。