阿里云官網首頁改版 —— 生于海量，領先時代

2020年，借著阿里云官網業務升級的契機，我們再一次把「首頁改版」提上了議程。在對齊業務訴求的同時，我們更加深入地走進用戶，期望在新版首頁中，以“人”出發，打造“用戶訴求”、“業務訴求”和“品牌訴求”之間的平衡。

一種平衡「用戶訴求」「業務策略」與「品牌定位」的藝術

自阿里云 2009 年成立以來，已經走過了 11 個年頭；官網作為它的載體，這 11 年間我們交出過很多份關于首頁的設計答卷；但看得見的設計背后，更多的是看不見的設計思考，是我們對于用戶體量、業務體系不斷升級的回應，是對品牌的精細化雕琢與受眾的精準化匹配。

— 每一份阿里云官網首頁，是設計的升級，更是業務的升級

在上一個版本中，基于對業務訴求的貼合，我們嘗試了一版在業界引發諸多爭議及討論的首頁方案。盡管如此，我們始終認為這樣的嘗試是非常必要的，我們由此得以不斷地去驗證業務、推進業務，從而達到設計策略與業務策略的深度融合。

2020年，借著阿里云官網業務升級的契機，我們再一次把「首頁改版」提上了議程。在對齊業務訴求的同時，我們更加深入地走進用戶，期望在新版首頁中，以“人”出發，打造“用戶訴求”、“業務訴求”和“品牌訴求”之間的平衡。

①?用戶研究與設計策略設定

解決問題的前提，是定義真正的問題。

項目啟動后，我們并無意于僅做表層視覺的優化，而是希望切實地緊跟用戶訴求，讓設計策略為用戶服務。

對于用戶行為數據的觀察，如果僅局限于頁面內部，無異于管中窺豹，因為多數情況下的頁面數據都是受頁面當前信息結構深度制約的。對比首頁內容本身，我們更加關注不同客群以首頁為起點，在整個網站內部的流轉行為鏈路，從而進一步分析深層訴求。通過對于典型用戶的時序路徑數據分析，我們發現不同客群的確存在行為上的顯著差異。為了客觀的提取差異化行為成因，我們采用深度訪談、電訪/問卷相結合的方式，針對已有的數據結論，進行定性深度解讀，輔助數據判斷，并形成初步的客群模型。

清楚的了解我們面對的受眾是誰，他們的特征是什么，他們需要什么樣的服務，我們才能更好地提交一份我們的答卷。

— 2020版全新官網首頁

②?圍繞阿里云進化設計語言展開的視覺升級

除首頁架構的調整之外，視覺上的升級也是本次改版中的重要一環。

經歷了2019年快速的品牌色變更、官網運營策略的調整，過去的一年來我們一直在思考和尋找屬于阿里云的品牌特質。它應該是我們體內的某些基因，不隨外在環境的變化而改變。

我們經歷了品牌原型的推導、提取了用戶調研的結果、搜集了多次腦爆的內容后，有了“智者”的心理學品牌原型，并定義了當前阿里云進化設計語言的內核和外在。

「虛實-望其虛握其事」、「秩序-秩序是生命之匙」、「幾何-充滿想象的幾何」、「運動-運動體現智能」四大關鍵詞，體現了阿里云技術的領先性和設計的獨特點，并成為本次首頁改版視覺升級的核心觀點，給以風格的指引和設計的推導。

「虛實」VIRTUAL BEYOND VIRTUAL

將虛擬云產品進行具象表達，一直是我們在研究的課題，經過幾年來不斷的摸索和迭代，我們沉淀出200+ 款可以傳達云產品特征的產品形象系列。

本次首頁焦點圖，在前述基礎之上，采用了GPGPU的代碼技術，與云產品形象結合形成了全新的虛實視覺體驗；不僅幫助提升了視覺體驗，也進一步提高了首焦區塊的點擊率。

— 從云產品形象到粒子化的互動模型

「秩序」ORDER & RYTHM

運用合理的模塊切割，將秩序感和節奏感貫穿在整體的頁面設計中，讓信息得到更好的歸類與傳達；

「幾何」ICON & IMAGE

幾何圖像是對語意的高度概括，簡潔和干脆的幾何圖形可以加強文字信息傳遞以及氛圍渲染的效果。無論是幾十像素的ICON還是大塊面的輔助圖形，都延續著幾何感、規律化的視覺風格；

「運動」USER INTERFACE ANIMATION

同樣的動畫時間（Duration）不同的運動緩沖速率（Ease）對于用戶的視覺體驗會產生微妙的體感差異。為調試出適用于Web端的動畫速率，我們對Quad，Cubic，Exponential等經典緩沖運動進行了大量的設計實踐驗證，并通過CSS代碼還原出理想的動畫速率貝塞爾曲線，達到整個頁面各部分在體驗上的一致性和優雅性。

③?技術×設計 GPGPU Particles

「實時粒子動畫」WEBGL REAL-TIME ?PARTICLES

如前述段落中提到，本次首頁改版除了常見的設計手段以外，我們引入了WebGL技術，將代碼與云產品模型進行結合，創造出可交互的實時粒子動畫效果。這是設計中心首次將WebGL應用到門戶網站，面臨著技術和性能之間的平衡的挑戰。如何將實時渲染的圖形技術應用到消費級的用戶端？

1. GRAPHIC TECHNOLOGY — GPGPU x FBO

通常我們要想設計與開發出實時渲染（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，比一張圖片還輕量），并將代碼與模型解耦，按照優化規范輸出模型，便可以零代碼、去人工化地生成新粒子

3. PARTICLES & INTERACTIONS

粒子效果在流動和光影之下呈現出最佳的視覺沖擊力，區別于黑的神秘和白的純凈，灰色具有一種不帶任何感情色彩的、冷靜的中性氣質，同時它也可以讓首屏的文案信息和行動點更明顯。

在將技術與門戶網站結合的過程中，我們遇到了很多挑戰和質疑，諸如效果和性能，最終我們在權衡之中找到了兩者的平衡，而且我們相信這就是未來。

一切從這里開始

「首頁」是用戶瀏覽和使用「阿里云官網」的開始，而我們的「改版」也是不斷精細化打磨阿里云官網體驗的開始。和人的蹣跚學步一樣，設計在往前走的路上，也會有很多跌跌撞撞；會有階段性設計突破的欣喜，也會有走了彎路的遺憾；最終在泥濘之中，探索出一條正確的道路。

我們交出過很多份關于官網設計的答卷；這些設計升級的背后，是我們對于用戶體量、業務體系不斷升級的回應，是對品牌的精細化雕琢與受眾的精準化匹配的反饋。

我們的堅持，不是源于它的「不同」，而是源于它的「正確」。

http://mpvideo.qpic.cn/0b78amaaaaaa4uagqnfdsrpvaa6daabqaaaa.f10002.mp4?dis_k=5078e56f97ea8d463314218957f53835&dis_t=1607306370&vid=wxv_1593038121556836356&format_id=10002

? 版權說明：文中所有影像，版權歸阿里云設計中心所有，未經授權不得轉載。

原文地址：阿里云設計中心（公眾號）

作者：阿里云設計中心