loading页面欣赏

小编:偶尔出现的小状况,比如:网速不好等情况,需要我们用户等待的时间,我们该如何让留住用户,不让他们在第一时间点击右上角的X,迅速离开。此时,我们该好一个页面叫loading,让我们一起欣赏别人家的loading页吧。

随着用户体验的优秀与否逐渐成为设计的头号要务,细微之处的用户体验也开始在其中发挥重要影响,而我们今天要说的就是预加载动画的设计。长久以来,一直鲜有人这一领域,但如今时代变了,现在几乎所有网站都自诩拥有多少多少华丽的效果能够让来访网友大觉惊艳。

细微之处的用户体验通常蕴藏于各种微小但又经过审慎设计的内容元素之间,这些元素能够将用户与内容有效地相互联系,让他们在网站上的旅程更加有趣、难忘。这一领域囊括了各种各样的用户友好效果,而今天我们要讲的,则是加载指示图标。

尽管加载指示图标(在大多数情况下)可能仅仅持续显示几秒钟时间,但却值得我们的特别一下。我们一般习惯性的认为首页是决定第一印象好坏的关键,但是,假如你自己有一个非静态网站,就会发现最首先显示的页面其实是加载页面,而你则需要解决所有有关预加载过程的问题。一个美观、养眼又富有娱乐性的动态计数图标是必不可少的,因为它们能给用户带来快乐,同时以不甚突兀的方式迫使用户多停留一会——这不正是你的目的所在吗?

今天的计数图标就和主界面设计一样呼唤和独到,很多设计师在这方面的作品让人觉得既有趣又惊叹,下面我们就一起来看看几个有趣的预加载动画。

Little Big Room

这是一家在线旅游公司的神奇作品,其采用了生动形象的卡通风格加载条,不仅能够让访客在等待的同时玩趣一把,同时还奠定了接下来待显示内容的基调和风格。

Subskill Digital

这家公司的团队使用经过精心设计的公司铭牌妆点预加载页面,别具匠心地把品牌认知融入到了网站的设计中。其效果具有美艳的数码特色,与整体主题相得益彰。

The Erasable Wall

尽管这个网站诉求的主题比较严肃,但设计上却采用了草绘图形、铅笔画和动画元素呈现出了略显俏皮的外观。预加载页面也巧妙地采用了相同的风格以求完美融入主题。

Dunckelfeld

这个加载动画的外观精致巧妙,与整体网站的外观保持完全风格一致。设计团队巧妙地把公司logo进行了动态化。

Alstercloud

这个充满想象力的加载页面让人跃然期待一次有趣、难忘、并充满动感矢量绘画的用户体验。其预加载页面具有浓烈的艺术气息,与整体网站的感觉相呼应。

Though Brancott Estate

尽管Brancott Estate使用了普通的加载旋转图标这一比较简单的方法,但与之相结合的材质化背景、粉笔风格字体和朗朗上口的宣传语却让人甘心多等一会。

SIXZERO

有的时候想让页面吸引人并不意味着一定要大搞创新,在这一点上,SIXZERO向我们展示了如何利用平淡的单色背景给加载页面带来一连串纯色景观,达到吸引人眼球的功效。

Tu Corte

Tu Corte专营肉食品,因此他们的加载图标理所当然的使用了生动的牛、猪和禽肉写实风格图形。

New Jumo Concept

这个预加载屏幕动画在结束时完整呈现出公司logo,进而以漂亮、吸引人的方式打开首页。

Letters, Inc

与公司网站设计类似,加载页面也采用了精巧、高端的线条风格外观。其通过动画勾勒出了首页中央的图形,缓慢展现出全部内容。

At Work

该网站没有特别的加载页面,所有内容都在首页呈现,其中采用了一个逐渐加速的神秘漩涡式动画以讳莫如深的方式逐渐吸引你的注意力。

Relio

Relio是一个大小能放入口袋的方形专业设备,其可用于提供照明。公司网站的加载页采用了简洁的轮廓线风格图形展示其产品。设计团队还对图形进行了动画制作以求给页面带来轻微的动态感。

Fulvio Luparia

这个页面没有采用任何特殊效果,只有一个带有计数器的标准圆形图标。但是,其设计师巧妙的将对比强烈的图形和色彩以及简约的背景、隐约可见的标题相互融合,完美诠释了简约的概念。

Scotch and Soda

这个界面以手绘的风格呈现出了一个经过精心修饰的基本加载进度条。其与登录页上分散各处的草绘元素形成了自然的互动。

Engage

Engage的网站设计在各个角落都充满了草绘的艺术气息,即便是用于指示加载状态的普通进度条都采用了可爱的手绘风格,并完美地搭配了品牌的配色。

All About Medical Training

这家公司的设计团队充分展现了如何从无到有呈现一切。其加载页面使用直观的医疗风格图标以图形方式显而易见地揭示了网站的主题。动画风格的阴影则起到了状态指示的作用。

Mikado

Mikado在其logo上采用了简约的扁平化旋转指针,让用户在刚刚打开网站的头几秒内即可对其公司品牌有所认知。

Designova

与前面的例子相似,Designova也对其logo进行了动画制作,在加载页上仅采用了圆形且会跳动的公司徽标进行装饰。尽管这一方案非常高端而且制作简单,但时间长了就会逐渐失去吸引力。

Zipper Galeria

这个网站的设计团队将公司铭牌改造成了文字型的加载进度条,随着加载进度提高,品牌名会逐渐上色。

Kommigraphics

Kommigraphics采用了经典的圆形加载图标。其使用扁平化风格以及轻柔的双色配色方案以求与网站设计主题完美呼应。

结束语

尽管网站使用加载图标不是什么新鲜事物,但别忘了基于flash的网站曾经一度遍布这些充满时尚气息的小计数图标。现在,这些小玩意已经更新换代,变得更加完善、更加时尚并且更加成熟。设计师已经开始把它们视作网站上不可或缺的组成部分并倾尽全力使其日臻完美,其既要符合网站的整体风格又要有自己的特色,所以说,我希望在不远的未来,所有动态网站都能够开始使用而富有娱乐气息的加载图标。

designmodo.com

文章来源:UI中国

译文作者:蒋灿

(0)

相关推荐

  • 极具创意的404页面欣赏

    小编:今天给大家带来的是由404sites分享的极具创意的404页面欣赏.要知道一个网站中的404页面设计对于用户体验来说是非常重要的.人人都喜欢第一个方向,但多数产品却是在走着第二条路,这其中的决定 ...

  • 30个清新创意的404页面欣赏

    小编:404页面一直在网站中是个不可或缺的页面,它在网速不好或一些小意外时能很好的安抚用户糟糕的心情.所以也被设计的越来越有趣,符合人性化心理.今天我们一起来欣赏一组颜色清新创意的404页面吧. 文章 ...

  • APP登录注册页面欣赏

    今天来欣赏一组APP登录注册界面,这些都是小编收集来的,如果你是移动端的UI设计师,那么这些可都是宝贝啊. 这些图片都是有高清大图1:1的,请访问 这些图片都是有高清大图1:1的,请访问 ====== ...

  • 简洁大气的登录页面欣赏

    小编话:无论是APP还是网页想要脱颖而出,除了概念与用户体验或是交互动画之外,还应注意它们的注册和登陆页面.它们就犹如门面担当的存在,只有设计好了一个漂亮的入口,才能吸引用户走进来仔细的观摩与应用.以 ...

  • “联系我们”页面欣赏大集结

    小编:"关于我们"你知道多少?作为一个被联系方,你该如何将的信息简洁的呈现给你的用户呐?不呆板,又有趣味,还直观.看看别人的做法吧. 简化联系表格 Yummygum Yummygu ...

  • 创意幽默的404错误页面欣赏

    没有人喜欢刚打开的网页不存在或是一个错误的页面,这除了烦人还浪费用户的时候,而且这个页面也会让你感觉为什么打不开?那么如何让用户进入一个不存在的页面时,让用记不至于太过困惑或烦人?我们的建议是设计一个 ...

  • 一组精心设计的404页面欣赏

    小编:一个错误的页面是一种不舒服的用户体验,但精心的情感设计至少能给这份不舒服带来一点点缓解.希望今天的这组404页面能给你带来一些设计灵感. Bit.ly CSS-Tricks Starbucks ...

  • 设计师都应该了解的Loading动画知识

    全文共3239词,阅读大约需要12分钟! Loading动画,在现在的设计中已经是一个必须要考虑的系统元素,它能减缓用户等待焦虑的心态,也能用来作为品牌透传,增加曝光.那关于loading动画相关知识 ...

  • 如何获得照片墙功能?

    目前全部用户都可以使用照片墙功能。那么,照片墙如何使用呢?请您根据以下方法来查看吧! 第一步:进入空间,点击您喜欢的相册,进入照片墙页面; 第二步:之后就能在照片墙页面欣赏您的照片了。