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

7 評論 12146 瀏覽 72 收藏 15 分鐘

編輯導讀:官網是企業的一張“臉”,記錄了企業一路的發展歷程。隨著產品的迭代升級,官網首頁改版設計是常常會遇到的問題。在進行首頁改版時,設計師需要考慮哪些因素?本文作者從阿里云官網首頁改版的項目出發,深入淺出闡述了首頁的重要性以及設計思考,與大家分享。

科技公司的首頁——一種平衡「用戶訴求」「業務策略」與「品牌定位」的藝術

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

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

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

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

01 用戶研究與設計策略設定

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

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

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

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

— 2020版全新官網首頁

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

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

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

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

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

1. 「虛實」VIRTUAL BEYOND VIRTUAL

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

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

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

2. 「秩序」ORDER & RYTHM

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

3. 「幾何」ICON & IMAGE

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

4. 「運動」USER INTERFACE ANIMATION

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

03 技術×設計 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

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

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

04 一切從這里開始

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

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

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

 

作者:阿里云設計中心;公眾號:AlibabaDesign

來源:https://mp.weixin.qq.com/s/bntPjROWz8XqUvDBL6h-kA

本文由 @AlibabaDesign?授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. “項目啟動后,我們并無意于僅做表層視覺的優化,而是希望切實地緊跟用戶訴求,讓設計策略為用戶服務?!蹦愫?,我想問下下面的內容為什么全是設計形式,卻沒有用戶分析?是不是有違本意?我天天在看阿里云,覺得動效和icon都挺酷的,但是那些不看文字也不懂什么寓意,但卻很搶眼,文字卻成了配角,是不是有違本意?

    來自浙江 回復
  2. 花里胡哨

    來自江蘇 回復
  3. 每次最怕的事情就早上打開阿里云網頁發現:改版了……心里一萬頭神獸奔騰……每次需要點那個下一步下一步……運維操作機子有好幾臺,你算算我在這1-2周適應期在干嘛……
    有這些瞎吹的時候能不能自己作為一個用戶體驗一下。

    回復
    1. 1

      回復
  4. 別在這瞎吹了。作為一個阿里云重度(重度到沒天花費2-4個小時)的用戶。能不能不要動不就改版。用阿里云了40個產品,一個產平均改版1-2次每年。每次改版用戶適應1-2周。你給我算算我一年到頭在干嘛。還寫這么瞎吹的東西,好意思么

    回復
    1. 1

      回復
  5. 1

    來自浙江 回復