保姆级教程！4个方法帮你快速做出吸睛的Toast设计

这次跟大家分享一个 Toast 的设计，大家先看看前后效果：

Toast 是 UI 设计中最基础的组件之一，它能够在用户完成某个简单操作后给到及时的反馈提醒，这种反馈十分的轻量，展示几秒后就会自动消失。

这样的轻提醒，最最最常见的就是以下这种设计方式：

但除了这种之外，Toast 的设计方式也是比较多样的，比如像弹窗一样的 Toast：

或者，像贴纸一样的 Toast

这样 Toast 的设计形式是不是更有趣、更情感化一些？

那么这次我们就来看看怎么画出不常规的 Toast，我将会从造型+颜色上给大家分享几个设计小知识点。

一、造型上的 破形+异形

1. 破形

将主体物超出卡片区域，我们称做“破形”

主体物不只局限在卡片内，破出卡片会让排版上看起来更大气一些

2. 异形

除了破形，我们可以在基础的图形上做一些改动，最常见的就是斜切：

或者让卡片有缺角：

不过异形最好的方式是基于品牌图形或者 logo 去延展，比如「马蜂窝」app 里随处可见的蜂窝形状：

根据上面的参考，我们尝试给卡片加点异形：

因为我们暂时没有品牌图形，所以根据舒适度，选择基于斜切形进一步细化。

二、添加背板让元素更整体，不散乱

如果感觉太单调了，我们可以继续加一些装饰物上去：

这样一加，层次仍然不够，而且看着有些散乱，这时候我们可以尝试加一个背板在“手”的后面，增加层次的同时也会让元素看着更整体！

观察这几个图形，我认为爆炸图形放在这里是最好看的，因为“手”、“爱心”、“卡片”都很圆润，需要有一个不那么圆润的图形去形成对比。

现在整体排版还是不够精致，我们去添加更多的层次和细节：

三、画面冷暖对比会更耐看

如果我们页面中用大量的暖色，会让人感觉整个画面很躁动。

同理，大量的冷色会让人感觉画面很沉寂。

所以在感到页面太暖或者太冷的时候，适当加一些对冲的颜色，能让整个画面的颜色更平衡。

观察我们现在的画面，就会觉得过暖了，都是暖色：

所以我为了融入冷色，就把爆炸图形的颜色改成了蓝色：

四、避免让颜色太“独”

除了冷暖对比之外，在画面中，也不应该让某一种颜色只聚集在一个地方，在其他地方也应该存在，让它能够相互呼应。

目前这个蓝色就太单独了，只聚集在爆炸图形上，为了产生呼应，我添加了一个蓝色礼花做呼应：

到这里，画面已经完成的差不多了，还可以再在卡片和上面元素之间加一点小投影，进一步拉开对比，增加层次：

这样一个 Toast 就制作完成啦，最后再看一眼最后效果吧：

总结

让我们再回顾一下上面分享的知识点：

1. 造型上可以尝试破形+异形
2. 添加背板让元素不散乱
3. 画面冷暖对比会更好看
4. 避免让颜色太”独“

虽然设计的对象不同，但是知识点肯定是互通的，希望能够对你有帮助！

欢迎关注作者的微信公众号：「菜心设计铺」