@Mockplus原设计 :如今,越来越多的优秀 iOS 应程序、MacOS 工具和争相现,户对产质量的要求水涨船。在户心中,真正优秀的产必然是要够快速响应他们的需求。
分享个真实案例:我们最近发布了款工具,为 iOS 应用程序提供用户反馈,不出所料,第个版本并不完美,加载也会延迟 2-3 秒。
你猜怎么着?
用户以这 3 秒加载延时一 bug。实际发环境中,总会诸多问题,网络迟缓,码不优化,操作时间或者数据太多,因此,App 运行的速度很难到用户望的那么。虽然早的忠实用户可能会稍耐,但绝多数用户会选择立即关闭。
要是产品界面可以为用户立即提供确的反馈息,那结果可能就不一了。刚才发生的操作是一个 bug?还是只是在等待服器请求?用户需要等待多长间?用户为什要等待?
要弄明白上问题,妨一起深入地研究一。为了方解,今天要从几个方面讲解加载动画:
- 加载动画的由
- 加载动画:101
- 可忽视的UI细节
- 简单处理是制作精良
有这一类反馈形式,计使用进度条,加载指示器,预加载器或旋转器等来告知用户什间发生了什或者加载了什,从而减少用户心理焦虑。
这种类的反馈是么时候开始使的呢?
意看到篇关于 Nielsen Norman 文章,原来在 1993 年已经提到过有关于响应时和加载动画描述。(参考1985年文献资料)
果计机无法提供快速响应,则应以百分比进度指标的形式向用户提供持续反馈。
度指标三用途:首先,提示用户系统崩溃解决问题;其次,告知用户待时,因用户可以待间点其他的事;后,用户提供界面视觉内,减轻用户理焦虑。
Web 1.0后,乎每个网站都采用了预加载器。用户的注力可能被那些移动的动画吸引,此同,页面的其余内容在进行加载。
在 2007 年,预载器长这样:
那时候,还有专门的指南帮助你使 Fireworks(2007)或Flash(2008)创建载画,还有一些工具,如「载GIF生成器」(2009)。
到2010年,CSS3 技术运用到加载动画制作来,出现了大量教程教授如何制作 CSS3 动画和加载动画。设计师也可以在 Photoshop CS5 制作加载动画,这在十年前是常流。
在时,加载动画更偏重 web 端问题,加载动画身也是一个非常严重的问题。在 2010 年的时,很 Flash 网页开始一更具创意的加载动画:
一直以来,进度条和旋转器在 Skeleton 屏幕备受争议。显,简单的进度条和旋转器已经不能满需求,在 2014 年至 2016 期间,设计师也开始花费更精力在一领域,更优质的加载动画教程,设计资源,插件,开源项目也争相出现。
尽管设计趋势和设计技术不断变化,但向用户提供界面反馈的需求却始终不变。
理想状态中,加载动画也许具有以下特。
1. 尽能少地显示加载动画
果你有办法让你的工具或网站非常高效的运行,的是非常厉害。或者说,至少以达到用户的期望值。即使加载动画设计得,果加载时间长,用户也失去耐心,或者只显示加载动画,不提示用户等待时长,也是非常不的验。总之,加载动画只是一种缓兵之计,决内容加载的问题才是根之道。
2. 给出加载时间预估
以反馈给用户一个大致的等待时间,或者更直观地显示加载进度。比说,一共需要上传少个文件?软件更新需要少时间?已经进行到哪个节?用户验细节以帮助设定用户预期,减少心理焦虑。
3. 出用户需要等待原
些 APP 或工具加载动画其实并不能被用户立即理解,这时候,需要常巧妙地提示用户为什么他们需要等待,加载时软件背后在做些什么。
说回上文提到反馈工具,为法做到 1s 内完成内容加载,此用户解释等待时长常要。动画会提示用户软件正在加载界,这样用户会知,软件不是出 bug 了,而是在处理请求:
4. 等待过程更有趣
放置一个引人入的载画吸引户注意。
5. 减少用户等待间的知
这上述观点非常相关。如果在等待可以提供吸引用户注力的西,会减轻用户心理焦虑。可以考虑吸引人的颜色搭配,一些新颖的想法等等。
6. 传递公司品牌形象
如果用户使用的产品或者网站时,无论如何都需待,那什么不效利用这时间呢?并不非一些厉害的加载动画,或者非使用什么理学技巧,只需将加载体验与的品牌形象保持一致即可。
虽有人能认为加载器只是一个很小的 UI 细节,但它却有种类型和变化。里提供几种形式的进度条,无循加载动画和骨架图。
1. 进度条
果以明确加载时间,以使用进度条,其原理是通数字或视形象来表现,形式也以做到种样。
数字度条时被称分比指示器。它们可以简单直接,也可以极具创意,选取合的就行。
趣的度条,具分比指示的循环动画:
度条的作用就告知用户待时,并且向用户展示到目止的展状态。根据具体况,度条也可以只线性的,不用都具备分比指示。
举个例,Gmail。它在加载,也没有显示进度百比,但用户却可以清晰地觉加载进度,以下个例都是非常有创的:
2. 无限循环载画
当载时间未知时,可考虑使无限循环载画。可是默认的循环画,可添一些创意,总之,告知户 APP「依旧在工作」。
具有创意循环动画可以缓解用户心理焦虑,为它在用户解释为什么加载需要时。
创意循环动画可以与品和业务很好结合,辅助打造品形象。
限加载动画提示用户在程序上传或执某些操作时需要等待,不指定需要多长时。般来讲,环状循环动画是不选择,可以简洁观,也可以精心设计。
难看,如今的载画早已仅仅是系统的状态 UI 元素,而更像是一种艺术表达。
3. 骨架图
骨架图可供载界面的渐进过程。你可把它想象成页面占位符,然后逐步载图片,本和他容。
骨架图这个术语最先出现在 Luke Wroblewski 《移动设计细节:避免旋转》文章。卢克议使用骨架图来提供更好加载体验。这个想法也获了其他设计师支持,并在 Facebook,LinkedIn,YouTube,Google Drive 等用户界运用。
分享一个案例,果你在使用网页设计工具Figma,你看到其页面顶部有一个渐进加载的进度条,你先看到项目的占位符,才显示用数据:
抛开些设计精细例子和 Dribbble 概念设计,在大多数应用程序,你看到是默认或简单加载动画。
很长时间以来,简单的加载动画被泛运用,并被视为最佳的加载办法。使用默认或开源加载动画不仅轻松简单,设计师也不用花费时间来自定义动画,还以节省开人的开时间。
那么,加载动画应该简单处理还精良制作?这问题其实法不一。
一方面,操作系统的默认 UI 组件可以让计进行生计,实现更好的用户体验。用户也更熟悉本机组件,可以快弄如何使用,并且预期结果。
举个例子,苹果户对于苹果平台的标准导航控件,按钮或图标都更熟悉,户甚至可在遇到默认载时,都会感知到载的存在。
另,用户也有可能默认组件有不好体验,尤其是于加载。
还有一点,果一个应用程序使用操系统的加载指示器而不是自定义加载指示器,用户能抱怨网络连接或者设备速度。
关于这观点,目还找到相关研究,但确实也一意思的思考点。
如果你正在开发 MVP(最可行产品)或者项目的第一个版本,使用简、默认或开源加载动画似乎更乎情理。在此阶段,即使是使用最有创的加载动画也不能解决根本问题,因为根本问题应该是产品本身。
有趣的是,在 2016-2019 年之间出现了大量心制作的加载动画。究其因,细节的重视,计术日益成熟,术环的改善以及动画制作工的出现等等,所有这些都使得加载动画更创造性。如果浏览 Dribbble,可以找非常多酷炫的加载动画。
即使我们是一个只有 5 个人的创公司,我们会考虑更好的户体验,户的等待体验更愉快。否则,我们的产只会慢慢失户。
欢迎关注译者微信公众号:「
」