【端午&世界杯&高考季专题】这些微动效让UI设计更惊艳

Recommanded by editor
北京/UI设计师/1年前/374浏览
【端午&世界杯&高考季专题】这些微动效让UI设计更惊艳Recommanded by editor
本文主要讲述在通过微动效果去丰富设计表达的案例:
一.世界杯
1.运营Banner
Banner形态越来越丰富,除了常规的顶部圆角矩形之外,
  • banner的外框上做成了类似足球场球门的形状
  • banner内的元素做了破形,适当溢出了外框
  • banner之间的元素通过“踢球”的微动效,将左边踢球的运动员和右边的茅台奖品串联起来
饿了么-点球运营banner
饿了么-点球运营banner
Collect
2.分类tab
饿了么-分类tab动效
饿了么-分类tab动效
Collect
3.流光按钮+粒子动效
支付宝-流光按钮
支付宝-流光按钮
Collect
二.高考季
在高考季时期,通过首页搜素框上的微动效进行时令运营。
【端午&世界杯&高考季专题】这些微动效让UI设计更惊艳
Collect
夸克-高考查分
夸克-高考查分
Collect
夸克-高考填志愿
夸克-高考填志愿
Collect
三.端午节
支付宝-搜索框
支付宝-搜索框
Collect
支付宝-搜索框
支付宝-搜索框
Collect
美团酒店-按钮内动画
美团酒店-按钮内动画
Collect
四.美团外卖专题
1.美团对于甜点面包类、烧烤类、中餐类等外卖等待动效都做了细节的区分
美团外卖-汉堡西餐类动效
美团外卖-汉堡西餐类动效
Collect
美团外卖-中餐类动效
美团外卖-中餐类动效
Collect
美团外卖-面包类动效
美团外卖-面包类动效
Collect
美团外卖-通用型动效
美团外卖-通用型动效
Collect
美团外卖-奶茶类动效
美团外卖-奶茶类动效
Collect
美团外卖-烧烤类动效
美团外卖-烧烤类动效
Collect
1.模拟极端天气场景
对于暴雨、暴雪、沙尘暴等极端天气,淅淅沥沥的大雨动效展现能让用户更有身临其境的换位视角,去体谅骑士的不易。
美团外卖-模拟下雨场景
美团外卖-模拟下雨场景
Collect
五.流光动效
按钮的流光动效是2014年非常流行的一种趋势,对于界面中需要强调的按钮,通过渐变流光动效吸引用户点击,常用于运营场景,在界面的UI设计上使用地更为克制。
1.按钮面的流光动效
饿了么-流光按钮
饿了么-流光按钮
Collect
网易云音乐-续费弹窗按钮
网易云音乐-续费弹窗按钮
Collect
2.按钮边缘的流光动效
高德地图-流光按钮
高德地图-流光按钮
Collect
2.勋章的流光动效
饿了么-黄金会员勋章
饿了么-黄金会员勋章
Collect
淘宝-88VIP续费弹窗
淘宝-88VIP续费弹窗
Collect
4.底部卡片流光动效
百度网盘-流光卡片背景
百度网盘-流光卡片背景
Collect
六.轮播动效
轮播式动效,适用于在有限的展示空间内去展示多个没有明显优先级的元素,在这种场景下我们单独地用静态UI设计难以表现时,可以考虑这种轮播的形式。
轮播的形式有很多种:
  •   左右滑动式轮播
  •   上下滚动式轮播
  •   正反面翻转轮播
  •   前后叠加式轮播
淘宝-88VIP
淘宝-88VIP
Collect
闲鱼-金刚区图标
闲鱼-金刚区图标
Collect
【端午&世界杯&高考季专题】这些微动效让UI设计更惊艳
Collect
8
Report
|
9
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
UI
UI
UI
UI
作品收藏夹
app
app
app
app
作品收藏夹
动效文章
动效文章
动效文章
动效文章
作品收藏夹
学习
学习
学习
学习
作品收藏夹
企业展厅
企业展厅
企业展厅
企业展厅
精选收藏夹
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
大家都在看
Log in