今天接著上次發布的《看阿里設計師如何玩轉 2020 云上云棲 — 品牌重構篇》繼續給大家講講解最近結束「云棲大會」。這是中國最早的開發者創新展示平臺，是一年一度的技術盛會，也是我們的伍德斯托克；和特別的2020一樣，今年設計師對“云上云棲”的演繹也格外特別，我們將逐一揭曉這場盛宴背后的思考與嘗試；而更重要的是，歡迎大家在公號后臺留言提問，我們會邀請主創同學逐一登場，開門問診&答疑解惑。
01?項目背景
2020，迎接我們的注定是一個不平凡的當打之年。一場來勢洶洶的疫情，改變了很多人的生活，也改變了商業會展的舉辦方式。根據中國會展經濟研究會的數據統計，從2011年到2018年，我國的各類會展無論在面積還是場次一直保持著穩定、持續地增?。而隨著疫情的到來，會展需求繼續增?的背景下，會展形式的重心將逐漸從線下往線上轉移。本次云棲大會正是適應了新的形式，由之前的線下完全轉移到了線上舉辦。而在疫情逐漸緩解，消退的后疫情時代，我們通過技術+設計結合的形式，輸出高質量的3D化、場景化、產品化、組件化的設計素材以及最新的3D/WebXR技術，以更豐富的形式和更沉浸的體驗，讓本次云棲大會成為線上的科技盛會。同時，我們積累的經驗、技術以及形成的解決方案也將在之后滿足不斷涌現的全新的線上會展的業務需求。
02?項目難點
A.?全新的線上官網設計挑戰
本次云棲大會首次在線上舉辦，覆蓋了百余場演講和論壇。以“3+300”的內容場次設置，為全球科技人帶來三場主論壇和展廳、100場分論壇和專場、100個城市站點線上線下聯動和100大新品發布，涵蓋云計算、人工智能、機器學習、量子計算、芯片、AIoT、組織協同、新零售、新金融、數字政府等領域。無論內容還是形式上，較往年有很大不同。
面對海量的線上內容，從品牌的透出、滿足客戶及用戶需求的多樣性、線下場景線上創意設計還原、對大會各議程及亮點通過創新設計手段表現，這都是設計的執行核心。
B. 直播呈現
2020年的疫情催熟了直播行業，各大直播平臺不斷推陳出新，想要趁著發展的浪潮占據線上云棲的一席之地，就不得不在“體驗式直播”上下功夫。
傳統的大會直播往往是線下搭建舞臺+線下拍攝，在媒體端呈現的效果跟看新聞無異。如何打破屏幕與時空的邊界，把遠在屏幕前的觀眾拉回到大會現場，把演講內容立體化的縈繞在觀眾眼前，成為本次大會區別于線下的重大挑戰。
因此，“綠幕”拍攝+虛擬演播廳的呈現形式應運而生——線下企業的各類創新通過直播給用戶帶來全新的體驗，直播的內容邊界和商業模式邊界，都被打破，直播給了我們更豐富的參會體驗，同時商業上也在進化。
C.?云上展廳
本次云棲大會有多個展廳，包括云游達摩、天貓精靈、云游AI實驗室、云棲科技空間等。阿里云設計中心主要負責云游AI實驗室和云游達摩。
對于云游AI實驗室，難點主要在于:
- 如何表達?A.I.Lab?在視覺計算，特別是三維重建方面的技術和產品能力;
- 如何讓?A.I.Lab?成為一個好玩的“游樂場”;
- 完整的線上素材實踐與工程化開發優化。
對于云游達摩展廳，難點主要在于：達摩院線下展廳設計已經基本完成，因為疫情的原因導致無法在云棲大會時開放參觀，因此需要將線下展廳轉換為線上展廳。那么面臨的主要挑戰就是如何在已有線下展廳的基礎上，傳達達摩院的愿景、使命。
03?設計過程
A. 官網設計過程
對于線上大會的視覺呈現，我們通過開場視頻的視覺沖擊力透傳云棲大會全速重構的概念，調動用戶的好奇心；通過“我的云棲”動效的增加，聯同本次大會的會議訂閱功能，讓用戶可自行定制云棲議程，使用戶有更強的參與感，實時性和互動性，吸引用戶沉浸其中。
同時?橙獎在本次云棲大會上進行了頒獎直播。
B.?“體驗式直播”——綠幕設計過程
嘉賓演講內容作為對外傳播的核心，在確認“體驗式直播”這個目標后，如何打破屏幕與時空的邊界，讓觀眾有沉浸式的體感，成為我們要解決的關鍵問題。我們放棄了所有線下舞臺的錄制方法，通過日常積累的【綠幕拍攝解決方案】經驗，為直播呈現設計出全新的“頭號玩家”般的未來科技空間。
一方面通過超大型綠幕舞臺對演講嘉賓進行拍攝：
另一方面建模渲染出與大會主KV一致的虛擬動態場景：
二者結合，迅速把觀眾代入到一個集技術與藝術美感為一體的沉浸式科技時空。
C. 云上展廳設計過程
當大會被搬到了線上，展會、展覽的數字化也成為必不可少的亮點元素。在互聯網高速發展的今天，數字化轉型已然成為會展業的必然趨勢，利用3D建模技術+VR全景技術再插入視頻及圖文解說，參觀者在終端上無需安裝任何軟件及插件，只需要一條鏈接就可以實現與線下參觀完全一樣的感官體驗。再也不用去線下被溫度計指著說：“請出示健康寶”了。
本次大會的云上展廳版塊可謂百花?放。其中兩大云上展廳【云游AI實驗室】、【云游達摩】在與業務團隊的合作攻堅下，首次對外開放。
1. 云游AI實驗室
我們通過創意設計、互動體驗設計、glTF線上素材規范與流程輸出、代碼實現技術選型與難點指導攻克。基本上最為核心的技術+設計均由阿里云設計中心完成，而相對較為執行和繁復的部分則由供應商團隊一起完成。
當接到這個 A.I.Lab 的展廳需求后，腦海里第一個浮現的畫面是充滿科技感的《攻殼機動隊》電影畫面；而內容層面主要是傳達實驗室的三大核心技術產品——全息城市、全息店鋪、云上展廳。技術與設計的碰撞最終形成“空中未來智慧城市”概念的火花。
設計草圖：
建模：
代碼調試：
上線效果：
2.?云游達摩
云游達摩展廳由于內容和線下實體展館已經完成設計，因此主要的設計優化集中在UI設計以及線下轉線上的互動體驗設計和優化，這部分由阿里云設計中心完成。而技術選型和工程化落地則由供應商團隊獨立完成。
眾所周知達摩院的氣質兼具科技與武俠感，在展廳酷炫科技?的外表下希望讓參觀者感到濃濃的人文情懷，因此在設計時我們將武俠人物與交互引導進行設計結合，仿佛有個虛擬的大俠導游在屏幕上引導你游覽。
開屏加載動畫:
交互引導圖標：
上線效果：
04?云游AI實驗室的技術實現
為了更好地展現 A.I.Lab 在三維重建方面的領先核心技術和產品能力，我們選擇了在Web端通過互動3D的方式做展示。主要的核心技術棧選擇了較為常用的three.js。在開發落地過程中，遇到了以下的技術難點并逐一克服，同時部分功能沉淀后可在之后項目中不斷復用。
A.?glTF流程?
three.js引擎支持的格式非常多，但傳統的3D模型格式沒有針對線上使用做優化，文件大小會非常大。因此我們采用glTF格式，它的特點是最大程度的減少了 3D 模型文件的大小，提高了傳輸、加載以及解析 3D 模型文件的效率，并且它可擴展，可互操作。
B.?技術實現細節
1. 從C4D到three.js的軌跡點動畫
2.?多點位點擊出現的優化
3. 掃描線效果
4. 自定義orbit controls組件
5. 多端適配
05?整體效果
1.?云游AI實驗室效果
2. 云游達摩展廳效果
06?結語
今年云棲大會的主題是“全速重構”，在技術大咖們“全速”敲擊代碼之時，設計師們也無不通過創意的“重構”、表現形式的“重構”、互動體驗的“重構”為大會添磚加瓦。
我們在本次云棲大上首次運用了全域云會展的解決方案。除了新穎的官網設計以及綠幕直播技術的運用以外，阿里云設計中心-云展項目組在云游達摩、云游AI實驗室、云棲科技空間等云上展廳上提供了設計及技術支持。其中【云游AI實驗室】歷經從0到1的設計與開發。在這個過程中，我們每個人從專業的?度，結合計算設計理論，首次通過三維重構的信息轉譯方式，打破設計和技術的邊界，創造性地打造了一個集互動和游覽于一體的線上沉浸式體驗;在保證信息內容有效傳達的同時，帶給用戶難忘的視覺交互體驗，為今年的線上云棲注入新的科技元素。
在這為期不到兩個月的項目周期里，我們順利完成了重塑線上會展的第一步。隨著新技術的發展和普及，全面上云的可能性將會更多，要學習和探索的路將會更好。希望我們在全域云會展的探索和實踐中能為正在閱讀的你帶來啟發，我們也期待著更多的聲音與交流。
原文地址：阿里云設計中心（公眾號）
作者：阿里云設計
轉載請注明：學UI網 » 看阿里設計師如何玩轉2020云上云棲 — 云上展廳篇
