G產(chǎn)品體驗(yàn)的“設(shè)計(jì)語言” 實(shí)操案例：京東科技官網(wǎng)重塑深度解析》

感謝我們的設(shè)計(jì)師小伙伴們，一起“康康”吧～希望這次系列文章能夠幫助大家深刻認(rèn)知各個(gè)維度的設(shè)計(jì)驅(qū)動(dòng)與設(shè)計(jì)價(jià)值體現(xiàn)。

階段性升級(jí)背景

隨著原京東數(shù)科及智聯(lián)云兩大技術(shù)業(yè)務(wù)板塊整合，京東科技子集團(tuán)正式成立，成為整個(gè)京東集團(tuán)對(duì)外提供技術(shù)服務(wù)的核心輸出平臺(tái)。而京東云（JD Cloud）作為科技集團(tuán)統(tǒng)一的技術(shù)服務(wù)品牌，為了更好的聚焦品牌認(rèn)知，匹配公司戰(zhàn)略及業(yè)務(wù)應(yīng)用場(chǎng)景，京東云官網(wǎng)作為京東云對(duì)外的唯一官方門戶，進(jìn)行整體改造更新，對(duì)外部塑造一個(gè)煥然一新、體現(xiàn)新品牌風(fēng)格印象及認(rèn)知的概念。

先來看看我們改版后的線上頁面吧。

此前線上頁面為1年前設(shè)計(jì)版本，風(fēng)格及設(shè)計(jì)元素快速更迭互聯(lián)網(wǎng)背景下逐漸呈現(xiàn)落后趨勢(shì)，所以除了對(duì)結(jié)構(gòu)框架升級(jí)外，也重點(diǎn)針對(duì)品牌風(fēng)格做了全面升級(jí)。

結(jié)合業(yè)務(wù)側(cè)重點(diǎn)，清晰了解我們面對(duì)的受眾群體及特征，分析需要我們所提供的服務(wù)和產(chǎn)品。對(duì)官網(wǎng)首頁進(jìn)行結(jié)構(gòu)框架調(diào)整和內(nèi)容上更新。

因此，本次升級(jí)，我們需要從用戶、業(yè)務(wù)側(cè)、品牌設(shè)計(jì)側(cè)3個(gè)方面去思考：

用戶//

從瀏覽場(chǎng)景、用戶行為、內(nèi)容特征內(nèi)幾個(gè)方面去思考每個(gè)樓層布局內(nèi)容，運(yùn)用設(shè)計(jì)手段，有效傳達(dá)內(nèi)容、提升閱讀體驗(yàn)。

業(yè)務(wù)側(cè)//

將產(chǎn)品及解決方案價(jià)值點(diǎn) 清晰的呈現(xiàn)，對(duì)應(yīng)訪客搜索意圖，匹配需求。通過爆品推薦、產(chǎn)品服務(wù)、實(shí)際場(chǎng)景案例等方式引導(dǎo)訪客留咨。

官網(wǎng)設(shè)計(jì)側(cè)//

為打造專業(yè)性，提升新品牌形象，視覺的展現(xiàn)上需保證線京東科技品牌規(guī)范化與統(tǒng)一性，并圍ArtDeco設(shè)計(jì)語言為基礎(chǔ)進(jìn)行系統(tǒng)性整體升級(jí)，使線上所有頁面和諧統(tǒng)一的展示。

頁面風(fēng)格分析

結(jié)合目前我們線上首頁視覺樣式與調(diào)研結(jié)果，總結(jié)了以下目前存在的視覺問題：

存在問題：

1、缺乏好的視覺體驗(yàn)和產(chǎn)品差異化感受

由于我們京東科技品牌風(fēng)格成立，現(xiàn)首頁為1年前京東云風(fēng)格，設(shè)計(jì)風(fēng)格較陳舊，并缺乏京東科技品牌調(diào)性。

2、看完即走，轉(zhuǎn)化較低

用戶難以快速找到想要產(chǎn)品，樓層相似度較高，大量偏小文案堆積，閱讀性較弱。

如何進(jìn)行升級(jí)

在優(yōu)化頁面視覺風(fēng)格之前，通過收集一些資料查看目前的設(shè)計(jì)趨勢(shì)，以及通過國(guó)內(nèi)外多家競(jìng)品分析去探索設(shè)計(jì)方向。并進(jìn)行了幾輪腦暴，提煉定義科技-云品牌的關(guān)鍵詞等，最終定義：為了強(qiáng)化品牌形象，京東科技品牌旗下所有產(chǎn)品對(duì)外漏出一致性整體采用與京東科技官網(wǎng)風(fēng)格一致的3D視覺風(fēng)格。并從視覺構(gòu)成5大要素：版、色、質(zhì)、形、字，進(jìn)行視覺優(yōu)化。

1、Layout-頁面親密性與節(jié)奏感

版式親密性與節(jié)奏感在頁面信息層級(jí)關(guān)系的羅列展示非常重要，毫無節(jié)奏的長(zhǎng)頁面時(shí)用戶閱讀產(chǎn)生疲憊。

恰當(dāng)?shù)牟季?，可展示不同信息差異化，不但能提升用戶理解閱讀效率，也可給用戶傳達(dá)輕松愉悅感的心理感知。

在原首頁單一的上下結(jié)構(gòu)優(yōu)化為通欄大屏布局并插入左右結(jié)構(gòu)動(dòng)靜結(jié)合的板式，適當(dāng)?shù)拇驍嘤脩魹g覽視線，產(chǎn)生閱讀的節(jié)奏感。

重點(diǎn)模塊突出-同類相近，異類相遠(yuǎn)

分析業(yè)務(wù)側(cè)重點(diǎn)，提高運(yùn)營(yíng)位展示位置，使用戶首屏即可觸達(dá)活動(dòng)產(chǎn)品，增加更多曝光量，縮短用戶路徑，提升購買轉(zhuǎn)化。

并按照用戶閱讀順序模擬引導(dǎo)視線移動(dòng)方向（從左上角到右下角閱讀順序），進(jìn)行左圖右文的層級(jí)排版。

來自Attention Insigh眼動(dòng)儀模擬者熱點(diǎn)圖

并對(duì)產(chǎn)品、解決方案等模塊信息結(jié)構(gòu)重點(diǎn)優(yōu)化，對(duì)頁面結(jié)構(gòu)做了規(guī)范化的尺寸標(biāo)注，通過 10px 柵格規(guī)則來制定視覺體系的秩序，規(guī)范每個(gè)模塊之間的間距，統(tǒng)一同一字體字號(hào)的行高、間距，利用頁面留白及秩序井然的間距加強(qiáng)信息關(guān)聯(lián)性。根據(jù)業(yè)務(wù)場(chǎng)景配合與3D場(chǎng)景圖的代入感去吸引用戶。

2、Color-視覺情緒版

主色延續(xù)了京東科技品牌色紅色，輔助色黑白色、灰藍(lán)色，在此基礎(chǔ)上調(diào)整色彩明度，并規(guī)范顏色使用場(chǎng)景及配色比例。

色彩層級(jí)：通過主色調(diào)來突出引導(dǎo)性的控件和圖標(biāo)，從而強(qiáng)化產(chǎn)品的品牌感。

色彩易讀：文本和重要元素（如圖標(biāo)）在彩色背景上，應(yīng)符合易讀性的標(biāo)準(zhǔn)。

色彩表現(xiàn)：通過色相在使用場(chǎng)景上的表現(xiàn)，從而影響用戶的情緒和感受。

3、Texture-品牌DNA 3D元素

Banner作為整站流量引導(dǎo)，心智傳達(dá)最核心部分。針對(duì)現(xiàn)有用戶設(shè)備多數(shù)為寬大橫屏顯示器，故原版本寬度940px 小尺寸banner空間利用率較低，現(xiàn)升級(jí)為視覺沖擊力較強(qiáng)的1920px通屏banner設(shè)計(jì)。

同時(shí)保持與京東科技品牌對(duì)外的統(tǒng)一性，在質(zhì)感上采用統(tǒng)一3D設(shè)計(jì)語言規(guī)范，主視覺整體圖形結(jié)構(gòu)由主體、底座和輔助背景組成，以此結(jié)構(gòu)形成統(tǒng)一的視覺構(gòu)成。

基于產(chǎn)品類型3D Banner延伸針出日?；顒?dòng)對(duì) toB (商家用戶)和 toC(普通用戶) 的視覺情緒模板。

4、Shape-動(dòng)態(tài)ICON

產(chǎn)品icon設(shè)計(jì)中，強(qiáng)化識(shí)別及趣味性是本次優(yōu)化的重點(diǎn)，基于云產(chǎn)品的特殊性，設(shè)計(jì)圖標(biāo)目的是加強(qiáng)輔助用戶識(shí)別該產(chǎn)品，也是幫助用戶區(qū)分各產(chǎn)品重要的標(biāo)識(shí)。

本次優(yōu)化升級(jí)將原版本2.5D風(fēng)格升級(jí)為質(zhì)感較強(qiáng)的3D風(fēng)格。

在表現(xiàn)手法上為了增加整體趣味性引入動(dòng)效，并規(guī)范時(shí)長(zhǎng)規(guī)范時(shí)長(zhǎng)為40幀，（幀速率為30/1s）。以恰到好處，不過度設(shè)計(jì)，做到不增加操作，不干擾用戶，不超過1.5s的動(dòng)效設(shè)計(jì)理念。

5、Font-動(dòng)態(tài)ICON

重新定了頁面結(jié)構(gòu)的規(guī)范，字號(hào)、字色、字重、行高、間距，根據(jù)不同字號(hào)的標(biāo)題和行高間距，定義頁面的統(tǒng)一性對(duì)齊原則，帶給用戶舒適的閱讀體驗(yàn)。

總結(jié)

本次升級(jí)京東云首頁，通過對(duì)頁面信息架構(gòu)梳理及視覺表現(xiàn)層的重新定義，提高用戶閱讀使用體驗(yàn)，并在視覺上通過10px 柵格定制了視覺體系的秩序，banner部分首次嘗試C4D渲染大場(chǎng)景設(shè)計(jì)，與京東科技品牌保持了統(tǒng)一調(diào)性，提升了我們的品牌形象。

基于京東科技風(fēng)格進(jìn)行我們?cè)O(shè)計(jì)語言v2.0更新，將組件利用最大化，我們的目標(biāo)是通過我們后續(xù)不斷優(yōu)化迭代官網(wǎng)與組件的同時(shí)節(jié)省設(shè)計(jì)師時(shí)間成本，提高工作效率。未來京東云改版升級(jí)之旅會(huì)繼續(xù)進(jìn)行。

—— THE END —

?????? 粉絲福利：

1、大家點(diǎn)個(gè)“在看”，然后在【子牧UXD】公眾號(hào)后臺(tái)，回復(fù)“行業(yè)報(bào)告”即可免費(fèi)領(lǐng)取100+篇精選行業(yè)報(bào)告。

2、我們組織了專業(yè)的產(chǎn)品/交互/UI設(shè)計(jì)交流群，群內(nèi)有來自多位華為、阿里、百度、拼多多、騰訊、快手、美團(tuán)等一線大廠的設(shè)計(jì)專家，歡迎入群一起交流成長(zhǎng)。

3、掃描下方二維碼添加小編微信，即可拉你進(jìn)群。

與「6600+」讀者共同成長(zhǎng)

閱讀推薦》》

設(shè)計(jì)視角看B端和C端的差異化

2021-09-08