诺诺云财税项目网址：https://cloud.jss.com.cn/

该分享的内容，是真实工作中推动整个组件建设和投入的过程，内容已在团队中进行了分享，欢迎大家一起探讨... 

云财税(财税线)，专为中小企业财务量身打造的智能化管理软件：

该线上线3个相关项目，每个项目都拥有独立的组件库，但是由于整体视觉高度相似，所以为了未来财税线能够节省更多设计和开发成本、打造用户一致的使用体验，财税线决定统一组件规则。

以下文字语录，以个人演讲风格表现：

本次分享是有关组件的内容，根哥知道我分享组件以后，来了一句：“组件这东西最无聊了，你要讲得有趣一点哦！”

突然，这个建议就像洪水猛兽一般，让我思绪万千，而后我盯着我的分享主题沉思了5秒，并默默的在标题里面加了三个字“不一样”，我的分享会财税新组件“不一样”的推动之路正式开始，那哪里不一样呢，请听我慢慢分解…

最开始，咱们先了解一下财税线这个设计的现状：

财税线几个产品的设计，都是在antd的基础做衍生，每个产品还有独立的组件库，但是税务板块的设计还存在较大的设计差异，按现有的情况，云财税线有4个设计组件库…

但是，除了税务那块设计，几个产品之间的组件样式看似一样，但又不一样，似同非同；当时的想法，也比较顺着思维，我觉得，存在差异是好事，因为几个产品业务完全不一样的，拥有自己的设计风格，我觉得合情合理，因为我觉得，用户能够更快的分辨产品…

但是!!! 后来，我突然觉得局势不太对，如果维护多套组件库，我觉得我可能没有时间跟小哥哥约会了～

那为了能有更多的时间跟小哥哥约会，我必须打开我的格局，寻找更有力的理由，说服自己财税线只做一套设计组件，所以，我不能单从用户分辨产品的角度下定义，我要从业务角度、公司层面、投入资源3个专业度非常高的点去分析：

第一个，从业务角度来看，财税的三大产品是有很强的业务关联性的，不同的设计风格，用户切换产品使用的时候，学习和认知成本将会成倍上升...

第二个，从公司层面来看，大家都知道，咱们诺诺在做生态圈，其他线的产品都有自己的设计风格，并且差异很明显，财税线再新增几个不同的设计风格，我认为并不利于用户跨产品线体验，用户、甚至我们公司的人员，都可能会对产品所在的产品线产生模糊的认知…

第三个，从投入资源来看，财税线做3套组件的话，那么设计师之间跨项目工作，需要投入学习成本；产品、开发也存在同样的问题；这就很容易引起不良的蝴蝶效应…

了解完产品现状，确定好设计方向后，我将从前、中、后三期讲述整个推动过程。

首先，我列举一些组件给大家看一下，这是3个产品的组件：

从这几个组件中，大家可以观察以下，三个项目现有组件库的样式区别…从中可以看出财税几个产品的组件样式就存在我上面所说的似同非同的差异…

那么第一步我先将3个产品的组件进行比较，同时把部分组件的交互、使用规则也整理了出来…并附上右图自己的意见和观点…

完成组件差异化整理后，我组织一场小组圆桌会议进行讨论，这一步的动作，能够让财税小伙伴完全了解到现有组件的样式和问题，并且能够达成统一的组件规则意识...

统一了组件规则，便进入到组件的整理工作中了，在这过程中，我的身边开始陆陆续续的出现各种声音，借着这些声音，我一边整理、一边反思现有的组件样式：

我现在梳理的组件样式，其实还是在antd基础上做衍生，设计的样式并没有很大变化，只是简单的做了个样式、规则的统一….从用户的角度来看，体验提升并不大…最终的最大获利方却是我们设计师自己…

但是呢，我想双赢….所以我开始做了一个大胆的决定，推翻我现在整理的第一版样式…

重新打造一套属于我们自己，且更适合会计行业使用的设计组件…推翻的想法决定以后，我开始深入竞品、涉足线下 … 努力在新组件的设计上更人性化、多元化 …

财税线的产品主要内容是列表，所以我先从列表入手，站在用户的角度，去感受多家竞品的列表设计所带来的感受。列表除了给用户精准的呈现数据信息外，侧面也要体现人性化，所以列表的的颜色选择，就显得尤为重要了，因为颜色是可以影响人的情绪的…

在我所查看的几个竞品当中，亿企代账、快合财税的文字使用颜色最为典型，亿企代账的文字色系都比较统一，用色偏深，虽然视觉感较为生硬，但是能够兼容各种显示器…

快合财税列表的文字饱和度比较低，在不同的显示器上，视觉感整体都是比较舒适的，但是，颜色太浅，在不太好的显示器上，信息可视感比较弱，灰度偏高…

我比对了一下两个产品的饱和度，好巧不巧，刚好卡中间可以取个数值，所以在亿企代账70%透明度的基础上，降低了5%，取了个65%的黑，好巧不巧，取的这个65%的黑，跟antd官方列表的文字颜色也碰巧一致~

这个时候，突然有种英雄所见略同的感觉…

获取了不同的文字色值后，我开始尝试绘制多个列表样式，并用不同的方式，与诺诺会计和财税线产品同学进行视觉感收集...

与会计同学是进行一场简单的视觉感访谈，在访谈过程中，我还得到了一些有价值的内容，比如字号大小的舒适感，显示器的显示情况，不同平台的设计方式带来的感受等等信息...

与产品同学是进行了一场简单的投票操作，大致得到多数人的视觉感选择…

访谈和投票的操作，并不是决定我新组件的设计样式，而是从这些真实的反馈内容中，去引发我更多的思考，让我能够结合多方因素去整理组件...

新组件完成以后，下一步就考虑新组件要通过什么方式进行投入…

正式投入到开发之前，还有许多工作要做，首先需要与财税线多个部门人员进行宣贯和讨论，让整个财税线相关人员都能够统一组件样式和规则意识，了解新组件发展进度和投入情况...

这个宣贯的过程其实蛮有难度的，由于当时对每个部门与产品相关性了解的不够透彻，有些内容的呈现并不是很完善， 主要的遗漏的点是未将新老组件进行对比，除了我们设计师自己，其它人员并不能更好的意识到新老组件的变化，而这部分内容却是很重要的…

完善的新老组件设计变化对比，在实际新组件投入修改工作中，产品和设计同学可以精准的对组件进行使用和替换，前端同学可以精准的对设计样式进行改动，多方节省时间成本…

最后运营，也是需要了解到新组件变化的，在未来新设计上线后，运营同学不会显得茫然…

新组件样式多方统一完成后，就要考虑整个新组件投入方向：

在整理新组件的过程中，得知财税线有独立的新项目规划，但是这个新项目还在审批中…何时进入到开发还是个未知数，但是如果开发，新组件则能够完全的使用…更好的体现新组件的价值…

但是对于已在线的老版本项目来说，新组件替换老组件的的推动动作就显得很有难度，主要的难度点有2个：

一、之前不同的前端使用的代码框架等问题，害怕改动过后，系统出现不可预知的情况，并且消耗人力成本，项目管理支持力度不够…

二、项目老大还在考虑当中未确定新组件使用的投入方向…

这听起来确实很有难度，但是我们多方最终的目标是一致的，在与多个部门反复的沟通下，最后决定新组件可以投入到已上线的老版本项目修改中~

投入方向确定好以后，那我就要开始对新组件进行内容分配进行需求提单了，首先从按钮，输入框等这些基础组件入手；根据不同的项目，并在新组件旁边列举出不同点、注意点，这样更便于前端对新组件变化有精准的判断，也便于设计师更了解自己所负责项目的组件变化…

由于财税线有多个项目，且每个项目负责的前端不同，有各自的项目组，所以设计师需要各自提优化需求...图上是我整理好的第一期投入老版本项目中需要优化内容...

项目经理再根据各自项目的需求情况，进行优化组件的安排，业务需求开发级别为主...

财税线新组件第一期投入刚刚开始，后期发展过程中，设计师不仅需要慢慢替换老设计稿，还需要设计师反复与前端沟通组件样式，这个过程依然比较艰难~但是苦尽甘来，我相信必定会有不一样的成就感...

以上呢，是我推动整个组件的过程，最后，我来分享一下我所建设的组件库情况，创建组件库，不仅仅只是设计样式的变动...

还要考虑到多种使用情况，首先我来讲讲已置入sketch组件和未置入sketch组件的区别：

大家可以看到，已置入sketch的组件，在使用过程中，出现层级过多，寻找费时的情况，并且前面的示意图无法看到大图，图很小，点击使用，才能看清样式，如果选择错误，就又要重新寻找~  这里的使用选择是不太好的~ 但是，按快捷键 C ，会出现一个弹窗组件库，能够更方便的看到组件大图，精准选择~但是现在已创建好的组件库还是存在层级过多和部分使用不便捷的问题…

那如何缓解这个问题，这个作为待定内容~

未置入的组件库，我整理的比较详细，列举出多种情况，也是便于某些组件需要解绑或者特殊的情况下，能够在完整的组件库里进行组件调用，但是我们还是先以已置入组件库为主~

组件库还有优化的空间，为了让设计师能够更快使用的组件，了解不同的规则~ 我又再次细化的梳理了类别~

新组件分类图

最后讲讲我整理组件库的感受：

组件库不仅仅只是设计样式，我们的产品现在越来越复杂和庞大，我们必须对页面中通用设计和交互规则进行统一定义，打造一致的设计规则，降低产品、前端、设计师的学习和工作成本~

这个库存很重要，并且需要多次翻阅，熟知设计规则和设计样式~

新组件源文件中，我还建立了特殊内容库（新组件分类图），这个库是根据项目建立特殊设计和交互的一个样本库...

这样在不同项目中，同样的功能情况下，设计师能够更快的学习和调用，降低设计师对设计信息不互通的情况，避免相同内容，不同规则交互等问题的发生...

本次组件的推动和整理工作呢，我也是第一次经历，有很多不足，推动的工作并没有完整的规划，而是顺着变化做决定，但是整个经历，我还是受益匪浅的~

Powered by Froala Editor