關(guān)于demo設(shè)計

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

 

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

 

 

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

 

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

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

 

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

 

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

 

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

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

 

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

統(tǒng)一語法結(jié)構(gòu)，降低溝通成本

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

 

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

頁面重構(gòu) - 建立輪廓化感知 

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

 

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

 

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

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

 

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

 

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

 

例如在智能組貨的demo中，正常的演示流程是：在填寫完創(chuàng)建內(nèi)容-點擊組貨-智能組貨列表。這個流程中，點擊組貨到生成列表的過程幾乎是瞬時的，如果如實演示，觀眾對智能組貨的過程幾乎無感，但其實這個過程才是我們最想強(qiáng)調(diào)的，所以這我們?nèi)藶椴迦肓艘欢谓M貨進(jìn)度動畫，原本瞬時完成的智能組貨被人為增加了時長，雖然不夠?qū)憣嵙?，但讓觀眾清楚的看到了智能組貨這個過程。
 

 

整套動效demo輸出

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

小結(jié)

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

 

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

 

作者：謝輝敏