京东金融 6.0 改版升级设计(下)

色彩作为用户感知品牌的重要设计语言,也是快速占领用户心智的视觉锤的重要组成部分。本次升级我们也回归到最原始的问题:我们想给用户传递什么品牌色。

基于市场调研 ,我们开始展开尝试。做了几次尝试后我们发现,红色和蓝色各有优劣,我们团队遇到了两难抉择。

但就用户调研结果发现,红色用户对京东金融的第一印象就是“红色”,而且金色也是他们认知里金融应该有的颜色。

最终品牌色的确定不是依据主观思考,应该结合品牌调性、行业属性及用户感知多个纬度进行分析考证。

最终确定了京东金融 6.0 版本的品牌色为红色和金色。

如果在页面中只使用品牌色,我们会发现各模块相似度过低,信息传递方面表现较差。

引入辅助色后,各模块区分明确,且保证了后期的应用扩展性。

最终根据确定品牌色、辅助色及其颜色系统。

本次除了品牌 Logo 、颜色系统升级以外,UI界面也全面升级。融入了品牌基因的同时,布局架构及功能模块也进行重组。

第一部分是将品牌符号应用到 UI 中。

不能将品牌符号直接生硬的放进 UI ,第一会影响到信息的辨识度,干扰主要信息。第二会导致品牌元素信息缺失,比如元素被切割。

为了避免上述情况,首先我们制定了品牌符号的使用规范。在保证品牌识别性的同时,找到 UI 中可以植入的部分。此外还要保证信息和图形之间的比例,根据信息优化形态和位置。

同时在不同信息模块中,测试饱和度及位置。

接下来是对 UI 界面架构的统一度处理。

首先,旧版页面频道页的差异比较大,用户的认知成本比较高。

新版进行了模块的重新梳理,并注意信息降噪,带来更好的体验。

最后,针对于组件系统进行归纳和整理。

金融类组件系统一般会包含以下四个方面内容。

同一个sku的三种不同形态。

不同形式的sku适用于不同场景。A对应的是在聚合页面中的表现形式,完成信息简单高效的呈现,并完成快速导流的目的。B对应的是垂类产品页面,可以更详细的展示商品信息,主标题和副标题的字段承载能力更强。方便用户进行比较和抉择。C对应的是需要特殊强化的战略级产品,这些组件都是可以配合使用的,方便区分主副层级。

此外还对其他模块进行了组件化。

