您所在位置:主页 > 兴元设计 > UI设计 >

UI动效对于整个界面的提升有什么作用

2021-01-14 13:04 adminSYSJ
UI动效现如今在APP和网页中几乎已经成为了基本的组成部分,经过仔细打磨的UI动效对于整个界面的提升是显著的。

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

在设计UI动效的过程中,Material Motion?的设计原则,IBM动画设计规则和UX动效宣言都是不错的设计参考和指引。

遵循这些现有的规范,能够很好地提升动效本身的体验和效果,从优秀走向卓越。今天的动效设计都是遵循着这些规范使用 InVision Studio 来进行制作的。

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

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

最好的动效往往能够通过变化让人明白两种状态之间的内在关联。

在制作不同状态之间变化的动效的时候,注意两个界面中共享的元素,并且将它作为桥梁,将两个界面状态连接到一起。

在使用 InVision Studio 创建原型的时候,这种同时存在前后两屏中的控件会自动连接起来,构成动效。这一功能使得动效的构建更加便捷。

在列表中使用瀑布式展开动效
左边的列表使用了较为迅速的淡入淡出动效,而右边的列表当中,淡入淡出以延时的方式呈现,效果类似瀑布的展开方式。

淡入淡出的动效让元素递次出现加上轻微的位移,比较自然,看起来不错。
 
列表元素通过延时次第出现,位移更加明显,形同瀑布,在视觉和体验上更为卓越。

瀑布式的展开动效只需要通过明显的延时就能够实现,适当地控制节奏,让整个加载速度适当的减缓而不会太慢,让用户能够感知到这个过程即可。

谷歌建议每个元素的延时不超过20毫秒。你可以在 Material Motion 中看到设计的原理和更多的实例。

展开时的扩展动效
左侧的动效是内容在顶层覆盖列表,而右侧的动效是从中间扩展将上下内容顶开。

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

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

菜单的展开动效

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

菜单从按钮的位置淡入进入界面的方式展现了两者的关联,这样的设计还不错。
 
通过扩展动效的方式来呈现菜单的展开,让按钮和菜单之间的关系得到了进一步的加强,这样的设计更加优秀。




学习地址:上海市松江区乐都路251号乐都大厦3楼
学习热线:173 1750 9604(微信同号)
乘车线路:地铁9号线松江体育中心站 2号口出
          松江17路、松江23路、松江28路、松江2路外圈、松江34路、虹桥枢纽10路、沪松专线   【乐都路九峰路站】下
          松江14路、松卫专线 【荣乐路九峰路站】下
          松江6路【中山二路谷阳北路站】下
          松江3路、松江7路【谷阳北路乐都路站】下
 

上一篇:ui设计培训班

下一篇:转行UI设计还值得吗 UI设计师薪资有多少

价值千元线下试听课 限时预约中