支持支付宝、微信、对公转账等多种支付方式
这篇短文将会评论UI方案中动画的过度运用,并将其与前期的视觉方案进行对比,提出一些对于有用的GUI动效方案的建议。
智唯网络将在下文中,简略评论怎样改进下面的这个交互。
UI动效方案的不好案例
注:这个不好案例并非假定,而是来自近期的真实客户案例。
推荐阅读:如何用CuteFTP软件上传下载文件
概述
自从 70、80 时代首个光栅图像在CRT屏幕出现以来,我们对于(数字)视觉方案的心情一直在不断进化。与其他艺术领域不一样,在数字方案领域暴露的趋势,与运用设备的展开史紧密有关。
设备才干的进步众所周知,闪现器技能使分辨率从CGA320*200,到VGA的640*480,然后到SVGA的800*600,到现在已敏捷进步至4k及以上。
类比视觉方案展开进程
动效方案正在履历生长的苦楚,正如在当年90时代和21世纪初的视觉方案。追溯视觉方案进化展开的进程,有助于我们去理解现时期的动效方案。
21世纪前期的页面方案
在更精妙的方案言语出现之前,方案师们在前期时期简略乱用新功用,这是正常的。90时代末和21世纪初的界面方案师,应当还记得以暗影、斜角、高光,无留白这特征的过度方案。当方案师们着迷于新媒体,并沉醉于像素的美好时,这一成果再天然不过了。
扁平化方案
扁平化方案示例
不论你喜欢与否,扁平化方案在方案圈中已成为干流思想。全部的首要系统渠道(Android、iOS、OSX、Windows、Windows phone)都现已初步拥抱这种极简方案言语。同时,它还操作着高速展开的页面方案。
扁平化方案是视觉方案考虑老到的体现。它是一个天然的进程,一方面是被潮流和时尚唆使,另一方面折射出业内人士总算逐渐掌握了数字媒体 。
动效方案
现时期的动效方案,可以类比视觉方案史的“暗影时期”。
页面动效才干有了明显进步,得益于CSS中的过渡特色(transition)和被硬件加速支撑的变形特色(transform),以及正在展开的标准,如JS动效(JS Web Animations)。
另外,现在的移动设备因为其不断精进的功用,以及多核、多存储、高dpi等优胜的特性,可以流畅地输出60fps动画效果。
让全部东西都动起来!这么的动效似乎让人回到了1999年。
考虑到现在是UI动效的前期方案时期,方案师企图通过增加动效来增强视觉亮点,和从前的暗影和斜角没什么不一样。
可是我很深信,与视觉方案不一样,动效方案的老到不需要耗时15年。
过度的动效运用
无意义的动效随处可见,它们也不只出自业余方案师之手。作为用户,我们可以很轻易地发现这种阻止着你的动画,它阻隔着你和你的政策,令你迷惑皱眉。作为方案师,你需要认识到你的UI方案并非什么文娱。没有人只为看着酷炫的动效爽,就运用你的app或许页面。
UI动画的运用反例
OS X的全屏动画
桌面端和移动端都有很多的差劲UI动画示例,其中之一,便是OS X的窗口切换到全屏方法的过渡动画。因为它来自因前沿的方案感著称的苹果公司,且是旗舰产品的首要特色,所以格外令人迷惑。
(视频:5-yosemite fullscreen.mp4)
这个UI动画有以下几个疑问:
缓慢
非必要
不可设置(除非通过命令行修正)
怎样知道你的UI动效使人厌烦?我们会在博客上写文抱怨。很多评论怎样加速或禁用动效的博文和论坛疑问帖,都很有力地阐明这个转场动效除了让用户烦恼,毫无效果,这是UI动效方案的一个大忌。
动效方案案例研讨
我们运用一个简略方案做示例,它来自我近期为客户进行的工作。这个交互包括了一些差劲的方案决议方案。
UI动效方案的不好案例(线上demo)
这个方案包括如下疑问:
遮挡了界面的蒙层
缺少后台正在实行操作的指示
动画缓慢
动画非必要
这个动画最烦人的一点,是在耗时间的网络央求完成后,这个动画才发生,致使增加用户额定的等待时间。
动画是不是必要?
首要疑问理应为:这个动画进步了用户领会吗?
上述交互案例中,出现了精确运用UI动画的绝佳时机。考虑到这一交互需要一个耗时100-500毫秒的网络央求,这是个运用动画来掩盖央求耗时的绝好时机。
方案改进
改进1(线上Demo)
这是很小的一个改进,增加一个加载指示器,告诉用户正在等待额定的数据。可是,弹出动画是剩下的,减缓了用户流程。
改进2
删减了不必要的滑出动画,运用户在操作后即可看到所需数据。蒙层的运用阻挡了用户视图,,是剩下的打扰。
动画——障眼法
看了这篇文章的人还看了

- 全部评论(0)
- 3361140个美食主题网页设计欣赏
- 26652网站活动Banner如何设计,才能吸引用户眼球?
- 24623优秀的海报作品设计分析总结
- 19814微信编辑器哪个强 秀米vs135测评
- 1850520个中国风网站设计欣赏
- 1743626款个人网站设计作品欣赏
- 1743720个漂亮的政府网站设计欣赏
- 1615815个高端网站设计欣赏
- 1376925个国外科技网站设计欣赏
- 135010企业网站制作中一般常见的栏目有哪些?