IXDC2017: 商業場景下的數據營銷

2017國際體驗設計大會上來自阿里巴巴資深交互設計師石瑩倩和阿里巴巴視覺設計專家李棟分享了以「商業場景下的數據營銷」為主題的內容，過程用到了大量近年來阿里巴巴成功的實際案例，比如每年的雙11。

商業場景下的數據營銷阿里巴巴超大屏數據可視化實踐

數據可視化應用價值與案例：超大屏數據可視化的商業應用場景，包括營銷、監控、接待和品牌傳播實踐。

2016雙11媒體直播大屏實戰：一場展現阿里生態、全球經濟連接和展現人生活消費方式的全球數據盛典。

超大屏數據可視化系統設計方法：商業、數據、可視化、硬體融合設計方法。

以下為演講的精彩內容

1、數據大屏商業應用前景和價值

也許會有很多人問，大屏的商業前景究竟是什麼。

大家回憶下《人民的名義》，電視劇在播放中經常可以看到一個大屏，追逐和定位犯人的地理信息。在監控領域，大屏的運用已經比較成熟，那麼大屏在商業中的價值和應用前景又如何呢？

我們所說的數據大屏，在應用場景上會有涉及到這些功能：品牌營銷、政務接待、商業洽談和數據監控。

2、阿里雙11大屏承載的是什麼？

就阿里而言，數據大屏主要承擔了品牌營銷和商務接待的功能。

社會和媒體對阿里大屏感知最深的可能是每年雙11期間的媒體直播大屏。

2013年開始，阿里第一次有了媒體直播大屏，媒體直播大屏解決的一個問題就是：直觀地體現消費者在雙11當日花費了多少錢。

之後兩年，阿里在雙11大屏的打造上提升一個層次，它除了有數據之外還會考慮營造氛圍。到了2016年，在設計大屏的時候，我們還思考了除了聚焦數據、渲染氣氛之外，是否可以有一些文化沉澱。

縱觀設計鏈路：我們首先會有一個內容規劃，其次是現場設計，最後會涉及到效果。這是一個完整的雙11大屏設計上的鏈路。

對我們來說，我們首先在內容規劃上會考量到用大屏承載阿里集團的業務戰略。而另一方面，我們也會從考慮分析「用戶是誰」的角度來規劃內容。

我們有政府層面的用戶，他們可能會更加聚焦在地域經濟的發展程度；第二——媒體層面，可能會關注人的生活方式；第三個是商家層面，商家肯定是更聚焦於品牌的營銷和傳播。

最後一個是消費者層面，其實更廣，就是我們所有人。可能我們每個人都會想，銷售額會到怎樣的一個高峰。

我們在2016年雙11媒體直播大屏的設計上會聚焦到文化沉澱角度。從消費的初衷出發，我們想到一個角度：我們除了給自己購物，還會不會給孩子、父母、朋友買東西，特別是在異鄉工作、生活的人，應該會遇到利用給親朋好友購買商品來傳遞思念之情。而同時漂泊在外的人是否也會因為家鄉的商品而睹物思情？

基於這種設想，我們進一步提煉了三個點來通過設計進行表達：

第一點是時間和空間的場景。我們用過去、現在和未來來表達時空。

什麼是過去？就懷舊，我們懷念兒時的味道、我們懷念兒時玩過的遊戲，比如說像《超級瑪麗》，或者「大白兔奶糖」。

那現在，現在就剁手，我們活在當下，我們要馬上幸福，馬上買下心中所想。那未來是社么？未來就是崇敬未來，我們能用什麼新的東西，雙11會不會有什麼新的奇迹？

第二個是大航海的視角。就大航海而言它本身是一個商業的奇迹，人一開始是依河流而居住的，然後有了部落、有了城邦，之後大家才可以貿易往來，這時候就出現了大航海。大航海的開端就是貿易的開端，人與人之間的物品可以相互交換，情感可以相互交流。

再到最後有了飛機，有了全球化，真正可以讓我們去到任何一個我們想去的地方。所以我們就提出了這樣一個大航海的視角，在大屏的設計上視角由全球到個人。

3、從理念到落地，交互設計是這樣實現的

前面說了這兒多關於理念的部分，在實現的生活，就需要交互設計上場了。

在2015年，由於受到硬體的限制，當時我們的雙11媒體直播大屏是，5個小屏拼成的一個看似是大屏的屏，然後每個小屏都會有各自的硬體控制。在交互上的話，我們進行了橫向切換。

到了2016年，雙11直播大屏就開始用的是大航海視角，以球為主體，進行了一個逐級切換，先從一個宇宙然後再切換到地球、再切換到國家、再切換到區域，然後最後到城市再到街道，這樣的一個過程。

這個是我們2016年雙11的交互規劃的一個策略。

我們要設計的情緒點是，開場、結束，也就是倒計時和最後定格的這個時間段。根據情緒我們就設計了一個內容空間。

內容空間是什麼？內容空間其實就是雙11大屏裡面的虛擬3D空間內容。在一開始大家對雙11充滿期待，那情感上是向前的、縱深的，對未來的崇敬。第二個是向外的張力，真正開始進入雙11了大家心潮澎湃，心態是往外擴張的，所我們給它的形態也是往外擴張。

隨著雙11的深入，我們進入了情緒平穩期，那我們在大屏上會給到一些形狀的波動，然後來表現一個航海過程中的艱辛。到最後奇迹出現了，這個時候是大家積累在心中的所有的情感的爆發，我們使用的是一種煙花向外擴散的這樣的一種感覺。

除了大屏內容的空間，我們還有現場互動的一個設計。

4、大屏的可視化設計

那麼雙11媒體大屏的視覺元素是怎麼推導出來的呢？我們先看一張圖，這是一張地球衛星圖，它是一種天然的數據可視化。比如說在這裡燈光的稠密程度就體現了一個地區的經濟水平，美國東部的廣大區域以及西部海岸線燈光最為繁密、明亮，實際上這些區域也是美國最有經濟活力的地區。

它就是一個天生的一個自然可視化，天生的數據可視化。

說到底燈光體現的是數據的狂歡，它把整個星球與每一個個體進行了連接。我們當時通過這個繼續找的符合調性的圖片，有星球、城市、盛典和演唱會，用一個詞來概括就是璀璨。

假如冬粉手中沒有的熒光棒台上的明星看到的就是黑壓壓的一片，台下冬粉的情緒就沒有釋放出來。點亮熒光棒，燈光就會給情緒一個外延的通道，這是我們情緒的擴展。紐約時代廣場的一張照片，可以看到各類商業信息非常密集，各色霓虹閃耀其間。我們把霓虹的色彩作為整個項目的色彩基調。

極簡翻牌器

在雙11的最開始，所有人都處在對這場狂歡的期待中。此時，需要一個只有GMV數字跳動的極簡翻牌器作為啟動屏幕去調動觀眾的情緒，作為所有大屏的前奏，直到10億達成，它是所有人聚焦的，同時又是情緒激昂的。

那麼它是如何實現的呢？在構建這個城市時，我們採用了box+map的形式，box即模型，創建多個盒子將整個城市的框架搭建起來。map則為貼圖，由於加入燈光對整個建築場景進行渲染比較耗費性能，且較難控制最終呈現的視覺效果，因此根據模擬出的光線角度，在貼圖上實現建築的明暗變化。

最終創建了30多個不同尺寸高矮的box作為城市建築群，在此基礎上繪製貼圖並輸出切片。

當所有的場景創建完畢之後，在場景中置入鏡頭並不斷向前推移，一個極具縱深感的動畫便誕生了。當鏡頭在城市中不斷向前推移，一個城市便具有了生命，數據也便不再冷冰冰，而有了生活的溫度。天貓之門穿插其間，象徵著不斷突破的雙十一，也象徵著阿里不斷前進的步伐。

戰略屏

戰略屏顧名思義即為從全局戰略的角度對阿里巴巴的業務進行概覽，其中既有整體的GMV，又有物流、村淘、全球交易、行業排名這樣的細節。

臨近雙11當天晚上0點的時候，整個星球都已經被數據點亮。一個巨大的貓頭居於畫面正中，既透出了天貓的品牌，又傳達出慶典的調性。

單純閱讀這篇文章可能無法體會現場的氛圍，從下面這種圖我們可以看出人與大屏的空間關係，在現場面對一塊超寬弧幕，會有一種觀看巨幕電影的感覺。

雙11的大屏完成了以後我們就想到了一個詞叫「體驗共生」，我們做了另一個面對商家端的監控大屏。它也會有倒計時，也會有彩蛋，完整的鏈路和雙11媒體直播大屏是保持一致的。

本文由阿里數據（AliData）整理，獲取更多2017國際體驗設計大會的精彩內容點擊閱讀原文或移至美啊（meia.me)平台訂閱觀看。