UI动效现如今在APP和网页中几乎已经成为了基本的组成部分,经过仔细打磨的UI动效对于整个界面的提升是显著的。
动效设计呈现出状态切换的过程,展现了元素之间的逻辑关系,并且吸引用户的注意力,引导他们执行有效的交互。
在设计UI动效的过程中,Material Motion 的设计原则,IBM动画设计规则和UX动效宣言都是不错的设计参考和指引。
遵循这些现有的规范,能够很好地提升动效本身的体验和效果,从走向。今天的动效设计都是遵循着这些规范使用 InVision Studio 来进行制作的。
卡片的展开动效
卡片是常见的 UI 元素,左侧的界面中,点击卡片之后,展开新的界面;右侧界面中,点击卡片之后,卡片扩展并填充整个屏幕。
点击卡片之后,详情页向上滑出或者从左侧滑出的设计很不错。