您当前的位置:首页 > 电脑百科 > 软件技术 > PS/设计

APP界面的动效交互方式

时间:2020-08-01 15:11:40  来源:  作者:
APP界面的动效交互方式

 

文/李月怡

丰富细腻的App动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验。

APP界面的动效交互方式

 


APP界面的动效交互方式

 

合理的动效把信息更立体、更富有关联性的传递出去,优秀的动效能够加强用户与APP的情感传递,增加用户对APP的友好度。

APP界面的动效交互方式

 


APP界面的动效交互方式

 

动效设计需要使用恰当的视觉元素,一方面让元素能与APP功能主旨相吻合,另一方面也使之契合该界面的时态。

APP界面的动效交互方式

 

动效的相对面积和动效持续时间的选择必须根据预期功能、预期用户体验的影响的具体情况决定。这类动效最重要的是让用户感到毫无负担又如沐春风,也就是不要夺人眼球,悄无声息的顺应用户行为,引导用户需求。

APP界面的动效交互方式

 

在设计中要考虑系统兼容和资源占用、动态速度的节奏、仿生性or现实重现问题。例如:加载过程时间长时,可以设计有趣的加载动画,缓解用户等待的焦虑。

APP界面的动效交互方式

 


APP界面的动效交互方式

 

优秀的动效必须要自然、符合物理世界的事物运动规律。这是因为物理世界里的物体是拥有质量的,给它们作用力,它们就会移动。由于阻力的存在,几乎所有的物理运动都有着加速度运动,即人们肉眼所见到的缓入缓出。

APP界面的动效交互方式

 

如果虚拟世界里的动画突然开始、停止或突兀地转变方向,会让用户产生不适的感觉,所以在进行动效设计运动形式要蕴含操作逻辑和动作序列,而不是一味地追求某 一动效图像运动的与众不同。

APP界面的动效交互方式

 

在信息层级方面,由于在物理世界中, 物体存在近大远小原则,所以在界面元素也可以通过动效来呈现整个系统的信息的前后位置,展现信息的空间层次感。在转场过渡的时候,由于人脑灰质会对动态事物(如:移动、形变、色变等)保持敏感。在界面中加入一些平滑舒适的过渡效果,能帮助用户理解界面前后变化的逻辑关系。

APP界面的动效交互方式

 


APP界面的动效交互方式

 

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

APP界面的动效交互方式

 

譬如在一些应用中,如果密码输入错误之后,界面会震动并且弹出红色的提示性文字,这就造成一种紧张感,促使用户在输入密码时谨慎、认真。等待性特征意味着该交互不具备指令效应,但可以形成操作效果,即充分使用动效将看似被动的局面转化为让人觉得这一时间段是有价值的。

APP界面的动效交互方式

 


APP界面的动效交互方式

 

好的设计往往是以小见大的,在细节处彰显情怀。好的体验也是由每一个细微的感受构成的。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。通过场景的营造,动效让用户的操作变得轻松自然,动效还可与产品定位或公司文化相一致,唤起用户情感潜在的反应,诸如回忆、联想、感悟等。

APP界面的动效交互方式

 

好的动效是隐形的,这就要求我们在动效的使用的过程中,就需要更加小心谨慎,确保设计目标不会被其干扰。

APP界面的动效交互方式

 



Tags:APP界面   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
文/李月怡丰富细腻的APP动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验。 合理的动效把信息更立体、更富有关联性的传递出去,优秀的动效能够加强用户与AP...【详细内容】
2020-08-01   APP界面  点击:(49)  评论:(0)  加入收藏
文/徐洪真 移动互联时代,消费者的消费行为、方式和以往相比都发生了巨大的改变。界面作为App展示内容的门户,其视觉效果的优劣,直接影响到用户的使用体验,影响到品牌的认知度和...【详细内容】
2020-07-26   APP界面  点击:(8)  评论:(0)  加入收藏
生活各个角落都离不开银行~发工资、生活各种缴费等等等等!而今银行 App 也已上线啦,余额查询、银行活动等等不需要短信打电话或者到银行,打开 App 帮你轻松搞定,如此便捷的银行...【详细内容】
2020-07-23   APP界面  点击:(13)  评论:(0)  加入收藏
编辑导读:只要涉及到钱财方面的产品,用户总是会比较敏感的,尤其当下互联网信息泄露严重。那么互联网金融产品想要赢得更多用户,就必须在设计上做好引导。具体怎么做?本文作者从安...【详细内容】
2020-07-21   APP界面  点击:(8)  评论:(0)  加入收藏
文/王杰 投稿 APP界面布局设计是APP设计中非常重要的一环,合理的运用APP界面布局会让APP的界面显得很清晰美观。那么常见的APP界面布局有哪些呢? ①顶部导航。整个的应用...【详细内容】
2019-10-09   APP界面  点击:(48)  评论:(0)  加入收藏
▌简易百科推荐
按钮,无论是在 Web 还是 App 上都被广泛地使用,而很少有设计师会注意到按钮当中的细节,导致在设计过程中出现一些低级的错误,使得用户在完成任务的过程中产生阻碍,无法顺利达成目...【详细内容】
2021-03-29 UI设计   点击:(1)  评论:(0)  加入收藏
在上期的内容里面我们讲到了曲线观察层。 1、你可以利用类似上图的曲线形态轻松快速的发现画面任何问题;2、它可以将画面的一切细节进行放大,从而方便你后期进行编辑;3、当你发...【详细内容】
2021-03-25 photoshop   点击:(5)  评论:(0)  加入收藏
最终效果 1、首先无论多么丑,先画手稿为整体创意和空间定调,不至于后期大改。 2、为刚刚的手稿拼接上背景。 3、继续,叠进石块,注意中间用蒙版镂空。 4、放进去一些其他的小物件...【详细内容】
2021-03-24 PS合成   点击:(6)  评论:(0)  加入收藏
操作步骤:1、首先我们把素材拖进PS里,CTRL+J 复制图层如下图。 2、新建一个图层,填充灰色,如下图。 3、选择矩形工具绘制一个长方形,建议竖行的,如下图所示。 4、新建完矩形之后,右...【详细内容】
2021-03-22 海报照片   点击:(9)  评论:(0)  加入收藏
操作步骤:1、新建黑色背景文档。2、输入文字。3、右键点击文字层选择混合模式。勾选外发光。设置如图。 4、勾选颜色叠加,设置如图。 5、勾选光泽,设置如图。 6、勾选内发光,设...【详细内容】
2021-03-22 火焰字体   点击:(14)  评论:(0)  加入收藏
通常我们都学习教程的时候用来找素材,这次,我们要自己通过PS来制作素材,本篇要制作的是纹理背景素材图,整个教程比较简单,具体还是需要亲自动手制作才行,只有练习才是提高PS技术的...【详细内容】
2021-03-22 PS   点击:(11)  评论:(0)  加入收藏
本篇教程通过PS教大家如何给所需人物头发进行抠发丝,抠图最不想面的的就是抠头发,细小又不好操作,不管是不是从事设计,总会遇到抠图的时候,学会此招,再也不用麻烦别人,同学们一起来...【详细内容】
2021-03-16 PS   点击:(25)  评论:(0)  加入收藏
今天我们接着介绍混合模式中一个不起眼但是非常有用的“差值”。我们先来看看差值的计算公式:结果色=绝对值(混合色-基色)这可能是混合模式中除了变亮和变暗以外最简单的一个混...【详细内容】
2021-03-16 Photoshop   点击:(12)  评论:(0)  加入收藏
哈喽大家好,我是你们的好朋友karry。在大家印象中一定觉得ps非常难学非常难。其实不然。大家不要着急,karry的教学都是针对ps零基础的同学的,而且非常实用哦。只要大家跟着karr...【详细内容】
2021-03-16 照片   点击:(29)  评论:(0)  加入收藏
文/陈敏 动物图形在现代标志设计中应用在非常广泛,在整个社会活动中扮演着不同的角色,承担着不同的功能作用。现代动物图形标志有着具象、抽象、卡通等丰富的表现形式。 在...【详细内容】
2021-03-12 Logo设计   点击:(10)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条