來(lái)源：iH5
頂著老板/甲方日夜催設(shè)計(jì)稿的壓力，我猜總有哪一天你感覺(jué)靈感枯竭，撓破頭皮想辦法獲取更多新鮮、高端的設(shè)計(jì)靈感以便能捉住用戶(hù)的胃口...
有沒(méi)有什么捷徑，可以通過(guò)對(duì)素材做簡(jiǎn)單處理、組合就做出逼格高的設(shè)計(jì)？
有！比如以下七類(lèi)：
1. 線(xiàn)條+動(dòng)效=高科技感的設(shè)計(jì)
2. 插畫(huà)+霓虹燈=魔幻色彩的設(shè)計(jì)
3. GIF+交互控制=實(shí)時(shí)的互動(dòng)體驗(yàn)
4. PSD+動(dòng)效=活潑的動(dòng)畫(huà)
5. 線(xiàn)條+時(shí)間軸=可視化的運(yùn)動(dòng)
6. 漫畫(huà)+分鏡框架=有力的信息表達(dá)
7. GIF+GIF+GIF=強(qiáng)大的視覺(jué)沖擊
嗯，快看看下面的獨(dú)門(mén)秘籍吧——
一、由線(xiàn)條&動(dòng)效組成的高科技感觀(guān)
在頁(yè)面上，用一些簡(jiǎn)單的線(xiàn)條、圓框結(jié)合深色背景，這形成的視覺(jué)反差立馬就吊起了用戶(hù)的胃口?。?/p>
而制作上其實(shí)是很簡(jiǎn)單的，主要是把素材無(wú)彩色化（白、灰）放在黑色/深色系背景中，然后用附上動(dòng)效的純顏色的線(xiàn)段、圓圈對(duì)素材加以修飾。
科技視覺(jué)效果的設(shè)計(jì)配色參考：
用于配合的動(dòng)效推薦：旋轉(zhuǎn)&回旋、閃爍、跳動(dòng)、線(xiàn)段延伸&素材漸變（時(shí)間軸動(dòng)畫(huà)）
在iH5發(fā)布的《探尋007座駕的秘密！》案例，就用了相類(lèi)似的技法——把汽車(chē)素材處理成偏灰色調(diào)并放置下深色系背景上，以加上“閃爍”動(dòng)效的線(xiàn)條來(lái)對(duì)汽車(chē)的各個(gè)部件進(jìn)行提示，視覺(jué)效果和科技感都十分到位。
二、加點(diǎn)霓虹色素材秒變藝術(shù)范
簡(jiǎn)單的一張圖片，摳掉某個(gè)部分換成霓虹燈的動(dòng)畫(huà)，你猜會(huì)怎么樣？閃瞎眼！
這種形式展示出的就是藝術(shù)范（逼格已到賬）。其背后的設(shè)計(jì)套路也很簡(jiǎn)單——霓虹化素材疊加+時(shí)間軸動(dòng)畫(huà)/特定動(dòng)效：
把底層素材在相應(yīng)位置堆砌形成層次化，再把需要霓虹效果化的素材單獨(dú)抽出進(jìn)行色彩處理，最后把某些局部素材用時(shí)間軸功能進(jìn)行微動(dòng)控制；
亦或者可以直接使用動(dòng)效——閃爍、向某方向飛出等，以達(dá)到想要的效果。
相關(guān)素材下載網(wǎng)站推薦：http://giphy.com/search/neon
三、誰(shuí)說(shuō)GIF不能用交互來(lái)控制？
“與其讓我馬上看到結(jié)果，不如讓我細(xì)細(xì)品味過(guò)程?！边@話(huà)雖然矯情，可挺在理的！連GIF播放過(guò)程能控制那得多浪漫。
這種有演變過(guò)程的GIF配合上一定的交互動(dòng)作，可以激起用戶(hù)的好奇心，并使作品更具吸引力。（例如上圖可以設(shè)計(jì)成用戶(hù)做出點(diǎn)擊/滑動(dòng)等手勢(shì)后GIF開(kāi)始播放，破繭成蝶。）
你可能會(huì)問(wèn)：“GIF是自動(dòng)播放的啊，怎么加交互來(lái)觸發(fā)？”。
對(duì)，GIF是自動(dòng)播放的，我們不能直接在它身上做交互聯(lián)動(dòng)，但我們可以轉(zhuǎn)個(gè)小彎路來(lái)控制它——把GIF用圖片序列上傳。
如果是視頻的話(huà)，還可以把各幀導(dǎo)出，打包成Zip壓縮包。
然后把GIF或壓縮包用編輯器上的圖片序列功能上傳，屬性上根據(jù)實(shí)際需求設(shè)置即可（關(guān)鍵設(shè)置點(diǎn)：播放次數(shù)、時(shí)間間隔）。把圖片序列的自動(dòng)播放關(guān)閉，然后通過(guò)一定的事件邏輯觸發(fā)其播放，這樣就實(shí)現(xiàn)了用交互來(lái)控制GIF的效果啦。
例如在頁(yè)面上通過(guò)圖片序列導(dǎo)入上面這兩個(gè)GIF素材，通過(guò)一定條件的觸發(fā)，讓少女睜開(kāi)眼、讓少女回眸&樹(shù)葉落下，只需一點(diǎn)小腦洞就可以讓用戶(hù)瞬間喜歡上你的作品啊！
相關(guān)素材推薦網(wǎng)站 - 過(guò)程演變類(lèi)GIF素材下載網(wǎng)址：
Your Favorite Day Of Fall：https://www.behance.net/gallery/23434857/Your-Favorite-Day-Of-Fall
四、獨(dú)立元素的動(dòng)效聯(lián)動(dòng)
你以為只有馬里奧動(dòng)嗎？身邊的東西都會(huì)跟著他動(dòng)...形式上是用PS處理好素材后，直接導(dǎo)入PSD，然后對(duì)各個(gè)獨(dú)立的元素用常見(jiàn)的動(dòng)效加以修飾：
動(dòng)效循環(huán)播放，整體畫(huà)面變成較為幽默的動(dòng)畫(huà)。另外，我們也可以對(duì)各元素的動(dòng)效設(shè)置“延遲播放”，并用一定的交互邏輯加以觸發(fā)，使整體動(dòng)效展示出的效果更具聯(lián)動(dòng)性和交互性。除了上述的畫(huà)面內(nèi)多個(gè)動(dòng)效間聯(lián)動(dòng)，還可以把內(nèi)容和動(dòng)效放一塊兒：用戶(hù)滑動(dòng)頁(yè)面，其他獨(dú)立素材的淡入淡出等動(dòng)效會(huì)隨著內(nèi)容的改變而改變。
五、可以看得見(jiàn)的素材運(yùn)動(dòng)軌跡
“騷年，你試過(guò)身體被線(xiàn)纏繞的快感嗎？”額..這不是捆綁別想歪...
上述三張圖是來(lái)自iH5官網(wǎng)注冊(cè)頁(yè)面的一個(gè)有趣的短視頻，這種形式可以說(shuō)相當(dāng)特別，把素材的運(yùn)動(dòng)軌跡可視化之余，還有效地把用戶(hù)的目光留在頁(yè)面中，一定程度上提高用戶(hù)留存率。
但不足之處也比較明顯：操作繁瑣度比較高，如果想要更炫酷的效果——點(diǎn)擊某地方，所有線(xiàn)段才依次顯示，這就要把一條線(xiàn)段都放在時(shí)間軸下統(tǒng)一控制（包括透明度和位移等），這會(huì)逼死強(qiáng)迫癥患者的...
六、用插畫(huà)/漫畫(huà)代替頁(yè)面，用對(duì)話(huà)代替內(nèi)容
簡(jiǎn)單的漫畫(huà)讓大家看得樂(lè)此不疲，還讓廣告植入得毫無(wú)防備！
這種玩法對(duì)設(shè)計(jì)能力要求會(huì)相對(duì)高一點(diǎn)——設(shè)計(jì)帶有劇情的漫畫(huà)故事。主要玩法在設(shè)計(jì)好的漫畫(huà)中，將其他獨(dú)立的素材添加進(jìn)去并對(duì)其進(jìn)行加工：局部色彩填充、模糊效果等，盡量把每一個(gè)分鏡變得有趣起來(lái)，最后就是添加關(guān)鍵的動(dòng)效以及交互了。
相似案例：
七、玩的就是后現(xiàn)代主義視覺(jué)
在頁(yè)面上放一個(gè)炸裂的耶穌，你猜會(huì)有什么效果？驚艷??！
目標(biāo)受眾是年輕人的話(huà)可以考慮這種形式，特別適用于BGM特強(qiáng)、有節(jié)奏感的案例。
有很多音樂(lè)節(jié)承辦方跟設(shè)計(jì)師Wingz合作，她的H5很多都是采用這種技法，達(dá)到的視覺(jué)效果都超贊！
Wingz在iH5制作的作品
推薦使用場(chǎng)景：音樂(lè)節(jié)、舞會(huì)、街舞大賽、K歌比賽或其他面向年輕人的活動(dòng)宣傳。
相關(guān)GIF下載網(wǎng)站推薦 - 視覺(jué)炸裂的GIF素材下載網(wǎng)址：
G I ? M K II：https://www.behance.net/gallery/33957132/G-I-M-K-II
Dizzying Animated GIFs by Dave Whyte：http://theinspirationgrid.com/dizzying-animated-gifs-by-dave-whyte/
在文章的最后，還是語(yǔ)重心長(zhǎng)地嘮叨一句：在設(shè)計(jì)時(shí)切忌把重心全部放在逼格實(shí)現(xiàn)，而忘了整體的質(zhì)量，不能撿了芝麻丟了西瓜！總的來(lái)說(shuō)，高逼格的設(shè)計(jì)門(mén)道還有很多值得發(fā)掘，你有什么新的創(chuàng)作思路或者高逼格創(chuàng)作技法，不如一起來(lái)分享一下，大家好才是真的好！
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
![[8月下載] H5手機(jī)移動(dòng)項(xiàng)目截屏 ——設(shè)計(jì)資源 57](https://file.digitaling.com/eImg/cover/20160831/20160831180200_42303.jpg)
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）