7個(gè)讓你直接過稿的趣味設(shè)計(jì)方法（超多案例）
每個(gè)設(shè)計(jì)師都想讓自己的設(shè)計(jì)變得更加有趣，變得與眾不同，但是很多人沒有系統(tǒng)性的方式方法，今天菜心就用 10 多年的設(shè)計(jì)經(jīng)驗(yàn)，聊聊讓設(shè)計(jì)變得有趣味的七大方向，我愿意稱之為《趣味之七步成詩》：空間、品牌、擬人、生活、動(dòng)態(tài)、游戲、行業(yè)！
菜心還順便編了一個(gè)順口溜，方便大家記憶：
- 空間感覺更立體
- 品牌展現(xiàn)獨(dú)一滴
- 擬人讓你更生動(dòng)
- 生活貼近現(xiàn)實(shí)中
- 動(dòng)態(tài)更加博眼球
- 行業(yè)打造專屬性
- 游戲瘋狂上癮中
以后再想做趣味化的設(shè)計(jì)，沒方向，就從這里面選吧！
一、空間
空間分為二位空間與三維空間，如果你做的都是平面二維空間（x 軸與 y 軸），設(shè)計(jì)就會(huì)相對(duì)平淡，但如果你能更好的利用三維空間（z 軸），設(shè)計(jì)可能就會(huì)變得生動(dòng)有趣。
現(xiàn)在我們一看到具有空間感的界面，比如你帶上 vr 眼睛，看到的視覺，你就會(huì)覺得比較有趣：
就算我們做的不是空間 VR 界面，也可以很好的利用 z 軸空間來產(chǎn)生趣味性。
比如像嗶哩嗶哩漫畫書籍滑動(dòng)的效果，利用了 z 軸的空間感：
再比如像一些電影 app，利用 z 軸空間，在頁面上掏個(gè)洞，然后在背后展示廣告，增強(qiáng)了設(shè)計(jì)的趣味性：
只要我們能善于利用好空間，把 z 軸使用起來，就能產(chǎn)生很多意想不到的效果！
二、品牌
品牌其實(shí)不難理解，最常用的設(shè)計(jì)手法，尤其是你的品牌有一個(gè)有趣的品牌形象，完全可以做出一些有趣的設(shè)計(jì)。
最簡(jiǎn)單的就是各種入口、畫面閃屏、banner 等等，比如像下面這些都是根據(jù)吉祥物做出的：
當(dāng)然，如果你想做的更加有特點(diǎn)，我認(rèn)為你可以利用品牌+的概念，讓你的設(shè)計(jì)更加有趣，比如常用的兩種方式：
品牌+動(dòng)效：
像騰訊視頻的品牌符號(hào)就是 logo 上的三角形，他們將這個(gè)符號(hào)植入到 banner 切換的動(dòng)效當(dāng)中，能看到切換過程中，有一個(gè)明顯的三角形輪廓，和其他產(chǎn)品形成鮮明差異：
品牌+排版：
我們正?？吹降目枕撁婊径际沁@樣的：
但是當(dāng)年躺平 app 里面的空頁面就是利用品牌形象再加上獨(dú)特的排版布局，形成了一定的差異和趣味：
當(dāng)然，大家也可以嘗試品牌+其他維度的技法，沒準(zhǔn)有很多不一樣的驚喜。
三、擬人
擬人是菜心本人最最最最常用的一種方式，增加趣味性，妥妥的好使。
你想下，本來一個(gè)沒有生命的東西，你突然讓它變的"活"起來，那肯定有趣??！
我常用的技法有兩種，加表情和成人精。
加表情
這個(gè)很簡(jiǎn)單，就是在你的設(shè)計(jì)物體上增加表情就可以了，會(huì)讓設(shè)計(jì)看起來更加的有趣：
成人形
這個(gè)相對(duì)復(fù)雜一點(diǎn)，就是讓你的物體直接成為人，比如長(zhǎng)了手腳，甚至直接成為"人形"，比如我們?cè)谧?papo 的時(shí)候，最開始閃屏做的平淡無奇：
后面給地球增加了"成人形"的表現(xiàn)形式，直接讓地球有手腳，擬人化，趣味性一下子就提上來了：
我記得當(dāng)時(shí)直接就過稿了！
暖人心
當(dāng)然，也不一定非要有人形或者表情，能夠通過語言打動(dòng)你，形成對(duì)你的關(guān)懷，也會(huì)讓設(shè)計(jì)變得更加有溫度，有靈魂，有趣味。
我記得印象最深的就是幾年前，騰訊視頻看到后半夜之后，會(huì)提示：夜深了：
意思是告訴你，該休息了！
這種雖然沒有人形，但勝似人形，也是擬人的設(shè)計(jì)手法。
四、生活
其實(shí)很多設(shè)計(jì)都是參考現(xiàn)實(shí)生活中的事物，這樣會(huì)讓人感覺很有創(chuàng)意、很有趣味，因?yàn)樗圃嘧R(shí)嘛！
生活中的參考也分為物體參考與動(dòng)作參考。
物體參考
我們?cè)谧?UI 的時(shí)候，其實(shí)很多設(shè)計(jì)表現(xiàn)也都可以參考生活中的物體，比如優(yōu)惠券、紅包、銀行卡等等：
當(dāng)然，除了物體參考，我們還可以參考另外一種：
動(dòng)作參考
這個(gè)也是菜心經(jīng)常使用的方式，比如早之前在騰訊時(shí)候拿到過外觀專利的幾個(gè)設(shè)計(jì)，像是通過當(dāng)時(shí)抖音比較火熱的肢體動(dòng)作，延展出來的加載動(dòng)效：
比如基于中國(guó)好聲音轉(zhuǎn)身的動(dòng)作概念，延展出選擇頁面顏色時(shí)候的動(dòng)作效果：
不論是物體參考還是動(dòng)作參考，都需要設(shè)計(jì)師對(duì)生活細(xì)心的觀察，這樣才能真的關(guān)聯(lián)好創(chuàng)意，讓設(shè)計(jì)變得更加有趣味。
五、動(dòng)態(tài)
動(dòng)態(tài)其實(shí)不用過多解釋，只要你是動(dòng)起來的，就肯定會(huì)比靜態(tài)的有趣一些。
當(dāng)然，動(dòng)效也分為展示動(dòng)效、轉(zhuǎn)場(chǎng)動(dòng)效與交互動(dòng)效。
展示動(dòng)效
就是普通的讓物體動(dòng)起來，以此來增強(qiáng)視覺焦點(diǎn)，增強(qiáng)趣味性：
轉(zhuǎn)場(chǎng)動(dòng)效
有一些頁面在進(jìn)行轉(zhuǎn)場(chǎng)時(shí)，可以進(jìn)行適當(dāng)夸張的轉(zhuǎn)場(chǎng)動(dòng)效，以此來形成絲滑感，通過這種絲滑的轉(zhuǎn)場(chǎng)動(dòng)效讓頁面變得更加有趣：
交互動(dòng)效
當(dāng)你進(jìn)行一定的交互操作，界面元素會(huì)跟著你的交互進(jìn)行動(dòng)態(tài)變化，比如下面這個(gè)界面元素，會(huì)隨著你的點(diǎn)擊產(chǎn)生破碎的效果：
再比如你按著點(diǎn)贊不動(dòng)，會(huì)瘋狂的涌現(xiàn)出圖標(biāo)：
不管是哪一類動(dòng)效，總之會(huì)讓整體的設(shè)計(jì)增強(qiáng)趣味感就對(duì)了！
六、行業(yè)
當(dāng)你的設(shè)計(jì)沒有特點(diǎn)，沒有趣味，沒有定制化的感覺時(shí)，請(qǐng)記住，融入行業(yè)屬性是一個(gè)非常不錯(cuò)的辦法。
行業(yè)屬性就是你所做的產(chǎn)品行業(yè)，它肯定有一些可以具象的圖形，比如像綠色環(huán)保行業(yè)，你就可以聯(lián)想出這么多的圖形：
如果你畫一個(gè)任務(wù)的圖標(biāo)，如果這樣畫就很無聊，很無趣：
但如果能結(jié)合剛才的環(huán)保的行業(yè)屬性圖形，綠葉，把任務(wù)圖標(biāo)中的筆換成葉子，效果就是這樣的：
是不是就更加有趣一些。
再比如，你平時(shí)做的無信號(hào)的空頁面是這樣的：
這時(shí)候，你在做旅游行業(yè)的 app 無信號(hào)空頁面，你是不是就可以把沙灘、大海、帳篷等旅游行業(yè)的相關(guān)元素融入進(jìn)你的空頁面中：
那設(shè)計(jì)是不是就更加有趣了。
這就是把你的設(shè)計(jì)從行業(yè)屬性出發(fā)，進(jìn)行發(fā)散，可以做出很多定制化、有趣的效果！
七、游戲
如果你做的設(shè)計(jì)能像游戲一樣，那就不用過多解釋了，有趣味是肯定的了。
當(dāng)然，游戲也分為看游戲和玩游戲，不同的方向，產(chǎn)出的設(shè)計(jì)效果也是不一樣的。
看游戲：
什么是看游戲呢，就是不需要你去操作體驗(yàn)，設(shè)計(jì)從表層就和游戲相關(guān)，比如像 bilibili 網(wǎng)頁端的 banner 在輪播的時(shí)候，下方的小圓點(diǎn)就做成了游戲吃豆人的樣子：
再比如，你再設(shè)定風(fēng)格的時(shí)候，整體風(fēng)格都是游戲像素化的：
這也和游戲產(chǎn)生了關(guān)聯(lián)，這些都屬于看游戲。
而接下來的玩游戲，就需要你去體驗(yàn)，比如微信聊天中，發(fā)炸彈的表情，就能夠產(chǎn)生屏幕晃動(dòng)的效果：
視頻聊天中，你比點(diǎn)贊的手勢(shì)，視頻中就會(huì)出現(xiàn)點(diǎn)贊的氣泡，你比耶的手勢(shì)，視頻中就會(huì)漂浮出氣球：
如果你還沒有試過，可以去體驗(yàn)下，上次我和我媽視頻的時(shí)候，玩了好久。
這就是玩游戲所帶來的趣味感。
不官你是看游戲還是玩游戲，只有在游戲化的這個(gè)方向上，趣味感就敢容易產(chǎn)生，大家可以多多嘗試！
好了，以上就是今天和大家分享的，菜心 UI 通用武器庫——趣味之七步成詩。
為了方便大家記憶，還是把順口溜再掏出來一下：
- 空間感覺更立體
- 品牌展現(xiàn)獨(dú)一滴
- 擬人讓你更生動(dòng)
- 生活貼近現(xiàn)實(shí)中
- 動(dòng)態(tài)更加博眼球
- 行業(yè)打造專屬性
- 游戲瘋狂上癮中
希望未來你在思考 UI 設(shè)計(jì)趣味化的時(shí)候，可以從以下 7 個(gè)方面進(jìn)行發(fā)散：空間、品牌、擬人、生活、動(dòng)態(tài)、游戲、行業(yè)！
那思路肯定是層出不窮的！
作者：菜心設(shè)計(jì)鋪
。
想了解更多網(wǎng)站技術(shù)的內(nèi)容，請(qǐng)?jiān)L問：網(wǎng)站技術(shù)
