动效让这些设计更惊艳

Recommanded by editor
杭州/UI设计师/1年前/3246浏览
动效让这些设计更惊艳Recommanded by editor
微动效在产品设计中的运用已经非常普及了,无论是在图标还是界面场景中,都运用得很普遍。通过动效的辅助不仅可以提升设计情感化,也能解决更为复杂的交互场景,让设计更惊艳。
最近在体验一些产品的过程中,黑马哥也发现了几个借助动效表达的设计方案,效果十分的惊艳,分享出来和大家一起学习一下。
动效让这些设计更惊艳
Collect
 
目录
一、3D 动效呈现会员等级
二、情感化 IP 提升搜索关注度
三、结合场景的情感化动效
四、3D 空间感的 Banner 设计
五、通过动效引导用户操作
六、微动效引导 VIP 续费
七、动态还原实时天气
八、动态 IP 引导按钮设计
九、微动效赋予品牌活力
 
一、3D 动效呈现会员等级
会员中心通常会通过 3D 图标来助力会员等级设计,除了静态的表达也会通过动效和新颖的交互形式呈现,以此提高会员中心的视觉表现力。
最近在体验腾讯视频 APP 时,会员专区在表现用户会员等级的设计中,没有使用传统的徽章形式,而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式,更有吸引力。 
动效让这些设计更惊艳
Collect
二、情感化 IP 提升搜索关注度
IP 形象是成就品牌的关键因素之一,被广泛运用到产品感官体验的设计中,带来的情感化共勉也是显而易见的。
在使用悟空浏览器 APP 时,启动产品进入首页后搜索框上方出现悟空的 IP 形象,悟空呈现出左右环顾、上下打量,最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度,也使得产品设计更具情感化。
动效让这些设计更惊艳
Collect
 
三、结合场景的情感化动效
根据不同的业务场景进行设计表达,可以更好的服务目标用户,而情感化的设计提升,可以拉近产品与用户之间的亲和力。
为了降低用户等餐过程中出现的负面情绪,饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等,都针对性地设计了微动效的元素,以此来表现当前状态。
动效让这些设计更惊艳
Collect
动效让这些设计更惊艳
Collect
 
四、3D 空间感的 Banner 设计
通过突出设计、交互、布局结构等的创意性,可以使得 Banner 具备更强的差异化,以此来突出 Banner 的存在感。
腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案,比如之前体验到一个结合 3D 空间感营造的设计案例,就非常有吸引力。通过动态过度到立体空间,再恢复到默认形式,这个动态的过程演变就能让用户过目不忘。
动效让这些设计更惊艳
Collect
 
五、通过动效引导用户操作
针对一些使用频次不高或者过于隐藏的功能,为了提高用户的操作概率,会通过一些特殊的设计表达来提升用户的关注度,引导用户进行相关操作。
比如麦当劳 APP 首页中,为了吸引用户下拉进入二层楼,通过动效的形式设计了一个摇摆的铃铛,以此来吸引用户的注意力。用户看到像是随风飘动的铃铛,就会忍不住去拉动,这就达到了引导用户操作的目的,提高了二层楼内容的曝光度。
动效让这些设计更惊艳
Collect
 
六、微动效引导 VIP 续费
针对一些无法通过占比面积进行突出的元素,运用微动效的形式设计是常见的设计手法。
网易云音乐 APP “我的”板块中,为了突出 VIP 续费按钮,黑胶唱片以动效的形式在按钮中来回滚动,以此强化续费按钮的关注度。
动效让这些设计更惊艳
Collect
 
七、动态还原实时天气
天气类产品从简单的静态预告升级为动态实时还原,可以让用户更加直观的判断天气变化,也能提高界面设计的感官体验。
比如 iPhone 自带的天气 APP,以动态还原实时天气作为界面背景,不仅便于用户识别天气,也使得产品设计更具情感化体验。
动效让这些设计更惊艳
Collect
 
八、动态 IP 引导按钮设计
按钮设计样式可以发挥的空间很大,除了在造型、配色、空间感等方面突出设计以外,也能通过按钮微动效或者动态引导等形式强化。
比如智行火车票 APP “抢票”板块中,为了突出“添加抢票”按钮的存在感,以动效 IP 引导进行设计。不仅使得按钮更突出,设计感也显得俏皮可爱,凸显亲和力。
动效让这些设计更惊艳
Collect
九、微动效赋予品牌活力
立足于品牌做设计是突出产品差异化的关键,这也是产品设计未来的演变趋势之一,如何提高品牌的曝光度和记忆度,成为设计师不断探索的方向。
最近在使用夸克 APP 时,微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段,夸克也会以动效的形式赋予品牌更多变化,不仅使得产品更具年轻化属性,也能更好的传递品牌基因。
动效让这些设计更惊艳
Collect
动效让这些设计更惊艳
Collect
 
小结
动效使得产品具备更多的变化,也能辅助解决更多复杂功能的交互场景,探索动效的场景运用可以提升设计灵感,希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结,不足之处我们努力改进。
本文由 @黑马青年 原创发布。未经许可,禁止转载。
65
阅读原文
|
Report
|
108
Share
相关推荐
这些 UI 设计案例很有想法
Homepage recommendation
文章
UI
UI
UI
UI
作品收藏夹
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
UI
UI
UI
UI
作品收藏夹
设计方法论
设计方法论
设计方法论
设计方法论
作品收藏夹
ui
ui
ui
ui
作品收藏夹
交互设计
交互设计
交互设计
交互设计
作品收藏夹
ae
ae
ae
ae
作品收藏夹
交互
交互
交互
交互
作品收藏夹
大家都在看
Log in