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

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

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

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

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

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

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

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

或者,像贴纸一样的 Toast

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

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

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

一、造型上的 破形+异形

1. 破形

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

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

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

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

2. 异形

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

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

或者让卡片有缺角:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、避免让颜色太“独”

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

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

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

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

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

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

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

总结

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

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

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

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

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

收藏 89
点赞 89

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。