产品的肢体语言–交互动画

简介:

随着体验经济时代的到来,人们对产品界面的期待值也越来越高,交互动画在手机领域的应用已经非常普遍,例如Iphone充分发挥了动画在交互易用性方面的优势。 而交互动画会给用户带来一种舒适、自然和流畅的感觉。 交互动画逐渐成为了产品与用户之间的沟通方式,成为产品的肢体语言。尤其是目前高端机的性能提升迅速,也为交互动画的执行效率提供了有效的硬件保证。

Google地图的让工具化与拟物化结合,不论是翻起页面的效果,还是图钉的效果,都是还原真实场景中的操作,通过动画的表现,让其更加逼真。也使界面更加的有层次。
在产品设计过程中,合理运用交互动画让产品与用户更好的互动,让产品变的更具情感,合理的动画运用可以:

提高用户操作流畅性
随着移动终端设备硬件以及软件的不断强大,带给用户的选择也会越来越丰富,用户在使用产品功能的同时,也追求完美的操作,与产品产生良好的互动。
目前app以及wap站的视觉效果绚丽完美的同时,同时带有很多的复杂视觉元素,处理好每个视觉元素的关系,以及有效的传达用户操作后元素之间的关系变化,就需要设计交互动画,阐述其变化的逻辑与过程,让操作更合理,更流畅。

提高用户兴趣,降低学习成本
通过巧妙的交互动画让用户理解产品功能,进而让用户产生良好的心理感受。让用户更容易了解功能,更好的方便的使用产品。有时详细功能的讲解,往往不如一个简单的交互动画效果更具吸引力。目前在游戏中广泛应用。

强化品牌一致性
弹出层,界面滑动,分屏,返回,前进等等,这些交互动画无不流露出品牌的特性与情感
一个标志性的动画效果,往往也会是一个产品的代言。

交互动画设计法则

传达有价值的信息
在用户完成行为之前把结果展示给他们,使他们能更确定自己的行为,避免出错。帮助用户预见自己的行为将造成的结果。
在iphone的屏幕上移动应用图标时,当你把一个图标拖动到一个位置时,旁边的图标会向后或向两侧移动告诉你当你松开手时这个图标将要停放的位置。
以下是总结的交互动画的一些设计原则:

 

阐述清晰,精确引导
动画是可以清晰阐述产品功能间的切换过程的。当用户进入一个不同的交互模式时,比如两个应用程序之间的切换,动画可以提供一个指引,告诉用户已进入另一个场景。
当我们最大化窗口的时候,这个窗口不是简单的直接放大,而是平滑地向四周展开。这样我们就可以清晰地知道这个窗口被放大了。

 

动画时长巧妙掌控
在设计动画时,注意动画执行的时间,并且在一些较高频率操作的功能中的动画,是要可以通过操作(点击两次此操作,或是其他操作,点击空白处或是目标区域等等)跳过的。

 

执行效率需多考虑
目前交互动画在高端机方面应用越来越多,但是各个机型的配置不尽相同,在考虑动画时,需注意各个机型的执行效率,如果覆盖面较广的产品,需要设定一个合理的可支持最低配置以及搭建测试环境,以便确保动画在执行时不会给机器带来过大的压力。

 

尊重现实规律,或让用户具有“超能力”
就是要符合逻辑规律与自然规律。比如动画中如有位移,应与指向目标位置方向移动;拟物化的设计,就需要真实的动画去模拟还原真实的过程。有时也可以在真实的场景中,让用户完成真实场景中人类不能完成的事情同样也会跟用户满足感。

 

点到为止,过犹不及
动画的使用犹如双刃剑,顺其势可披荆斩棘,塑造更完美的产品,如使用不当或是滥用,则往往适得其反。

 

使用频率较高的功能,慎用交互动画
如果是用户使用率非常高的功能,交互动画时一定要慎重。动画执行次数过多也会让用户反感,并延长操作时间。

 

用户输入,请勿打扰
用户在专注于内容的创建或是填写信息时,动画会分散用户的注意力,甚至让用户产生坏心情。但是信息提交,信息发送等操作,设计巧妙的动画,往往会增加用户的成就感。

 

尊重用户习惯,“标新立异”不可取
我们要避免触及系统的标准行为,尽量尊重用户习惯。在iPhone中,动画式响应方式是标准的界面风格,比如窗口内容的上下卷滚、元素的出现和消失,以及内容的放大、缩小等等。
用户清楚这些常见的界面元素是如何工作的,他们不愿在每次点击按钮的时候,被迫花费多余的时间去看一些不必要的动画。

 

【本文首发于:百度MUXhttp://mux.baidu.com/?p=2185

关注百度技术沙龙










本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/843329,如需转载请自行联系原作者

相关文章
|
Web App开发 前端开发 JavaScript
27 个前端动画库让你的交互更加炫酷
很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度,所以今天就来给大家推荐几个好用的JavaScript动画库,希望对各位小伙伴有所帮助!
2729 0
|
2月前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
83 11
|
2月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(图像效果)
在HarmonyOS 5.0中,ArkTS提供了丰富的图像效果属性,如阴影、灰度、高光、饱和度、对比度、图像反转、叠色、色相旋转等,极大丰富了用户界面的表现力。本文详细介绍这些属性并提供示例代码。
113 2
|
5月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
282 6
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
136 0
|
5月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
100 0
|
5月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
147 0
|
4月前
|
图形学 开发者 UED
Unity游戏开发必备技巧:深度解析事件系统运用之道,从生命周期回调到自定义事件,打造高效逻辑与流畅交互的全方位指南
【8月更文挑战第31天】在游戏开发中,事件系统是连接游戏逻辑与用户交互的关键。Unity提供了多种机制处理事件,如MonoBehaviour生命周期回调、事件系统组件及自定义事件。本文介绍如何有效利用这些机制,包括创建自定义事件和使用Unity内置事件系统提升游戏体验。通过合理安排代码执行时机,如在Awake、Start等方法中初始化组件,以及使用委托和事件处理复杂逻辑,可以使游戏更加高效且逻辑清晰。掌握这些技巧有助于开发者更好地应对游戏开发挑战。
192 0
|
7月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
244 1
|
7月前
|
存储 图形学
【unity小技巧】unity事件系统创建通用的对象交互的功能
【unity小技巧】unity事件系统创建通用的对象交互的功能
83 0