色彩作爲用戶感知品牌的重要設計語言,也是快速佔領用戶心智的視覺錘的重要組成部分。本次升級我們也迴歸到最原始的問題:我們想給用戶傳遞什麼品牌色。
基於市場調研 ,我們開始展開嘗試。做了幾次嘗試後我們發現,紅色和藍色各有優劣,我們團隊遇到了兩難抉擇。
但就用戶調研結果發現,紅色用戶對京東金融的第一印象就是“紅色”,而且金色也是他們認知裏金融應該有的顏色。
最終品牌色的確定不是依據主觀思考,應該結合品牌調性、行業屬性及用戶感知多個緯度進行分析考證。
最終確定了京東金融 6.0 版本的品牌色爲紅色和金色。
如果在頁面中只使用品牌色,我們會發現各模塊相似度過低,信息傳遞方面表現較差。
引入輔助色後,各模塊區分明確,且保證了後期的應用擴展性。
最終根據確定品牌色、輔助色及其顏色系統。
本次除了品牌 Logo 、顏色系統升級以外,UI界面也全面升級。融入了品牌基因的同時,佈局架構及功能模塊也進行重組。
第一部分是將品牌符號應用到 UI 中。
不能將品牌符號直接生硬的放進 UI ,第一會影響到信息的辨識度,干擾主要信息。第二會導致品牌元素信息缺失,比如元素被切割。
爲了避免上述情況,首先我們制定了品牌符號的使用規範。在保證品牌識別性的同時,找到 UI 中可以植入的部分。此外還要保證信息和圖形之間的比例,根據信息優化形態和位置。
同時在不同信息模塊中,測試飽和度及位置。
接下來是對 UI 界面架構的統一度處理。
首先,舊版頁面頻道頁的差異比較大,用戶的認知成本比較高。
新版進行了模塊的重新梳理,並注意信息降噪,帶來更好的體驗。
最後,針對於組件系統進行歸納和整理。
金融類組件系統一般會包含以下四個方面內容。
同一個sku的三種不同形態。
不同形式的sku適用於不同場景。A對應的是在聚合頁面中的表現形式,完成信息簡單高效的呈現,並完成快速導流的目的。B對應的是垂類產品頁面,可以更詳細的展示商品信息,主標題和副標題的字段承載能力更強。方便用戶進行比較和抉擇。C對應的是需要特殊強化的戰略級產品,這些組件都是可以配合使用的,方便區分主副層級。
此外還對其他模塊進行了組件化。