Copyright © 2024 Chris's Design 备案号:陕ICP备2024042440号
当前手机银行视觉风格老旧、交互控件不统一、交互链路长、交互体验不佳,各模块也存在一致性问题,故发起此次5.0的设计改版,优化UI视觉、交互体验,并引入银行IP加强品牌元素,。
UX设计师
2021年10月
通过用户声音、体验自查,存在以下几个问题:
现有视觉风格满足不了年轻用户群体的审美诉求,新旧版本交替导致视觉界面体验不一致。伴随着产品服务体验不断升级,视觉风格也亟需进行升级。本次视觉升级围绕颜色年轻化、极简化布局、字体规范化、图标亲和力、情感化传达进行展开。
色彩年轻化
红蓝作为九江银行的品牌色,升级后持续强化品牌感知,同时在明度和饱和度做了优化,相比之前的沉闷,优化后整体更加活泼与透气。中性色作为贯穿整个产品的颜色,进行了规范化定制 ,让APP整体视觉更统一成体系。
极简化布局
旧版本页面采用通栏布局,呼吸感较差,内容层级不清晰。从产品的信息展示效率上考虑突出重要信息和功能,因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计,使之可以较好地聚合各类信息,更加有利于信息流内容的清晰展现。
圆形在人的视觉过程中更容易被认知,给人一种柔软治愈的感受,圆角的合理运用对容器来讲,会突显矩形内的内容,将用户的视线聚焦在内容本身。两个圆角矩形排列时更容易区分内容归属,模块化更强。
字体
规范字体的运用,为整体视觉风格一致性打好基础提升产品体验。
图标
1)识别性:颜色采用九江银行logo色种的红色,运用了叠加撞色的手法,打造独特的视觉语言,同时强化信息层级
2)功能性:通过设计上手法进行区分,例如:图标线性的表现形式
3)一致性:采用圆角,结合圆润视觉语言,统一视觉风格
4)美观性:整体视觉风格更加年轻,活泼
5)底部导航图标:修改选中状态下的图标为面性图标,让用户在切换时感知状态的变化。
情感化设计
在空状态设计上融入了品牌 IP 江豚设计元素,通过江豚趣味化的动作,缓解用户情绪焦虑的同时提升产品的辨识度,传达品牌温度。
首页
财富
贷款
客群
活动
在设计的过程中,我们基于Sketch设计软件,搭建了一套九江银行移动端APP的设计组件,并相应的制定了设计规范。方便协同办公提升效能的同时保证全渠道体验一致性。