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

1年前发布

原创文章 / UI / 资讯
富途设计 原创,如需商业用途或转载请与富途设计联系,谢谢配合。

给大家介绍下富途牛牛终端的设计系统,一个在过去几年里被不断提及的词语,欢迎围观与指导。

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

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



设计系统是如何诞生的


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



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

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

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




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


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



设计系统介绍


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

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

项目流向由上至下。



undefined


一.体验层


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

其中,设计语言包含了以下四大部分:




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富途牛牛的过程中,在协作层、体验层、开发层上遇到的许多问题。


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


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

感谢你的阅读。



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

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



44
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息