我们的客户
2000年-今天

我们一直与时代同行,做有价值的互联网品牌传播者

08 18

衡量动效是否合格的核心因素

发布者:深圳网站建设 来源:www.lonwin.net时间: 2019-10-15 18:14

在网站建设、网页设计、APP中我们会经常用到动动态效果设计,一个功能完备的动效不仅要足够微妙有趣,而且应当清晰且具有合乎逻辑的目的。动效的存在不仅降低了用户的认知负荷,沟通不同的环节,建立更为有效的信息和交互流程。但是更为重要的是,真正优秀的动效能让界面变得栩栩如生。
 
通过让元素在形态上进行叠加、分割、延伸、形变,动效让界面给人以更为真实、更加“物理”的质感。流畅顺滑的动效帮用户联通起上下文,阐释界面元素之间的关系,强化UI的层次感,消解环节与环节之间的冲突,缓解加载和过渡中的等待。
 
接下来,我们分析和总结一下成功的动效的六个基本特征:
 
1、响应
 
视觉反馈在界面中的作用无疑是重要的。对于用户而言,想要确认信息的欲望是一种生物本能,在现实生活中,按钮、控制面板等对象会对我们的操作给予反馈,那么用户面对界面中类似的东西的时候,会有相似的期望。
 
 
所以,UI应当精准而快速的针对用户的交互作出响应,只有这样用户才能将他们的操作、交互和控件的变化、效果联系到一起,形成回路。当他们清楚的知道什么样的操作会带来什么样的反馈,他们会觉得非常爽的。
 
深圳网页设计
 
2、关联
 
动效要能将新创建的界面和触发它们的操作或者控件关联到一起。产生关联的逻辑关系能帮用户理解界面中的变化是如何产生的。
 
下面我们看看两个菜单动效的设计案例。
 
第一个案例中,点击菜单按钮之后,菜单从远离按钮的地方伸展出来,这样用户的输入和触发的结果在物理距离上被割裂开了。
 
深圳网页设计
 
第二个案例中,菜单是从按钮旁边开始伸展开来的,距离上的关系让用用户清晰的知道是他们的点击触发了菜单出现的结果。
 
深圳网页设计
 
另外一个案例则是音乐播放器的按钮动效设计。“播放”和“暂停”可能是最常见的按钮设计,而这个典型的Material Design 风格的按钮动效设计中,点击“播放”按钮,动效过渡,“暂停”按钮出现,色彩和动效让两者之间呈现出因果关联,流畅而非间断。
 
深圳网页设计
 
平滑的过渡不仅让两者的功能呈现了出来,而且强化了两者的逻辑关系。
 
3、自然
 
好的动效设计应当尽量避免突兀的转变。动效中的每一个动作都应当从现实世界中获取灵感。最简单的一点,现实世界中物体的加速和减速都会受到重量、惯性和摩擦力的影响,类似的,在动效设计中,瞬间的启动和停止是不合规律的。
 
 
  • 最新文章 LATEST ARTICLES
企业QQ咨询:642767003
服务咨询热线:

0755-824849660755-82484966

立刻在线咨询

建站案例

COMSTRUCTION CASE

  • 网站建设案例:招商局集团

  • 网站建设案例:中国科学院

  • 网站建设案例:招商证券

  • 网站建设案例:中国人寿

  • 网站建设案例:华润租赁

  • 网站建设案例:小牛资本

  • 网站建设案例:香港中文大学深圳研究院

  • 网站建设案例:港大医院内网

  • 网站建设案例:嘉里建设

  • 网站建设案例:沃尔玛

  • 网站建设案例:港中旅(中国)投资有限公司

  • 网站建设案例:北大研究院深圳湾实验室

  • 网站建设案例:鸦片战争博物馆

  • 网站建设案例:深圳卫生监督局

  • 网站建设案例:中国医学科学院肿瘤医院深圳医

  • 网站建设案例:麒麟山疗养院

  • 网站建设案例:派生

  • 网站建设案例:富安娜

  • 网站建设案例:五洲宾馆

  • 网站建设案例:免税集团



点击咨询

18676686468

0755-82484966

联系我们

您好HELLO!
感谢您来到深圳网站设计公司,若您有合作意向,请您为我们留言或使用以下方式联系我们,
我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。

电话:0755-82484966  82481178

商务合作邮箱:kefu@lonwin.net

合作QQ:642767003

深圳总公司地址:罗湖区北站路1号中贸大厦202-208室

在线提交需求

...您也可发需求信息至邮箱:642767003@qq.com