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