赞助商
立即赞助

这些小小的改变,能够让UI动效更上一层楼

UI设计3年前 (2021)发布 流光
3.6K 0 0

UI动效现今在 APP 和网页中几乎已经成为基的组成部分,经仔细打磨的 UI动效对整个界面的提升是显著的。

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

在计动效的过程中, Material Motion 的计则,IBM 动画计规则和 UX动效宣言都是不错的计参考和指引。遵循这些现有的规范,能够好地提升动效本身的体验和效果,从优秀向卓越。今的动效设计都遵循这些规范使用 InVision Studio 行制作的。

标签页切换动效

这些小小的改变,能够让UI动效更上一层楼

左标签切换的时使用淡淡出,右标签页切换使用滑动效果。

  • 内容切换时候淡入淡出效不。
  • 通滑动效果来展示内容,不仅呈现变化的程,还指明两者的位置关系和逻辑关系,更为卓越。

你在设计诸如标签页或者弹出菜单这样控件时候,尽量借助动效让内容位变化关系呈现出来,这样不仅确保了内容可见性,而能够让用户不迷惑。这个时候,滑动手势交互和位移动效是不搭配,常符合此处内容切换语境。

卡片的展开动效

这些小小的改变,能够让UI动效更上一层楼

卡片是最见的 UI 元素,左侧的界面中,点击卡片之后,展开的界面;右侧界面中,点击卡片之后,卡片扩展并填充整个屏幕。

  • 点击卡片之后,详情页向上滑出或者从左侧滑出的计不错。
  • 通过展开效从卡片直接过渡到详情页是更卓越的设计。

最好的动效往往能够通过变化让人种状之间的内在关。在制作不同状之间变化的动效的候,注个界面中共享的素,并且将它作为桥梁,将个界面状一起。在使用 InVision Studio 创建型的候,这种同存在前后屏中的控件会动起来,构成动效。这一功能使得动效的构建更加便捷。

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

这些小小的改变,能够让UI动效更上一层楼

左的列表使用了较迅速的淡入淡出动效,右的列表当中,淡入淡出以延时的方式呈,效果类似瀑布的展方式。

  • 淡淡出的动效让元素递次出现加上轻微的位移,比自,看来不错。
  • 列表元素通过延时次第出,移加明显,形同瀑布,视觉体验卓越。

瀑式的展开动效只需要通明显的延时就能够现,适当地控节奏,让整个加载速度适当的减缓而不太慢,让用户能够感到个程即。谷歌建议每个元素的延时不超20毫秒。你以在 Material Motion 中看到设计的原理和更的例。

展开时的扩展动效

这些小小的改变,能够让UI动效更上一层楼

左侧动效是内容在顶层覆盖列表,而右侧动效是从扩展将上下内容顶开。

  • 通过移、覆盖、展开的方式来呈现详情页的效,视觉上看起来错。
  • 而击后展开顶掉围元素,和围其他元素有所互动,这样动效更加优秀。

界面中有的元素都应该是有「重量」的,某个 UI 控件随着效变的时候,和周围的元素发生互,则够强这种实体感。

菜单的展开动效

这些小小的改变,能够让UI动效更上一层楼

左侧的动效中,菜从底部淡入界面,而右侧的动效中,菜是从被点击的按钮中扩展开的。

  • 单从按钮的置淡入入界面的方式展了两者的关联,这样的设还不错。
  • 通过扩展动效的方式来呈现菜的展开,让按钮和菜之间的关系得了进一步的加,这的计更加优秀。

使用按钮展现不同状态

这些小小的改变,能够让UI动效更上一层楼

左侧按钮过文本说明和色变化来指示状态改变,而右侧按钮则过加载控件来展示不事件发生。

  • 好的按钮会指示状态的改变,哪怕是通过本来呈现。
  • 过按钮本身,视觉化地呈现加载状态变化,比起文本说明更加自然,也更加易于理解,这样设计更加优秀。

尝试使载指示器来指示状态的变和进,类似的方式有很多,重点是在于视觉的、自然的呈现状态的变过程,如果搭配上色彩的变,那么就更好了。

吸引用户注意的动效

这些小小的改变,能够让UI动效更上一层楼

左侧仅仅是通过色彩、符号和位置来吸引注力,而右侧加入了妙的动效来吸引用户注。

  • 使用色彩、标识置吸引用户注意力颇效的手段。
  • 借助妙然的动效,不仅能够吸引用户注力,而且不会造成干扰,这的计更优秀。

对于一些重的组件、事件或者信息,使用类似呼吸式的动效强化效果自然且扰性较低的,这样的动效设让元素的重性得到凸显,还不会让用户感到反感。

结语

我希望今天所提到的这些技巧能够让设交互动画的时候,拿出加自然、优秀的方案。从优秀到卓越,的时候只需行微小的改变。得一提的, InVision Studio 这样的具,对于动效本身的提升很明显的,它能够提供多自然富直觉性的动效。

总之,在计动效的候,注状变化的指示,素之间关系的化,适当地增加一些趣。遵循这的则,总能让动效更上一层楼。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相...
UI动效
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
学完这边文章之后,任何复杂的造型应该都能绘制出来,学会绘制造型是设计的第一步,也是基础。 一、分析Yoga Style Yoga 全名...
logo造型
写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 ...
AE动效
一、功能逻辑梳理 在做框架设计与加减乘除合并同类项之前,梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。 我们举...
App设计
Eugen Eşanu 编者按:小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同...
Eugen Eşanu
58UXD:表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中...
实战案例
编者按:新一轮的干货素材来了!这次依然是来自 Prototypr.io 设计干货大合集,他们会根据设计工具的属性,给它们分门别类。...
Prototypr