青橙科技最主要、也是最早的产品——「青橙健身房管理系统」在10月进行了一次改版，也是自2014年诞生以来的第一次改版，在这次改版中，运用到了「组件化设计」的思路，对这个名词算是有了更多的认识。

01.项目背景

▼ 青橙健身房管理系统Web是什么？

青橙健身房管理系统Web是一款为健身房工作人员提供服务的SaaS产品，帮助他们进行健身房的日常管理工作，类似于tower、钉钉等产品。

▼ 为什么要改版？

青橙科技自2014年成立以来，期间企业形象和品牌VI经历过数次更新迭代，而作为青橙最主要、也是最早的产品，「青橙健身房管理系统」的样式和体验还一直停留在三年前最初的样子；另外，随着功能增加，系统越来越庞大，用户体验的问题随之出现，模块之间的样式和交互体验不统一的问题也日益突出，亟待优化。

02.设计目标

改版需要针对已知问题进行解决，本次改版并不涉及到产品结构和逻辑的改动，主要目标是从视觉和交互的层面优化用户体验、提高系统一致性。结合青橙健身房管理系统的特点，在这次设计中，采用了组件化设计的方法，组件化设计能够保证特定的信息就有特定的最优展现方式和交互方式，使用得好的话，可以从很大程度上减少系统的混乱和不一致性。

我们主要从以下几步来进行：

03.解构

在这一步，通过对系统进行梳理，我们提取出了产品中的共用部分，并分析存在的一些问题，都是一些极为常见的基础组件。

另外，除了这些基础组件，系统配色、页面布局规范也是这一次我们需要考虑的内容。为了强化品牌形象，使得青橙各平台对外输出的视觉风格保持统一，最终我们确定的配色方案如下。

页面布局我们还是沿用了SaaS系统经典的左右布局，左边是固定宽度，右边自适应宽度，不同的是我们对右边的区域采用了栅格化布局。并且我们规范了页面元素间的间距，必须是5的整数倍，这样可以有效避免混乱的间距。

04.组件设计

梳理出了这些基础通用组件，接下来要做的就是设计这些组件了。组件化思维的精髓是独立、完整、自由组合，绝对不是将各种组件穷举出来然后各处引用这么简单。下面会用我们的实际例子来说明这几点。

▼ 组件独立

不同组件是独立存在的，这样可以快速地统一修改系统中的某个组件，同时又不影响其他无关的组件。但某些组件之间又是有关联的，一个组件可以引用另外一个组件，修改被引用的组件会影响到与之关联的组件，那么在实际过程中，我们应当考虑到修改这个组件所带来的影响，是不是我们想要的效果。

比如我们系统中的主菜单，这是一个完全独立的组件，单独修改它不会影响系统中其他任何组件。

而系统中的Confirm弹窗组件则是另外一种情况，Confirm弹窗组件中引用了按钮组件当中的Medium主按钮，修改弹窗组件不会影响到按钮及其他组件，而修改按钮组件则会影响到弹窗组件。当然，弹窗组件里完全可以不引用按钮组件，另外设计一个只用于弹窗里的按钮，但这样做其实就违背了组件化设计的初衷。

特别的，系统中的常用颜色也应该是独立出来的，特定的颜色用于特定的地方，这样不仅规范而且便于以后统一修改。

▼ 每个组件的完整性

在设计过程中，每个组件应当是一个完整的产品，怎样才算完整呢？简单来说，一个完整的组件应该能满足系统对其所有可能的要求。

比如按钮作为一个基本组件，它绝不仅仅只有一种，而应该包含系统当中可能出现的各种类型、各种状态的按钮：

• 类型：用于主要操作的主按钮、用于次要操作的次按钮、用于区分危险操作的危险按钮、纯文字按钮、带图标的按钮…等等；
• 样式：除了最基本的normal、hover、active、disable几种标准状态，还要考虑按钮的尺寸变化。系统中所有的填充型按钮都有大、中、小三种尺寸，各个尺寸下根据文字长短适配的规则如图中所示；
• 交互：按钮在点击后，等待服务器响应的过程中是disable的，防止重复点击；多个操作按钮并排时，要区分主按钮和次按钮，按钮多余3个时，可以考虑使用dropdown。
• ……

将这样一个完整的按钮组件交给开发后，在以后的页面设计中，设计人员几乎不用再针对按钮做过多的说明，即使设计师在设计图中出现了误差，开发人员也可以纠正过来，当然，设计师也不能因此掉以轻心。

▼ 组件间的组合

既然组件最后是要组合在一起的，那么我们还应当考虑各个零部件之间的组合方式，单个元素放在那里是无法构成一个系统的，比较典型的是表单的组合。表单通常是由多个表单元素：input、select、checkbox、radio、button…等组合在一起，最最基本的也包括input和button。在组合表单时，也应当从各种状态去考虑：

• 表单对齐方式：为了增加表单填写的速度，应当保证浏览线在一条直线上，因此表单项和按钮采用左对齐的方式，而label采用右对齐的方式是为了避免label过长时造成label与输入框之间的间距太长，降低阅读效率；
• 表单项的间距：表单项在填写错误时会给出错误提示，为了避免页面跳动给用户带来不好的体验，我们将表单项的垂直间距设计成20px，足以用来显示错误信息；
• 填写反馈：将表单已填写、未填写、hover、focus、disable、错误等几种状态用较明显的样式区分开来，让用户明白各表单项的状态；同时输入框的长短也能给用户一些隐形反馈，如输入数字的输入框相对来说会短一些；
• 表单校验：我们把表单校验分为自动校验和提交时校验。自动校验即填写时就开始验证输入，如对格式有要求的手机号、邮编、邮箱输入框，只能填写数字的价格输入框等，这些都可以在用户填写时就能判断正确与否；提交时校验即在用户提交表单时校验剩下的表单项，如必填项未填写等；
• 表单提交反馈：表单提交后，等待服务器响应的过程中提交按钮应该是disable的，防止重复点击；提交结果成功／失败，都应当给出反馈，对于较为重要的操作结果，我们用弹窗提示，而对于较弱的操作，用toast给出提示即可；
• ……

▼ 建立规范文档

按照上面的思路设计出组件后，我们建立了规范文档，规范文档不仅仅是将已有的东西整理出来，更重要的是要将设计的思考表现出来，完整展现各个组件考虑到的点，可以作为设计手册去查阅，也可以让新入手项目的同事快速了解。因此，我们是将规范文档和UI Kit分开整理的，规范文档更像是一个适合查阅的设计说明手册，而UI Kit则是为了提高工作效率而单独整理给设计师的组件库。

Sketch的symbol和library这两个功能的搭配使用，在很大程度上简化了规范文档和UI Kit的制作过程，里面的resizing功能也大大提高了symbol的可扩展性，具体的使用方法可以在网上找到很多相关文章，在此就不赘述了。

建立规范文档后，就要实时去维护，一旦更新了组件，就要同步更新给大家，包括UI Kit组件库。

另外，值得注意的是，一旦有了规范文档，那么在实际设计和开发过程当中，就应当按照规范来操作，而不应当随意添加或修改，这样规范才有了它的意义。

05.重构

重构的过程其实就是将上面设计好的组件按照各个模块的功能重新组合到一起的过程。在这次改版中，考虑到时间周期和资源配比的问题，来不及对各个页面进行重设计和重开发，因此采用的方案是对旧组件进行替换，后续再进一步迭代重设计。所以此次“重构”的工作实际上是由我们的前端工程师来完成的。设计师完成组件规范文档，前端工程师按照规范开发出各个组件，设计师确认组件效果后，前端工程师再对原来的旧组件进行替换。当然，不是所有页面都能通过单纯的替换就能达到效果，还需要根据实际页面去调整。

06.跟进，上线

开发工作大体完成后，设计师开始review效果，对比交互及视觉稿，统一整理出与原设计不一致的地方，并提出修改意见，发予相关人员进行修改；没问题后配置测试环境，跟进线上实现效果，并交与测试工程师进行测试，最后上线。

07.总结和展望

反思整个改版过程，其实有很多做的不够完善的地方，设计不应当仅仅停留在设计过程，对整个产品的分析和全局思考的能力都是对设计师的考验，希望在后面的项目中能够加以借鉴、改进：

• 产品定位不明确：例如产品想体现专业性还是安全稳定？想传递给用户的情绪感受是什么？这一点很重要，可以设计用户形象及典型使用场景来明确设计方向，为细节做参考，也更利于统一产品的用户体验；
• 前期沟通不足：前期没有和大家预先规划好改版的原因、目标及期望值，帮助大家向一个方向努力。

此次的改版取得了一定的效果，但并不完整，系统中仍然存在许多旧的页面，希望在接下来的迭代中可以对旧页面从结构和逻辑上思考更多，而不是仅仅停留在视觉和交互的层面；同时也需要学会利用数据，有针对性的解决实际问题。