Windows Phone 的动画、动作和输出

Windows Phone 应用应使用动作、声音和振动在应用中形成身临其境的真实感觉。这些效果和输出有助于增强触摸功能,以及帮助用户获取正在进行的操作和任务的反馈。

动作中的设计

动作不仅仅指让物体移动。在 Windows Phone 上,动作是一种用于创建物理生态系统的工具,用户可在该系统内驻留并通过触摸进行操作。体验的质量取决于应用对用户的响应程度以及 UI 传达了怎样的个性。

Windows Phone 中有两类动作:

  • 过渡:过渡由用户的动作触发,可在用户在 UI 中导航时为其提供心理上的痕迹导航。已创作了各种各样的过渡以引导用户并使其确信自己所处的位置。在应用之间使用了较大型的过渡,而较小型的过渡用于在应用内导航。
  • 动画:动画是限制在视图本地元素内的视觉反馈,但它们并非总是由用户的操作触发。例如锁屏的“跃动”动作,它可以告诉用户如何解锁设备。

请确保动作在你的应用中具有特定用途。最好的 Windows Phone 应用会使用动作使 UI 变得生动。动作应该:

  • 无需点击,即可提供信息。
  • 根据用户行为提供反馈。
  • 指导用户如何与触摸目标交互。
  • 指示如何导航到之前或随后的视图。

可在 Windows Phone 的编辑框行为中找到动作的一个简单示例。编辑框在扩大时并不会简单地立即变大,它会采用动画表明自己调整了大小。

动作带来哪些优势

随着用户在应用中所用的时间越来越多,或者随着应用中的任务变得更复杂,优质的动作变得越来越重要:它可用于改变用户感受认知负荷和你的应用的易用程度的方式。动作还有许多其他直接优势:

  • 动作可以取悦用户。动画和其他视觉反馈可创造惊喜、直观的时刻。这些愉悦感也会使用户喜欢上设备和应用。
  • 动作为交互添加提示。动作具有方向性:它会向前和向后移动,移出和移入内容,并留下关于用户如何到达当前视图的最少的“痕迹导航”线索。例如,Panoramic Entrance 动画可在应用打开时让用户的视线扫过主要导航,为用户提供关于如何操作中心控件的线索。
  • 动作可以提供性能增强的印象。当网络速度滞后或系统暂停工作时,动画可使用户感觉没有等待太长的时间。
  • 动作可增加个性。考虑周密的 Windows Phone UI 使用动作来创造应用与此时此地的情况相关的印象,并帮助抵消用户正在进入嵌套层次结构的感觉。
  • 动作可增加一致性。过渡可通过模拟用户熟悉的任务来帮助用户了解如何操作新的应用程序。
  • 动作可增添优雅魅力。动画可让用户了解手机正在处理任务,它没有冻结,它可以被动地突出显示用户可能感兴趣的新信息。

动作生态系统的规则

  • 每个动画都是系统的一部分,所有动画都不应例外。
  • 每个动画都服务于某个目的,并快速为后续动画让出空间。
  • 动画以 2.5 维度而不是 3D 形式显示,它们不使用精致的纹理、光线或延伸。例如,“倾斜”动画不会显示触控目标后面的任何深度,仅显示平面。这会强调内容。
  • UI 元素可以移动其他 UI 元素。例如:如果某个对象在页面上扩展,它应该以动画的方式将页面向下扩展。
  • 硬件和软件交互均可触发动作。过渡需要设计为注意到所有的可能性。
  • 可操作的项目基于用户交互进行运动。例如,“倾斜”动画会激活以显示正在触摸对象。
  • 如果某个项的重要性级别更新已经引起了用户的注意,则会使用动作通知用户。

动作中的方向

因为 Windows Phone 手机会使用向前导航和硬件“后退”按钮,过渡和动画可以向两个或四个方向移动,如下图中的矩阵所示。此图使用旋转门动画作为示例,显示用户可以进入应用的四个不同方向。

导航矩阵

导航矩阵

使用两个或四个特定的前进和后退动作,可以帮助用户始终意识到他或她在给定任务流中的位置。

一般来说,你应该在应用的设计之初就考虑动作的角色。在设计过程结束时添加动作使以有机方式集成的难度加大,并且使用良好的动作所带来的好处证明值得精心进行原型制作。

缓动

缓动是指动画速度随着时间改变的方式。借助缓动,UI 对象可采用真实对象移动的方式进行移动。一个下落的对象或火箭发动器从静止开始不断加速(它缓缓达到它的速度),因此这对于屏幕上存在的对象同样适用。一个滚动的对象或正在关闭的门将缓缓停止(它缓慢降低速度),因此这类动作也适用于以动画方式进入视图的对象。

曲线是用于可视化每种缓动类型的模式。曲线是一种图形,它的 X 轴为时间,Y 轴为动画进程。形成 45 度直线的缓动曲线意味着从开始到结束都为匀速。陡度增加的曲线表明加速(逐渐增加速度),而陡度减少的曲线表明减速(逐渐减小速度)。

满足我们的直觉的缓动可显著提高用户体验。许多实验性调查收到了负面的结果,其原因仅在于对缓动的调节不恰当。以下是最常见的缓动类型:

  • 渐入。如果对象退出屏幕,它使用渐入曲线,这会形成紧张状态,然后迅速地让对象退出。指数曲线的形状通常展示了此类缓动,因为它朝起点趋于平稳,但对于缓动函数,主要因素是你要进行渐入还是渐出。在缓动函数中,诸如指数的术语仅指示曲线的紧凑程度—它可以渐入、渐出或者渐入并渐出。
  • 渐出。如果对象正在进入屏幕,它使用渐出曲线,以轻松优雅地慢慢停止。对数曲线—或任何朝顶点趋于平稳的曲线—的形状可展示此类缓动。
  • 渐入并渐出。当对象的动作在屏幕上开始并结束时,适合使用渐入并渐出,尤其适用于较大的移动。S 形曲线可展示此类缓动。

缓动函数

缓动函数

提供反馈

当用户点击触控目标时,请确保向用户提供适当的反馈。设计自定义控件的可视状态,从而在不同的操作或激活阶段中显示它们。用户可以获知何时按下按钮或何时过渡控件。

  Windows Phone 上最常见的触摸反馈方法就是倾斜效果,它已内置到控件(如按钮)和列表项的默认样式中。请参阅 PointerDownThemeAnimation

  • **立即显示变化。**除了某些设置外,控件通常会通过制造即时变化来显示反馈。
  • **提供即时视觉或听觉反馈来与触控控件交互。**所有的操作都应该有立即和明显的影响—响应应该在手势发生时(而不是发生以后)发生。一个不恰当的设计示例是,用户轻拂照片,在手势完成后,才发生移动。
  • **对于费时的进程,将会提供反馈。**当操作正在进行时,你必须向用户指示某件事情正在进行。你可以使用内容来指示进度,或者使用进度控件或 原始通知作为最后的方式。
  • **在手机和应用中,手势的响应应该一致。**使用 Windows Phone SDK 中的触摸控件可帮助维持一致性,因为它们具有本主题中讨论的触摸手势和反馈的内置支持。如果创建了自定义触控控件,它们会以类似的方式响应手势。

输出

Windows Phone 应用具有四种输出方式:

  • 显示
  • 音频输出插孔
  • 内部扬声器
  • 振动

设计应用时,你应该考虑所有四种输出。

声音和振动

Windows Phone 会使用声音和振动向用户体验做出有意义的贡献。将音频设想为应用的原声带,而不用于催促用户进行操作。在为应用设计音频时,应用基本的极简派艺术原则,避免烦人或不必要的音频。最佳应用使用音频进行补充并支持他们的视觉设计理念。

音频指南如下所示:

  • 避免无理由的音频。
  • 避免常规音效。
  • 避免可能使用户焦虑的刺耳、令人震惊的声音。

  用户可以在设置的铃声和声音中打开和关闭振动单元。你的应用无法重写此设置。

声音元素应该为用户体验做出有意义的贡献。所有音频资产都应该达到专业质量,低噪音、经过适当的编辑并具有平衡的音量。