大廠的設(shè)計(jì)改版流程是怎樣的？本文從京東云的視覺改版案例出發(fā)，手把手帶你認(rèn)識(shí)完整系統(tǒng)的改版流程。

一、升級背景

1. 京東云官網(wǎng)作為京東云對外唯一官方門戶，并承載整個(gè)云業(yè)務(wù)售前及售中的核心渠道，是用戶接觸京東云的首要渠道；
2. 京東云作為京東科技集團(tuán)統(tǒng)一的技術(shù)服務(wù)品牌，線上頁面風(fēng)格元素在快速更迭互聯(lián)網(wǎng)背景下較落后，所以本次視覺設(shè)計(jì)重要使命之一是探索前沿的設(shè)計(jì)趨勢，對京東云品牌風(fēng)格進(jìn)行全新升級；
3. 隨著京東云的不斷發(fā)展，用戶群體擴(kuò)大及用戶需求的變更，原有官網(wǎng)內(nèi)容架構(gòu)單一無法打動(dòng)用戶查看轉(zhuǎn)化，需針對現(xiàn)有用戶瀏覽和閱讀習(xí)慣對官網(wǎng)首頁內(nèi)容進(jìn)行結(jié)構(gòu)上的調(diào)整和更新。

京東云官網(wǎng)平臺(tái)的產(chǎn)品是聯(lián)系用戶的載體，平臺(tái)提供產(chǎn)品、服務(wù)、輸出各種信息，用戶通過我們的官網(wǎng)獲取各種信息，咨詢對比服務(wù)等，從而最終購買我們的產(chǎn)品。

二、設(shè)計(jì)分析

1. 發(fā)現(xiàn)設(shè)計(jì)問題

舊版首頁與產(chǎn)品詳情頁面

首先是設(shè)計(jì)分析，因?yàn)橹挥邪l(fā)現(xiàn)了平臺(tái)現(xiàn)有問題，挖掘用戶痛點(diǎn)，才能有方向有思路去解決它；

首頁：最重要的首屏信息量很大，有主推的廣告位、特價(jià)產(chǎn)品展示、KA 品牌案例展示等，設(shè)計(jì)初期考慮充分利用首屏空間，展示更多使其抓住用戶感興趣內(nèi)容點(diǎn)，最終形成有效轉(zhuǎn)化。上線完成后通過數(shù)據(jù)對比首屏除 Banner 區(qū)域外，其它信息點(diǎn)擊率較低，我們提供了這么多信息在首屏是用戶想看的嗎？

產(chǎn)品詳情頁：內(nèi)容空洞沒有任何產(chǎn)品的優(yōu)勢價(jià)值體現(xiàn)，一堆文本排列但提供給用戶有效信息少之又少。

問題走查

通過內(nèi)部走查及外部調(diào)研匯總的結(jié)果來看，問題主要集中在：體驗(yàn)差、不好找、看不懂、缺少量化標(biāo)準(zhǔn)這 4 類，比如：行業(yè)屬性不突出、科技感不足、首頁過于促銷化、內(nèi)容單一等等問題。

2. 確定優(yōu)化目標(biāo)

有了上述提出的一些問題，就要去解決它，從體驗(yàn)設(shè)計(jì)出發(fā)，確定優(yōu)化目標(biāo)。

從現(xiàn)有問題中進(jìn)行拆解，比如上圖左側(cè)為提出的問題，右邊是通過問題進(jìn)行設(shè)定的目標(biāo)。

如"網(wǎng)站缺少科技技術(shù)元素、貨架營銷感重"，通過強(qiáng)化科技屬性增加動(dòng)效、交互形式，突出科技元素；

如"內(nèi)容展示無重點(diǎn)不利于閱讀"，通過走查競品看競品是如何展示的，我們?nèi)绾卧傧蚯耙徊秸故咀陨淼奶厣珡亩町惢故荆?/p>

3. 用戶分析

大部分 B 端平臺(tái)用戶基本分 3 類：

第 1 類：潛在大企業(yè)用戶，到訪目的是搜尋、調(diào)研可靠長期的服務(wù)/產(chǎn)品；

第 2 類：潛在中、小企業(yè)用戶，到訪目的可能是搜尋比較低成本的服務(wù)/產(chǎn)品；

第 3 類：潛在行業(yè)個(gè)人從業(yè)者，到訪目的是搜尋比較廉價(jià)/短期服務(wù)/產(chǎn)品或個(gè)人測試使用；

京東云用戶群體主要是面向：中小企業(yè)、個(gè)人開發(fā)者、以及一些高校學(xué)生使用。

中小企業(yè)很多是因?yàn)樾湃尉〇|品牌而來的，是帶有一定的信任感，關(guān)注的產(chǎn)品是否穩(wěn)定安全、使用過程中有問題售后是否能夠快速得到響應(yīng)。

個(gè)人開發(fā)者及高校學(xué)習(xí)，除安全穩(wěn)定外，更多追求的是物美價(jià)廉。

因此，設(shè)計(jì)中我們需要考慮如何給用戶傳遞出：安全、技術(shù)、服務(wù)、信賴的感覺。

4. 設(shè)計(jì)關(guān)鍵詞

① 頭腦風(fēng)暴

設(shè)計(jì)之前小組進(jìn)行了幾輪腦暴，結(jié)合自身品牌、用戶分析、產(chǎn)品功能特點(diǎn)，由小組人員討論："你認(rèn)為的京東云"應(yīng)該有哪些關(guān)鍵詞組成？

關(guān)鍵詞查找

57 人投票結(jié)果

并進(jìn)行二次篩選、線上線下各部門不同人員投票、總結(jié)，最終得出：數(shù)智、生態(tài)、供應(yīng)鏈、安全等關(guān)鍵詞。

② 關(guān)鍵詞拆解

通過系列關(guān)鍵詞和行業(yè)特征，從我們面向的中小企、各類產(chǎn)業(yè)、城市的新視角為核心"數(shù)智化"作為第一個(gè)關(guān)鍵詞；

從決策鏈路和用戶分析我們總結(jié)了第二個(gè)關(guān)鍵詞"安全"；基于新生態(tài)搭建的愿景和定位，我們總結(jié)了第 3 個(gè)關(guān)鍵詞"供應(yīng)鏈"。

其次是關(guān)鍵詞轉(zhuǎn)化，落地我們視覺上如何表達(dá)這幾個(gè)關(guān)鍵詞呢？

首先是數(shù)智化：顧名思義就是數(shù)字+智能，由此可以轉(zhuǎn)化為科技；

如何表達(dá)安全呢？讓用戶對我們的品牌形成信賴，在定義頁面顏色時(shí)增加自然暖色，盡量減少使用深色系，采用淺色作為背景，減少與用戶之間距離感；

供應(yīng)鏈：鏈接各個(gè)渠道搭建整個(gè)生態(tài)場景。

③ 收集情緒版

情緒版的目的是輔助展現(xiàn)最終視覺表達(dá)效果，幫助設(shè)計(jì)師找到合適的視覺演進(jìn)方向。根據(jù)搜集的情緒版，對設(shè)計(jì)關(guān)鍵詞有大概的表達(dá)視覺意向。

數(shù)智化-科技：我們對于科技的理解是未來的、智能的，所以定位的視覺表現(xiàn)為：空間的通透以及一些超現(xiàn)實(shí)的表現(xiàn)技法；圖形元素用一些簡單的幾何圖形；然后適當(dāng)增加動(dòng)效來增強(qiáng)對科技感的詮釋。

安全-信賴：安全的最高境界是信賴，讓用戶感覺安全舒適，所有的元素要貼近自然，符合大眾對于安全的認(rèn)知。減少使用較深的顏色，減少使用較尖銳的形狀，對于材質(zhì)的使用也偏向于柔和，盡量為用戶呈現(xiàn)出輕松放松的感覺。

供應(yīng)鏈-場景：作為鏈接整個(gè)供應(yīng)鏈和整個(gè)生態(tài)的橋梁紐帶，我們希望做到的是共贏，而我們也是希望在這過程中，能夠表達(dá)出友好的態(tài)度來面向所有人，給需求多樣化的企業(yè)提供開放共生打造更有活力的生態(tài)場景。

通過情緒版提取視覺應(yīng)用部分，最終視覺風(fēng)格基調(diào)為：輕盈、微質(zhì)感的淺色科技風(fēng)格；通過 3D 幾何、發(fā)光鏈接、透明空間進(jìn)行"形"的組合。

5. 視覺探索

在進(jìn)行視覺執(zhí)行過程中并非一蹴即至，而是不斷改進(jìn)調(diào)整，視覺元素與畫面場景呈現(xiàn)比例、主次層級也需不斷探索和演進(jìn)。

經(jīng)過初步視覺探索、討論，我們發(fā)現(xiàn)場景模型離理想差距較大，重點(diǎn)突出供應(yīng)鏈主題、但缺少行業(yè)特性及科技感、主次層級關(guān)系模糊、難以及形成規(guī)范化的設(shè)計(jì)語言，所以不能完全滿足設(shè)計(jì)目標(biāo)；

既然有了改動(dòng)方向與目標(biāo)下個(gè)階段融入產(chǎn)品與科技結(jié)合的場景，將更多的供應(yīng)鏈元素融入到背景。突出主題產(chǎn)品，弱化輔助元素，使"形"更輕盈精細(xì)化的質(zhì)感與行業(yè)屬性。

根據(jù)初稿進(jìn)行修改討論敲定設(shè)計(jì)方案：實(shí)現(xiàn)主元素與畫面場景呈現(xiàn)比例、主次層級優(yōu)化。

產(chǎn)品主圖形：用于單個(gè)產(chǎn)品時(shí)即簡化底座即可。

模型：要求干脆、嚴(yán)謹(jǐn)，將虛擬云形象進(jìn)行具象表達(dá)。

畫面最終以輕盈、微質(zhì)感的淺色科技風(fēng)，通過 3D 幾何、發(fā)光鏈接、透明空間進(jìn)行"形"的組合。達(dá)到了我們的初期目標(biāo)。

6. 動(dòng)效設(shè)計(jì)

本次官網(wǎng) Banner 及產(chǎn)品矩陣樓層嘗試引入動(dòng)效設(shè)計(jì)，在確保動(dòng)效的必要性與合理性上，我們在動(dòng)效設(shè)計(jì)上保持了克制，僅通過背景鏡頭劇場式轉(zhuǎn)角變化、數(shù)據(jù)光效流動(dòng)傳輸、產(chǎn)品主題慢節(jié)奏微動(dòng)效的恰當(dāng)變化，對用戶進(jìn)行弱打擾的視覺引導(dǎo)，將虛擬云計(jì)算進(jìn)行更進(jìn)一步豐富的場景式具象表達(dá)。

產(chǎn)品 icon 設(shè)計(jì)中，強(qiáng)化識(shí)別及趣味性是本次優(yōu)化的重點(diǎn)，在表現(xiàn)手法上為了增加整體趣味性引入動(dòng)效，并規(guī)范時(shí)長規(guī)范時(shí)長為 24 幀。

以恰到好處，不過度設(shè)計(jì)，做到不增加操作，不干擾用戶的動(dòng)效設(shè)計(jì)理念。

產(chǎn)品圖標(biāo)動(dòng)效：等角透視，光線顏色材質(zhì)比例保持統(tǒng)一

落地到頁面上最終方案敲定：整體頁面為了呼應(yīng)主視覺風(fēng)格質(zhì)感，功能圖標(biāo)使用了毛玻璃風(fēng)格、模塊背景及部分動(dòng)效使用彌散光感做漸變模糊，目的是打造產(chǎn)品記憶點(diǎn)、優(yōu)化信息層級，這樣使之頁面保持整體感與統(tǒng)一感。

三、視覺延伸與規(guī)范

1. 布局規(guī)范化

為用戶在不同終端的提供更加舒適的界面和適配規(guī)則，官網(wǎng)采用響應(yīng)式布局 RESPONSIVE WEB DESIGN 簡稱為 RWD，可以讓網(wǎng)頁自動(dòng)的適應(yīng)不同尺寸的顯示器。

為了提高線上各產(chǎn)品線的規(guī)范性一致性及開發(fā)維護(hù)成本最低化，采用基礎(chǔ)的 24 柵格簡單便捷的柵格化布局。

響應(yīng)式布局

1680px 以上：版心內(nèi)容區(qū)域 1576px，顯示 PC 頭尾；

1440px~1680px：版心內(nèi)容區(qū)域 1384px，顯示 PC 頭尾；

1280px~1440px：版心內(nèi)容區(qū)域 1192px，顯示 PC 頭尾；

768px~1280px：版心容區(qū)域 1192px，會(huì)出現(xiàn)滾動(dòng)條，顯示 PC 頭尾

768px（包括 768px）以下：寬度為 100%，為 M 端效果，顯示 H5 頭尾

設(shè)計(jì)方法

同時(shí)為滿足官網(wǎng)不同的業(yè)務(wù)訴求，兼顧 首頁、店鋪、產(chǎn)品詳情 100+產(chǎn)品 Banner 日常運(yùn)營上線需求對"響應(yīng)效率"的追求，和官網(wǎng)本身對"視覺品質(zhì)"的要求，對適用于產(chǎn)品頁面的 2.5D 圖標(biāo)進(jìn)行了全新升級，從顏色、透視、光影、質(zhì)感遵循 3D 場景同等原則。

PC、M 端柵格設(shè)置

PC 端以寬度 1440 舉例：PC 端頁面寬度為 1440px，內(nèi)容區(qū)寬度為 1200px，24 柵格 8px 間距，版心區(qū)域在：1192px，列寬 a=42px，列間距為 i=8px。

M 端以寬度 375 舉例：M 端頁面寬度為 375px，內(nèi)容區(qū)寬度為 343px，24 柵格 4px 間距，版心區(qū)域在：343px，列寬 a=10px，列間距為 i=4px。

2. 視覺統(tǒng)一組件化

為了保持與京東科技品牌對外的統(tǒng)一性，在質(zhì)感上采用統(tǒng)一 3D 設(shè)計(jì)規(guī)范，主視覺整體圖形結(jié)構(gòu)由主產(chǎn)品模型、基礎(chǔ)輔助模型、輔助背景組成，以此結(jié)構(gòu)形成統(tǒng)一的視覺構(gòu)成；為了提高執(zhí)行效率提取 3D 組件規(guī)范，后續(xù)目標(biāo)對所有 banner 圖形統(tǒng)一拆分、重組，利用組件拼裝 Banner 達(dá)到快速上線目的。

同時(shí)為滿足官網(wǎng)不同的業(yè)務(wù)訴求，兼顧首頁、店鋪、產(chǎn)品詳情 100+產(chǎn)品 Banner 日常運(yùn)營上線需求對"響應(yīng)效率"的追求，和官網(wǎng)本身對"視覺品質(zhì)"的要求，對適用于產(chǎn)品頁面的 2.5D 圖標(biāo)進(jìn)行了全新升級，從顏色、透視、光影、質(zhì)感遵循 3D 場景同等原則。

2.5D 同樣進(jìn)行的產(chǎn)品組件設(shè)計(jì)，滿足日常頁面需求；

3. 視覺規(guī)范化

在視覺建立的過程中統(tǒng)一升級了我們積攢了長達(dá) 3 年的組件素材，在后續(xù)的設(shè)計(jì)協(xié)作以及設(shè)計(jì)復(fù)用時(shí)，提供有效指導(dǎo)。將虛擬云產(chǎn)品進(jìn)行具象表達(dá)，不同形式圖標(biāo)使用不同應(yīng)用場景。

虛擬云產(chǎn)品具象表達(dá)

京東云設(shè)計(jì)系統(tǒng)秉承開放、靈活、發(fā)展的設(shè)計(jì)原則為京東云主站及其他相關(guān)子業(yè)務(wù)提供有效參考。

四、總結(jié)

通過這次升級改版，除了更新我們官網(wǎng)組件設(shè)計(jì)同時(shí)，在更系統(tǒng)化的整理京東云設(shè)計(jì)體系，我們將能力和資源不斷沉淀，形成可快速支持業(yè)務(wù)的設(shè)計(jì)工具和資源庫，助力業(yè)務(wù)提效同時(shí)也可減輕設(shè)計(jì)師壓力。

本次官網(wǎng)視覺風(fēng)格的改版只是初步探索的開始，我們將持續(xù)關(guān)注業(yè)務(wù)本身，將設(shè)計(jì)趨勢與業(yè)務(wù)結(jié)合呈現(xiàn)，后期在探索中我們將融入更多的技術(shù)動(dòng)效，使之更具有科技感，展現(xiàn)更多層面的品牌調(diào)性。

作者：JDTDA