杭州UI设计培训在哪|如何让UI动效更上一层楼

　　UI动画现在几乎是应用程序和网页中的基本组件。精心打磨的UI动画显著改善了整个界面。

　　动画设计呈现了状态转换的过程，展示了元素之间的逻辑关系，吸引了用户的注意力并引导他们进行有效的交互。

　　在UI动画的设计过程中，材质运动的设计原则、IBM动画设计规则和UX动画声明都是很好的设计参考和指导。

　　遵循这些现有的规范，可以很好地提高动漫本身的体验和效果，从优秀走向卓越。今天的运动设计是根据这些规范使用InVisionStudio制作的。

　　卡片扩展动画

　　卡片是最常见的UI元素。在左侧界面，点击卡片后，展开一个新的界面；在右边的界面中，单击卡片后，卡片将展开并填充整个屏幕。

　　点击卡片后，详细信息页面向上或从左侧滑出，设计非常好。

　　通过扩展动画，直接从卡片过渡到细节页面，是一种更优秀的设计。

　　最好的动画往往能让人们通过变化了解两种状态之间的内在联系。

　　在制作在不同状态之间更改的动画时，请注意两个接口中共享的元素，并将其用作连接两个接口状态的桥梁。

　　使用InVisionStudio创建原型时，前后屏幕中的控件将自动连接起来，形成动态效果。这个特性使得动画的构建更加方便。

　　在列表中使用瀑布展开动画

　　左边的列表使用了相对快速的淡入淡出效果，而右边的列表中，淡入淡出是以延迟的方式呈现的，效果类似于瀑布的展开方式。

　　淡入淡出的动态效果，使元素连续出现，稍有位移，更自然，好看。

　　列表元素通过延时顺序出现，位移更明显，像瀑布一样，更有视觉和体验。

　　瀑布式的扩展动画只能通过显著的延迟来实现。适当控制节奏，使整个加载速度适当放慢而不至于太慢，让用户能够感知过程。

　　谷歌建议每个元素的延迟不应超过20毫秒。你可以看到设计的原则和更多的物质运动的例子。

　　展开时展开动画

　　左侧的动画是覆盖顶部列表的内容，右侧的动画从中间扩展到顶部和底部内容。

　　通过移动、覆盖和扩展呈现细节页的动态效果，视觉效果良好。单击后，展开周围元素并与其他周围元素交互。这种动态效果更好。

　　接口中的所有元素都应该有“权重”。当某个UI控件随着动态效果发生变化时，与周围元素的交互可以增强这种实质性的感觉。

　　菜单展开动画

　　在左侧的动画中，菜单从底部淡入界面，而在右侧的动画中，菜单从单击的按钮展开。

　　菜单从按钮位置淡入界面的方式显示了两者之间的关系，这种设计还不错。

　　菜单的扩展是通过动态效果的扩展呈现出来的，这样按钮和菜单之间的关系得到了进一步的加强，这种设计更加出色。

　　使用按钮显示不同的状态

　　左边的按钮通过文本描述和颜色变化来表示状态变化，右边的按钮通过加载控件来显示不同事件的发生。

　　好的按钮将指示状态的变化，即使它是通过文本显示的。

　　通过按钮本身，直观地呈现加载状态的变化，比文字描述更自然、更容易理解。这个设计更出色。

　　尝试使用加载指示器指示状态更改和进度。有许多类似的方法。重点是直观自然地呈现状态变化过程。如果你配上颜色的变化，那就更好了。

　　吸引用户注意力的动态效果

　　左侧仅使用颜色、符号和位置来吸引注意力，右侧则添加微妙的运动效果来吸引用户的注意力。

　　使用颜色、徽标和位置来吸引用户的注意力是非常有效的。

　　借助细腻自然的运动效果，既能吸引用户的注意力，又不会造成干扰，所以这种设计比较好。

　　对于一些重要的组件、事件或信息，使用类似呼吸的动态效果来增强效果是很自然的，而且不太具侵入性。这样的动态设计突出了元素的重要性而不让用户反感。

　　最后结论

　　我希望今天提到的技术能让你在设计交互式动画时想出更自然、更优秀的解决方案。

　　从优秀到优秀，有时只需要细微的改变。值得一提的是，像InVisionStudio这样的工具对运动效果本身有明显的改进。它可以提供更自然和直观的运动效果。

　　总之，在设计动作效果时，注意指令状态的变化，加强元素之间的关系，适当增加一些趣味性。遵循这个原则，运动效果总是可以提升到下一个层次。