【UI动效设计】如何利用微动效让设计更出彩-附案例

用户头像
北京/UI设计师/1年前/267浏览
【UI动效设计】如何利用微动效让设计更出彩-附案例
一.图标类微动效
1.支付宝作为服务的超级集合体,在提醒用户服务事件发生或者上新功能时,
会采用通过图标动效的形式,既避免过度提醒打扰用户,又可以通过动画吸引用户注意力
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTQwMzEy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-饿了么
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTQwMzg4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-我的快递
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTA0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-菜鸟
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTA4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-基金
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTEy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
大麦APP-首页金刚区
收藏
2.在静态的界面上,对于希望用户关注的内容添加动效
是一种很好吸引用户的方式
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MDg4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-芝麻评分
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTE2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-花呗服务号
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTIw) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-分期付款
收藏
二.签到类微动效
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MTMy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
美团APP-神会员
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MTQ4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
智行APP-签到
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MTU2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-芝麻信用
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTI0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
闲鱼APP-签到
收藏
三.天气类氛围动效
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MTgw) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
滴滴APP-晴天
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MTg0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
滴滴APP-阴雨天
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTI4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
滴滴APP-深夜
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MjI0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
苹果-天气APP
收藏
四.下拉加载类微动效
很多主流APP都会在下拉刷新时通过动效来弥补内容的不足
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MjM2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
小象超市
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MjQ0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
智行APP-下拉刷新
收藏
五.运营类动效
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MjQ4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-理财
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTMy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-理财
收藏
六.购物结算类
1.购物车结算达到活动满减时,会出现点赞的图标动效
给予用户反馈“你做的很棒!成功节省XX元”
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4MjY4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
淘宝APp-购物车结算
收藏
2.结算成功后,添加了打包快递包裹的动效
言之有物的动效暗示用户订单已经在紧急发出了
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4Mjc2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
天猫超市-支付成功
收藏
3.在大麦抢过票的都知道,演唱会票有多难强!
激动和兴奋的感觉从抢到票的那一刻救开始了
大麦通过全屏的菜单动效,将情绪价值拉满了
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTM2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
大麦-加入想看
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTQw) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
大麦-付费成功订单
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTQ0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
大麦APP-抢票成功
收藏
七.搜索框动效
搜索框是一个动态推荐的绝佳位置,很多APP都在搜素框这个位置根据用户的使用记录和历史偏好,进行动态的滚动推荐:
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTQ4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
支付宝APP-搜索框
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTUy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
一淘APP-搜索框
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTU2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
闲鱼APP-搜索框
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTYw) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
大麦-搜索框
收藏
八.IP形象类
1.百度网盘的IP形象
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc1OTM4Mjgw) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
百度网盘-云一朵
收藏
2.表情类
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTY0) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
高德打车-乘车评价
收藏
3.VIP图标类
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTY4) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
淘宝-88VIP
收藏
九.进度条类动效
等待的过程是最容易产生焦虑的,尤其是在用户没有收到等待阶段性反馈时
这是一个很好的利用动效分散用户注意力,缓解等待焦虑的方式
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTcy) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
高德打车-打车加速券
收藏
【UI动效设计】如何利用微动效让设计更出彩-附案例(图ZMzc3MzkyNTc2) - 图标 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
智行-加速抢票中
收藏
4
举报
|
10
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
电商图标-免抠icon
UI应用平面图标
订单页面图标
3D风格医疗主题图标42
UI3D图标_blender源文件
3D风格科技行业服务器数据库图标插画
荧光未来科技科幻宇宙潮酷图标icon
3D电商图标-会员徽章免抠图
3D风格金融主题图标5
3D电商图标-免抠icon
一些奶爸奶妈带娃日常母婴用品矢量图标设计
3D风格金融主题图标21
彩色图标ICON旅游办公社交媒体
3D卡通UI界面图标可爱插画免扣素
3D风格科技行业服务器数据库图标插画
毛玻璃图标
3D电商图标-会员徽章免抠图
矢量咖啡线条插画图标手持杯子咖啡机
3D风格金融主题图标1
3D风格医疗主题图标63
积分图标
3D风格金融主题图标40
科技蓝质感2.5D图标
3D电商图标-免抠icon
3D风格科技行业电池图标插画
你可能喜欢
相关收藏夹
大家都在看
登录注册