开通会员
这次跟大家分享一个 Toast 的设计，大家先看看前后效果：
Toast 是 UI 设计中最基础的组件之一，它能够在用户完成某个简单操作后给到及时的反馈提醒，这种反馈十分的轻量，展示几秒后就会自动消失。
这样的轻提醒，最最最常见的就是以下这种设计方式：
但除了这种之外，Toast 的设计方式也是比较多样的，比如像弹窗一样的 Toast：
或者，像贴纸一样的 Toast
这样 Toast 的设计形式是不是更有趣、更情感化一些？
那么这次我们就来看看怎么画出不常规的 Toast，我将会从造型+颜色上给大家分享几个设计小知识点。
1. 破形
将主体物超出卡片区域，我们称做“破形”
主体物不只局限在卡片内，破出卡片会让排版上看起来更大气一些
2. 异形
除了破形，我们可以在基础的图形上做一些改动，最常见的就是斜切：
或者让卡片有缺角：
不过异形最好的方式是基于品牌图形或者 logo 去延展，比如「马蜂窝」app 里随处可见的蜂窝形状：
根据上面的参考，我们尝试给卡片加点异形：
因为我们暂时没有品牌图形，所以根据舒适度，选择基于斜切形进一步细化。
如果感觉太单调了，我们可以继续加一些装饰物上去：
这样一加，层次仍然不够，而且看着有些散乱，这时候我们可以尝试加一个背板在“手”的后面，增加层次的同时也会让元素看着更整体！
观察这几个图形，我认为爆炸图形放在这里是最好看的，因为“手”、“爱心”、“卡片”都很圆润，需要有一个不那么圆润的图形去形成对比。
现在整体排版还是不够精致，我们去添加更多的层次和细节：
如果我们页面中用大量的暖色，会让人感觉整个画面很躁动。
同理，大量的冷色会让人感觉画面很沉寂。
所以在感到页面太暖或者太冷的时候，适当加一些对冲的颜色，能让整个画面的颜色更平衡。
观察我们现在的画面，就会觉得过暖了，都是暖色：
所以我为了融入冷色，就把爆炸图形的颜色改成了蓝色：
除了冷暖对比之外，在画面中，也不应该让某一种颜色只聚集在一个地方，在其他地方也应该存在，让它能够相互呼应。
目前这个蓝色就太单独了，只聚集在爆炸图形上，为了产生呼应，我添加了一个蓝色礼花做呼应：
到这里，画面已经完成的差不多了，还可以再在卡片和上面元素之间加一点小投影，进一步拉开对比，增加层次：
这样一个 Toast 就制作完成啦，最后再看一眼最后效果吧：
让我们再回顾一下上面分享的知识点：
- 造型上可以尝试破形+异形
- 添加背板让元素不散乱
- 画面冷暖对比会更好看
- 避免让颜色太”独“
虽然设计的对象不同，但是知识点肯定是互通的，希望能够对你有帮助！
