留住访客!超有趣网站进度条设计

标签: 交互视觉 进度条 设计 | 发表时间:2013-12-10 22:32 | 作者:jacky
出处:http://www.woshipm.com

人们讨厌等待,特别是加载网站的时候,可有些时候由于网速或者浏览器的原因,等待总是不可避免,如果在网站中也能像移动应用一样,有创意的进度条,会很大地减少人们的焦虑,还能避免因等待过久放弃进入这种不幸的事故。

相对于移动端,在网站中使用进度条不常见,该用哪种方式呈现给访客也是一个考验设计师的难题。现在你可以来看看这10个在网站中创意运用进度条的设计,它们既带给访客乐趣,也不妨碍内容阅读,学习一下,让它们在无形的展示中留住网速拙急的访客!(大多数提供源码,你可以很方便地学习它们)

进度条运用得当可不简单,细节是魔鬼,当你不知道如何处理这个魔鬼时,建议阅读《谈谈加载(LOADING)的那点事》,你也可以从其他优秀作品中吸取灵感:《18个读取进度条的优秀设计案例》

Creative Loading Effects

loading-effect-tutorials这个教程非常漂亮,展示了不止一种加载进度的方式,你可以点击DEMO玩一下。

Spinning Loading

loading-effect-tutorials-01用大写的「Loading 」,中间的O以新奇的动态旋转,是个非常清新的设计,提供了源码,可以很方便应用到你的网站。

Planets

loading-effect-tutorials-02看两个萌萌的小星球在跳舞真是太好玩了,它特别适合用在卡通风格的网站上。

Sinister Loadscreen

loading-effect-tutorials-09是的,看起来很邪恶的形象,不过很适合应用在暗黑系的黑色风格网站上,或者你可以用它来营造神秘感。

Yet Another Loading Animation

loading-effect-tutorials-06这个动效做得非常有节奏感,你可能想把它应用在音乐风格的网站上。

CProgress

loading-effect-tutorials-03Cprogress使用jQuery来展现一个非常酷的和易于使用的loadscreen。强大的是,你也能鼓捣成这几行代码,因为它们是完全可定制的!

Spin.js

loading-effect-tutorials-04一个让世界快速旋转的「Loading 」!你也可以通过控制右边的滑块来改变它的形状,给它加点阴影,甚至改变旋转的方向!

Alessio Atzeni

loading-effect-tutorials-05这教程又酷又好学,因为它是完全用HTML和CSS来实现的,还有三种进度模板供你选择。

Facebook-ish Loading Animation

loading-effect-tutorials-07如果你想让网站看起来像Facebook,那么这个进度条最适合你了,它的加载方式与Facebook加载图像时一样。

Flickr Style

loading-effect-tutorials-08如果你是Flickr的爱好者,那么这个不能错过,完全仿照Flickr的效果来。

文章来源:优设网编译( 1stwebdesigner

 


本文链接《 留住访客!超有趣网站进度条设计
官方微信:woshipm,干货天天推荐,欢迎订阅

相关 [访客 网站 设计] 推荐:

留住访客!超有趣网站进度条设计

- - 人人都是产品经理
人们讨厌等待,特别是加载网站的时候,可有些时候由于网速或者浏览器的原因,等待总是不可避免,如果在网站中也能像移动应用一样,有创意的进度条,会很大地减少人们的焦虑,还能避免因等待过久放弃进入这种不幸的事故. 相对于移动端,在网站中使用进度条不常见,该用哪种方式呈现给访客也是一个考验设计师的难题. 现在你可以来看看这10个在网站中创意运用进度条的设计,它们既带给访客乐趣,也不妨碍内容阅读,学习一下,让它们在无形的展示中留住网速拙急的访客.

网站首页的设计

- - 标点符
网站首页的设计是一件非常让人头痛的事. 虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中. 首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题.

移动友好型网站将访客变为客户

- - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发表者:Masha Fisch, Google移动广告营销部. 身处一个连通无处不在的世界,用户希望在他们有需要时,尤其是他们在四处奔走时,找到想要的信息. 我们知道,他们在使用手机浏览网页时,也希望如此,所以我们进行了一项调查,以深入了解用户在使用手机上网时的期望与反应. 非常有趣的结果是,61%的用户指出,如果在某个移动网站上无法立即找到所需信息,他们会快速转向另一个网站.

触屏手机网站设计

- Ray ma - 互联网的那点事...
随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:.

设计易理解和操作网站

- 并非无聊 - 互联网的那点事
当将易操作的理念融合到网站设计中时,网站设计的问题就变得更加复杂. 当大多数人将使用全屏显示器访问计算机时,这些理念往往容易被大众忽视. 除了需要考虑人们的身体条件如视力不好外,你也不得不注意到关于浏览器市场的不断变化. 给你的用户群提供一个完美的浏览体验并不是一件容易的事. 它需要你非常努力的工作,并且要很专注才行.

网站面包屑(breadcrumb)设计

- 淼 - 所有文章 - UCD大社区
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home.

网站设计中的注意事项

- 约翰 - 伯乐在线 -博客
  页面计数器会破坏你的设计,给人以不必要的信息,让你的网站看起来不专业. 如果你想知道网站的点击率,要求主机服务商提供统计. 通常,他愿意提供详尽的数据统计.   一些网页设计者喜欢使用背景音乐为网页创造氛围. 这只会在一些特别的网页有效,比如说迪斯尼或MTV网站. 然后,对大多数网页而言,背景音乐并非一个好选择.

完整B2C网站的设计过程

- 马克叔叔 - 互联网的那点事
以前写过一篇类似的文章,不过因为工作的原因相对写的比较简单,这次从产品的角度重新整理一下以往工作中的一些经验,算是对自己的一个阶段的总结. 作为一个产品的发起人,你可能是公司的CEO,也可能是一名产品经理,甚至会是一个普通的创业者,不论你的职位是什么,想做好一个网站就必须对它的目标人群有充分的认识,清楚的明白我的主要消费人群需要什么.

用Bellstrike设计免费专业网站

- 沈蚊 - 36氪
Bellstrike是一家提供网站设计服务的网站,人们在其网站上可以免费制作专业网页,而且快速发布. 利用Bellstrike提供的服务,即使不懂技术和设计的人也可以利用图像,视频,文件和博客制作一个专业的网站. 36氪之前也报道过Adobe的网站制作服务Muse,但是Bellstrike最吸引人的地方可能是它可以帮助用户在网站中加入“捐款”这一个特性.

五十个UI设计资源网站

- - 畅之部落格
UCD大社区  http://ucdchina.com/. 腾讯WSD  http://wsd.tencent.com/. 腾讯CDC  http://cdc.tencent.com/. 腾讯ISD  http://isd.tencent.com/. 淘宝UED  http://ued.taobao.com/.