动效让这些设计更惊艳

科技 2024-11-01 08:31 广东

本文授权转自：黑马家族（ID：heimauiued）

正文

微动效在产品设计中的运用已经非常普及了，无论是在图标还是界面场景中，都运用得很普遍。通过动效的辅助不仅可以提升设计情感化，也能解决更为复杂的交互场景，让设计更惊艳。

最近在体验一些产品的过程中，黑马哥也发现了几个借助动效表达的设计方案，效果十分的惊艳，分享出来和大家一起学习一下。

一、3D 动效呈现会员等级

二、情感化 IP 提升搜索关注度

三、结合场景的情感化动效

四、3D 空间感的 Banner 设计

五、通过动效引导用户操作

六、微动效引导 VIP 续费

七、动态还原实时天气

八、动态 IP 引导按钮设计

九、微动效赋予品牌活力

一、3D 动效呈现会员等级

会员中心通常会通过 3D 图标来助力会员等级设计，除了静态的表达也会通过动效和新颖的交互形式呈现，以此提高会员中心的视觉表现力。

最近在体验腾讯视频 APP 时，会员专区在表现用户会员等级的设计中，没有使用传统的徽章形式，而是以 3D 数字结合动效的形式表达。3D 动效的设计使得会员等级区别于常规形式，更有吸引力。

二、情感化 IP 提升搜索关注度

IP 形象是成就品牌的关键因素之一，被广泛运用到产品感官体验的设计中，带来的情感化共勉也是显而易见的。

在使用悟空浏览器 APP 时，启动产品进入首页后搜索框上方出现悟空的 IP 形象，悟空呈现出左右环顾、上下打量，最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度，也使得产品设计更具情感化。

三、结合场景的情感化动效

根据不同的业务场景进行设计表达，可以更好的服务目标用户，而情感化的设计提升，可以拉近产品与用户之间的亲和力。

为了降低用户等餐过程中出现的负面情绪，饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达。无论是快餐还是冷饮等，都针对性地设计了微动效的元素，以此来表现当前状态。

四、3D 空间感的 Banner 设计

通过突出设计、交互、布局结构等的创意性，可以使得 Banner 具备更强的差异化，以此来突出 Banner 的存在感。

腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案，比如之前体验到一个结合 3D 空间感营造的设计案例，就非常有吸引力。通过动态过度到立体空间，再恢复到默认形式，这个动态的过程演变就能让用户过目不忘。

五、通过动效引导用户操作

针对一些使用频次不高或者过于隐藏的功能，为了提高用户的操作概率，会通过一些特殊的设计表达来提升用户的关注度，引导用户进行相关操作。

比如麦当劳 APP 首页中，为了吸引用户下拉进入二层楼，通过动效的形式设计了一个摇摆的铃铛，以此来吸引用户的注意力。用户看到像是随风飘动的铃铛，就会忍不住去拉动，这就达到了引导用户操作的目的，提高了二层楼内容的曝光度。

六、微动效引导 VIP 续费

针对一些无法通过占比面积进行突出的元素，运用微动效的形式设计是常见的设计手法。

网易云音乐 APP “我的”板块中，为了突出 VIP 续费按钮，黑胶唱片以动效的形式在按钮中来回滚动，以此强化续费按钮的关注度。

七、动态还原实时天气

天气类产品从简单的静态预告升级为动态实时还原，可以让用户更加直观的判断天气变化，也能提高界面设计的感官体验。

比如 iPhone 自带的天气 APP，以动态还原实时天气作为界面背景，不仅便于用户识别天气，也使得产品设计更具情感化体验。

八、动态 IP 引导按钮设计

按钮设计样式可以发挥的空间很大，除了在造型、配色、空间感等方面突出设计以外，也能通过按钮微动效或者动态引导等形式强化。

比如智行火车票 APP “抢票”板块中，为了突出“添加抢票”按钮的存在感，以动效 IP 引导进行设计。不仅使得按钮更突出，设计感也显得俏皮可爱，凸显亲和力。

九、微动效赋予品牌活力

立足于品牌做设计是突出产品差异化的关键，这也是产品设计未来的演变趋势之一，如何提高品牌的曝光度和记忆度，成为设计师不断探索的方向。

最近在使用夸克 APP 时，微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段，夸克也会以动效的形式赋予品牌更多变化，不仅使得产品更具年轻化属性，也能更好的传递品牌基因。

小结

动效使得产品具备更多的变化，也能辅助解决更多复杂功能的交互场景，探索动效的场景运用可以提升设计灵感，希望本期的分享可以带给大家更多设计灵感。本文描述属于个人体验总结，不足之处我们努力改进。

你在使用的 APP 中还见过哪些令人惊艳的动效设计呢？快来留言分享吧！

-END-

文章转载：黑马家族，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/vl_J4VLgWf3LJJMZVzhe4w

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 巫欢

终审 | 苏菁

▼


点这里，学习更多设计知识！
👇

http://mp.weixin.qq.com/s?__biz=MjM5MTg2NDA3MQ==&mid=2652212864&idx=2&sn=dcdc26fb6085a0941ba1108a33ee4353

IXDC

IXDC是全球领先的用户体验创新盛会，致力于探索和分享设计界最前沿的思想和技术，是中国连接世界的跨界创新平台。自2009年起，IXDC发挥“设计外交”作用，搭建跨越国家、文化和语言界限的桥梁，帮助各行业人士获得应对21世纪挑战时的全球视角。

最新文章

作品集里放体验地图，八成是白费功夫

IXDC专访 | 黄婷：AI时代下的设计思维与变革

显示器还能这样设计?

感恩节 | 心怀感恩，所遇皆温柔

在国际科技巨头苏州园区办公，是怎样的体验？

IXDC专访 | 赵东恩：AI时代设计领域的变革与设计师的职业发展

蛇年蛇墩墩来啦！由冰墩墩原班人马打造。网友：换个衣服继续卖？

网易云音乐再发声！坚持创新和尊重原创

美啊直播 | 2024站酷设计周“当设计遇见科技”

这套儿童友好城市LOGO，儿童会喜欢吗？

物理学得好：摄影高级艺术信手拈来！

蔚来发布十周年纪念LOGO，这很蔚来（附品牌手册下载）

IXDC专访 | 张杨：AI与机器学习在金融产品设计中的应用

产品设计师？这么多设计岗位到底什么意思？

一点点改变，就让图标差异感拉满！

IXDC专访 | 刘妍：探索AI 时代下微软产品设计中的创新与平衡

全球首个世界绿色设计之都启动创建！

这样规划作品集，让你的效率提高2倍！

铃铃铃，这些闹钟UI看起来怎么都差不多？

从容器体验到对话设计，看看百度是如何让法律咨询变的超简单！

IXDC专访 | 黄蓉：AI在零售体验设计中的应用与未来展望

最新可口可乐圣诞广告改用AI，网友：少了点人味！

很艳，很惊艳，两大妙招盘活品牌

IXDC专访 | 任婕：AIGC技术下的新模式与职业晋升

在苹果做设计师，我学到的 10 个重要经验

日本做的网页设计确实厉害，我的设计有点献丑了！

小雪 | 苍山见雾，雪落人间

B端设计进阶！常见误区有哪些？

中厂怎么做AI，聊聊实用主义的美图

原研哉、隈研吾又出新作了！

2024金点奖概念设计获奖作品赏析！

英文LOGO设计好，省力又讨好！

从繁到简：B端如何提升用户体验

IXDC专访 | 孙瑾：AI工具在用户研究与设计流程中的提效与应用

说说说，说你AI我！

IXDC专访 | 辛欣：设计体系在产品开发中的核心作用与AI设计工具的展望

想让面试官心动？来看看这份B端UI作品集设计

中文海报，也可以很好看！

IXDC专访 | 李田原：小米汽车 SU7 背后的设计美学与用户体验设计，引领未来出行新风尚

这次真学到了：6个App亮点案例来袭！

短短3个月，国产AI视频进入4K时代？

贾樟柯《风流一代》新海报，由黄海设计！

VI | 小米品牌手册（附下载）

IXDC专访 | 冯婷：科技浪潮下，荣耀如何打造个性化美学体验

Emoji的隐藏玩法大揭秘

巴黎世家推出“天价垃圾袋”，时尚界的新宠儿！

IXDC专访 | 方贞硕：数字化技术引领小米汽车座舱HMI新纪元

评论区设计的三个维度、九个考量点

“动动嘴”就能编辑图像，豆包悄咪咪上线了这个超实用的新功能

这中文排版细节，闭眼抄！

分类

时事

民生

政务

教育

文化

科技

财富

体娱

健康

情感

旅行

百科

职场

楼市

企业

乐活

学术

汽车

时尚

创业

美食

幽默

美体

文摘

原创标签

时事社会财经军事教育体育科技汽车科学房产搞笑综艺明星音乐动漫游戏时尚健康旅游美食生活摄影宠物职场育儿情感小说曲艺文化历史三农文学娱乐电影视频图片新闻宗教电视剧纪录片广告创意壁纸头像心灵鸡汤星座命理教育培训艺术文化金融财经健康医疗美妆时尚餐饮美食母婴育儿社会新闻工业农业时事政治星座占卜幽默笑话独立短篇连载作品文化历史科技互联网

发布位置

广东北京山东江苏河南浙江山西福建河北上海四川陕西湖南安徽湖北内蒙古江西云南广西甘肃辽宁黑龙江贵州新疆重庆吉林天津海南青海宁夏西藏香港澳门台湾美国加拿大澳大利亚日本新加坡英国西班牙新西兰韩国泰国法国德国意大利缅甸菲律宾马来西亚越南荷兰柬埔寨俄罗斯巴西智利卢森堡芬兰瑞典比利时瑞士土耳其斐济挪威朝鲜尼日利亚阿根廷匈牙利爱尔兰印度老挝葡萄牙乌克兰印度尼西亚哈萨克斯坦塔吉克斯坦希腊南非蒙古奥地利肯尼亚加纳丹麦津巴布韦埃及坦桑尼亚捷克阿联酋安哥拉