這次跟大家分享一個 Toast 的設計，大家先看看前后效果：

Toast 是 UI 設計中最基礎的組件之一，它能夠在用戶完成某個簡單操作后給到及時的反饋提醒，這種反饋十分的輕量，展示幾秒后就會自動消失。

這樣的輕提醒，最最最常見的就是以下這種設計方式：

但除了這種之外，Toast 的設計方式也是比較多樣的，比如像彈窗一樣的 Toast：

或者，像貼紙一樣的 Toast

這樣 Toast 的設計形式是不是更有趣、更情感化一些？

那么這次我們就來看看怎么畫出不常規的 Toast，我將會從造型+顏色上給大家分享幾個設計小知識點。

一、造型上的 破形+異形

1. 破形

將主體物超出卡片區域，我們稱做“破形”

主體物不只局限在卡片內，破出卡片會讓排版上看起來更大氣一些

2. 異形

除了破形，我們可以在基礎的圖形上做一些改動，最常見的就是斜切：

或者讓卡片有缺角：

不過異形最好的方式是基于品牌圖形或者 logo 去延展，比如「馬蜂窩」app 里隨處可見的蜂窩形狀：

根據上面的參考，我們嘗試給卡片加點異形：

因為我們暫時沒有品牌圖形，所以根據舒適度，選擇基于斜切形進一步細化。

二、添加背板讓元素更整體，不散亂

如果感覺太單調了，我們可以繼續加一些裝飾物上去：

這樣一加，層次仍然不夠，而且看著有些散亂，這時候我們可以嘗試加一個背板在“手”的后面，增加層次的同時也會讓元素看著更整體！

觀察這幾個圖形，我認為爆炸圖形放在這里是最好看的，因為“手”、“愛心”、“卡片”都很圓潤，需要有一個不那么圓潤的圖形去形成對比。

現在整體排版還是不夠精致，我們去添加更多的層次和細節：

三、畫面冷暖對比會更耐看

如果我們頁面中用大量的暖色，會讓人感覺整個畫面很躁動。

同理，大量的冷色會讓人感覺畫面很沉寂。

所以在感到頁面太暖或者太冷的時候，適當加一些對沖的顏色，能讓整個畫面的顏色更平衡。

觀察我們現在的畫面，就會覺得過暖了，都是暖色：

所以我為了融入冷色，就把爆炸圖形的顏色改成了藍色：

四、避免讓顏色太“獨”

除了冷暖對比之外，在畫面中，也不應該讓某一種顏色只聚集在一個地方，在其他地方也應該存在，讓它能夠相互呼應。

目前這個藍色就太單獨了，只聚集在爆炸圖形上，為了產生呼應，我添加了一個藍色禮花做呼應：

到這里，畫面已經完成的差不多了，還可以再在卡片和上面元素之間加一點小投影，進一步拉開對比，增加層次：

這樣一個 Toast 就制作完成啦，最后再看一眼最后效果吧：

總結

讓我們再回顧一下上面分享的知識點：

1. 造型上可以嘗試破形+異形
2. 添加背板讓元素不散亂
3. 畫面冷暖對比會更好看
4. 避免讓顏色太”獨“

雖然設計的對象不同，但是知識點肯定是互通的，希望能夠對你有幫助！

歡迎關注作者的微信公眾號：「菜心設計鋪」