您当前的位置:首页 > 电脑百科 > 软件技术 > 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界面   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
2021-10-19  Tags: APP界面  点击:(65)  评论:(0)  加入收藏
文/李月怡丰富细腻的APP动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验。 合理的动效把信息更立体、更富有关联性的传递出去,优秀的动效能够加强用户与AP...【详细内容】
2020-08-01  Tags: APP界面  点击:(129)  评论:(0)  加入收藏
文/徐洪真 移动互联时代,消费者的消费行为、方式和以往相比都发生了巨大的改变。界面作为App展示内容的门户,其视觉效果的优劣,直接影响到用户的使用体验,影响到品牌的认知度和...【详细内容】
2020-07-26  Tags: APP界面  点击:(74)  评论:(0)  加入收藏
生活各个角落都离不开银行~发工资、生活各种缴费等等等等!而今银行 App 也已上线啦,余额查询、银行活动等等不需要短信打电话或者到银行,打开 App 帮你轻松搞定,如此便捷的银行...【详细内容】
2020-07-23  Tags: APP界面  点击:(67)  评论:(0)  加入收藏
编辑导读:只要涉及到钱财方面的产品,用户总是会比较敏感的,尤其当下互联网信息泄露严重。那么互联网金融产品想要赢得更多用户,就必须在设计上做好引导。具体怎么做?本文作者从安...【详细内容】
2020-07-21  Tags: APP界面  点击:(66)  评论:(0)  加入收藏
文/王杰 投稿 APP界面布局设计是APP设计中非常重要的一环,合理的运用APP界面布局会让APP的界面显得很清晰美观。那么常见的APP界面布局有哪些呢? ①顶部导航。整个的应用...【详细内容】
2019-10-09  Tags: APP界面  点击:(174)  评论:(0)  加入收藏
▌简易百科推荐
【简介】大家好,我是不二何(68ID:何旭阳),很荣幸受邀此次的68Design专访! 目前我是一位自由设计师,平时除了承接一些商业项目之外,也会更新视频号、小红书等短视频平台。其中小红书...【详细内容】
2021-12-27  68Design    Tags:PS   点击:(2)  评论:(0)  加入收藏
Retouch Pro是一款优秀的图像修饰插件,帮助ps用户更快地进行图像照片的修饰。 由于其强大的人工智能系统,您可以轻松就获得专业的效果,并且比以往的手动更快,效果更好,操作更简单...【详细内容】
2021-12-27  设计师臭豆腐    Tags:Ps   点击:(4)  评论:(0)  加入收藏
早在 2015 年,就有报道称,到 2022 年底,仅英国的创意产业就需要 120 万名新工人。当然,世界与 2015 年的情况大不相同——但如果任何事物都需要比预期更多的创造力,而...【详细内容】
2021-12-22  Adobe国际认证    Tags:Adobe   点击:(10)  评论:(0)  加入收藏
最终效果 1、新建文件打开PS软件,按Ctrl + N 新建文件,尺寸为1920×1308像素,分辨率为72像素/英寸,如下图,然后确定。 2、导入房间素材打开素材包中的房间素材,用移动工具...【详细内容】
2021-12-22  PS教程240PS    Tags:PS   点击:(5)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  旁门左道PPT    Tags:设计师   点击:(19)  评论:(0)  加入收藏
今天来说使用CAD梦想画图软件绘制一个CAD小白基础题。操作工具操作系统:Windows10CAD软件:CAD梦想画图步骤1.先画一个半径为100的圆,如下图所示:画圆 2.接着使用多边形命令(POL)画...【详细内容】
2021-12-15  CAD梦想画图    Tags:CAD   点击:(16)  评论:(0)  加入收藏
详情页是消费者进店后决定是否购买产品的页面,是电商产品重要的落地点。在消费者找到自己心仪的产品后,详情页满足了消费者了解产品的所有信息的诉求,就像一个经验丰富的售货员,对产品的每细节娓娓道来。定义好产品属性后...【详细内容】
2021-12-15  设计智造    Tags:详情页   点击:(8)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计) ▲音乐学校创意 ▲轮胎创意 ▲啤酒创意 ▲糕点创意 ▲旅游公司创意 ▲抵制家庭暴力公益宣传 ▲食品创意 ...【详细内容】
2021-12-15  设计智造    Tags:广告设计   点击:(10)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计)启动画面是在APP启动时全屏展示的简单占位图,其作用是用户打开APP,程序在运行时可能因为网络、程序本身等原因需要加载几秒钟的等待...【详细内容】
2021-12-15  设计智造    Tags:界面设计   点击:(20)  评论:(0)  加入收藏
Don Tuch 是一家位于墨西哥城的快餐店。其源自于Yucatán半岛的美食传统,是以一种令人难忘的独特方式融合了正宗风味的食品概念。Don Tuch以一种有趣和轻松的方式向Yuc...【详细内容】
2021-12-15  致美设计    Tags:包装设计   点击:(11)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条