svg
no image

九江银行5.0设计改版

当前手机银行视觉风格老旧、交互控件不统一、交互链路长、交互体验不佳,各模块也存在一致性问题,故发起此次5.0的设计改版,优化UI视觉、交互体验,并引入银行IP加强品牌元素,。

角色

UX设计师

项目时间

2021年10月

前期分析

通过用户声音、体验自查,存在以下几个问题:

 

 

 
全新视觉

现有视觉风格满足不了年轻用户群体的审美诉求,新旧版本交替导致视觉界面体验不一致。伴随着产品服务体验不断升级,视觉风格也亟需进行升级。本次视觉升级围绕颜色年轻化、极简化布局、字体规范化、图标亲和力、情感化传达进行展开。

 

色彩年轻化

红蓝作为九江银行的品牌色,升级后持续强化品牌感知,同时在明度和饱和度做了优化,相比之前的沉闷,优化后整体更加活泼与透气。中性色作为贯穿整个产品的颜色,进行了规范化定制 ,让APP整体视觉更统一成体系。

 

 

 

极简化布局

旧版本页面采用通栏布局,呼吸感较差,内容层级不清晰。从产品的信息展示效率上考虑突出重要信息和功能,因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计,使之可以较好地聚合各类信息,更加有利于信息流内容的清晰展现。

 

 

 

圆形在人的视觉过程中更容易被认知,给人一种柔软治愈的感受,圆角的合理运用对容器来讲,会突显矩形内的内容,将用户的视线聚焦在内容本身。两个圆角矩形排列时更容易区分内容归属,模块化更强。

 

 

 

字体

规范字体的运用,为整体视觉风格一致性打好基础提升产品体验。

 

 

 

图标

1)识别性:颜色采用九江银行logo色种的红色,运用了叠加撞色的手法,打造独特的视觉语言,同时强化信息层级

2)功能性:通过设计上手法进行区分,例如:图标线性的表现形式

3)一致性:采用圆角,结合圆润视觉语言,统一视觉风格

4)美观性:整体视觉风格更加年轻,活泼

 

 

 

5)底部导航图标:修改选中状态下的图标为面性图标,让用户在切换时感知状态的变化。

 

 

 

情感化设计

在空状态设计上融入了品牌 IP 江豚设计元素,通过江豚趣味化的动作,缓解用户情绪焦虑的同时提升产品的辨识度,传达品牌温度。

 

 

 

 
应用场景
首页

 

 

财富

 

 

贷款

 

客群

 

 

活动

 

 

 

 
其他页面展示

 

 
设计沉淀

在设计的过程中,我们基于Sketch设计软件,搭建了一套九江银行移动端APP的设计组件,并相应的制定了设计规范。方便协同办公提升效能的同时保证全渠道体验一致性。

 

svg九银爱客
svg
svg下一篇文章