187
阿裏雲的計算設計探索
雲棲TechDay39期，阿裏雲高級視覺設計師劉寶明帶來阿裏雲的計算設計探索的演講。本文主要從阿裏雲的三代視覺語言設計談起，著重分享了怎樣可以更好的去詮釋雲計算的業務，打造阿裏雲的品牌屬性，每一步的設計思考、體驗與曆程。分享了不同的設計側重、賦能全鏈路，最後對未來做了展望。
設計師是對設計事物的人的一種泛稱，寶明以視覺傳達的方式來表現自己的工作。隨著新技術的不斷湧現，設計師學習和實踐的不僅僅是設計技能，還有運營技能、產品技能，更要有發現、分析和解決問題的能力，接下來我們一起來了解下~
首先回顧一下幾年前阿裏雲的設計手法：會使用字體的變形、對素材的運用使畫麵更有衝擊力，例如：金牌服務體係，設計金牌的形象使畫麵更豐富多彩，砸金蛋的活動則會用金蛋的形式讓畫麵看上去很精致。
事實上到現在這種設計也不過時，現在一些電商網站還在用這樣的設計，但是基於阿裏雲雲計算業務來說，科技屬性是我們首先要去考慮的，所以偏電商化的設計與雲計算業務屬性不匹配，並且這種視覺表達與傳統的業務會同質化。
那麼怎麼樣去解決這兩個問題？先通過用戶調研了解阿裏雲的用戶群體。
阿裏雲的用戶群體基本上為男性，集中在開發者、創業者和技術人員，大部分為企業用戶，也有小部分個人用戶。基於以上人群屬性分析瀏覽阿裏雲網站的人，不一定是決策者，結果最終要匯報給老板，因此大部分會選擇工作時間來到網站，希望以最短的時間搞定。
帶著這些用戶的屬性，我們去提煉了幾個關鍵詞，發現用戶希望阿裏雲是這樣的：學術的、可以信賴的、嚴謹的。於是視覺表現圍繞著這些關鍵詞來展開。包括使用顏色、字體、圖形和版式等等，打造出屬於阿裏雲專屬的視覺風格。
顏色
色相環中每一個顏色都有各自的屬性，我們選取了象征神秘、激情、冷靜、安全感的顏色。符合阿裏雲的業務特色，在做ABtest驗證中，在其他元素都不變的情況下，去改變一個顏色投放，最終發現冷色調並不一定比暖色調帶來的轉化率低，相反更加願意去點擊冷色調。
文字
傳統的電商網站會去做字體設計，讓畫麵整體氛圍更豐富活躍，而B類網站為追求嚴謹理性，會直接使用傳統字體作為主字體，而很少去做誇張設計。因此，阿裏雲第一代設計所有字體不建議去做字體設計，同時規範排版與版式，不刻意追求頁麵的豐富與活躍，給用戶信賴感。
圖形
什麼是高端大氣有科技感的圖形呢？
通過情緒化視覺探索可發現質感、優雅、昂貴的產品可代表高端；開闊的場景、非常有衝擊感的場景會產生很大氣的感覺；抽象圖形、科幻的場景等會感覺很有科技感。
經過以上提煉、融合，我們得到了兩個方向：一是以實物實景來作為主要的視覺語言。實景圖片的設計方向經過一段時間之後驗證，出現了一個問題：實景圖可以代表一部分產品，但是不能滿足全部需求，比如體現產品優勢、性能的需求；二是讓設計師發揮自己更大的能力，用概念圖形式，畫出我們想要表達的思考，去質感、去素材、簡化顏色，抽象圖形，開始一步步完善阿裏雲的設計風格。
阿裏雲產品體係icon
在做設計的時候，首先要圍繞一個主體物去實現。傳統的電商網站會去找明星代言，通過人物烘托頁麵氣氛，但是對於我們來說，顯然不太適合。
阿裏雲的“代言人”是什麼？答案是阿裏雲產品體係icon。於是我們決定所有的視覺風格都圍繞著產品icon展開來設計，得到了第一代的統一設計風格。比如體現產品的速度感，會加入可以代表速度的元素，或為了體現產品性能會圍繞性能去畫抽象的圖形。
同時，我們對產品本身的屬性去做詮釋：負載均衡可以對多台ECS進行流量分發，可以直觀的把ECS圖表畫出來，然後通過很多線的分發表現，讓用戶一眼可以理解清楚我產品的用途。
OCS是在線緩存服務，它可以作為一個排頭兵，幫服務器緩解一部分的壓力，讓一部分訪問請求可以直接通過OCS去滿足，而不必去訪問服務器，通過概念圖很直觀的表達了這個屬性。
OSS最大的特點是可以實現多點存儲，通過畫麵很直觀的體現出來。
而在這些圖形基礎之上，再對顏色、形狀去做規範就得到了一套成體係的視覺語言。
如何更進一步？
怎樣可以更好的去詮釋我們雲計算的業務？
回顧這幾年，雲計算行業已經進入了一個火爆期，同時阿裏雲也進入到高速發展期，在中國，阿裏雲的市場份額已穩居第一，且市場份額相當於第二名到第八名廠商之和加起來還要多，阿裏雲的品牌價值已經今非昔比。
對於設計師來說，急需把阿裏雲的品牌氣質準確的傳達給用戶，讓用戶一眼看到這是阿裏雲的設計。
2016年，阿裏雲更新了logo，logo最初的靈感來源於鍵盤上的符號，同時代表計算的基礎的0\1語言代碼，再加上體現生態鏈接合作的概念融合到一起。計算機的設計都是基於二進製，計算的本質就是獲取信息的一種過程，那這個過程就是用0和1去組成的，我們就把這種0\1迭代的語言定義為阿裏雲貫穿全網站，貫穿所有業務的一種設計語言，因此得出第三代的阿裏雲設計體係。
第三代設計語言在抽象概念圖的基礎之上，加入了0\1的概念。
比如對圖形進行解剖，大家會發現主體物層和平台層，事實上是一個點和線，以及0和1的組成：點就是元素，點和線，0和1去組成畫麵，再利用這套規則延續到其他的圖形當中，然後再把所有的圖形去規定一個特有的透視角度，同時加上規範化輸出，得到了第三套設計語言風格，相對於之前來說更加統一，相當於打上了阿裏雲的防偽標記。
用戶會不會對這套視覺語言感到疲勞，同時從上到下的瀏覽會不會存在焦點不是很集中的問題？這些成為新的考驗。
回到構圖，什麼樣的構圖方式可以讓主體物更加的集中？答案是發散式的構圖。
發散式構圖把主體物放到最中間，所以基於此我們再去做了層體係的輸出，就又多出來一套視覺體係。
兩套視覺體係在官網輪換上線，幾個月切換一次，達到緩解視覺疲勞。
沉澱複用
我們能不能把這些全部的圖形重複利用起來？
基於以上思索，出現了一個素材庫：所有畫過的圖，甚至是“freestyle”去畫的一些圖形，搭建活動圖形，還有頁麵框架，都匯聚到一起，賦能設計師，讓大家可以把每次畫過的圖重複利用起來，發揮最大的價值。
千人千麵係統——現在個性化推薦是很主流的，根據用戶購買的業務和他的瀏覽習慣在官網給他推薦一些相關聯的產品。
每個人來阿裏雲的首頁看到的圖是不一樣的，都會根據你自己的業務和瀏覽行為來觸發，那它需要的圖就會成百上千甚至更多，如果每一個都去原創，肯定是做不過來的，所以基於這套千人千麵係統，把所有的產品層，所有的主體物層和所有的特點層都分拆開，再去讓它自由的排列組合，把每個元素都打上關鍵詞，然後基於運營內容的關鍵詞，設計師就可以去得到它想要的Banner來適應我們運營業務場景的需要。
借助天貓的節日氣氛，阿裏雲的雙十一也有活動，設計師想要讓所有人知道，我們是一個和天貓雙十一關聯的活動，是一個官方的活動。那天貓雙十一有什麼視覺上的東西是我們可以用的？
比如雙十一的logo可以拿過來用，還有45度的斜線特有的符號，我們用到阿裏雲的一些視覺設計中去，就得到了2015年的一套視覺體係，我們把它運用到了國際會場、學生會場和雲計算會場等，並形成一個係列滿足運營的需求。
2016年，對於我們來說，直接強調和天貓相關聯的活動已不像以前那麼重要了，相反需要體現阿裏雲的價值，反而顯得更加重要，那再一次回到阿裏雲logo，我們直接把阿裏雲的logo運用到主會場上麵，同時為了強化品牌屬性還做了開場動畫等。
除了主會場logo設計之外，我們從基礎的視覺語言方向也做阿裏雲特有的視覺，通過分析行業的設計趨勢，結合阿裏雲業務屬性，我們想到通過多彩的漸變，再加上利用AI吻合的方法，來營造一套抽象的、多彩的設計屬性，也作為大型活動的一套視覺語言。
這套設計體係可以運用到所有的分會場，同時我們給它命名為vibrant gradient，中文譯為“多彩的漸變“，這套係統運用到活動中，很好的彌補了平日很科技很高冷的設計係統，同時能把目前100多款產品很好的體現出來，能把每個分會場的不同更加淋漓盡致的體現出來。
我們把這套係統應用到日常設計中，讓服務商設計師和自己內部設計師都基於這套規範去做風格的統一。比如說在所有的活動裏都會加入漸變，在整體依舊是冷色調，依舊是抽象圖的基礎上有一定的活躍，強調活動的氣氛，讓用戶可以感受到優惠。
2017年的雙十一，阿裏雲會場會有什麼新設計？請大家拭目以待。
一個成功的活動僅僅在視覺層有一些想法是不夠的，在內容層、框架層都要去想，讓三個層麵關聯起來，才能夠很好的去互動，最終達成活動成功。
在內容層平常的優惠方式有打折、贈品、抽獎和送代金券等活動形式，除此之外，到底什麼樣的活動形式是適合阿裏雲用戶的？
阿裏雲的用戶大部分在決定購買雲資源的時候都基於業務，比如說PV達到了下一個層級，要加服務器，比如說每天的訪問波峰比以前更大了，要再來買一個資源，那如果我們僅僅在活動期做打折贈品，就不能很好的匹配他們業務到來的時刻，最終選擇用代金券的方式，讓用戶更享受到我們的優惠，需要的時候拿出來用。
所以在2015年雙十一的時候，我們把免費抽獎領券作為一個主要的優惠形式，讓用戶以零門檻的方式直接來網站領獎，使用代金券來購買阿裏雲服務器資源，當時效果特別好，領券量大大超出了預期。但是後來發現到了雙十一當天，真正來使用代金券的人，它的轉化率並沒有達到我們想要的效果，那原因到底是為什麼？是不是代金券的匹配度不夠？因為這是完全隨機去領的，或者零門檻讓大家隨便領，會產生不珍惜的感覺。
所以2016年我們去做了改進，把免費領券方式改成充值返券，讓用戶根據自己的業務去判斷該花多少錢，然後基於充值給他一定比例的返券，這樣就很好的匹配用戶的業務度，同時加入一些抽獎，這種不確定性讓用戶的參與感更強。
最後看數據發現，改變之後效果特別好，甚至到了雙十一還沒有開始，在預熱期原本的預算就已經用完了，這是我們在內容層麵的想法。
to C設計側重體驗
傳統的to C設計更側重體驗，這個體驗可能是五花八門的。
比如說天貓的活動會場要營造琳琅滿目的感覺，有一些活動頁麵會讓你感覺到特別的優惠。那也有一些公司會有他自己的想法，比如宜家，宜家的家具展覽間繞來繞去特別難走出去，也許是宜家故意搞成這樣，延長用戶的停留時間，從而使轉化率更高。
還有一個例子，我們的運營商——移動聯通的官網，我們會看到有各種各樣的流量包，有各種各樣的套餐，讓人感覺到不知道從何下手，選哪個好。最終我們買的流量包，你會發現它並不是適合你最優惠的一個，事實上運營商不希望你去買到最便宜的一個流量包，而故意搞得體驗很複雜。
to B的設計側重效率
對於to B的設計來說，一定會側重效率，因為它是一個公司裏的業務，如果你不能夠讓他以最快的時間完成操作的話，他就會放棄你，那對於我們來說，如何提升用戶的瀏覽與效率，而降低用戶的理解成本？
首先是充值的優惠區，然後是產品的各個模塊，比如說有雲產品會場，有安全會場，國際會場，大數據會場等等。每一個產品模塊都是不太一樣，有些是基於產品，有些是基於代金券，有些是基於金額，有些是基於地域等，事實上都是基於阿裏雲的100多款產品去做，因為我們所有要售賣的產品都是自己的產品，我們能不能把每一次設計的模塊提煉出來進行固定，讓用戶每次在不變的情況下，去看產品模塊，用戶每次不需要看特別詳細，所以我們把模塊提煉，統一，應用到活動版本，每次隻需要做視覺層麵的一些設計來體現理念就好，這樣就達到了提升閱讀效率的想法。
設計價值的拓展 賦能全鏈路
接下來我們想把所有的模塊沉澱下來，能不能再一次提高我們的設計價值？我們除了賦能設計師之外，能不能賦能整個業務的全鏈路？
我們推出了自己的一個頁麵搭建係統——頁廚。可以讓運營自動化去搭建頁麵，我們把所做過的一些頁麵模塊拆分出來，分裝到頁廚的平台裏麵去。
首先是做過的頁麵，一些能夠複用的模板放到我們的倉儲，同時把客戶案例的模塊，還有產品售賣的板塊都集合進來，讓運營可以根據自己的業務需要，來挑選他需要的模塊，點擊添加到頁麵裏麵去，做刪減，就得到了它想要的一個活動頁麵。
運營完全可以在不經過設計師和前端的情況下，就可以得到自己想要的頁麵發布上線。
我們還會有一些個性化的操作，可以去換文字，改變文字顏色，添加鏈接，改變頁麵的圖片等等。同時還會給前端去添加條件，添加動作，完全可以在頁廚的平台裏麵去實現一個可視化的操作，而不需要寫代碼。
對於設計師來說，我們依舊可以發揮我們更大的價值，讓我們設計複用起來。
對於公司來說，他們在相同的模塊隻去寫一次代碼就夠了，不需要每次再寫這個代碼，提高了生產效率。
未來的方向
傳統的設計中，設計師代表藝術，前端開發代表技術，藝術在左，技術向右，關聯程度是不夠的。
未來我們就會往計算設計的方向走，把藝術和技術連接的更緊密，把數據的可視化做的更多元更立體。
最後更新：2017-09-04 12:02:53