設計師作品裝逼指南：這樣做可以讓用戶瞬間愛上你！
作者：尼姑拉絲趙四
對素材做簡單處理、組合就做出逼格高的頁面設計的竅門。
頂著老闆/甲方日夜催設計稿的壓力，我猜總有哪一天你感覺靈感枯竭，撓破頭皮想辦法獲取更多新鮮、高端的設計靈感以便能捉住用戶的胃口... 有沒有什麼捷徑，可以通過對素材做簡單處理、組合就做出逼格高的設計？
有！比如以下七類：
1.線條+動效=高科技感的設計
2.插畫+霓虹燈=魔幻色彩的設計
3.GIF+交互控制=實時的互動體驗
4.PSD+動效=活潑的動畫
5.線條+時間軸=可視化的運動
6.漫畫+分鏡框架=有力的信息表達
7.GIF+GIF+GIF=強大的視覺衝擊
嗯，快看看下面的獨門秘籍吧
一、由線條&動效組成的高科技感觀
在頁面上，用一些簡單的線條、圓框結合深色背景，這形成的視覺反差立馬就吊起了用戶的胃口啊！
而製作上其實是很簡單的，主要是把素材無彩色化（白、灰）放在黑色/深色系背景中，然後用附上動效的純顏色的線段、圓圈對素材加以修飾。
科技視覺效果的設計配色參考：
用於配合的動效推薦：旋轉&迴旋、閃爍、跳動、線段延伸&素材漸變（時間軸動畫）
《探尋007座駕的秘密！》案例，就用了相類似的技法——把汽車素材處理成偏灰色調並放置下深色系背景上，以加上「閃爍」動效的線條來對汽車的各個部件進行提示，視覺效果和科技感都十分到位。
iH5案例《探尋007座駕的秘密！》
二、加點霓虹色素材秒變藝術范
簡單的一張圖片，摳掉某個部分換成霓虹燈的動畫，你猜會怎麼樣？閃瞎眼！
這種形式展示出的就是藝術范（逼格已到賬）。其背後的設計套路也很簡單——霓虹化素材疊加+時間軸動畫/特定動效： 把底層素材在相應位置堆砌形成層次化，再把需要霓虹效果化的素材單獨抽出進行色彩處理，最後把某些局部素材用時間軸功能進行微動控制；亦或者可以直接使用動效——閃爍、向某方向飛出等，以達到想要的效果。
三、誰說GIF不能用交互來控制？
「與其讓我馬上看到結果，不如讓我細細品味過程。」這話雖然矯情，可挺在理的！連GIF播放過程能控制那得多浪漫。
這種有演變過程的GIF配合上一定的交互動作，可以激起用戶的好奇心，並使作品更具吸引力。（例如上圖可以設計成用戶做出點擊/滑動等手勢後GIF開始播放，破繭成蝶。） 你可能會問：「GIF是自動播放的啊，怎麼加交互來觸發？」
對，GIF是自動播放的，我們不能直接在它身上做交互聯動，但我們可以轉個小彎路來控制它——把GIF用圖片序列上傳。
如果是視頻的話，還可以把各幀導出，打包成Zip壓縮包。
然後把GIF或壓縮包用編輯器上的圖片序列功能上傳，屬性上根據實際需求設置即可（關鍵設置點：播放次數、時間間隔）。
把圖片序列的自動播放關閉，然後通過一定的事件邏輯觸發其播放，這樣就實現了用交互來控制GIF的效果啦。
例如在頁面上通過圖片序列導入上面這兩個GIF素材，通過一定條件的觸發，讓少女睜開眼、讓少女回眸&樹葉落下，只需一點小腦洞就可以讓用戶瞬間喜歡上你的作品啊！
四、獨立元素的動效聯動
你以為只有馬里奧動嗎？身邊的東西都會跟著他動...
形式上是用PS處理好素材後，直接導入PSD，然後對各個獨立的元素用常見的動效加以修飾：
動效循環播放，整體畫面變成較為幽默的動畫。另外，我們也可以對各元素的動效設置「延遲播放」，並用一定的交互邏輯加以觸發，使整體動效展示出的效果更具聯動性和交互性。
除了上述的畫面內多個動效間聯動，還可以把內容和動效放一塊兒：用戶滑動頁面，其他獨立素材的淡入淡出等動效會隨著內容的改變而改變。
五、可以看得見的素材運動軌跡
「騷年，你試過身體被線纏繞的快感嗎？」額..這不是捆綁別想歪...上述三張圖是來自iH5官網註冊頁面的一個有趣的短視頻，這種形式可以說相當特別，把素材的運動軌跡可視化之餘，還有效地把用戶的目光留在頁面中，一定程度上提高用戶留存率。
但不足之處也比較明顯：操作繁瑣度比較高，如果想要更炫酷的效果——點擊某地方，所有線段才依次顯示，這就要把一條線段都放在時間軸下統一控制（包括透明度和位移等），這會逼死強迫症患者的...
六、用插畫/漫畫代替頁面，用對話代替內容
簡單的漫畫讓大家看得樂此不疲，還讓廣告植入得毫無防備！
這種玩法對設計能力要求會相對高一點——設計帶有劇情的漫畫故事。主要玩法在設計好的漫畫中，將其他獨立的素材添加進去並對其進行加工：局部色彩填充、模糊效果等，盡量把每一個分鏡變得有趣起來，最後就是添加關鍵的動效以及交互了。
七、玩的就是後現代主義視覺
在頁面上放一個炸裂的耶穌，你猜會有什麼效果？驚艷啊！
目標受眾是年輕人的話可以考慮這種形式，特別適用於BGM特強、有節奏感的案例。
有很多音樂節承辦方跟設計師Wingz合作，她在iH5設計發布的H5很多都是採用這種技法，達到的視覺效果都超贊！
在文章的最後，還是語重心長地嘮叨一句：在設計時切忌把重心全部放在逼格實現，而忘了整體的質量，不能撿了芝麻丟了西瓜！
※Sketch44.1破解版＋中文版漢化插件！
※好貨來襲！10G旅行類海報界面PSD源文件！
※免費下載！2017年最流行線條波形無縫背景！
※等我做設計發財了，就……
※史上最詭異的設計師死法！
TAG:設計貨 |
※真心話，這些爆款產品的設計師們，你們的腦洞讓我跪服！
※你可以做一個會「借」的設計師嗎？
※你們這些設計師，是認真的嗎？
※搞不懂設計師是怎麼想的，設計了這樣一條褲子，網友都說看餓了
※你認為設計師是做什麼的？
※給鞋穿的鞋……你覺得這是腦子被門夾了，但設計師說：這叫時尚
※房子裝修別貼牆紙了，有錢人都是這樣設計，耐用又好看
※你們這些設計師真是夠了！給我消停一下！
※小戶型房子空間就小？那是你不會裝修，這麼裝連設計師都佩服！
※用鋁板來做分隔，你也能玩轉空間設計！
※在削弱單卡的問題上，爐石傳說設計師可能和你想的並不一樣！
※不知道這些設計師設計的寓意是什麼，看了好想打人
※你們這些設計師給我消停下 這樣設計會被人打死的！
※頂尖設計師說：未來這樣的設計可能要火！
※世界上最可愛的口罩，你想變成一個狗狗嗎？戴上口罩就可以了，這樣的設計也可以？
※這是一家專門為黑社會打造的餐廳，設計師就不怕真的黑幫來找你嗎
※裝修房子並不一定要找設計師，自己做的設計效果太贊了！
※同樣是用圖形做設計，別人的怎麼就那麼好看？
※卧室除了裝床，還可以這麼設計，設計師都說佩服！
※設計師們都在玩這些！