运动估计运动补偿
材料设计 (Material Design)
The material design system will be familiar to most, as one of the most widely used design systems. It’s a visual language that represents good design principles whilst allowing expressive branding.
作为最广泛使用的设计系统之一,材料设计系统将为大多数人所熟悉。 这是一种视觉语言,代表了良好的设计原则,同时允许表达商标。
Foundationally, it is based on the physics of the world. This makes it natural and familiar to users. It models the way objects move and how they interact with each other.
从根本上讲,它是基于世界物理学的。 这使用户自然而熟悉。 它可以模拟对象移动的方式以及它们之间的交互方式。
运动 (Motion)
Motion can celebrate the completion of a task, delight the user, or help to drive the user through a flow. The way objects move and interact can bring a touch of class and express your brand.
运动可以庆祝任务的完成,使用户感到高兴或帮助驱动用户完成流程。 物体的移动和交互方式可以带来一丝风情并表达您的品牌。
You can also use motion to help teach the user how to interact with an element. Often subtle bounces, shakes, and elevations can improve user experience and understanding.
您还可以使用运动来帮助教用户如何与元素进行交互。 通常,微小的反弹,抖动和高程可以改善用户体验和理解。
动画制作 (Animations)
On Android, animation API’s have been re-written and changed over time. Currently, there are two main ways. The Animation
API’s are the older API’s, but they allow you to use the anim resource files. The Animator
API’s are the newer API’s which typically are a little easier to work with. Animator
’s change the properties of an object/view. Whilst Animation
’s only change the visual representation of them.
在Android上,动画API已被重新编写并随时间进行更改。 当前,有两种主要方法。 Animation
API是较旧的API,但是它们允许您使用动画资源文件。 Animator
API是较新的API,通常较容易使用。 Animator
更改对象/视图的属性。 虽然Animation
只能更改它们的视觉表示。
例子 (Examples)
I have created some examples which give a flavour of what is achievable using motion on Android. There are many ways of creating the same animations, so I have tried to showcase a variety. Hopefully, these examples will inspire you to experiment with motion in your apps.
我创建了一些示例,这些示例提供了使用Android上的运动可以实现的功能。 创建相同动画的方法有很多,因此我尝试展示各种动画。 希望这些示例可以激发您在应用程序中进行运动实验。
可点击 (Clickable)
![Image for post](https://miro.medium.com/freeze/max/9999/0*JoOMmrUqzeFop0bg.gif)
Some elements may not appear clickable to some users. For example the items within a list. Although changing the static visual may help, using motion can be more powerful.
有些用户可能无法点击某些元素。 例如,列表中的项目。 尽管更改静态视觉效果可能有所帮助,但是使用运动可能会更强大。
Lists commonly will utilize a RecyclerView
with an accompanying adapter. If a list item is clickable, you may want to set a background of selectableItemBackground
. This provides a ripple effect upon user click, giving visual confirmation of a click.
列表通常会使用带有随附适配器的RecyclerView
。 如果列表项是可单击的,则可能需要设置selectableItemBackground
的背景。 这会在用户点击时产生连锁React,从而直观地确认点击。
You can also trigger this effect manually, thus giving a visual clue to the user.
您也可以手动触发此效果,从而为用户提供视觉提示。
Firstly, I ensure that the background is a RippleDrawable
as a safety measure.
首先,作为安全措施,我确保背景是RippleDrawable
。
Then I post a runnable on the animation queue of the itemView
. I delay it to ensure it’s after the screen has loaded and so visible to the user.
然后我张贴的动画队列中的可运行itemView
。 我延迟它以确保它在屏幕加载后对用户可见。
Then I set the hotspot. This is the epicenter of the ripple effect. For the goal of educating a user, this should be in a natural place where the user would interact with the element.
然后,我设置了热点。 这是纹波效应的中心。 为了教育用户,应该在用户与该元素进行交互的自然位置。
Then to trigger the ripple I set the state of the drawable to pressed and enabled.
然后触发波纹,我将drawable的状态设置为按下并启用。
To clean up after the effect has finished, we set the state back to an empty array.
为了在效果结束后进行清理,我们将状态设置回一个空数组。
向上滑动即可解锁 (Swipe up to unlock)
This motion might be familiar to you. With this bouncing motion, Android is trying to show the user that you can swipe up to unlock the screen.
您可能对此动作很熟悉。 通过这种弹跳动作,Android试图向用户显示您可以向上滑动以解锁屏幕。
I define two ObjectAnimator
’s. One for the motion upwards and one for downwards. I create an AnimatorSet
to control their behaviour together.
我定义了两个ObjectAnimator
。 一种用于向上运动,一种用于向下运动。 我创建了一个AnimatorSet
来一起控制它们的行为。
The key to this motion is the Interpolator
’s. The upwards motion has a linear speed. The downwards motion uses the BounceInterpolator
. This simulates the dropping of an object and it bouncing on the ground.
该动议的关键是内Interpolator
的。 向上运动具有线性速度。 向下运动使用BounceInterpolator
。 这模拟了物体掉落并在地面上弹跳的现象。
摇 (Shake)
![Image for post](https://miro.medium.com/freeze/max/9999/0*n7c0zP-_HX9dN4Xt.gif)
A shaking motion can help draw the immediate attention of the user. You can use it to inform the user of an error or that a button needs to be urgently clicked.
摇动动作可以帮助引起用户的即时关注。 您可以使用它来通知用户错误或需要紧急单击按钮。
I create an anim resource that represents the shake. I start this anim by calling startAnimation()
on the TextView
.
我创建了一个表示摇动的动画资源。 我通过在TextView
上调用startAnimation()
来启动此动画。
Then I fade the TextView
to an alpha of 0
, after a short delay, to hide the error.
然后,在短暂的延迟后,我将TextView
淡化为Alpha 0
,以隐藏错误。
摘要 (Summary)
Experiment with simple motion. It can have a huge impact on the usability of your app. It can delight users and give a sense of polish and quality.
尝试简单的动作。 它会对您的应用程序的可用性产生巨大影响。 它可以使用户满意,并给人以抛光和高品质的感觉。
资料来源 (Sources)
Previous Post
以前的帖子
Originally published at https://www.brightec.co.uk.
最初在 https://www.brightec.co.uk上 发布 。
翻译自: https://android.jlelse.eu/education-through-motion-b500a77a3b5
运动估计运动补偿