为我们的用户创建和开发引人入胜的界面的过程中必不可少的是周到的动画。结合线框测试和验证,我们还需要考虑整体设计语言和美学。有很多事情要考虑。作为设计师,我们希望为内容提供清晰的排版,美丽的调色板,富有表现力但立即可以理解的图像,但这还不够。成功的产品是可以在个人层面上与用户建立联系的产品。动画使这种连接。
作为人类,在我们的生活中期待运动是很自然的。我拉出我的桌椅,它滚动。放下篮球,看着它弹跳。无论我们是否意识到,这些期望都在我们与应用程序交互时的脑海中。
沟通状态并提供反馈
伟大的转变是有意义的; 我们不想用不必要的动画来淡化我们的产品。这些会分散用户对内容的注意力。例如,有意义的转换可以在用户完成表单之后发生,或者通知用户他们提交的信息被应用接收。
* 创建与Indigo Studio
当然,你可以让确认出现在登录表单上,但它会感到被迫和不自然。结果将需要注意,并对用户施加额外的,尽管很小的认知负荷,以便在他们的动作和屏幕上发生的事情之间建立联系。通过经过深思熟虑的过渡,用户被引导从一个视觉状态 (注册表格) 到下一个视觉状态 (确认消息) 的旅程,从而最小化注意力和认知要求。
引导用户的注意力
转换也可以用于将用户的注意力引导到内容的某些方面。通过这样做,您可以帮助用户在完成任务时专注于相关内容。
在此示例中,随着侧面板的过渡,主要内容将动画显示到视口的右下角。这将用户的注意力仅放在导航抽屉中的内容上,从而允许他们专注于在此视觉状态下重要的内容。关闭导航面板时,请注意内容如何过渡到其原始位置。这种技术还可以帮助用户记住导航的 “静止” 位置。
对你的转变要聪明,不要害怕尝试。与用户一起测试以验证想法。请记住,让您的转换将用户从一个视觉状态引导到下一个视觉状态,而不会分散他们对内容的注意力。当返回到视觉状态 (即: 关闭菜单) 时,所有元素都应动画返回到其原始位置。您将了解到,通过提供令人愉悦的过渡,用户将感受到与您的应用程序的更大联系。