设计有财更自由,「轻质感」财富APP升级探索

设计有财更自由,「轻质感」财富APP升级探索 - 图1

本文字数2000字,预计5分钟读完

设计有财更自由,「轻质感」财富APP升级探索 - 图2

当“理财”走进你的生活,你是否想过这些:

“理财的初衷是为财产的稳定增值?为缓解现实的焦虑?还是为迈向心中的自由?”

“理财的路途中会让你感到快乐吗?”

“理财的体验上是否有一定的期待?

01 新的机遇,新的挑战

你是否会疑惑,支付宝APP里本身就有理财,那蚂蚁财富APP与它有什么区别吗?

我们先来看看,支付宝APP提供的功能从支付、到理财、到衣食住行,到公益等等,服务种类多理财只是其中之一,设计上需要以一种更为高效、整洁、合理、灵活的方式,把这些日常中频繁使用的内容&服务呈现出来,更适合习惯简单操作的用户使用。

而蚂蚁财富是「蚂蚁集团旗下」的一款纯理财APP,提供各类理财产品、自选资讯、市场行情解读、社区互动等特色功能,主要满足想要更全面和专业开启理财之路的用户使用。

设计有财更自由,「轻质感」财富APP升级探索 - 图3

首先,基于两者的定位和服务用户人群不同,在设计表达上应该要有差异性,但从上图可以看到两者在设计风格上比较趋同差异性小;

其次,随着蚂蚁财富APP的不断扩展,其功能和提供的服务越来越多,长期更新迭代带来的新老页面交替,基础体验参差不齐,缺乏明确的设计主张,设计老成、缺少活力;

同时用户也期待财富APP有更多与支付宝端不一样的服务和体验。我们来看看用户的真实声音:

“信息很挤,可以字体大一点吗?”

“和支付宝太像了”

“为啥很多元素长得不一样?”

“…..”

设计有财更自由,「轻质感」财富APP升级探索 - 图4

以此为契机,我们决定探索如何以设计之力,从设计理念到视觉语言,从品牌内核到体验统一,对财富APP进行整体的设计升级,提升用户好感度,同时通过设计体系升级来强化用户与产品的联结,褪去金融冰冷的外壳,实现具有品牌感的产品体验。

蚂蚁财富APP设计升级之旅……

探索视觉语言,是为了找到我们展开视觉设计的“根源”。

于品牌,每一个不同的场景,都能呈现出表现层的“内在”一致性。

于产品,每一次重新的设计,都能重新回到“源头”去思考,拥有一个可持续演绎的方向。

我们可能无法改变这场旅途的路程,但我们坚信、通过我们的努力,我们必定能让这场升级之旅变得丰富多彩。

设计有财更自由,「轻质感」财富APP升级探索 - 图5

02 设计升级,应运而生

在金融产品中,产品形态都已相对成熟,竞品同质化严重。因此,如何在金融产品中打造独特的品牌感知,并且兼顾产品的基础体验,是我们设计初期面临的最大困境。

财富特色设计语言

作为一个希望褪去金融产品冰冷的外壳,在第一印象及使用感受上建立专业的感知,沉淀金融理财的品牌印记来强化用户的认知和记忆,为用户打造品质感的使用体验,我们基于“形、色、质、构、动”五个方面提炼,来定义财富APP的特色视觉语言。

设计有财更自由,「轻质感」财富APP升级探索 - 图6

轻量纯粹:容易识别的图形

在表现手法上,我们从LOGO图形提取轻量化的基础图形作为元素符号,将图形从单一形态改成双色叠加,增强视觉比重,并对其进行精细化调整,使图形的边角柔和、圆润中又带有一丝沉稳,传递专业感的同时增强识别度:

设计有财更自由,「轻质感」财富APP升级探索 - 图7

设计有财更自由,「轻质感」财富APP升级探索 - 图8

温暖活力:暖色明亮的色彩

在颜色的使用上,我们不断调试构建了一套适合APP的色彩体系,在色环上延续支付宝蓝为品牌色,以H(色相)215°为起点,±15°为标准旋转,生成以偏明快、暖调的红、绿、橙为辅助色的24色色板,并以偏明快、暖调的红、绿、橙为辅助色,在少数地方强调和点缀使用。将色彩融入进生活的一丝温暖,削减以往使用色中冰冷的金融工具感:

设计有财更自由,「轻质感」财富APP升级探索 - 图9

虚实之美:细腻通透的质感

在满是扁平风格的境况下,我们大胆采用了新拟态的质感,希望能在扁平风格中打造一种有拟物层次与差异化的视觉体验,运用通透玻璃的磨砂材质打造真实之“实”&理想之“虚”,产生隐约之美,构建界面主次、虚实、冷暖的平衡感。

但为了避免元素喧宾夺主,削弱了质感的高光和投影,仅在核心操作上使用,即平衡了界面可读性,同时也使操作更具可点击感。

设计有财更自由,「轻质感」财富APP升级探索 - 图10

清晰舒适:通用灵活的结构

新版页面的结构形式多以“卡片式”为主,便于在不同场景的框架统一下各内容模块的灵活排布。通过加大字号和内容间距、增加留白空间等方式优化页面排版,强调视觉节奏,提升用户浏览信息的舒适性:

设计有财更自由,「轻质感」财富APP升级探索 - 图11

赋予趣味:惊喜愉悦的动效

在加载&为空的状态下,采用拟人化的金融元素,以更趣味和贴近生活的文案表达,同时增加微动效,使等待、提醒变得更有惊喜、有温度,降低用户在等待成本中的枯燥感,以情感化细节设计拉近金融产品与用户的距离,增强互动感和趣味性:

设计有财更自由,「轻质感」财富APP升级探索 - 图12

设计有财更自由,「轻质感」财富APP升级探索 - 图13

03 除此,迈向”黑”化之路

此外,为了APP更好的使用体验,我们还推进了暗黑模式设计,追求信息高效传达的同时保证信息的对比度和可读性,缓解用户的视觉压力,同时促成体验的一致:

  • 足够的颜色对比保证可读性

  • 避免大面积鲜艳色彩

  • 低透明度的可识别性

设计有财更自由,「轻质感」财富APP升级探索 - 图14

回归简单是新的起点

以上就是我们通过感知层上的视觉统一和品牌语言渗透,在金融产品设计中的严谨与活力中寻找平衡感,逐步强化用户的认知,与用户建立起一种可持续的、可信任的品牌安全感。

整体的升级刚刚开始,接下来我们还会持续的延续这个方向,进一步探索蚂蚁财富APP的特色,制定设计规范和完善迭代,新的起点,未来请期待我们带来更多创新与大家见面~

设计有财更自由,「轻质感」财富APP升级探索 - 图15

设计有财更自由,「轻质感」财富APP升级探索 - 图16