京東藍鯨徵信品牌及體驗升級

hi，今天給大家帶來京東藍鯨徵信的品牌以及體驗覆盤～

項目介紹

京東藍鯨徵信是一款SaaS產品，以企業信息查詢為入口，為用户提供多角度企業信息的查詢工具。

改版背景

當產品的目標用户羣發生了變化，舊版本從功能與體驗上都已經無法滿足新增的業務需求和良好的用户體驗。因此，從 品牌、視覺、產品體驗 方面做了升級優化。

梳理問題

改版前對全站功能進行了問題彙總、明確了產品核心訴求；對競品、關聯產品、相似品以及市面上主流網站進行體驗與視覺分析，再結合產品數據以及用户反饋聲音， 最終將梳理的問題歸納為3個方面： 品牌特徵缺失、信息層級不清晰、樣式不統一。

改版目 標

基於3個主要目標，開展改版設計：

一

增強品牌特徵

品牌屬性的增強可以表現在很多方面，在優先級的選擇上，最終把 色彩體系、Logo升級、輔助圖形 作為本次改版的重點。

通過對原生關鍵詞和衍生關鍵詞的收集，結合新的戰略目標和產品願景，新的品牌色選取了 科技感、數字化屬性更強 的顏色，向年輕化升級，滿足主流用户羣體的審美訴求。

1、品牌色

情緒版的梳理，也匯聚了一些靈感：簡約與剋制、遞進與包容，也正是我們希望給用户傳達的感覺。

基於舊版本色彩的基礎上，對顏色的飽和度、亮度做了提升：

1、色彩識別性更強，使用在圖標、文字上也更易識別；

2、做為背景色使用，文字信息易突出。

2、Logo色

運用HSB取色法則，在品牌色的基礎上，保持S(飽和度)、B(亮度)不變，改變H(色相)值得到的同色系色值。

3、狀態色

反饋成功及警戒提醒的顏色與用户心智保持一致：失敗-紅色系；警吿-橙色系；成功-綠色系，根據品牌色色值，用HSB取色法則得出3種狀態色。

4、中性色

中性色多用在文字、背景色、分割線、邊框等地方。結合了京東科技設計規範，最終中性色色值定義為：

5、logo升級

在對舊版logo元素進行刪減、合併後，利用圓形的內外切關係，繪製出了新版logo，與前面得出的logo色規範相結合，得到最終效果：

規範化製圖：

logo與標準字的大小比例和間距規範：

6、輔助圖形

輔助圖形應用在頁面元素、廣吿等場景中，更易凸顯品牌感。通過多種嘗試，最終選擇波浪紋為輔助圖形。

二

優化信息展示

1、首頁改版

從圖形、顏色、文字、結構、質感、交互動效等方面對舊版本做了問題梳理，確認改版方向。

首頁信息架構梳理

2、詳情頁改版

同樣通過形、色、質、構、質、交互動效等方面對舊版本做了問題梳理，比如：導航欄優化，融入品牌色調，區分信息層次等。

特色功能前置：通過對企業公開信息以及京東內部行為信息進行綜合評分，將分數分為5個檔區，分數越高，則企業綜合實力越強，更直觀的向用户展示企業綜合實力。

三

統一設計語言

1、曲率定義

京東藍鯨徵信向用户傳達多維、精準的信息，需要保持更加專業、嚴謹的態度。在頁面卡片、控件的選擇上，使用曲率更小的4px。

2、icon

舊版本icon存在的問題：

1、圖標構成、色彩體系不統一；

2、表意不清晰，視覺不夠突出。

3、字體

統一了 MAC OS、Windows系統字體選擇與調用順序、字號大小。

 

4、組件

通用組件庫的使用，與產研溝通更加靈活高效，提高開發還原精準度。

四

結語

以上是我關於項目改版的經驗總結。

體驗為王的時代，每一次升級優化，都是綜合考慮市場、調研、用户聲音、數據反饋等多方面因素。設計師除了產品、視覺、體驗層面的工作，還要多貼近和了解業務、多轉換視角，不斷尋找產品優化的方向，為打造一款優秀的產品持續探索。

最後，設計的道路上沒有最好，只有更好。

感謝大家認真讀到了這裏！

下次見～

伸出你可愛的手指給我們 點個贊 和 在看 唄

如果能 分享 就更好了