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

一、升級背景

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

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

二、設計分析

1. 發(fā)現(xiàn)設計問題

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

首先是設計分析，因為只有發(fā)現(xiàn)了平臺現(xiàn)有問題，挖掘用戶痛點，才能有方向有思路去解決它；

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

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

問題走查

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

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

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

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

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

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

3. 用戶分析

大部分 B 端平臺用戶基本分 3 類：

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

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

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

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

中小企業(yè)很多是因為信任京東品牌而來的，是帶有一定的信任感，關注的產(chǎn)品是否穩(wěn)定安全、使用過程中有問題售后是否能夠快速得到響應。

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

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

4. 設計關鍵詞

① 頭腦風暴

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

關鍵詞查找

57 人投票結果

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

② 關鍵詞拆解

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

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

其次是關鍵詞轉化，落地我們視覺上如何表達這幾個關鍵詞呢？

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

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

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

③ 收集情緒版

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

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

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

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

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

5. 視覺探索

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

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

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

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

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

模型：要求干脆、嚴謹，將虛擬云形象進行具象表達。

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

6. 動效設計

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

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

以恰到好處，不過度設計，做到不增加操作，不干擾用戶的動效設計理念。

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

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

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

1. 布局規(guī)范化

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

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

響應式布局

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

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

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

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

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

設計方法

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

PC、M 端柵格設置

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 設計規(guī)范，主視覺整體圖形結構由主產(chǎn)品模型、基礎輔助模型、輔助背景組成，以此結構形成統(tǒng)一的視覺構成；為了提高執(zhí)行效率提取 3D 組件規(guī)范，后續(xù)目標對所有 banner 圖形統(tǒng)一拆分、重組，利用組件拼裝 Banner 達到快速上線目的。

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

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

3. 視覺規(guī)范化

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

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

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

四、總結

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

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

作者：JDTDA