京東金融 6.0 改版升級設計(下)

接上篇 京東金融 6.0 改版升級設計(上)

色彩作爲用戶感知品牌的重要設計語言,也是快速佔領用戶心智的視覺錘的重要組成部分。本次升級我們也迴歸到最原始的問題:我們想給用戶傳遞什麼品牌色。

基於市場調研 ,我們開始展開嘗試。做了幾次嘗試後我們發現,紅色和藍色各有優劣,我們團隊遇到了兩難抉擇。

但就用戶調研結果發現,紅色用戶對京東金融的第一印象就是“紅色”,而且金色也是他們認知裏金融應該有的顏色。

最終品牌色的確定不是依據主觀思考,應該結合品牌調性、行業屬性及用戶感知多個緯度進行分析考證。

最終確定了京東金融 6.0 版本的品牌色爲紅色和金色。

如果在頁面中只使用品牌色,我們會發現各模塊相似度過低,信息傳遞方面表現較差。

引入輔助色後,各模塊區分明確,且保證了後期的應用擴展性。

最終根據確定品牌色、輔助色及其顏色系統。

本次除了品牌 Logo 、顏色系統升級以外,UI界面也全面升級。融入了品牌基因的同時,佈局架構及功能模塊也進行重組。

第一部分是將品牌符號應用到 UI 中。

不能將品牌符號直接生硬的放進 UI ,第一會影響到信息的辨識度,干擾主要信息。第二會導致品牌元素信息缺失,比如元素被切割。

爲了避免上述情況,首先我們制定了品牌符號的使用規範。在保證品牌識別性的同時,找到 UI 中可以植入的部分。此外還要保證信息和圖形之間的比例,根據信息優化形態和位置。

同時在不同信息模塊中,測試飽和度及位置。

接下來是對 UI 界面架構的統一度處理。

首先,舊版頁面頻道頁的差異比較大,用戶的認知成本比較高。

新版進行了模塊的重新梳理,並注意信息降噪,帶來更好的體驗。

最後,針對於組件系統進行歸納和整理。

金融類組件系統一般會包含以下四個方面內容。

同一個sku的三種不同形態。

不同形式的sku適用於不同場景。A對應的是在聚合頁面中的表現形式,完成信息簡單高效的呈現,並完成快速導流的目的。B對應的是垂類產品頁面,可以更詳細的展示商品信息,主標題和副標題的字段承載能力更強。方便用戶進行比較和抉擇。C對應的是需要特殊強化的戰略級產品,這些組件都是可以配合使用的,方便區分主副層級。

此外還對其他模塊進行了組件化。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章