最新资讯当前位置:天恒娱乐 > 最新资讯 > >

天恒娱乐:停止不必要的UI动效设计

  前语:这篇短文将会讨论UI规划中动画的过度运用,并将其与前期的视觉规划进行对比,提出一些关于有用的GUI动效规划的主张。

  咱们将在下文中,简略讨论怎么改善下面的这个交互。

  1-Example-of-Poor-UI.gif

  UI动效规划的不和事例(线上Demo)

  注:这个不和事例并非假定,而是来自近期的实在客户事例。

  概述

  自从 70、80 时代首个光栅图像在CRT屏幕呈现以来,咱们关于(数字)视觉规划的情绪一直在不断进化。与其他艺术范畴不一样,在数字规划范畴暴露的趋势,与运用设备的开展史紧密相关。

  设备才能的提高众所周知,显现器技术使分辨率从CGA320*200,到VGA的640*480,然后到SVGA的800*600,到如今已快速提高至4k及以上。

  类推视觉规划开展历程

  动效规划正在阅历成长的疼痛,正如在当年90时代和21世纪初的视觉规划。追溯视觉规划进化开展的进程,有助于咱们去了解现期间的动效规划。

  2-2000s-website-design.jpeg

  21世纪前期的页面规划

  在更精妙的规划言语呈现之前,规划师们在前期期间简略滥用新功用,这是正常的。90时代末和21世纪初的界面规划师,应当还记得以暗影、斜角、高光,无留白这特征的过度规划。当规划师们着迷于新媒体,并沉醉于像素的美妙时,这一成果再天然不过了。

  扁平化规划

  3-Example-of-flat-design.png

  扁平化规划示例

  不论你喜爱与否,扁平化规划在规划圈中已成为干流思维。一切的主要体系渠道(Android、iOS、OSX、Windows、Windows phone)都现已开端拥抱这种极简规划言语。同时,它还操纵着高速开展的页面规划。

  扁平化规划是视觉规划思考老练的表现。它是一个天然的进程,一方面是被潮流和时髦唆使,另一方面折射出业内人士终于逐步掌握了数字媒体 。

  动效规划

  现期间的动效规划,能够类推视觉规划史的“暗影期间”。

  页面动效才能有了明显提高,得益于CSS中的过渡特点(transition)和被硬件加快支撑的变形特点(transform),以及正在开展的规范,如JS动效(JS Web Animations)。

  另外,如今的移动设备由于其不断精进的功用,以及多核、多存储、高dpi等优胜的特性,能够流畅地输出60fps动画作用。

  4-Animate-like-it’s-1999.jpeg天恒娱乐

  让一切东西都动起来!这样的动效似乎让人回到了1999年。

  考虑到如今是UI动效的前期规划期间,规划师企图经过添加动效来增强视觉亮点,和曾经的暗影和斜角没啥不一样。

  可是我很确信,与视觉规划不一样,动效规划的老练不需求耗时15年。

  过度的动效运用

  无意义的动效随处可见,它们也不只出自业余规划师之手。作为用户,咱们能够很轻易地发现这种阻碍着你的动画,它阻隔着你和你的方针,令你困惑蹙眉。作为规划师,你需求意识到你的UI规划并非啥文娱。没有人只为看着酷炫的动效爽,就运用你的app或许页面。

  UI动画的运用反例

  OS X的全屏动画

  桌面端和移动端都有许多的差劲UI动画示例,其中之一,即是OS X的窗口切换到全屏方式的过渡动画。由于它来自因前沿的规划感著称的苹果公司,且是旗舰商品的主要特点,所以分外令人困惑。

  (视频:5-yosemite fullscreen.mp4) (责任编辑:admin)

上一篇:天恒娱乐注册:10个超有用的心理学技巧,控制别

下一篇:没有了

推荐内容

分享网站