當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

3種簡單的動態(tài)特效為展示帶來神奇效果

2018-08-01 3859 0

07bb56f8b1306ac725794861bd4c.jpg


為什么蘋果發(fā)布會經(jīng)常讓人為之瘋狂?演講人的口才固然重要,可好馬還需配好鞍,展示設計也是關鍵。


 

蘋果多年來一直用基本一模一樣的Keynote模板做Pre(展示),蘋果發(fā)布會上,大屏幕的演示格調(diào)并沒有多大變化——深色漸變底加白字、聚焦式的動畫。不復雜,但依然富有魅力。


在此通過3種簡單的動態(tài)特效(而且每個人都可以輕易學會),來探索用HTML5網(wǎng)頁設計多媒體交互,能為展示帶來什么樣的神奇效果。


 

1、延時,60秒做出生長的效果

如果你準備發(fā)布Apple Watch,如何在5秒內(nèi)立刻抓住人們的眼球?一個簡單卻實用的方法是讓產(chǎn)品細節(jié)分步呈現(xiàn)出來,形成組裝產(chǎn)品的生長效果。

92c756f8b19532f875a944961de2.jpg


 

大部分產(chǎn)品有PSD格式的原型圖,設計精美但細節(jié)繁多,導入PPT等軟件進行動效處理十分麻煩。如上圖,利用iH5.cn發(fā)布的新功能,能在保留所有分層結(jié)構(gòu)的前提下一次性導入PSD,快速制造延時的動效。


 

cd7456f8b21d6ac7257948448ccc.jpg

把PSD文件拖拽到編輯器進行上傳,再為產(chǎn)品的部件分別添加飛入、彈跳等動效、設置動效在不同時間出現(xiàn),就能模擬出產(chǎn)品的“生長情況”。

KEY#1:動效的延遲一開始可以控制在1-3秒,后面的間隔越來越短(并低于動效時長),還能形成重疊的動感,有利于制造現(xiàn)場的張緊感。


 

2、聚焦,Duang一樣的特技

“怎么讓觀眾把注意力集中到我想要讓他們看的地方?”聚焦有兩個技巧,一是把你想要突出的內(nèi)容放大,二是隱藏不重要的內(nèi)容。


 

52df56f8b25f32f875a9441652c6.jpg


著名的展示工具Prezi用的就是第一個法子,實時放大展示重點。但它應用還不廣,每到一個地方得重裝一次,功能也比較有限。如上圖,使用畫布工具來設計好玩的“聚焦”特技的遮罩功能,能在普通瀏覽器中進行在線展示。


 

edde56f8b26c32f875a944ef78c3.jpg


 

在畫布下放兩張圖片,一張展示圖,一張PNG格式的白色蘋果LOGO,把展示圖的遮罩設為蘋果LOGO,就有上圖的效果。容易吧?如果再為圖片放一個向左滑動的效果,還能制造漂移的動感。


 

KEY#2:畫布的遮罩效果和設為遮罩的圖片息息相關,作為遮罩的圖片色彩越明亮,被遮的圖片越不透明。

4c7556f8b27632f875a9440cd948.jpg


 

因為作為遮罩的蘋果LOGO是全白的,它顯示區(qū)域內(nèi)的圖片才是完全不透明的。比如上面從白色到黑色的四個圓是遮罩,它的顏色越深,城堡圖片對應位置的透明度越低。遮罩全黑時,城堡就不見了。


 

(注:國內(nèi)很多移動端瀏覽器尚未支持HTML5的Canvas遮罩效果,所以它目前更適用于PC端展示。)


 

3、演示,是調(diào)節(jié)氣氛的步伐

如果想要設計一場毫無缺漏的發(fā)布會,直接搞一場錄播就行,但也失去了現(xiàn)場的魅力。因為可能會出現(xiàn)各種突發(fā)情況,現(xiàn)場才更刺激、更有吸引力。怎樣能在展示中加入可控的“變量”來調(diào)節(jié)氣氛?


 


 

47ee56f8b28b6ac7257948977cc1.jpg


 

答案之一是演示,而且最好是用一些讓觀眾自己上臺,同樣能輕易完成的行為。電腦上的比如簡單的拖動,如上圖,利用有趣的遮罩結(jié)合拖動來展示不同型號的蘋果手機。


 

1c2d56f8b2966ac7257948f30b84.jpg


 

這里應用到了遮罩強悍的“濾鏡”功能,設置很簡單,只是把剛才的白色蘋果LOGO做成了彩色漸變,再用一張?zhí)O果手機的圖片作為彩色LOGO的遮罩。這樣一來,相當于保留了LOGO的顏色特征,又能利用蘋果手機圖片的色彩明暗變化讓LOGO現(xiàn)出蘋果手機的“原形”。


 

這時候,把蘋果LOGO圖片的“拖動類型”設為任何方向,就能在展示中途隨意用鼠標拖移蘋果LOGO,演示為蘋果手機加彩色濾鏡的特技了。


 

KEY#3:想要實現(xiàn)Prezi的聚焦放大效果?使用事件工具,在一張允許拖動的圖片上放個透明按鈕,設置點擊按鈕時圖片尺寸放大就行。

663656f8b2a16ac7257948f8c338.jpg


“除非你有值得一說的東西,不然你就做不了一個好的演講。”


全球赫赫有名的TED大會,靠演講為世界傳播了各種各樣的創(chuàng)意。而作為TED多年的策展人Chris Anderson,有著上面這句名言。


 

有了值得一說的東西,是否有足夠好的演講手段,是史蒂夫·喬布斯和蒂姆·庫克在蘋果發(fā)布會上反響的區(qū)別。你更欣賞喬布斯還是庫克?現(xiàn)在,你還要錯過用動態(tài)展示抓住觀眾注意力的機會嗎?


32
評論區(qū)(0)
正在加載評論...