2020上半年雪球XDC完成了「雪球设计语言」的搭建，我们如何定义设计语言，具体做了哪些事情？话不多说，先来一发视频：

为什么要做这件事？

早在几年前，为了提升设计输出一致性以及提高和下游开发同学的对接效率，XDC就已经搭建了UI Library设计组件库，既然有了组件库，为什么还要启动雪球设计语言项目呢？

01. 内容差异

设计组件库主要是为了方便设计师能够快速调用常用组件，偏向于实际工作，而雪球设计语言阐述的是背后的设计逻辑，传达了「为什么这样设计」，补充和定义了页面布局规范、色彩使用准则、动效参数等多方面设计说明，形成了更具体系化和规范性的设计系统。

02. 面对对象差异

设计语言面向对象更加广泛，更像是一份设计说明书，不仅面向设计师，也面向产品设计链条中上下游各个职能的同学，pm、工程师、运营同学等都可以从中找到参考。

03. 设计体系建立的必要性

雪球日益发展壮大，产品线不断扩充，产品设计不断迭代，将成熟的设计经验沉淀下来体系化规范化，形成一条清晰的脉络，能够在未来更长远的时间内指引设计方向，让设计能够持续稳定地输出价值。

了解雪球设计语言

雪球设计语言共18章节，下面我们通过几个主要章节来了解雪球设计语言涉及的内容：

01. 布局

就像拼乐高一样，UI Library设计组件库提供了一个个乐高方块，「布局」规范就是拼装设计组件乐高的说明书，指导设计师和产品经理如何拼装组合，应该遵循哪些规则，设计执行中有哪些注意要点。

一个页面如何构成，设计和工程实现两个视角下给出的答案是不同的，所以我们引入了盒子模型，让设计师带着工程实现的思维去考虑页面布局，设计侧和工程侧对页面一致性的解读，能够有效降低设计到实现的转化成本，提高开发效率。

▲ 布局

02. 色彩

我们将雪球、蛋卷基金、雪盈证券3个App的基础用色进行整合，定义全平台的基础色盘。雪球及子品牌的所有用色都可从基础色盘中调用，统一规则的色盘能最大程度控制色彩数量，降低设计及代码层面使用的复杂度。

▲ 雪球品牌色及色系

使用色彩编号而非具体色值：对颜色的定义上，前期与工程师达成一致，依据一定的规则制定颜色的色彩编号，而不直接使用具体色值。工程师在底层色库里写好色彩编号并匹配色值，工程实现时直接调用编号，这样做的好处是如果遇到色值调整，工程师直接修改底层色库的色值即可实现一键换色，而不必辛苦的把每个场景的颜色找出来调整，效率提高了很多。

▲ 色值匹配色彩编号

03. 文字

文字是界面设计最基本的构成之一。我们对文字字号进行字阶与行高定义，形成一定的组合规律，以应用于多场景设计，保持良好的阅读感受和信息节奏。

▲ 雪球文字等级

▲ 文字应用

对雪球来说，数据是重要的信息，我们选用特殊数字字体，以容纳更多数据项的展现并保证显示清晰：

▲  数字字体

04. 图标

图标设计依据“表意准确”、“风格简洁”、“情感愉悦”、“可延展性”等几个设计原则来保证图标在雪球产品体系中能够达到易读、一致、美观的目的。

▲  优化图标表意

在去年下半年雪球12.0版本发布后，我们写了一篇文章详细讲述了雪球图标系统的设计方法与思路，详见：Hello，12.0 接我一标 | 开启图标新的可能

▲  雪球图标设计

05. 组件

在本次设计语言搭建的过程中，我们对UI library设计组件库进行了一次升级，针对雪球业务特点及日常设计场景增加了更多自定义组件。比如我们把金融类产品中经常使用到图表，拆分成图例、图表类型、横纵坐标轴，使用时简单组装即可。

▲ 组件化演示

06. 动效、声音反馈与震动

动效已经成为产品设计中必不可少的部分，雪球设计语言从2个部分定义了动效规范：一部分明确动效的使用原则和价值，定义符合雪球风格的参数、缓动曲线、弹性曲线等基本内容；另一部分对雪球常用的基础控件和模块进行整合，输出动效实例及开发交付规范，为创造简洁一致的用户体验提供基础。

▲  雪球动效规范

▲  动效在界面中的应用

震动反馈与声音常常伴随交互操作与动效出现，这类反馈补充了除视觉外触觉、听觉层面的感知维度，提供了更丰富的交互体验，我们也对这2个维度的规范和基础知识做了补充。

07. UX文案

在界面中我们通过文案与用户产生交流，精准、清晰、简明的文案更容易被用户理解，也更能建立用户对产品的信任。但文案往往是最容易被忽视的环节，我们在设计语言中也纳入了UX文案的写作规范，以传递给雪球用户精准、明确的信息，与用户平等交流，并进行有效对话。

▲  精简文案

▲  使用用户理解的词语

写在最后

搭建了雪球设计语言，设计师可以理解背后的设计逻辑，快速查阅规范；上下游不清楚设计规范或者团队有新人加入时，设计语言也能帮助大家减少沟通成本，降低融入门槛。

不过，设计师也会疑惑，遵循规范要到什么程度？完全遵循规范会不会扼杀思考与创新意识，牺牲掉更聪明的设计方案？我们认为设计语言是无法解决所有问题的，规范可能已经解决了90%一致性的问题，但是设计本身是活的，实际项目中，还要case by case的去看，「遵循」一定不能等同于「受限」。只有平衡好规范性和突破性，才能让设计从效率、创新等维度更好的服务业务，创造价值。

雪球设计语言根据雪球产品特性和需求建立，会随着业务、产品、设计趋势的发展不断迭代和生长，我们会持续维护更新，让设计语言更好的服务于产品设计，长远持续地输出价值。

——————————

以下是做设计语言视频的一点点花絮 ~

品牌设计师、用户体验设计师，以及对应的实习生都开放招聘