一组加载体验超舒服的网站设计欣赏

 

  编者按:优秀的设计师是能将每一个痛苦的地方都变得有趣的人,特别是对于网速慢的同学,今天这组网站简直可以让人乐疯了,连加载界面都如此有趣,这才是真正的微体验!感受一下!

  创造良好的用户体验已成为先决条件,微体验更是位列前茅——本文探讨的是预加载动画。长久以来,只有少数人重视这部分,如今一切都不同了,几乎每个网站都能以一两个赏心悦目、给用户留下深刻印象的效果自居。

  微体验通常与经过深思熟虑的小组件有关,它们能架起用户与内容之间的桥梁,把访问网站变为一段愉快难忘的旅程。这个领域包含了各种友好的效果,今天我们要谈的就是加载状态的指示计。

  虽然只会维持几秒钟(多数情况),它们应当得到特别的重视。我们习惯于相信,首页肩负着创造显著第一印象的责任,无论如何,假如你是一个非静态网站的站长,第一个页面就是加载页,你得考虑加载的过程。讨人喜欢、吸引眼球、令人愉快的动态计数器是无可替代的;它们会愉悦用户,悄悄地迫使用户停留一小会儿——这正是你希望的。

  时髦的计数器,与主体的设计有着同等的独创性,欣赏设计师们想出的那些方案非常有趣,振奋人心。那么,我们来探寻一些有趣的预加载动画吧。

  Little Big Room


  探秘这家机构的作品集,从这个卡通画风格的加载条开始。它不仅是为了娱乐那些正在等待的网站访客,也奠定了基调,为接下来将要发生的事情做了一点点提示。

  Subskill Digital


  这个团队通过漂亮的动态logo,来给预加载页面增添活力,巧妙地将品牌标识应用到网站设计中。这效果有种讨人喜欢的数码氛围,与整个主题完美搭配。

  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


  这个团队将它的logo转化成基于文字的加载条,逐渐填入品牌色。

  Kommigraphics


  Kommigraphics用了经典的圆形加载指示计。它呈现一种扁平样式,柔和的双色调配色,与网站的设计主题完美吻合。

  结论

  尽管将加载指示计融入网站中绝非新鲜之举,记得那些基于flash的网站吧,它们普遍运用了这些时尚的小指示计。如今它们有着更新、更先进、更时尚且更精美的诠释。设计师开始像对待其他必备元素一样对待它,力求完美无瑕,吻合整体主题并且同时保有自己的风格,那么,我希望在不久的将来,每个动态的设计都具备独创且有趣的加载指示计。

时间: 2024-09-26 12:27:08

一组加载体验超舒服的网站设计欣赏的相关文章

几个优化WordPress中JavaScript加载体验的插件介绍_php技巧

WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能.为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件.但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应.渲染)速度.本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript. 下面先简单介绍几个相关的优化 JavaScript 的 Wo

网站加载速度对SEO优化意义

对于网站加载速度,相信大家最直观的感受就是网页的打开速度了,好的服务器,好的程序,我们打开网页的速度绝对是杠杠的,所以在谈到SEO的时候,最开始的阶段我们都会建议选择好的服务器,一个是稳定,一个是速度.但是大家可能还会忽略网站加载速度对于网站SEO的影响. 很多人谈到网站加载速度都是从用户的角度出发,谈到的都是用户体验,虽然这一点无可厚非,但是我们却没有从根本上去分析网站加载速度会对网站SEO内在的一些方面造成什么样的影响.这也是今天北京SEO要和大家分享的一点知识:网站加载速度影响网站收录.

如何解决CSS JS和图片对网站加载速度的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 对于网站加载速度的严格要求一致是seo优化过程中的重点,如何提升网站加载速度,服务器,网站内容元素等都有很大的关系,本篇文章将从CSS JS和图片三个方面进行详细的讲解. 1.图片 (1)指定图像尺寸 加载图像之前,您的浏览器开始渲染页面.制定图像尺寸,有助于它环绕不可替代的元素.如果没有制定尺寸,一旦图像被下载您的浏览器将回流,为了做到这个

百度统计推出异步加载统计代码 助力网站分析更高效

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客 站长团购 云主机 技术大厅 尊敬的百度联盟会员,您好: 百度统计推出异步统计代码已有段时间,对于已使用或准备使用百度统计的用户来说,怎样更新和部署百度统计异步代码?异步代码有什么好处?需要注意什么?都是迫切需要知道的问题,下面就为您简单介绍一下百统计异步代码的优势及如何部署. 异步统计代码有什么不同? 百度统计异步代码是以异步加载形式(对网页加载速度零影响)加载

如何比较不同浏览器的页面加载时间

比较浏览器性能的通用方法 在比较不同浏览器的性能时,最重要的一条就是选择一些性能指标.通常,这些指标都来自标准化的Web API.关于性能比较, 可以使用Navigation Timing(导航计时),它是一个可以在web中精确测量性能的javascript API.这个API提供了一个简单的方法来获得页面导航.加载事件的精确而又详细的时间状态.需要注意的是,Navigation Timing的目的是用于分析页面整体性能指标.如果要获取个别资源(例如JS.图片)的性能指标,请使用Resource

实现图片预加载的三大方法

  预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.   方法一:用CSS和JavaScript实现预加载   实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案

新技能Get:如何利用HTTP技术提升网页的加载速度

在这个信息爆炸的时代,使用移动终端获取新鲜信息已经是大势所趋,但是移动网页浏览速度还有巨大的提升空间.据 Strangeloop Networks 统计,在同样的网络条件下,使用移动端访问相同网页平均会比 PC 端慢40%!然而另一方面,用户对网速的要求却步步紧逼.研究表明,网页响应时间可容忍的阀值是2秒,一旦超过3秒,会有40%的用户放弃浏览页面. 所谓天下武功,唯快不破!想要设计更快的网页优化速度,我们可以借鉴成功的优化经验,全球最大的CDN服务商Akamai(阿卡迈)针对移动体验的问题,提

使用RequireJS库加载JavaScript模块的实例教程_javascript类库

js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕.且js的依赖关系必须通过script的顺序才能确保:而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一. requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法.变量的模块:requirejs也可以加载飞AMD标准的模块

利用CSS、JavaScript及Ajax实现图片预加载的方法_javascript技巧

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d