關于demo設計

Demo這個詞每個互聯網人一定都耳熟能詳，雖然在音樂、影視等領域中也有“demo”的應用，但在互聯網場景下“demo”一詞已經有了其獨特的含義和作用。

 

Demo是英文Demonstration的縮寫，意思是樣片、原型、展示、示范。與音樂、影視等行業(yè)中“小樣”的作用不同的是，在互聯網人的日常中，demo有更多的使用場景。用作原型，在共創(chuàng)會、評審會等場景幫助不同專業(yè)背景的人高效溝通對焦；用作產品展示，在官網等場景觸達用戶、傳遞價值；作為概念演繹，在發(fā)布會等線下場景影響現場與會者和觀眾。

 

 

Demo其實本質上就是一種高效溝通的表達方式：它將原本復雜的產品雛形，直觀高效的表達出來，原型demo幫助團隊內部各個角色高效溝通、決策；展示demo幫助產品和用戶、觀眾高效溝通、交流；在一些重要的評審會、大型戰(zhàn)略發(fā)布會上，這些作用和價值將會加倍放大。

 

線下發(fā)布會場景下的demo設計

在前不久結束的零售通2018戰(zhàn)略發(fā)布會上，有許多新的產品功能需要在大會上發(fā)布和演示，但大會的與會者多是傳統(tǒng)渠道的品牌商、經銷商以及前線拍檔，對線上產品的理解程度有限，同時大會也有議程時限，所以這時候顯然需要借助簡潔的demo化表達，才能有效的將復雜的B端產品講述清楚。

 

最終我們?yōu)榇髸PT設計輸出了一組動效demo，用以展示零售通各種數據化產品，以簡潔清晰的方式，讓與會者快速理解吸收產品的核心價值，達成高效的“溝通”。這一次的demo設計案例,讓我看到了demo設計能給業(yè)務帶來的價值，意識到了其中的潛在能量。趁著活剛干完還熱乎，我想趕緊沉淀下來其中的經驗方法，從線下發(fā)布會這一場景，和大家交流分享demo設計的點滴心得。

 

線下發(fā)布會場景下，會場本身會給demo設計帶來幾個顯著的挑戰(zhàn)：巨幕、遠距、時效，同時還有與會聽眾的自身特點，在零售通2018發(fā)布會的實踐中，我找到的應對方法是：合理布局、統(tǒng)一語法、頁面重構、時間重塑。

 

合理布局 - 寬屏巨幕VS人眼視度

Demo是用來溝通、展示的，每一個demo都必定會有其特有的場場景，發(fā)布會的場景特殊之處就是超大空間里的超大巨幕，對我們人眼視度造成的挑戰(zhàn)。人眼視度即指人的肉眼可視角度的度數。人類通常是124度，當集中注意力時約為五分之一，即25度。同時人眼平視時上方可見區(qū)域為50度，舒適視域為25度。

 

所以在設計以會場巨幕為載體的demo時，就必須要考慮demo相對布局方式，比如為了人眼在觀看demo展示時能處于比較舒適的狀態(tài)，就應該盡可能讓demo盡可能處在會場觀眾縱向、橫向的舒適視度范圍內。

統(tǒng)一語法結構，降低溝通成本

確定了demo的整體布局后，demo區(qū)塊內的元素要怎么呈現呢？如果能預設一套統(tǒng)一的語法結構，讓同類信息元素以相似的形式出現，減少信息繁雜給觀眾帶來的認知負擔，則既能降低人眼視度局限性的影響，又能減少產品信息和觀眾之間的“溝通”成本。

 

在零售通2018戰(zhàn)略發(fā)布會中，我們?yōu)镵eynote中呈現的demo設定了統(tǒng)一的展示邏輯，統(tǒng)一的語法結構，既保證了視覺上的統(tǒng)一，也降低了與會者和觀眾的理解成本。

頁面重構 - 建立輪廓化感知 

展示demo通常需要將原有產品做簡明扼要的表達，一方面demo的受眾專業(yè)背景不一，在有限的注意力內是不愿意接受太過繁雜的信息的；另一方面產品設計開發(fā)等流程上下文缺失，觀眾對產品背后的各種邏輯有理解成本。

 

線下發(fā)布會由于會場較大，如果事無巨細的還原產品頁面，觀眾肯定要看的不知所云，所以必須通過精簡甚至重構原有頁面，讓與會者能大致感知到產品輪廓。

 

時間重塑 - 讓時間更有價值

動效demo的設計相較于靜態(tài)demo，增加了時間的因素，每個流程占據的時間決定了觀眾注意力的留存，而在線下會場中，更是需要分秒必爭，讓有限的時間發(fā)揮出最大的價值。

 

在零售通2018發(fā)布會上，每一個demo基本都只有20s不到的時間，要想成功的和與會者達成一次20s的高效“握手”，除了精簡流程，還需要重新調整時間分配，重塑時間：將正常的操作/演示流程的時間重新再分配，延長重點流程耗時以展示更清晰，壓縮冗余流程耗時以減少多余干擾。

 

在發(fā)布會展示的demo中，背后往往是數月設計開發(fā)的過程積累，如果死板地按實際的流程演示，將會有非常多冗余：操作、勾選、點擊等等，短短20s內，如果不做取舍，要么說不清楚，說不完整。要么關鍵步驟被各種冗余操作淹沒。

 

例如在智能組貨的demo中，正常的演示流程是：在填寫完創(chuàng)建內容-點擊組貨-智能組貨列表。這個流程中，點擊組貨到生成列表的過程幾乎是瞬時的，如果如實演示，觀眾對智能組貨的過程幾乎無感，但其實這個過程才是我們最想強調的，所以這我們人為插入了一段組貨進度動畫，原本瞬時完成的智能組貨被人為增加了時長，雖然不夠寫實了，但讓觀眾清楚的看到了智能組貨這個過程。
 

 

整套動效demo輸出

零售通2018發(fā)布會上，一共展示了6枚產品動效demo，這6枚動效demo成功的把6個背景復雜、鏈路繁多的產品各自在20s內直觀有效的展示清楚了，并且內容得到了同事、用戶、聽眾們的認同，在之后的投資者大會和云棲大會和前線的各種宣導場景，這些動效demo都被復用傳播，十分受歡迎。 

小結

以上就是基于零售通2018發(fā)布會demo設計的過程中沉淀下來的一些經驗和心得，不同demo設計覆蓋的場景各不相同，線下發(fā)布會是今天集團內越來越多的一個獨特場景，但愿通過我們此次零售通發(fā)布會的些許經驗，能起到些拋磚引玉的作用，給其它證在進行demo設計的同學一點點參考和啟發(fā)。

 

我以為，demo設計應該是每一個設計師的必修課，是我們需要認真對待的設計對象，在平日匆匆的需求設計中，偶爾的間隙去理解和思考下demo的設計，必定能讓我們收到一些驚喜。

 

作者：謝輝敏