雪球设计语言如何服务于产品设计?

2020上半年雪球XDC完成了「雪球设计语言」的搭建,我们如何定义设计语言,具体做了哪些事情?

01 为什么要做这件事?🤔

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

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

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

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

02 了解雪球设计语言 📐

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

雪球设计语言如何服务于产品设计?

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

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

雪球设计语言如何服务于产品设计?

雪球设计语言如何服务于产品设计?

▲ 布局

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲雪球品牌色及色系

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

雪球设计语言如何服务于产品设计?

▲色值匹配色彩编号

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲雪球文字等级

雪球设计语言如何服务于产品设计?

▲文字的应用

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

雪球设计语言如何服务于产品设计?

▲ 数字字体

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲ 优化图标表意

在去年下半年雪球12.0版本发布后,我们写了一篇文章详细讲述了雪球图标系统的设计方法与思路

雪球设计语言如何服务于产品设计?

▲ 雪球图标设计

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲组件化演示

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲ 雪球动效规范

雪球设计语言如何服务于产品设计?

▲ 动效在界面中的应用

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

雪球设计语言如何服务于产品设计?

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

雪球设计语言如何服务于产品设计?

▲ 精简文案

雪球设计语言如何服务于产品设计?

▲ 使用用户理解的词语

我们在“小文案 大体验 | 雪球UX文案优化总结”中详细讲述了雪球UX文案规范的设计思路和文案的价值,有兴趣可点击了解。

03 写在最后🍀

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

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

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

——————❤️——————

相关阅读:
小文案 大体验 | 雪球UX文案优化总结
Hello,12.0 接我一标 | 开启图标新的可能

原文:https://mp.weixin.qq.com/s/bGqvLT_GOuQQeefwwWaWVw

文章标签:

0 条评论 51 次阅读

  1. 既来之,则言之。

发表评论

Top