編輯導讀：官網是企業的一張“臉”，記錄了企業一路的發展歷程。隨着產品的迭代升級，官網首頁改版設計是常常會遇到的問題。在進行首頁改版時，設計師需要考慮哪些因素？本文作者從阿里雲官網首頁改版的項目出發，深入淺出闡述了首頁的重要性以及設計思考，與大家分享。
自阿里雲 2009 年成立以來，已經走過了 11 個年頭；官網作為它的載體，這 11 年間我們交出過很多份關於首頁的設計答卷；但看得見的設計背後，更多的是看不見的設計思考，是我們對於用户體量、業務體系不斷升級的回應，是對品牌的精細化雕琢與受眾的精準化匹配。
— 每一份阿里雲官網首頁，是設計的升級，更是業務的升級
在上一個版本中，基於對業務訴求的貼合，我們嘗試了一版在業界引發諸多爭議及討論的首頁方案。儘管如此，我們始終認為這樣的嘗試是非常必要的，我們由此得以不斷地去驗證業務、推進業務，從而達到設計策略與業務策略的深度融合。
2020年，藉着阿里雲官網業務升級的契機，我們再一次把「首頁改版」提上了議程。在對齊業務訴求的同時，我們更加深入地走進用户，期望在新版首頁中，以“人”出發，打造“用户訴求”、“業務訴求”和“品牌訴求”之間的平衡。
01 用户研究與設計策略設定解決問題的前提，是定義真正的問題。
項目啓動後，我們並無意於僅做表層視覺的優化，而是希望切實地緊跟用户訴求，讓設計策略為用户服務。
對於用户行為數據的觀察，如果僅侷限於頁面內部，無異於管中窺豹，因為多數情況下的頁面數據都是受頁面當前信息結構深度制約的。對比首頁內容本身，我們更加關注不同客羣以首頁為起點，在整個網站內部的流轉行為鏈路，從而進一步分析深層訴求。通過對於典型用户的時序路徑數據分析，我們發現不同客羣的確存在行為上的顯著差異。為了客觀的提取差異化行為成因，我們採用深度訪談、電訪/問卷相結合的方式，針對已有的數據結論，進行定性深度解讀，輔助數據判斷，並形成初步的客羣模型。
清楚的瞭解我們面對的受眾是誰，他們的特徵是什麼，他們需要什麼樣的服務，我們才能更好地提交一份我們的答卷。
— 2020版全新官網首頁
02 圍繞阿里雲進化設計語言展開的視覺升級除首頁架構的調整之外，視覺上的升級也是本次改版中的重要一環。
經歷了2019年快速的品牌色變更、官網運營策略的調整，過去的一年來我們一直在思考和尋找屬於阿里雲的品牌特質。它應該是我們體內的某些基因，不隨外在環境的變化而改變。
我們經歷了品牌原型的推導、提取了用户調研的結果、蒐集了多次腦爆的內容後，有了“智者”的心理學品牌原型，並定義了當前阿里雲進化設計語言的內核和外在。
「虛實-望其虛握其事」、「秩序-秩序是生命之匙」、「幾何-充滿想象的幾何」、「運動-運動體現智能」四大關鍵詞，體現了阿里雲技術的領先性和設計的獨特點，併成為本次首頁改版視覺升級的核心觀點，給以風格的指引和設計的推導。
將虛擬雲產品進行具象表達，一直是我們在研究的課題，經過幾年來不斷的摸索和迭代，我們沉澱出200+ 款可以傳達雲產品特徵的產品形象系列。
本次首頁焦點圖，在前述基礎之上，採用了GPGPU的代碼技術，與雲產品形象結合形成了全新的虛實視覺體驗；不僅幫助提升了視覺體驗，也進一步提高了首焦區塊的點擊率。
— 從雲產品形象到粒子化的互動模型
2. 「秩序」ORDER & RYTHM運用合理的模塊切割，將秩序感和節奏感貫穿在整體的頁面設計中，讓信息得到更好的歸類與傳達；
幾何圖像是對語意的高度概括，簡潔和乾脆的幾何圖形可以加強文字信息傳遞以及氛圍渲染的效果。無論是幾十像素的ICON還是大塊面的輔助圖形，都延續着幾何感、規律化的視覺風格；
同樣的動畫時間（Duration）不同的運動緩衝速率（Ease）對於用户的視覺體驗會產生微妙的體感差異。為調試出適用於Web端的動畫速率，我們對Quad，Cubic，Exponential等經典緩衝運動進行了大量的設計實踐驗證，並通過CSS代碼還原出理想的動畫速率貝塞爾曲線，達到整個頁面各部分在體驗上的一致性和優雅性。
「實時粒子動畫」WEBGL REAL-TIME PARTICLES
如前述段落中提到，本次首頁改版除了常見的設計手段以外，我們引入了WebGL技術，將代碼與雲產品模型進行結合，創造出可交互的實時粒子動畫效果。這是設計中心首次將WebGL應用到門户網站，面臨着技術和性能之間的平衡的挑戰。如何將實時渲染的圖形技術應用到消費級的用户端？
通常我們要想設計與開發出實時渲染（Real-time Rendering）的粒子動畫，需要在CPU裏計算，比如通過For循環語句( e.g for( let i=0; i < particles.length; i++ ) { …. } )的方式計算粒子的位置。這樣的問題在於可能超過僅1萬粒子普通計算機就很難承擔了，無法表達更加科技、細膩與豐富的粒子效果。
在阿里雲官網的場景中，我們在WebGL技術框架下（Three.js + 自研Shader），運用GPGPU + FBO（Aka. FrameBufferObject，幀緩衝區對象）的圖形技術，對粒子的三維運動、聚合散開、力場渦旋風向等在Shader層裏進行演算，最大化地利用了WebGL這一主要利用顯卡的圖形技術，僅需一張消費級的獨立顯卡，便可實現實時計算數十萬級的粒子動畫。
GPGPU通用圖形處理（General-purpose computing on graphics processing units，簡稱GPGPU），是一種基於WebGL的高級圖形技術，通過Shader以及顯卡的幀緩衝區對象（FBO），由GPU去計算圖形；
GPGPU計算的粒子可承擔到100萬級+（e.g FBO幀緩衝區 1024 x1024+）的粒子數量高速計算渲染，目前我們根據用户的顯卡設備進行自動檢測、適配和分層，開放到約9 ～ 29萬粒子實時渲染，用技術的設計方式去演繹雲計算公司的首頁焦點動畫。
FBO幀緩衝區對象的原理，即通過顯存緩衝區裏不斷更新與計算的一張動態位圖，e.g 512×512即26萬像素，每一顆像素的RGBA通道可存儲每一個粒子的XYZW三維空間訊息，以達到CPU無法承擔的如此多粒子的高速計算負荷。
2. THE HIGHLY PERFORMANT ICONS OF ALIBABA CLOUD PRODUCTS
在設計過程中，為了保證頁面加載的速度與運行的性能，我們使用Blender把模型的面數、節點與拓撲（Topology）優化到極致（e.g 最終的glTF 3D模型的K數為40 ~ 150K，比一張圖片還輕量），並將代碼與模型解藕，按照優化規範輸出模型，便可以零代碼、去人工化地生成新粒子
粒子效果在流動和光影之下呈現出最佳的視覺衝擊力，區別於黑的神秘和白的純淨，灰色具有一種不帶任何感情色彩的、冷靜的中性氣質，同時它也可以讓首屏的文案信息和行動點更明顯。
在將技術與門户網站結合的過程中，我們遇到了很多挑戰和質疑，諸如效果和性能，最終我們在權衡之中找到了兩者的平衡，而且我們相信這就是未來。
04 一切從這裏開始「首頁」是用户瀏覽和使用「阿里雲官網」的開始，而我們的「改版」也是不斷精細化打磨阿里雲官網體驗的開始。和人的蹣跚學步一樣，設計在往前走的路上，也會有很多跌跌撞撞；會有階段性設計突破的欣喜，也會有走了彎路的遺憾；最終在泥濘之中，探索出一條正確的道路。
我們交出過很多份關於官網設計的答卷；這些設計升級的背後，是我們對於用户體量、業務體系不斷升級的回應，是對品牌的精細化雕琢與受眾的精準化匹配的反饋。
我們的堅持，不是源於它的「不同」，而是源於它的「正確」。
作者：阿里雲設計中心；公眾號：AlibabaDesign
來源：https://mp.weixin.qq.com/s/bntPjROWz8XqUvDBL6h-kA
本文由 @AlibabaDesign 授權發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。