开课信息 行业资讯 媒体报导 优秀学员

【灵加教育】深度分析20年,UI设计流行趋势!流畅的交互反馈!!

2020-04-15 14:05:26

一、流畅的交互反馈

流畅的动效可以给人耳目一新的感受,让使用者感受到动效带来的愉悦性。从设计的角度来看,交互动效并不是锦上添花而是UI设计的必需品,它不应该被强调有或无,而应该被强调好或不好,好的交互反馈动效可以让整体的设计更加具有品牌调性。


了解动画基础原理

动画的方式可以有很多不同的方式,并且在很多设计网站都能了解到,下面从以下几个案例来进行分析,并进行优化尝试建议。基于简单的动效效果,如何通过设计优化让动画变得更加不一样且具有差异化。


动画的基础原理

以AE作为范例来说,动效最基础的原理是由“位移、缩放、旋转、透明度”等方式结合“时间轴和关键帧”而产生的视觉补间效果,一个动效是否流畅(快或慢)往往取决于一段时间内所发生的帧数,帧数越少位移距离越大(缩放变化越大、旋转度数越多)则速度越快。了解这些基础知识并进行结合使用,便可以设计出很多不一样的动画效果。


动画的基本运动规则

以principle作为范例来说,动画的基本运动规则包括有:默认、缓入、缓出、缓入缓出、弹性、线性、等效果。我们可以直接使用默认的数值,亦可根据自己的习惯对这些动画效果进行微调设定来达到我们想要等效果。(不同的demo软件的基本运动规则及应用上差异性基本不会太大,我们只需要选择一款我们习惯的即可。)

UI设计课程培训

常见的动效反馈模块

我们知道交互动效反馈的重要性,但也需要明确哪些模块可以在设计中进行应用,这里进行了一些梳理其中包括:页面切换、对话框、上滑浮层、弹出式菜单、触发缩放类(如查看图片)、页面导航、分页滚动、小模块滑动、开关类、按钮或模块触发的反馈...等等。


案例尝试

常规的动效方式基本能够满足常规的需要,而设计师在设计的时候更需要追求一些动效的给用户带来的愉悦感和视觉冲击力。


连动式页面切换

很多页面的转场效果是可以被设计为连动的转场方式,主要常见于商品详情页、插图详情页、小说/书籍/专辑等类的详情页。如下案例,左边为常规的交互方式,我们可以通过差异化的交互设计,让整体的体验更加自然流畅。


滑出式模块

滑出式模块的设计动画设计需要强调怎么出现怎么收起,通过视觉动线动的引导并告知用户模块的具体来源,并且展开或收起的时间是否需要一致也值得去思考。如下案例,通过动画细节的优化,使用弹性的动画效果让滑出浮层更加具有生命力。


滚动表现

滑动操作是非常常见的设计内容,无论是模块的滑动还是整体页面的滚动。如下案例,左边是比较常见的整体滑动,但如果每个内容之间赋予一个视觉时间差,那整体的视觉效果和体验感受也会变得更加不一样。


触发反馈

一些常规的内容,例如按钮、列表、图标按钮、卡片..等的点按可以结合动效的细节变化来增强反馈感受。但我们在实际应用重色是否都需要如此强调,则需要根据实际的情况而定。


这里我们可以思考两个问题:1.动效的必要性?2.动效如何进行设计?从为个人的观点来说,动效是非常具有必要性的,除了可以让整体的感受更加具有差异化,更可以拓展设计师对于每一个设计的思考角度。另外动效的设计应该是和静态的界面设计一样,都需要进行系统性的思考,应用在每一个细节的效果及动画参数都需要保持高度的一致性。


更多UI设计知识,欢迎关注【灵加教育UI设计培训课程】http://www.linkplus.cc



姓名:电话:

QQ:邮箱:

留言: