超走心!APP 动效设计必备知识(1)

来源:网络   作者:热心网友   发布时间:2018-08-02    浏览次数:236


如今丰富细腻的 App 动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验,动效设计在产品研发过程中也越来越被认可和重视。


通过本文,你将轻松了解到关于动效设计的一些必备知识:


1. 究竟为什么要设计动效?它的意义和价值是什么?

2. App 动效形式多种多样,如何将它们区分和归类?

3. 优秀的动效有哪些实用性的指导原则供我们参考?

4. 动效软件纷繁众多,如何挑选出最合适的那一款?



一、动效设计的必要性


1.1 提升用户体验


设计师若只追求静态像素的完美呈现,而忽略动态过程的合理表达,会导致用户不能在视觉上觉察元素的连续变化,进而很难对新旧状态的更替有清晰的感知。


迪士尼动画大师乃特维克说过一句话:动画的一切皆在于时间点和空间幅度。


通过「时间点」和「空间幅度」的设计为用户建立运动的可信度,即视觉上的真实感,当用户意识到这个动作是合理的,才能更加清晰愉悦地使用产品。




1.2 增添产品气质


未添加动效的产品,会带给人一种死气沉沉的感觉,所有内容平铺直叙、毫无生机,即使界面设计的很美观,也会缺乏一种灵动细腻的气质。


如果把产品比作成美女,那么界面视觉就是美女的颜值,交互动效就是美女的肢体语言。合理的动效能将更立体、更富有关联性的信息传递出去,提高产品的“表达能力”,增加亲和力和趣味性,也利于品牌的建立。




1.3 创造设计师优势


1.3.1 降低沟通成本

设计师通过制作高保真动效 Demo 展示设计思路和创意,大大提高设计提案交接率,降低了设计师与开发的沟通成本,提高了动效的还原度,体现专业性。


1.3.2 打造核心竞争力

在 UI 设计行业已经趋于饱和、并且产品设计流程逐渐实现体系化和模块化的今天,设计师如果只会利用组件重复性地“拼凑”页面而无更多的价值产出,被替代的可能性将会增大。


在日常工作之余,若要为公司和团队输出更多的价值,动效设计能力便是交互/视觉设计师的必备技能与核心竞争力之一。



二、动效设计的类型


界面动效种类纷繁多样,根据 App 动效的作用,可以大体分为如下 6 个类型:



2.1 转场过渡


人脑灰质会对动态事物(如:移动、形变、色变等)保持敏感。在界面中加入一些平滑舒适的过渡效果,不仅能让界面显得生动,更能帮助用户理解界面前后变化的逻辑关系。




2.2 层级展示


现实空间里,物体存在近大远小原则,运动则会近快远慢。当界面中的元素存在不同层级时,恰当的动效可以帮助用户理清前后位置关系,以动效来体现整个系统的空间感。




2.3 空间扩展


在移动端界面设计中,由于有限的屏幕空间难以承载大量的信息内容,可以通过折叠、翻转、缩放等形式拓展附加内容的存储空间,以渐进展示的方式来减轻用户的认知负担。




2.4 聚焦关注


聚焦关注是通过元素的动作变化,提醒用户关注特点的内容信息。这种提醒方式不仅可以降低视觉元素的干扰,使界面更清爽简洁,还能在用户使用过程中,轻盈自然地吸引用户注意力。




2.5 内容呈现


界面内容元素按照一定的秩序规律逐级呈现,引导用户视觉焦点走向,帮助用户更好地感知页面布局、层级结构和重点内容,同时也能让整个流程更加丰富流畅,增添了界面的活力。




2.6 操作反馈


无论是点击、长按、拖拽、滑动等交互行为,都应该得到系统的即时反馈,将其以视觉或动效的方式展现,帮助用户了解当前系统对交互过程的响应情况,为用户带来安全感。




123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:UI动效

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/7427.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通