雲栖TechDay39期，阿裡雲進階視覺設計師劉寶明帶來阿裡雲的計算設計探索的演講。本文主要從阿裡雲的三代視覺語言設計談起，着重分享了怎樣可以更好的去诠釋雲計算的業務，打造阿裡雲的品牌屬性，每一步的設計思考、體驗與曆程。分享了不同的設計側重、賦能全鍊路，最後對未來做了展望。
設計師是對設計事物的人的一種泛稱，寶明以視覺傳達的方式來表現自己的工作。随着新技術的不斷湧現，設計師學習和實踐的不僅僅是設計技能，還有營運技能、産品技能，更要有發現、分析和解決問題的能力，接下來我們一起來了解下~
首先回顧一下幾年前阿裡雲的設計手法：會使用字型的變形、對素材的運用使畫面更有沖擊力，例如：金牌服務體系，設計金牌的形象使畫面更豐富多彩，砸金蛋的活動則會用金蛋的形式讓畫面看上去很精緻。
事實上到現在這種設計也不過時，現在一些電商網站還在用這樣的設計，但是基于阿裡雲雲計算業務來說，科技屬性是我們首先要去考慮的，是以偏電商化的設計與雲計算業務屬性不比對，并且這種視覺表達與傳統的業務會同質化。
那麼怎麼樣去解決這兩個問題？先通過使用者調研了解阿裡雲的使用者群體。
阿裡雲的使用者群體基本上為男性，集中在開發者、創業者和技術人員，大部分為企業使用者，也有小部分個人使用者。基于以上人群屬性分析浏覽阿裡雲網站的人，不一定是決策者，結果最終要彙報給老闆，是以大部分會選擇工作時間來到網站，希望以最短的時間搞定。
帶着這些使用者的屬性，我們去提煉了幾個關鍵詞，發現使用者希望阿裡雲是這樣的：學術的、可以信賴的、嚴謹的。于是視覺表現圍繞着這些關鍵詞來展開。包括使用顔色、字型、圖形和版式等等，打造出屬于阿裡雲專屬的視覺風格。
顔色
色相環中每一個顔色都有各自的屬性，我們選取了象征神秘、激情、冷靜、安全感的顔色。符合阿裡雲的業務特色，在做ABtest驗證中，在其他元素都不變的情況下，去改變一個顔色投放，最終發現冷色調并不一定比暖色調帶來的轉化率低，相反更加願意去點選冷色調。
文字
傳統的電商網站會去做字型設計，讓畫面整體氛圍更豐富活躍，而B類網站為追求嚴謹理性，會直接使用傳統字型作為主字型，而很少去做誇張設計。是以，阿裡雲第一代設計所有字型不建議去做字型設計，同時規範排版與版式，不刻意追求頁面的豐富與活躍，給使用者信賴感。
圖形
什麼是高端大氣有科技感的圖形呢？
通過情緒化視覺探索可發現質感、優雅、昂貴的産品可代表高端；開闊的場景、非常有沖擊感的場景會産生很大氣的感覺；抽象圖形、科幻的場景等會感覺很有科技感。
經過以上提煉、融合，我們得到了兩個方向：一是以實物實景來作為主要的視覺語言。實景圖檔的設計方向經過一段時間之後驗證，出現了一個問題：實景圖可以代表一部分産品，但是不能滿足全部需求，比如展現産品優勢、性能的需求；二是讓設計師發揮自己更大的能力，用概念圖形式，畫出我們想要表達的思考，去質感、去素材、簡化顔色，抽象圖形，開始一步步完善阿裡雲的設計風格。
阿裡雲産品體系icon
在做設計的時候，首先要圍繞一個主體物去實作。傳統的電商網站會去找明星代言，通過人物烘托頁面氣氛，但是對于我們來說，顯然不太适合。
阿裡雲的“代言人”是什麼？答案是阿裡雲産品體系icon。于是我們決定所有的視覺風格都圍繞着産品icon展開來設計，得到了第一代的統一設計風格。比如展現産品的速度感，會加入可以代表速度的元素，或為了展現産品性能會圍繞性能去畫抽象的圖形。
同時，我們對産品本身的屬性去做诠釋：負載均衡可以對多台ECS進行流量分發，可以直覺的把ECS圖表畫出來，然後通過很多線的分發表現，讓使用者一眼可以了解清楚我産品的用途。
OCS是線上緩存服務，它可以作為一個排頭兵，幫伺服器緩解一部分的壓力，讓一部分通路請求可以直接通過OCS去滿足，而不必去通路伺服器，通過概念圖很直覺的表達了這個屬性。
OSS最大的特點是可以實作多點存儲，通過畫面很直覺的展現出來。
而在這些圖形基礎之上，再對顔色、形狀去做規範就得到了一套成體系的視覺語言。
如何更進一步？
怎樣可以更好的去诠釋我們雲計算的業務？
回顧這幾年，雲計算行業已經進入了一個火爆期，同時阿裡雲也進入到高速發展期，在中國，阿裡雲的市場佔有率已穩居第一，且市場佔有率相當于第二名到第八名廠商之和加起來還要多，阿裡雲的品牌價值已經今非昔比。
對于設計師來說，急需把阿裡雲的品牌氣質準确的傳達給使用者，讓使用者一眼看到這是阿裡雲的設計。
2016年，阿裡雲更新了logo，logo最初的靈感來源于鍵盤上的符号，同時代表計算的基礎的01語言代碼，再加上展現生态連結合作的概念融合到一起。計算機的設計都是基于二進制，計算的本質就是擷取資訊的一種過程，那這個過程就是用0和1去組成的，我們就把這種01疊代的語言定義為阿裡雲貫穿全網站，貫穿所有業務的一種設計語言，是以得出第三代的阿裡雲設計體系。
第三代設計語言在抽象概念圖的基礎之上，加入了01的概念。
比如對圖形進行解剖，大家會發現主體物層和平台層，事實上是一個點和線，以及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多款産品去做，因為我們所有要售賣的産品都是自己的産品，我們能不能把每一次設計的子產品提煉出來進行固定，讓使用者每次在不變的情況下，去看産品子產品，使用者每次不需要看特别詳細，是以我們把子產品提煉，統一，應用到活動版本，每次隻需要做視覺層面的一些設計來展現理念就好，這樣就達到了提升閱讀效率的想法。
設計價值的拓展 賦能全鍊路
接下來我們想把所有的子產品沉澱下來，能不能再一次提高我們的設計價值？我們除了賦能設計師之外，能不能賦能整個業務的全鍊路？
我們推出了自己的一個頁面搭建系統——頁廚。可以讓營運自動化去搭建頁面，我們把所做過的一些頁面子產品拆分出來，分裝到頁廚的平台裡面去。
首先是做過的頁面，一些能夠複用的模闆放到我們的倉儲，同時把客戶案例的子產品，還有産品售賣的闆塊都集合進來，讓營運可以根據自己的業務需要，來挑選他需要的子產品，點選添加到頁面裡面去，做删減，就得到了它想要的一個活動頁面。
營運完全可以在不經過設計師和前端的情況下，就可以得到自己想要的頁面釋出上線。
我們還會有一些個性化的操作，可以去換文字，改變文字顔色，添加連結，改變頁面的圖檔等等。同時還會給前端去添加條件，添加動作，完全可以在頁廚的平台裡面去實作一個可視化的操作，而不需要寫代碼。
對于設計師來說，我們依舊可以發揮我們更大的價值，讓我們設計複用起來。
對于公司來說，他們在相同的子產品隻去寫一次代碼就夠了，不需要每次再寫這個代碼，提高了生産效率。
未來的方向
傳統的設計中，設計師代表藝術，前端開發代表技術，藝術在左，技術向右，關聯程度是不夠的。
未來我們就會往計算設計的方向走，把藝術和技術連接配接的更緊密，把資料的可視化做的更多元更立體。
本文為雲栖社群原創内容，未經允許不得轉載，如需轉載請發送郵件至[email protected]；如果您發現本社群中有涉嫌抄襲的内容，歡迎發送郵件至：[email protected] 進行舉報，并提供相關證據，一經查實，本社群将立刻删除涉嫌侵權内容