菜单

产品设计|“设计体系”在银行设计中的应用

  简立方 /  2022-12-12 /  简享 Sharing

前言

 

重庆农村商业银行(简称:重庆农商行)是全国首家“A+H”上市农商行,资产规模超万亿,位居中国银行业100强第22名,综合实力稳居全国农商行首位。

简立方有幸与重庆农商行合作,打造面向未来新一代智能企业网银用户体验设计项目。随着整个互联网金融行业的发展,企业级产品和系统的复杂度不断的增强,必定会面临很多子产品(产品A、产品B、产品B…)的设计需求,为此,打造一套企业级「设计体系」生态圈势在必行。

 

一、什么是设计体系?

 

设计体系是为了实现企业数字产品目的而包含的“定义设计模式和实践组织协同”两个维度。包含的内容有:设计目标、设计语言、设计原则、组件库、样式指南,以及设计与开发之间协作流程的实用工具。通过定义设计模式、到组织协同,解决过去企业内部各子产品设计体系之间质量参差不齐、团队分别维护设计体系的问题。

价值1、形成「企业核心设计生态圈」

 

最初定义一套企业级核心设计体系,后续子产品去修改设计模式、功能框架,达到企业级所有产品设计语言的一致性,解决过去企业内部各子产品设计体系之间质量参差不齐、团队分别维护设计体系的问题,从而实现企业下所有产品带来的视觉感受是一致的。

就像围绕重庆农商行自身企业级设计体系中心出发,使其各子产品传递出来的能直观的感知到是属于重庆农商行的子产品。

解决子产品无合力、视觉感受相互割裂缺乏串联问题,让企业级下面的各个子产品存在差异化的同时,又都有相当程度的品牌设计语言体系关联性、延续性。

 

价值2、「生态扩张」快速创建新产品

 

不同移动端、桌面端产品的构成方式是相同的,区别仅在于产品的风格感受和产品的框架规范的差异。而产品的组件库、组织协作以及快速搭建流程,都是可以在不同的产品中进行复制粘贴的。因为核心组件的存在,我们可以将拿一个组件修改适配出不同的产品,构建子产品的整体框架规范。

Token 相当于将设计组件进一步拆解,使其原子化,将组件的每一种属性都转变为一个设计和前端变量。比如可以分别将 button组件的背景色、文字色、文字属性定义成 Token,用代码化的语言,将组件的每一部分属性进行有规律的代码化命名。

 

价值3、提升「组织协同」效率

 

从设计体系中实践组织协同(创建-获取-共享-使用)的角度去思考。

重庆农商行企网的体系规范从设计到最终被用户使用,一共有四类角色参与,分别是设计师、开发工程师、业务设计师和运营人员。期望理想的组织协作流程是:简立方的设计师设计组件,行里的开发者开发组件,再把组件给到业务设计师和运营人员使用,业务工程师和运营人员把使用过程中的问题反馈给设计师,形成一个完整的闭环。

打造一站式研发流程体验,为流程提供完整价值闭环。通过“设计+研发”一站式独立控制台建设,进行构建-设计-开发-测试-发布-运营全链路打通串联。

 

二、设计体系驱动「重庆农商行」

 

我们对重庆农村商业银行整个设计体系的定位和思考,主要聚焦在两个维度,一是从定义体系风格感受本身出发,另一个是体系规范提升效率角度。重庆农商行设计目标:「创新、智能、简洁高效、安全可信」,基于这几个设计目标向上发展,设计原则、样式指南…这些内容构成了重庆农村商业银行设计体系的完整建设。

 

1.树立设计目标-驱动体系建设方针

 

无论是团队的设计模式或组织协同,都应该针对这个产品设计目标进行设计与优化迭代。优秀的设计体系中,不同的子产品体系会因为同样的目标而相互连接,保持一致,如果设计体系发生割裂,会导致不同子产品传递出来的设计感受不一致。

 

2.定义设计语言-建设品牌气质的传递

 

设计语言是设计样式传递出来给人的感受如何。比如两套结构相同的房子,传递出来的感受可以千差万别——一个温柔居家一个冰冷工业风。研究竞品会发现:大部分竞品缺少独特的品牌语言——用户很难区分彼此,无法激发用户对产品的兴趣。

重庆农商行企网希望提供什么样的形象与感受,现有的视觉设计语言能否让用户产生所预设的共鸣?因此差异化的品牌语言,能体现重庆农商行企网独有的品牌价值,在用户心智建立准确的品牌形象。首先,我们从品牌定位&品牌表现的维度来挖掘产品形象感受,在核心价值观、精神文化、情绪感受、视觉表现、特色亮点、交互体验,6个纬度对产品设计语言进行定位。

相应确定了产品“高端大气、品牌特色、简洁的、高效便捷”的视觉语言,并从各个层面定义产品,从各设计元素中挖掘产品的特性,来传达品牌特性。形成企业自我的设计生态语言。

基于产品进一步定义符合产品调性及功能诉求的色彩体系。标志性品牌主色体系(红、黑、金)的定义,能让用户一眼识别出产品调性,从同质化产品中脱颖而出。

通过品牌logo图形元素演变得到标志性图形“山、水、圆”贯穿到整个产品的 插画、功能入口等地方,增加符合化语言的透出率,提升品牌感知传递。

3.明确设计原则-清晰明确指导落地

 

在设计语言上相应延伸确定了产品“安全可控、高效便捷、清晰明确、简洁高端、自由灵动”的有效设计原则。并且,有效设计原则应该是实用的,不能仅给到团队一堆只是听起来不错关键词作为的设计原则,而应该提供可操作的具体建议。

下图中可以看到我们对原则的每一个要点都进行了具体的解释。同时我们针对设计原则也进行了优先级排序,当团队内关于设计评判有分歧时,可以以优先级来辅助判定设计方案的选择。

4.共享样式指南-清晰的使用指南

 

设计语言说明了设计整体感受,而样式指南的建立,帮助设计师、开发清楚如何使用,以降低组织协同的使用门槛。目前可以将样式指南梳理归纳为 “归类定义、应用规则、交互说明、应用举例”,形成一套企业内部的清晰明确的指南设计规范,方便后续进行统一的管理和使用扩展。

 

5.打造体系规范-提升组织协同效率

 

尝试通过流程化来收敛整个过程中的不确定性,提升重庆农商行体系组件生产和组织协同效率。这里就引出体系规范的建立,从而提升组织「协作流程」生产效率。

1)完整:完整的设计、技术资源

两端成套完整的设计、技术资源,将设计与开发者从重复劳动中释放出来。为了实现开发与设计之间的高效协同,「设计体系」 中包含了丰富可复用的设计组件资源,如色彩体系、文字系统、动效设计、图标元素、布局结构等。在前期我们收集业务中的界面,找出复用率高的组件和模块,并按照类型分类得出2类:界面组件库、运营组件库。创建出6个类型的界面组件,分别是:全局样式、基础组件、表单组件、反馈组件、模版组件、其他组件。

 

2)一致:一致的设计和开发体验

为了形成了协同中一致的设计、技术资源,将设计与开发者从重复劳动中释放出来。这里需要开发与设计同步进行组件的定义建立,打造设计、技术一致的组件库,方便后续实现改库全局改的一致性的设计+开发体验,以及生态扩张改组件就能快速创建新产品。

 

三、结语

 

总结一下,以上主要分享了从体系价值,到定义设计,最后实践组织协同,这是我们对设计体系化实践的基本思路。

 

——

 

参考文献:

https://www.uisdc.com/ant-design

https://mp.weixin.qq.com/s/ioCRUVQEZCQyyfdpfSsm0Q

https://www.zcool.com.cn/article/ZMTI2MTEwNA==.html

https://www.uisdc.com/tdesign

标签:, , ,