前端读者 | 前端用户体验-UI动效设计

本文来自互联网 @羯瑞 整理

UI动效现现在在 APP 和网页中几乎已经成为了基本的组成部分，通过仔细打磨的 UI动效对于整个界面的提高是显著的。

动效呈现出状态切换的过程，展示了元素之间的逻辑关系，而且吸引用户的注意力，引导他们执行有效的交互。

在设计动效的过程当中，Material Motion 的设计原则，IBM 动画设计规则和 UX动效宣言都是不错的设计参考和指引。遵循这些现有的规范，可以很好地提高动效自己的体验和效果，从优秀走向卓越。今天的动效设计都是遵循着这些规范使用 InVision Studio 来进行制做的。

标签页切换动效

• 左侧标签切换的时候使用了淡入淡出，右侧标签页切换使用了滑动效果。
• 内容切换的时候淡入淡出效果不错。
• 右侧经过滑动效果来展现内容，不只呈现了变化的过程，还指明了二者的位置关系和逻辑关系，更为卓越。
• 当你在设计诸如标签页或者弹出菜单这样的控件的时候，尽可能借助动效让内容的位置变化关系呈现出来，这样不只确保了内容的可见性，并且可以让用户不迷惑。这个时候，滑动手势交互和位移动效是不错的搭配，很是符合此处内容切换的语境。

卡片的展开动效

• 卡片是最多见的 UI 元素，左侧的界面中，点击卡片以后，展开新的界面；右侧界面中，点击卡片以后，卡片扩展并填充整个屏幕。
• 点击卡片以后，详情页向上滑出或者从左侧滑出的设计很不错。
• 右侧经过展开动效从卡片直接过渡到详情页是更卓越的设计。
• 最好的动效每每可以经过变化让人明白两种状态之间的内在关联。在制做不一样状态之间变化的动效的时候，注意两个界面中共享的元素，而且将它做为桥梁，将两个界面状态链接到一块儿。在使用 InVision Studio 建立原型的时候，这种同时存在先后两屏中的控件会自动链接起来，构成动效。这一功能使得动效的构建更加便捷。

在列表中使用瀑布式展开动效

• 左边的列表使用了较为迅速的淡入淡出动效，而右边的列表当中，淡入淡出以延时的方式呈现，效果相似瀑布的展开方式。
• 淡入淡出的动效让元素递次出现加上轻微的位移，比较天然，看起来不错。
• 右侧列表元素经过延时次第出现，位移更加明显，形同瀑布，在视觉和体验上更为卓越。
• 瀑布式的展开动效只须要经过明显的延时就可以实现，适当地控制节奏，让整个加载速度适当的减缓而不会太慢，让用户可以感知到这个过程便可。谷歌建议每一个元素的延时不超过20毫秒。你能够在 Material Motion 中看到设计的原理和更多的实例。

展开时的扩展动效

• 左侧的动效是内容在顶层覆盖列表，而右侧的动效是从中间扩展将上下内容顶开。
• 经过移动、覆盖、展开的方式来呈现详情页的动效，视觉上看起来不错。
• 右侧是点击以后展开顶掉周围的元素，和周围的其余的元素有所互动，这样的动效更加优秀。
• 界面中全部的元素都应该是有「重量」的，某个 UI 控件随着动效变化的时候，和周围的元素发生互动，则可以强化这种实体感。

菜单的展开动效

• 左侧的动效中，菜单从底部淡入界面，而右侧的动效中，菜单是从被点击的按钮中扩展开的。
• 右侧菜单从按钮的位置淡入进入界面的方式展示了二者的关联，这样的设计还不错。
• 经过扩展动效的方式来呈现菜单的展开，让按钮和菜单之间的关系获得了进一步的增强，这样的设计更加优秀。

使用按钮展示不一样状态

• 左侧的按钮经过文本说明和色彩变化来指示状态改变，而右侧按钮则经过加载控件来展现不一样的事件的发生。
• 好的按钮会指示状态的改变，哪怕是经过文原本呈现。
• 右侧经过按钮自己，视觉化地呈现加载的状态变化，比起文本说明更加天然，也更加易于理解，这样的设计更加优秀。
• 尝试使用加载指示器来指示状态的变化和进度，相似的方式有不少，重点是在于视觉化的、天然的呈现状态的变化过程，若是搭配上色彩的变化，那么就更好了。

吸引用户注意的动效

• 左侧仅仅是经过色彩、符号和位置来吸引注意力，而右侧加入了微妙的动效来吸引用户注意。
• 使用色彩、标识和位置来吸引用户注意力是颇为有效的手段。
• 右侧借助微妙天然的动效，不只可以吸引用户注意力，并且不会形成干扰，这样的设计更优秀。
• 对于一些重要的组件、事件或者信息，使用相似呼吸式的动效来强化效果是天然且干扰性较低的，这样的动效设计让元素的重要性获得凸显，还不会让用户感到反感。

在设计动效的时候，注意状态变化的指示，元素之间关系的强化，适当地增长一些乐趣。遵循这样的原则，总能让动效更上一层楼。