带你走进牛牛背后的设计系统

如何建立一个运行流畅、提高工作效率、优化用户体验一致性的设计系统，我们也在努力思考、探索和实践中。

在正式介绍之前，请先观看以下视频~

设计系统是如何诞生的

富途牛牛是一款覆盖5大终端的集行情与社交的软件，是平台系统级的超级APP。其中APP内集结了多项核心功能，拥有丰富的交易品种，面向三大市场开放。

那么问题来了，面对这样一个超级APP，富途牛牛的设计团队似乎陷入了两难之境：

1. 项目以商业目标为导向，协同统一目标是最重要的，但这也容易产生缺乏变化与情感的问题。

2. 设计是创造性环节，每个设计师都有各自的设计经验与风格，互相之间也存在缺乏拉通与交流，然而过分变化也会导致整体效果打折。

到这里仿佛走进了死胡同，要怎么走出去呢？

经过对当下互联网设计的发展趋势和设计方法的研究，设计系统走入了设计团队的视线，于是便有了富途牛牛终端设计系统的诞生。

设计系统介绍

富途终端设计系统包含了三层架构：

1.体验层；2.协作层；3.开发层

项目流向由上至下。

一.体验层

体验层由设计语言包和设计语言规范组成，致力于保持最佳的产品统一性体验。

其中，设计语言包含了以下四大部分：

1.1组件包

即组件库，由于多终端、多业务、多人协作的特性，在搭建过程中遇到了以下问题：

A.命名架构不统一，查找资源不熟悉

B. 大家共同维护，常被其他人不小心篡改组件

C. 与线上的样式不一致

D. 耦合了大量自己用不到的非通用组件

......

针对以上问题，设计团队尝试了以下解决方案

A. 外层架构统一；

B. 命名规范化；按功能分类；表格对照；

C. 权限梳理，避免篡改和冲突，监控组件修改；

D. 更新与优化样式；

E. 整理和输出有效组件；

......

每个终端组件库的整体架构参考了各系统本身分类属性，并结合业务特性，产生了一套属于富途牛牛的一套整合组件包。

（详细内容暂不便具体展示）

1.2颜色包与字体包

即底层库，供组件库调用。颜色包根据功能和业务属性分类，与组件库对应；字体库整合了牛牛终端运用到的所有字体类型、字号大小、字体颜色等。

1.3图标包

即图标库，包含了牛牛所有运用到的图标，供组件库及界面设计时调用，图标设计遵循图标设计规范。

2.1设计语言规范指南

相比过去设计规范仅涵盖视觉，设计语言涵盖了交互与视觉，与全方位的设计语言规范。其中包括色彩、层级架构、字体、图标、组件、语言应用、设计格式、插图、边距、文案、动效、音效等等。结合富途牛牛实际应用场景，均尝试定义了规范并落地应用。

（详细内容暂不便具体展示）

二. 协作层

协作层由协作流程和专业定位组成，目的是在项目中保持设计师相关流程的敏捷性，从而提高设计时间价值。

协作层存在的价值：各有专攻，定位清晰。

随着协作流程的升级，设计工作流由瀑布流变为并发流。在设计前期，开发和产品可基于全局性考虑各讨论点并快速达成共识；到设计过程，明确规则的辅助下，达到标准化输出；最后到设计实现，不同设计师能统一样式和输出，得到模块化的保障。

规范可作为常规指引解决大部分问题。当不适用时，可视情况选择添加规范或特殊处理。

三．开发层

开发层由开发/样式系统组成，保证开发还原的准确定、扩展性、兼容性与敏捷性。开发层的系统资产让设计经验沉淀，让纸面的设计规范落地有价。

3.1全终端三层样式系统

由设计师和工程师共同研发的系统，是目前国内首家三层色彩系统。使用样式库进行色值管理，不仅使得高度还原的任务事半功倍，减少实现的误差，以及代码中的冗余与重复。还让架构拥有清晰简洁的样式分类，大大减少产品设计开发之间的沟通成本，且非常易于维护并扩展。

桌面端样式系统可实现快速增删查改某套UI颜色表现方案，可全局瞬间更新UI全局表现，可精确控制某个空间的局部细节调整。

3.2样式系统的价值

三层样式设计系统能做到APP层的移植、皮肤层和空间层的全局调整，实现了轻量化升级、全局统一调试、像素级定位调整和无需检查还原的预期价值。同时，设计师也可自行修改代码调试界面，提高协作效率。

3.3色彩插件

同时，我们的设计师也自研出Sketch色彩插件，辅助编辑和管理色彩，减少了大量重复性工作。

四．结语

随着富途牛牛终端设计系统的建立，优势也日渐发挥。强大的组织能力，能让更多设计师统一合作，多个项目组紧密配合，多个应用敏捷移植。同时，系统本身有强大的修复能力，存在不一致可快速发现，使用者在讨论后即可进行修复。

富途牛牛终端设计系统三大理念

价值点：全局统一与设计方向

注重点：创新变化与业务差异化

原则点：开放式讨论的集体智慧

富途牛牛终端设计系统的创建，是一个0到1的探索过程，解决了各项目团队在设计和开发超级APP富途牛牛的过程中，在协作层、体验层、开发层上遇到的许多问题。

在搭建系统的过程中，也获得了来自开发侧的大力支持和专业建议。集思广益，博采众长，才能有效产出精品。

设计系统既可以帮助在内部协同统一目标，以作规范化输出；同时，也不完全限制设计师的各自设计经验和风格的自我发挥。从产品、设计到开发，保证统一的体验、设计效率以及更完整的开发还原度。

感谢你的阅读。

本文所有作品均由富途设计师原创，富途设计版权所有。

文章转载时请注明出处，违者必究，谢谢你的合作。