2020年上半年我們對京東國際頻道進(jìn)行了品牌視覺的全新升級，希望通過品牌強(qiáng)化及體驗(yàn)升級兩個(gè)方向?qū)崿F(xiàn)加強(qiáng)正品心智，提升頻道訪問量，品牌強(qiáng)化的業(yè)務(wù)目標(biāo)。

友商案例分析：

項(xiàng)目背景

京東國際頻道流量較低，用戶對國際品牌尚未形成正品心智和購買習(xí)慣。2020年為了更好的承接更多來自黃金流程和全站的流量，為周年慶和618提供更豐富的運(yùn)營支持，需要對頻道進(jìn)行改版。

1. 舊版頁面

2. 競品分析

3. 目標(biāo)用戶

“ 設(shè)計(jì)機(jī)會點(diǎn) ”

通過用研報(bào)告我們發(fā)現(xiàn)，京東國際的目標(biāo)用戶群中，女性用戶占多數(shù)，結(jié)合所收集到的相關(guān)競品信息，因此在與業(yè)務(wù)產(chǎn)品溝通中設(shè)計(jì)側(cè)提出可更多關(guān)注女性，考慮女性用戶需求，以美妝、個(gè)護(hù)、食品、母嬰和時(shí)尚為主 ；并且在整體的頻道設(shè)計(jì)風(fēng)格中需關(guān)注年輕時(shí)尚且追逐品質(zhì)化的傾向，升級整個(gè)頻道的視覺調(diào)性。

設(shè)計(jì)探索

1. 設(shè)計(jì)定位

2. 品牌關(guān)鍵詞探索

在設(shè)計(jì)探索之初，我們召集了團(tuán)隊(duì)內(nèi)設(shè)計(jì)師共同進(jìn)行了頭腦風(fēng)暴。暢聊了每個(gè)人心目中所理解的“國際”感的產(chǎn)品，以及心目中可用簡單的詞匯或圖形化描述的相關(guān)國際元素。 此處感謝@黃松偉老師給予的設(shè)計(jì)指導(dǎo)~

3. 品牌關(guān)鍵詞提取

通過產(chǎn)品定位分析，結(jié)合頭腦風(fēng)暴中大家碰撞出的靈感“碎片”，我們最終提煉了以下幾個(gè)關(guān)鍵詞：

4. 根據(jù)關(guān)鍵詞探索衍生情緒圖

設(shè)計(jì)目標(biāo)

在舊版分析中也提到，頻道的整體設(shè)計(jì)風(fēng)格缺乏品牌調(diào)性，缺少可以讓用戶記憶的品牌元素，無法建立對京東國際的品牌認(rèn)知；并且視覺信息層級混亂，設(shè)計(jì)規(guī)范性差，設(shè)計(jì)溝通維護(hù)成本高。

結(jié)合前期對用戶及競品的分析，以及一系列設(shè)計(jì)的探索，因此我們確定將從「品牌強(qiáng)化」及「體驗(yàn)升級」兩個(gè)方向進(jìn)行京東國際頻道的品牌視覺全新升級，實(shí)現(xiàn)加強(qiáng)正品心智，提升頻道訪問量，品牌強(qiáng)化的業(yè)務(wù)目標(biāo)。

1. 品牌符號 / SYMBOL

在整個(gè)京東國際品牌塑造的過程中，我們一直在思考如何創(chuàng)建京東國際頻道專屬的品牌符號？并為此邀請了組內(nèi)的所有設(shè)計(jì)師進(jìn)行了多輪腦暴及圖形的繪制和評選。

這部分也是整個(gè)品牌升級過程中的設(shè)計(jì)挑戰(zhàn)，推翻現(xiàn)有設(shè)計(jì)是一件具有風(fēng)險(xiǎn)的事情，因?yàn)樵鹊脑O(shè)計(jì)元素已具備一定的識別度；考慮到整個(gè)品牌元素的翻新對用戶剛剛建立的認(rèn)知度影響，這部分內(nèi)容仍在持續(xù)推進(jìn)中

整個(gè)過程中總共腦暴產(chǎn)出100+的品牌符號，也感謝在這過程中提供腦細(xì)胞的大家~

最終，在向頻道產(chǎn)品及業(yè)務(wù)團(tuán)隊(duì)溝通時(shí)分別輸出了兩個(gè)方向的提案：

2. 色彩體系 / COLOR

品牌色 “紫”氣“東”來

京東國際的品牌色在18年及19年分別因品牌名稱的變換進(jìn)行過重新定義；18年的品牌色結(jié)合當(dāng)時(shí)的海豚形象整體偏粉嫩，19年的品牌色偏深紅。兩者均區(qū)別于京東app主站的品牌色，但業(yè)務(wù)反饋女性化特征過于顯性，且深紅色的感知會顯得沉穩(wěn)老氣。

基于初期對京東國際腦暴而得的關(guān)鍵詞，以及相關(guān)的情緒圖，結(jié)合京東國際的用戶畫像(以一二線城市，高學(xué)歷高收入追求品質(zhì)生活女性用戶為主），對比色彩情緒，我們最終將京東國際的品牌色更新為偏中性更品質(zhì)和優(yōu)雅的紫色。在視覺細(xì)節(jié)上，將原先版本的飽和度提高，增強(qiáng)了色彩的對比，并且基于品牌色確定衍生色，用于后續(xù)相關(guān)的延展使用。

輔助色 “豐富”斑斕

每一個(gè)顏色對應(yīng)的漸變色，可用于圖標(biāo)及各品類在界面上的呈現(xiàn)，引導(dǎo)用戶識別，力求打造輕質(zhì)感親和自然的精致品質(zhì)。

3. 字體體系 / FONT

舊版的首頁中雖用了京東朗正體作為樓層標(biāo)題，但由于該字體字形的緣故，在重復(fù)出現(xiàn)時(shí)會顯得標(biāo)題小且不易識別；新版首頁中保留了頻道logo中母品牌字體基因，將各樓層標(biāo)題調(diào)整為蘋方，此字體是移動端常用的文字，棱角分明，干凈利落，具有品質(zhì)感。

在文字層級梯度上用拉開字重及字號比例來提高內(nèi)容的可讀性，文字用色部分在原有基礎(chǔ)上提高了純度，整體界面重點(diǎn)更突出，使層次更強(qiáng)烈，更快吸引眼球。

4. 柵格體系 / GRID

舊版頁面模塊布局割裂, 屏效低，上下左右的間距不統(tǒng)一，視角噪音大，缺乏產(chǎn)品調(diào)性，造成產(chǎn)品缺少品質(zhì)感，從而也降低了用戶的信任度。本次的品牌視覺升級重新定義了柵格系統(tǒng)，希望通過骨骼重構(gòu)賦予各個(gè)視覺元素以秩序感，在提升坪效的同時(shí)，使頁面布局更加統(tǒng)一。

圓角卡片

在走查完舊版視覺布局以及對當(dāng)下流行的UI風(fēng)格調(diào)研后，我們將各模塊間的間距進(jìn)行統(tǒng)一，采用更圓潤的圓角處理。更圓潤的圓角能夠體現(xiàn)柔和及年輕化，與當(dāng)下硬件設(shè)計(jì)靠齊。

結(jié)構(gòu)透氣

通過將各樓層從內(nèi)容上進(jìn)行重組，削弱頁面的分割，使層級上更加清晰，同時(shí)增加空間的利用率，在大卡片部分統(tǒng)一橫向及縱向的間距，在小卡片時(shí)收攏間距，使之更為整體性。在保證視覺呼吸感的同時(shí)，提升整體瀏覽順暢度。減少界面中過于復(fù)雜的裝飾元素，使頻道更輕量化、精致感。

5. 圖標(biāo)體系 / ICON

百寶箱圖標(biāo)

舊版的百寶箱圖標(biāo)均為異性擬物風(fēng)，如需替換設(shè)計(jì)成本高，難以實(shí)現(xiàn)規(guī)范化；且業(yè)務(wù)類圖標(biāo)及品類圖片區(qū)分不明顯，無法從視覺上直觀辨別。新版在規(guī)范統(tǒng)一背景色值后做統(tǒng)一處理，并選用了實(shí)物圖片，品類屬性一目了然。

底部導(dǎo)航圖標(biāo)

舊版底部導(dǎo)航圖標(biāo)均為直角處理，會顯得生硬，且部分圖標(biāo)的語義并不符合。

新版圖標(biāo)采取斷點(diǎn)式風(fēng)格，在轉(zhuǎn)角處做圓潤倒角處理，與主站首頁風(fēng)格保持統(tǒng)一的前提下也延續(xù)了頻道的整體調(diào)性。

6. 規(guī)范體系 / GUIDELINE