色彩作為用戶感知品牌的重要設計語言灰粮,也是快速占領用戶心智的視覺錘的重要組成部分。本次升級我們也回歸到最原始的問題:我們想給用戶傳遞什么品牌色忍坷。
基于市場調(diào)研 ,我們開始展開嘗試熔脂。做了幾次嘗試后我們發(fā)現(xiàn)佩研,紅色和藍色各有優(yōu)劣,我們團隊遇到了兩難抉擇霞揉。
但就用戶調(diào)研結(jié)果發(fā)現(xiàn)旬薯,紅色用戶對京東金融的第一印象就是“紅色”,而且金色也是他們認知里金融應該有的顏色适秩。
最終品牌色的確定不是依據(jù)主觀思考绊序,應該結(jié)合品牌調(diào)性、行業(yè)屬性及用戶感知多個緯度進行分析考證秽荞。
最終確定了京東金融 6.0 版本的品牌色為紅色和金色骤公。
如果在頁面中只使用品牌色,我們會發(fā)現(xiàn)各模塊相似度過低扬跋,信息傳遞方面表現(xiàn)較差阶捆。
引入輔助色后,各模塊區(qū)分明確钦听,且保證了后期的應用擴展性洒试。
最終根據(jù)確定品牌色、輔助色及其顏色系統(tǒng)朴上。
本次除了品牌 Logo 垒棋、顏色系統(tǒng)升級以外,UI界面也全面升級痪宰。融入了品牌基因的同時叼架,布局架構(gòu)及功能模塊也進行重組。
第一部分是將品牌符號應用到 UI 中酵镜。
不能將品牌符號直接生硬的放進 UI 碉碉,第一會影響到信息的辨識度,干擾主要信息淮韭。第二會導致品牌元素信息缺失垢粮,比如元素被切割。
為了避免上述情況靠粪,首先我們制定了品牌符號的使用規(guī)范蜡吧。在保證品牌識別性的同時毫蚓,找到 UI 中可以植入的部分。此外還要保證信息和圖形之間的比例昔善,根據(jù)信息優(yōu)化形態(tài)和位置元潘。
同時在不同信息模塊中,測試飽和度及位置君仆。
接下來是對 UI 界面架構(gòu)的統(tǒng)一度處理翩概。
首先,舊版頁面頻道頁的差異比較大返咱,用戶的認知成本比較高钥庇。
新版進行了模塊的重新梳理,并注意信息降噪咖摹,帶來更好的體驗评姨。
最后,針對于組件系統(tǒng)進行歸納和整理萤晴。
金融類組件系統(tǒng)一般會包含以下四個方面內(nèi)容吐句。
同一個sku的三種不同形態(tài)。
不同形式的sku適用于不同場景店读。A對應的是在聚合頁面中的表現(xiàn)形式嗦枢,完成信息簡單高效的呈現(xiàn)墓赴,并完成快速導流的目的悼嫉。B對應的是垂類產(chǎn)品頁面,可以更詳細的展示商品信息拒炎,主標題和副標題的字段承載能力更強裹纳。方便用戶進行比較和抉擇择葡。C對應的是需要特殊強化的戰(zhàn)略級產(chǎn)品,這些組件都是可以配合使用的剃氧,方便區(qū)分主副層級敏储。
此外還對其他模塊進行了組件化。