每個設(shè)計師都想讓自己的設(shè)計變得更加有趣，變得與眾不同，但是很多人沒有系統(tǒng)性的方式方法，今天菜心就用 10 多年的設(shè)計經(jīng)驗，聊聊讓設(shè)計變得有趣味的七大方向，我愿意稱之為《趣味之七步成詩》：空間、品牌、擬人、生活、動態(tài)、游戲、行業(yè)！

菜心還順便編了一個順口溜，方便大家記憶：

1. 空間感覺更立體
2. 品牌展現(xiàn)獨一滴
3. 擬人讓你更生動
4. 生活貼近現(xiàn)實中
5. 動態(tài)更加博眼球
6. 行業(yè)打造專屬性
7. 游戲瘋狂上癮中

以后再想做趣味化的設(shè)計，沒方向，就從這里面選吧！

一、空間

空間分為二位空間與三維空間，如果你做的都是平面二維空間（x 軸與 y 軸），設(shè)計就會相對平淡，但如果你能更好的利用三維空間（z 軸），設(shè)計可能就會變得生動有趣。

現(xiàn)在我們一看到具有空間感的界面，比如你帶上 vr 眼睛，看到的視覺，你就會覺得比較有趣：

就算我們做的不是空間 VR 界面，也可以很好的利用 z 軸空間來產(chǎn)生趣味性。

比如像嗶哩嗶哩漫畫書籍滑動的效果，利用了 z 軸的空間感：

再比如像一些電影 app，利用 z 軸空間，在頁面上掏個洞，然后在背后展示廣告，增強了設(shè)計的趣味性：

只要我們能善于利用好空間，把 z 軸使用起來，就能產(chǎn)生很多意想不到的效果！

二、品牌

品牌其實不難理解，最常用的設(shè)計手法，尤其是你的品牌有一個有趣的品牌形象，完全可以做出一些有趣的設(shè)計。

最簡單的就是各種入口、畫面閃屏、banner 等等，比如像下面這些都是根據(jù)吉祥物做出的：

當(dāng)然，如果你想做的更加有特點，我認(rèn)為你可以利用品牌+的概念，讓你的設(shè)計更加有趣，比如常用的兩種方式：

品牌+動效：

像騰訊視頻的品牌符號就是 logo 上的三角形，他們將這個符號植入到 banner 切換的動效當(dāng)中，能看到切換過程中，有一個明顯的三角形輪廓，和其他產(chǎn)品形成鮮明差異：

品牌+排版：

我們正常看到的空頁面基本都是這樣的：

但是當(dāng)年躺平 app 里面的空頁面就是利用品牌形象再加上獨特的排版布局，形成了一定的差異和趣味：

當(dāng)然，大家也可以嘗試品牌+其他維度的技法，沒準(zhǔn)有很多不一樣的驚喜。

三、擬人

擬人是菜心本人最最最最常用的一種方式，增加趣味性，妥妥的好使。

你想下，本來一個沒有生命的東西，你突然讓它變的“活”起來，那肯定有趣啊！

我常用的技法有兩種，加表情和成人精。

加表情

這個很簡單，就是在你的設(shè)計物體上增加表情就可以了，會讓設(shè)計看起來更加的有趣：

成人形

這個相對復(fù)雜一點，就是讓你的物體直接成為人，比如長了手腳，甚至直接成為“人形”，比如我們在做 papo 的時候，最開始閃屏做的平淡無奇：

后面給地球增加了“成人形”的表現(xiàn)形式，直接讓地球有手腳，擬人化，趣味性一下子就提上來了：

我記得當(dāng)時直接就過稿了！

暖人心

當(dāng)然，也不一定非要有人形或者表情，能夠通過語言打動你，形成對你的關(guān)懷，也會讓設(shè)計變得更加有溫度，有靈魂，有趣味。

我記得印象最深的就是幾年前，騰訊視頻看到后半夜之后，會提示：夜深了：

意思是告訴你，該休息了！

這種雖然沒有人形，但勝似人形，也是擬人的設(shè)計手法。

四、生活

其實很多設(shè)計都是參考現(xiàn)實生活中的事物，這樣會讓人感覺很有創(chuàng)意、很有趣味，因為似曾相識嘛！

生活中的參考也分為物體參考與動作參考。

物體參考

我們在做 UI 的時候，其實很多設(shè)計表現(xiàn)也都可以參考生活中的物體，比如優(yōu)惠券、紅包、銀行卡等等：

當(dāng)然，除了物體參考，我們還可以參考另外一種：

動作參考

這個也是菜心經(jīng)常使用的方式，比如早之前在騰訊時候拿到過外觀專利的幾個設(shè)計，像是通過當(dāng)時抖音比較火熱的肢體動作，延展出來的加載動效：

比如基于中國好聲音轉(zhuǎn)身的動作概念，延展出選擇頁面顏色時候的動作效果：

不論是物體參考還是動作參考，都需要設(shè)計師對生活細心的觀察，這樣才能真的關(guān)聯(lián)好創(chuàng)意，讓設(shè)計變得更加有趣味。

五、動態(tài)

動態(tài)其實不用過多解釋，只要你是動起來的，就肯定會比靜態(tài)的有趣一些。

當(dāng)然，動效也分為展示動效、轉(zhuǎn)場動效與交互動效。

展示動效

就是普通的讓物體動起來，以此來增強視覺焦點，增強趣味性：

轉(zhuǎn)場動效

有一些頁面在進行轉(zhuǎn)場時，可以進行適當(dāng)夸張的轉(zhuǎn)場動效，以此來形成絲滑感，通過這種絲滑的轉(zhuǎn)場動效讓頁面變得更加有趣：

交互動效

當(dāng)你進行一定的交互操作，界面元素會跟著你的交互進行動態(tài)變化，比如下面這個界面元素，會隨著你的點擊產(chǎn)生破碎的效果：

再比如你按著點贊不動，會瘋狂的涌現(xiàn)出圖標(biāo)：

不管是哪一類動效，總之會讓整體的設(shè)計增強趣味感就對了！

六、行業(yè)

當(dāng)你的設(shè)計沒有特點，沒有趣味，沒有定制化的感覺時，請記住，融入行業(yè)屬性是一個非常不錯的辦法。

行業(yè)屬性就是你所做的產(chǎn)品行業(yè)，它肯定有一些可以具象的圖形，比如像綠色環(huán)保行業(yè)，你就可以聯(lián)想出這么多的圖形：

如果你畫一個任務(wù)的圖標(biāo)，如果這樣畫就很無聊，很無趣：

但如果能結(jié)合剛才的環(huán)保的行業(yè)屬性圖形，綠葉，把任務(wù)圖標(biāo)中的筆換成葉子，效果就是這樣的：

是不是就更加有趣一些。

再比如，你平時做的無信號的空頁面是這樣的：

這時候，你在做旅游行業(yè)的 app 無信號空頁面，你是不是就可以把沙灘、大海、帳篷等旅游行業(yè)的相關(guān)元素融入進你的空頁面中：

那設(shè)計是不是就更加有趣了。

這就是把你的設(shè)計從行業(yè)屬性出發(fā)，進行發(fā)散，可以做出很多定制化、有趣的效果！

七、游戲

如果你做的設(shè)計能像游戲一樣，那就不用過多解釋了，有趣味是肯定的了。

當(dāng)然，游戲也分為看游戲和玩游戲，不同的方向，產(chǎn)出的設(shè)計效果也是不一樣的。

看游戲：

什么是看游戲呢，就是不需要你去操作體驗，設(shè)計從表層就和游戲相關(guān)，比如像 bilibili 網(wǎng)頁端的 banner 在輪播的時候，下方的小圓點就做成了游戲吃豆人的樣子：

再比如，你再設(shè)定風(fēng)格的時候，整體風(fēng)格都是游戲像素化的：

這也和游戲產(chǎn)生了關(guān)聯(lián)，這些都屬于看游戲。

而接下來的玩游戲，就需要你去體驗，比如微信聊天中，發(fā)炸彈的表情，就能夠產(chǎn)生屏幕晃動的效果：

視頻聊天中，你比點贊的手勢，視頻中就會出現(xiàn)點贊的氣泡，你比耶的手勢，視頻中就會漂浮出氣球：

如果你還沒有試過，可以去體驗下，上次我和我媽視頻的時候，玩了好久。

這就是玩游戲所帶來的趣味感。

不官你是看游戲還是玩游戲，只有在游戲化的這個方向上，趣味感就敢容易產(chǎn)生，大家可以多多嘗試！

好了，以上就是今天和大家分享的，菜心 UI 通用武器庫——趣味之七步成詩。

為了方便大家記憶，還是把順口溜再掏出來一下：

1. 空間感覺更立體
2. 品牌展現(xiàn)獨一滴
3. 擬人讓你更生動
4. 生活貼近現(xiàn)實中
5. 動態(tài)更加博眼球
6. 行業(yè)打造專屬性
7. 游戲瘋狂上癮中

希望未來你在思考 UI 設(shè)計趣味化的時候，可以從以下 7 個方面進行發(fā)散：空間、品牌、擬人、生活、動態(tài)、游戲、行業(yè)！

那思路肯定是層出不窮的！

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」