雲栖techday第37期，阿裡雲資深視覺設計師野一帶來題為“計算的旋律—阿裡雲視覺語言的探索”的演講。本文主要從回顧阿裡雲品牌設計的心路曆程開始談起，走過了很多坑，換了很多方向，從使用者出發，從賦能觸發，總結經驗整合設計，探索出一條有想象力的阿裡雲視覺設計之路。
雲計算品牌設計對于很多設計師來說是一個陌生的領域，作為阿裡雲設計acd團隊的一員，從2014年至今經曆了阿裡雲品牌更新、官網改版等項目，通過挖掘品牌屬性，總結整合設計模式庫，從使用者出發，從效率出發，探索出了一條有想象力的阿裡雲視覺設計之路。
多方向思考
我們從2009年發展到現在，對比淘寶天貓這些bu來講，我們不管是從體量或者是業務上面來說，還是非常小的bu。但是我們發展到今天，一直随着業務發展一邊設計一邊探索。
阿裡雲去年8月份北京雲栖大會時進行了一次品牌更新，更換了品牌logo，我們在接到這個品牌項目時，首先第一步，先回顧阿裡雲2009年每個階段做的每一個logo， 2009年的第一個logo就是阿裡巴巴的雲，不用做品牌背書。從2010年到2016年，我們一直用雲的中文形狀去代表品牌形象，在整個業務發展過程中，我們也遇到過很多問題，比如外國人不知道“雲”到底是什麼，包括随着整個業務的發展，體量越來越大，我們也會遇到雲到底怎麼去賦能業務，是以我們開始思考怎麼樣對品牌進行更新和調整。
然後開始到飛機稿的階段，一開始方向是想要在原來圖形上進行更新，考慮到我們品牌一些曆史關系，我們本來不希望直接把所有東西全部搞掉，是以能夠看到我們也做了很多嘗試，包括字形、圖形上面多一些細節或少一些細節，我們發現當減到隻剩下7個點的時候，基本沒有辦法聊下去了。
我們又開始換方向去思考，去試一試别的圖形的嘗試。具像的雲、抽象的雲、一些線組成的雲等。同時我們也看了一些競品，包括騰訊雲、百度雲等，那麼，當所有的友商都用一朵雲去表達雲計算的時候，我們是否還要這樣去做呢？
于是，我們開始尋找很多關于計算的關鍵詞，比如一些數字、符号、包括一些天文等等，希望回到計算的最初去思考。最後我們發現，計算的本質就是擷取資訊的一種過程，而這個過程就是由二進制0和1組成，是以我們又去做一些關于0和1圖形的嘗試，另外我們希望除了0和1，同時整體logo形态又像一顆水滴，象征雲計算将像水電煤一樣成為it的基礎設施，整體logo向上的動勢，寓意阿裡雲要做雲計算行業的先進上司者。
我們一度認為我們找到了設計的方向，但是我們忽視了兩個非常重要的問題，我們溝通對象是誰，阿裡雲是什麼?如果沒搞清楚之前，我們永遠在做無用功，我們發現溝通對象是阿裡雲現有使用者和潛在使用者，從這個圖可以看出來，最下面一層是正在使用阿裡雲的公司，不管是央企、民企或者是中小型企業，中間部分使用者是正在考慮雲計算服務的潛在使用者，而上面這些是雲計算服務的一些觀望者。我們認為中間部分是企業的先行者，而上面部分是企業大衆。
那麼到底誰是企業先行者？研究報告發現，有36%的中國ceo對未來市場前景非常有信心，而大部分企業主關注的是新技能出現、市場新品的出現以及新科技替換，而53%的中國ceo已經開始使用了這些資料分析來尋求更好的洞察。是以企業大衆跟企業先行者的差別是什麼？企業先行者是影響企業大衆的一群人，企業大衆會關注目前問題，缺乏一個完整的計劃，而且不能完全明白洞察的力量，步伐緩慢缺乏對使用者的了解，而企業先行者想法不斷，計劃不斷，希望能夠用洞察的力量靈活去為使用者提供更好的服務。
從為企業找到高質的回報，到開始思考為使用者和公衆提供什麼。包括他們洞察的點，不止于此，我希望能夠為企業不斷創造價值。作為一個雲計算廠商，我們拿出所有方案去跟溝通對象去聊的時候，他們不能從這些圖形裡面了解，他們很難從這些圖形裡面找到代入感。
阿裡雲到底是什麼？在dt時代，雲計算是公共服務，更加是計算的引擎，而網際網路是基礎服、基礎設施，資料是資源，在整個dt時代中，阿裡雲一直都是在發展中，目前阿裡雲在全球有600多個結點，覆寫了全國大部分的城市，包括美西、美東、歐洲、澳洲等14個地方都有飛天資料中心，去年一年我們在海外市場增速已經超過了400%，我們不斷在幫助他們出海的同時也在為他們提供大資料雲計算的服務，我們在國内的發展也非常迅速，阿裡雲在做這些事的同時，除了有很多的客戶，除了可以掙一些錢，我們還可以給社會帶來什麼價值？
阿裡雲et在賦能城市交通的時候，使得杭州市的部分交通路段車輛通行率提升了11%，et城市大腦通過跟城市進行資料結合，能夠讓城市進行自我調節跟人類進行良性的互動。et在醫療中也有一些實踐，通過et的醫療大腦，我們讓甲狀腺的結節診斷準确率，從醫生準确率60%到70%提升到了85%。
重大突破
我們發現之前一些設計都太過于局限，無法講清楚我們想講的一些故事。接着我們重新換了方向，開始從程式員代碼裡面去找一些靈感，比如像一些計算的框、0和1代碼、包括一些生态鍊連接配接等等關鍵詞，進而得出最早的計算框圖形。我們希望計算框圖形本身是從代碼而來，希望它除了固态圖形，還能夠有更多的想象。例如語言是一些無法計算的價值，生命科學是一些無法計算的價值，人類大腦是一些無法計算的價值，宇宙銀河是一些無法計算的價值，我們在計算框本身的基礎上又去賦予一些更多的含義，進行一些細節上的調整，中間兩個框定義它是一個計算框，可以去賦能各行各業，中間是資料的流動計算，通過資料去服務各行各業。
到了這個階段，阿裡雲logo的形象基本上已經确定了。但是完整的一個品牌形象，除了從品牌識别、字型、産品、視訊、書、互動的一些東西以外，很重要一部分是網站線上的品牌體驗。logo注冊确認完以後，到最後要釋出差不多一個月的時間，我們要對網站進行改變，然後去對一些網站上原有資訊結構進行梳理，我們從視覺層面上進行一些優化，并且希望有一套新的視覺體系。
是以首先，我們需要回頭看阿裡雲在各個曆史階段所做的一些網站，最開始阿裡雲不管是網站上面，包括現實中提供的服務還是非常好的。
然後到了第二階段，我們在線上下用的是黃色，但是線上上用的是藍色，藍色用在網站的各個地方。
到了最後階段，網站上面能夠提供一些服務，包括解決方案、中間件、軟體市場等等，它有非常大的體量，是以我們去做回顧，目的就是為了能夠找到問題的本身，進而去解決問題。我們原來網站上面有很多的問題，線上用了不同兩套視覺，包括有一些不同的配色，這些規範有很多圖形、顔色的應用都是非常亂，包括在顔色使用上都是用小面積的文字鍊，或者是按鈕，其實對使用者來說很難形成非常強有力的視覺識别。
是以我們首先對阿裡雲顔色體系進行重新的推導和梳理，我們把阿裡雲這些品牌的顔色定義為品牌色，品牌中立色跟一些品牌功能色，去梳理出一張表，然後在表裡面根據實際使用環境以及功能不同，在這個基礎設定上面去做明度的變化，去定義整個網站包括組建文字圖形控件狀态等色彩。這個表的好處就是在做設計的時候，不再由設計師提供一個具體的設定，而是前端直接從庫裡面找到顔色，這個顔色就是阿裡雲的品牌色，這樣既可以保證頁面上的色彩統一，同時也可以保證高效的友善複用。
同時我們也重新梳理了網站的栅格體系，還有一些布局、字型、卡片等等，對于整個頁面結構我們也進行了一些調整，針對原來我們通過字型大小或者是線來分别不同的資訊層級而導緻整個頁面看起來非常零碎的問題，我們設計了一些不同的卡片形式，包括重新設計一些控件，适當的一些留白去重新組織這些資訊。
然後我們又重新對阿裡雲首頁所有圖表、概念圖、插圖等等做了一些梳理，發現一個非常大的問題，我們如何用圖形去表達類似于資料庫或者存儲或者雲服務等等這樣一些比較抽象的概念？很多時候我們對看不見、摸不着的類目，我們怎麼去設計，怎麼去表達？像谷歌雲在做計算引擎跟app引擎的時候，在做計算引擎logo的時候，很像一個晶片寫實的形狀，但是對表達app引擎概念的時候又去找一些抽象的方案去實作。是以我們提出疑問，資料庫的圖表非得畫的像一個資料庫嗎？這是一個非常有趣的問題。我們決定回到問題的最開始去尋找問題的答案。我們發現最早的人類在表達行走或者是太陽、房子、城鎮的時候，不是去畫三室兩庭寫實的房子，而是去畫一個抽象的形狀，通過想象你才能知道是什麼意思。舉個最簡單的例子，一個加号，如果把它變長一點，又變成了一個十字架，如果是紅色就是紅十字元号，如果在界面裡面看，你就能明白它是一個添加好友的符号。
我們發現符号其實是一個代表事物的标記，語言也是一個符号，符号本身有約定性和差異性，它這種約定性表示符号在這個社會約定俗成應用中間，形式和意義都是按照社會來約定俗成，符号的這種能指和所指，是由人類自己去規定的。
符号本身的差異性表示它不是孤立的一個符号，每一個符号都是在與其他符号機關差别中間去确定它自身的意義，說明符号它不是一個記号，而是系統的一個東西。
我們又去在一些藝術史上找一些不同的發現，我們曾經花了很多很多的時間去把一棵樹畫的很像，又去把一棵樹變的不像。我們從一開始追求造型本身的美感，到後面我們開始慢慢去思考事物本身的内涵、氣質、意義到底是什麼，然後我們走出了死胡同，我們就發現去設計計算、存儲、符号，其實它在一個大的系統沒有一個約定俗成的意義裡面，如果我們隻用一個icon沒有任何的文字去解釋這是存儲、計算，這無疑是去發明一個新的文字。
icon、banner、detail
是以其實我們想做的一件事情就是我們開始在思考到底什麼圖形才能夠代表阿裡雲的氣質。回到計算本身，去找很多二進制的代碼，包括中國計算、珠算等等東西，包括去看一些當代的藝術作品，從中去推導我們第一個計算符号，進而形成大量的抽象符号體系，得出我們整個0和1的設計語言，這個設計語言分為形而上和行而下兩個部分，形而上者為之道，行而下為之器。我們把道這部分定義為多元、運動、開放等關鍵詞，而器我們定義為設計當中會遇到的容器或者是icon，概念圖或者是視訊或者是線下書本等等。0和1設計從圖形上面是抽象的，而組合方式是有規可行的。
舉一個例子，比如多元怎麼樣去解釋，我們在做産品的icon，包括banner、詳情頁時候，我們其實在思考抽象的點線面圖形怎麼樣在平面跟虛拟三維空間實作。我們在icon上面定義好了一些線的粗細，不同的組合狀态去形成一系列抽象的icon，我們試圖在圖表上面去尋找運動的變化，去形成首頁上一些抽象的圖表。
但是到banner設計裡面又發現了比較大的問題，我們在banner設計裡面定義一個2.5維的空間，因為我們在首頁或者是在各個banner設計的時候，我們會遇到一個比較大的問題，banner設計不像是一個icon設計，它除了講單純一件事情的時候，可能還會有很多業務内容，比如說它的一些業務場景等，如果我們隻用二維，會有很多變化。是以我們把banner拆分成三個不同的層，例如主體物、特性場景、背景層，我們通過一些小的互動動效方式把它們有機結合起來，去表達更多的含義。
到了産品詳情頁設計，我們又遇到了難題，我們希望抽象的圖表在三維空間裡面去進行一個嘗試。因為使用者在浏覽從首頁到詳情頁，是一個慢慢深入我們産品的過程。那我們想做的就是希望使用者能夠深入多産品内部，不止是在平面空間裡面去看産品，更多我們在考慮有沒有可能動起來，是以我們在圖形形态、點線面體等等不同的形态上面，我們又開始考慮有沒有一些材質上面的變化，有沒有一些圖形上面的變化，我們去推導規定好，通過這種規範的模型庫，我們定義好不同的産品所表達的一些含義、所對應的這種形态、材質等等一系列的東西，我們去形成一系列産品的概念圖，包括cdn産品、對象存儲、fpga雲伺服器、高速通道等等。我們希望使用者在了解我們這些東西的時候，不僅僅看到平面的東西能夠進入到一個産品的内部，能夠知道這個産品是怎麼運作，怎麼去活動。
我們希望我們的計算框能夠充滿想象。是以我們在計算框線下面應用延展的時候，也定義好了一些計算的規則。比如說它是怎麼樣大小，在畫面當中是什麼樣的比例，通過這套規則我們希望線上線下形成一整套，通過這個框去框住不同的各行各業，給它更多的一些想象力。然後打個比方能夠看到這下面其實都是我們的一些客戶，比如說12306，墨迹天氣等等，小咖秀等等這些東西，其實大家很多時間在使用一些軟體，使用一些app的時候，已經不知不覺在享受我們雲計算這些服務。
我們也希望計算框能夠做一些更好玩的事情，不僅僅在圖形上面去做一些解釋，而且是能夠在設計方面去做一些嘗試。因為每年阿裡雲都會在全國各地舉行好幾個不同的雲栖大會，每一個雲栖大會我們都需要去做阿裡雲的産品手冊，産品手冊是一個非常大的工作量，我們一共有100多個産品，每個産品都有很多的内容，每一個雲栖大會都需要做内容的更新，重新設計，我們通過把這些資訊結構進行梳理規定好，骨架層、内容層跟一些皮膚層。通過骨架層定好内容的模闆，皮膚層我們希望它可以有更多玩法，每一期可以讓不同的設計師，去讓一些不同的前端工程師，一些視覺工程師或者是一些資料可視化工程師去玩，可以把這個東西當成是一個畫廊，你可以往裡面做一些更多的想象。其實計算本身不是我們去設計一個什麼樣的東西，而是說這個資料本身呈現出來就具有一些美感。
說到運動，我們也歸納出了一些運動的方法跟規則，0和1在運動中間我們拆分成pts規則，就說每一個運動方式都變成實體變化和速度等等。實體就是點或者線對象本身一個形态，實體是指實體屬性通過這個形态與實體屬性這種計算我們定義好了規則，它能夠産生很多變化。而通過這些變化又能夠産生進一步的更多變化，能夠有一些更豐富可能性和一些視覺的表現，又能夠産生一些新的不同形式和内容出來。當我們把這些東西加上一個速度，有了時間屬性之後，它又有不同的東西，比如在不同的時間裡面，它是先快後慢，先慢後快，怎麼樣的函數變化規則，通過這些規則組織，又有了一些不同的可能性，我們通過定義好這些規則之後，可以在不同的線上或者是線下延展或者傳播設計的時候去做動效時候，可以去做一些嘗試。
總結
最後，因為很多時候我們在做詳情頁、做渲染的時候，經常會遇到電腦太卡等一系列問題。對此，阿裡雲上線了gpu的雲伺服器，我們現在基本上都是通過雲伺服器進行一些動畫、概念圖、3d模組化等等一系列設計。我們希望未來設計師不再去局限于工具的本身，而是解放生産力，去思考更多設計體驗。另外，我們之是以從二維走向三維，因為未來設計不止會随着科技的發展，體驗設計也在發展，我們未來面對設計環境不僅僅是在二維的螢幕上做設計嘗試，而更可能是在ar或者vr等立體空間裡面去做設計體驗，是以我們希望，設計師以後在做這些設計的時候，所有設計師都有技術儲備，能夠在面對未來設計的時候遊刃有餘。