7点设计技巧,让UI动效更上一层楼

7点设计技巧，让UI动效更上一层楼在设计动效的时候，注意状态变化的指示，元素之间父子关系的强化，适当地提高一些乐趣。遵循这样的原则，总能让动效更上一层楼。动效现如今在APP和网页中几乎已经成为了基本的组成部分，经过仔细打磨的UI动效对于整个界面的提升是显著的。动效呈现出显现出状态切换的过程，展现了元素之间展露的逻辑关系，并且吸引用户的注意力，引导他们执行有效的交互。在设计动效的处理过程中，MaterialMotion的设计原则，IBM动画设计规则和UX动效宣言都是不错的设计参考和指引。遵循这些现有的规章，能够很好地提升动效本身的体验和效果，从优秀走向卓越。今天的动效都是遵循着这些规范使用InVisionStudio来进行制作的。左侧标签切换的时候转用使用了淡入淡出，下方标签页切换使用了标识滑动效果。当你插件在设计诸如关键字页或者弹出菜单这样的控件的时候，尽量借助动效让内容的位置变化关系呈现，这样不仅确保了内容的可见信息内容一般性，而且能够让普通用户不迷惑。这个时候，滑动手势交互和位移动效是不错的搭配，非常符合此处内容切换的语境。Good Great卡片是最常见的UI元素，左侧的界面中，点击卡片之后，展开新的界面；右侧界面中，点击卡片之后，卡片扩展并填充整个屏幕。最好的动效四种往往能够通过变化让人明白两种状态之间的内在关联。在制作不同状态之间变化的动效的时候，注意两个界面中共享的元素，并且将它作为桥梁，将两个九个界面状态连接到一起。在使用InVisionStudio创建原型的时候，这种同时存在前后两屏中的控件会自动连接起来，构成动效。这一功能使得动效便利性的构建更加便捷。左边的列表使用了较为迅速的淡入淡出动效，而右边的列出当中，淡入淡出以延时的方式呈现，效果类似瀑布的展开这种方式。瀑布式的展开动效只需要通过明显的延时就能够实现，适当地控制节奏，让整个加载速度适当的减缓而不会太慢，让用户关键步骤能够感知到这个过程即可。谷歌建议每个元素的延时不超过20毫秒。你可以在MaterialMotion中看到设计的原理和更理论多的实例。左侧的动效是内容在顶层覆盖列表，而右侧的动效是从中间中间扩展将上下内容顶开。界面之中不该所有的元素都应该是有「重量」的，某个UI控件随着动效变化的时候，和周围的元素遭遇互动，则能够强化这种单一感。左侧的动效中，菜单从底部淡入界面，而右侧的动效中，菜单是从被点击的按钮中扩展开的。左侧的文档按钮通过文本说明和色彩变化来指示状态改变，而右侧按钮则通过加载控件来展示不同的事件的发生。尝试使用加载指示器来指示状态的变化和进度，类似的方式有很多，重点是在于视觉化的、自然的呈现状态自然的变化整个过程，如果搭配上用色彩的变化，那么就更好了。正下方仅仅是通过色彩、标记和位置来吸引注意力，而右侧加入了微妙的动效来吸引用户注意。对于一些重要的模块、事件或者信息，类似呼吸式的动效来强化效果是自然且干扰性较低的，这样的动效设计让元素的重要性得到凸显，又不会让用户感到反感。我希望今天所提到的这些技巧特别强调能够让你在设计交互动画的时候，拿出更加自然、优秀的方案。从优秀到卓越，有的时候只须要进行微小的改变改变。值得一提的是，像InVisionStudio这样的工具，对于动效本身的提升是显而易见很明显的，它能够提供更多自然而富有的动效。总之，在设计动效的