一升級背景
1、京東雲官網作為京東雲對外唯一官方門戶，並承載整個雲業務售前及售中的核心渠道，是用戶接觸京東雲的首要渠道；
2、京東雲作為京東科技集團統一的技術服務品牌，線上頁面風格元素在快速更迭互聯網背景下較落後，所以本次視覺設計重要使命之一是探索前沿的設計趨勢，對京東雲品牌風格進行全新升級；
3、隨着京東雲的不斷發展，用戶群體擴大及用戶需求的變更，原有官網內容架構單一無法打動用戶查看轉化，需針對現有用戶瀏覽和閱讀習慣對官網首頁內容進行結構上的調整和更新。
二設計分析
1、發現設計問題
首先是設計分析，因為只有發現了平台現有問題，挖掘用戶痛點，才能有方向有思路去解決它；
首頁：最重要的首屏信息量很大，有主推的廣告位、特價產品展示、KA品牌案例展示等，設計初期考慮充分利用首屏空間，展示更多使其抓住用戶感興趣內容點，最終形成有效轉化。上線完成後通過數據對比首屏除Banner區域外，其它信息點擊率較低，我們提供了這麼多信息在首屏是用戶想看的嗎？
問題走查
2、確定優化目標
有了上述提出的一些問題，就要去解決它，從體驗設計出發，確定優化目標。
從現有問題中進行拆解，比如上圖左側為提出的問題，右邊是通過問題進行設定的目標。
3、用戶分析
第3類：潛在行業個人從業者，到訪目的是搜尋比較廉價/短期服務/產品或個人測試使用；
因此，設計中我們需要考慮如何給用戶傳遞出：安全、技術、服務、信賴的感覺。
4、設計關鍵詞(1) 頭腦風暴
設計之前小組進行了幾輪腦暴，結合自身品牌、用戶分析、產品功能特點，由小組人員討論：「你認為的京東雲」應該有哪些關鍵詞組成？
57人投票結果
並進行二次篩選、線上線下各部門不同人員投票、總結，最終得出：數智、生態、供應鏈、安全等關鍵詞。
(2) 關鍵詞拆解
從決策鏈路和用戶分析我們總結了第二個關鍵詞「安全」；基於新生態搭建的願景和定位，我們總結了第3個關鍵詞「供應鏈」。
其次是關鍵詞轉化，落地我們視覺上如何表達這幾個關鍵詞呢？
(3) 收集情緒版
供應鏈-場景：作為鏈接整個供應鏈和整個生態的橋樑紐帶，我們希望做到的是共贏，而我們也是希望在這過程中，能夠表達出友好的態度來面向所有人，給需求多樣化的企業提供開放共生打造更有活力的生態場景。
通過情緒版提取視覺應用部分，最終視覺風格基調為：輕盈、微質感的淺色科技風格；通過 3D幾何、發光鏈接、透明空間進行「形」的組合。
5、視覺探索
經過初步視覺探索、討論，我們發現場景模型離理想差距較大，重點突出供應鏈主題、但缺少行業特性及科技感、主次層級關係模糊、難以及形成規範化的設計語言，所以不能完全滿足設計目標；
根據初稿進行修改討論敲定設計方案：實現主元素與畫面場景呈現比例、主次層級優化。
產品主圖形：用於單個產品時即簡化底座即可。
6、動效設計
本次官網Banner及產品矩陣樓層嘗試引入動效設計，在確保動效的必要性與合理性上，我們在動效設計上保持了克制，僅通過背景鏡頭劇場式轉角變化、數據光效流動傳輸、產品主題慢節奏微動效的恰當變化，對用戶進行弱打擾的視覺引導，將虛擬雲計算進行更進一步豐富的場景式具象表達。
產品icon設計中，強化識別及趣味性是本次優化的重點，在表現手法上為了增加整體趣味性引入動效，並規範時長規範時長為24幀。
以恰到好處，不過度設計，做到不增加操作，不干擾用戶的動效設計理念。
落地到頁面上最終方案敲定：整體頁面為了呼應主視覺風格質感，功能圖標使用了毛玻璃風格、模塊背景及部分動效使用彌散光感做漸變模糊，目的是打造產品記憶點、優化信息層級，這樣使之頁面保持整體感與統一感。
為用戶在不同終端的提供更加舒適的界面和適配規則，官網採用響應式布局 RESPONSIVE WEB DESIGN 簡稱為RWD，可以讓網頁自動的適應不同尺寸的顯示器。
響應式布局
1680px以上：版心內容區域 1576px，顯示PC頭尾；
1440px~1680px：版心內容區域 1384px，顯示PC頭尾；
1280px~1440px：版心內容區域 1192px，顯示PC頭尾；
768px~1280px：版心容區域 1192px，會出現滾動條，顯示PC頭尾
設計方法
同時為滿足官網不同的業務訴求，兼顧 首頁、店鋪、產品詳情100+產品Banner日常運營上線需求對「響應效率」的追求，和官網本身對「視覺品質」的要求，對適用於產品頁面的2.5D圖標進行了全新升級，從顏色、透視、光影、質感遵循3D場景同等原則。
PC、M端柵格設置
PC端以寬度1440舉例：PC端頁面寬度為1440px，內容區寬度為1200px，24柵格 8px間距，版心區域在：1192px，列寬 a=42px，列間距為i=8px。
M端以寬度375舉例：M端頁面寬度為375px，內容區寬度為343px，24柵格 4px間距，版心區域在：343px，列寬 a=10px，列間距為i=4px。
2、視覺統一組件化
同時為滿足官網不同的業務訴求，兼顧首頁、店鋪、產品詳情100+產品Banner日常運營上線需求對「響應效率」的追求，和官網本身對「視覺品質」的要求，對適用於產品頁面的2.5D圖標進行了全新升級，從顏色、透視、光影、質感遵循3D場景同等原則。
3、視覺規範化
虛擬雲產品具象表達
四總結
通過這次升級改版，除了更新我們官網組件設計同時，在更系統化的整理京東雲設計體系，我們將能力和資源不斷沉澱，形成可快速支持業務的設計工具和資源庫，助力業務提效同時也可減輕設計師壓力。
Tips京東雲雙11營銷設計
我們在營銷設計上思考如何在品牌與業務訴求上體現京東雲特有的營銷特色，今年的11.11狂歡日營銷設計採用了動效結合科技多元的形式以此更貼近主題。更多內容前往京東雲雙11大促活動探索吧~~
京東雲官網網址：
留言列表