行业资讯

直击设计行业第一现场,掌握全球化消息

4个方法帮你快速做出吸睛的Toast设计

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

这次跟大家分享一个 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. 避免让颜色太”独“

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

 

转载自:https://www.uisdc.com/toast-design

本文网址: https://zhishangsj.cn/news/563.html

聆听与分析需求

设计并不是个人观点或情感的自我表达,而是基于

商业委托的系统化、清晰化、构成化的客观解决方案

多一份参考,总有益处

联系微信:2476910203,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系


业务热线:


178 6662 5335

185 6288 7528  

关于至上UI设计

至上UI设计,隶属于青岛至上视界互联科技有限公司,成立于2018年7月。专注于建站和UI视觉设计,致力于创造令人难忘的用户体验,用设计来打动每位用户的心,从而为产品赋予更多价值。遵循用户体验至上,品质至上,服务至上的理念,至上UI设计已为上百家企业提供设计服务,有着成熟的服务经验。

我们的优势

扎实的专业素养

资深的项目经验
精准的需求沟通
完善的售后服务

高效的执行力
规范的设计流程

严守进度与质量

对设计执着的追求与热爱

我们能做什么

企业品牌网站
响应式网站
网页UI定制设计
移动端UI设计

系统软件界面设计

数据可视化大屏设计

图标定制设计

落地页设计

青岛UI设计界面设计丨山东UI设计界面设计丨青岛网页设计丨烟台UI设计界面设计丨济南网页设计丨济南UI设计界面设计丨泰安UI设计界面设计丨潍坊UI设计界面设计丨青岛网站设计

在线客服

扫一扫添加我微信好友