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

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

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

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

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的网站曾经一度遍布这些充满时尚气息的小计数图标。现在，这些小玩意已经更新换代，变得更加完善、更加时尚并且更加成熟。设计师已经开始把它们视作网站上不可或缺的组成部分并倾尽全力使其日臻完美，其既要符合网站的整体风格又要有自己的特色，所以说，我希望在不远的未来，所有动态网站都能够开始使用原创而富有娱乐气息的加载图标。

翻译：蒋灿

来源：ui中国