留住访客！超有趣网站进度条设计
- - 人人都是产品经理人们讨厌等待，特别是加载网站的时候，可有些时候由于网速或者浏览器的原因，等待总是不可避免，如果在网站中也能像移动应用一样，有创意的进度条，会很大地减少人们的焦虑，还能避免因等待过久放弃进入这种不幸的事故. 相对于移动端，在网站中使用进度条不常见，该用哪种方式呈现给访客也是一个考验设计师的难题. 现在你可以来看看这10个在网站中创意运用进度条的设计，它们既带给访客乐趣，也不妨碍内容阅读，学习一下，让它们在无形的展示中留住网速拙急的访客.
留住访客！超有趣网站进度条设计
标签：
交互视觉
进度条
设计
| 发表时间：2013-12-10 22:32 | 作者：jacky
出处：http://www.woshipm.com
人们讨厌等待，特别是加载网站的时候，可有些时候由于网速或者浏览器的原因，等待总是不可避免，如果在网站中也能像移动应用一样，有创意的进度条，会很大地减少人们的焦虑，还能避免因等待过久放弃进入这种不幸的事故。
相对于移动端，在网站中使用进度条不常见，该用哪种方式呈现给访客也是一个考验设计师的难题。现在你可以来看看这10个在网站中创意运用进度条的设计，它们既带给访客乐趣，也不妨碍内容阅读，学习一下，让它们在无形的展示中留住网速拙急的访客！（大多数提供源码，你可以很方便地学习它们）
进度条运用得当可不简单，细节是魔鬼，当你不知道如何处理这个魔鬼时，建议阅读《谈谈加载(LOADING)的那点事》，你也可以从其他优秀作品中吸取灵感：《18个读取进度条的优秀设计案例》
Creative Loading Effects
这个教程非常漂亮，展示了不止一种加载进度的方式，你可以点击DEMO玩一下。
Spinning Loading
用大写的「Loading 」，中间的O以新奇的动态旋转，是个非常清新的设计，提供了源码，可以很方便应用到你的网站。
Planets
看两个萌萌的小星球在跳舞真是太好玩了，它特别适合用在卡通风格的网站上。
Sinister Loadscreen
是的，看起来很邪恶的形象，不过很适合应用在暗黑系的黑色风格网站上，或者你可以用它来营造神秘感。
Yet Another Loading Animation
这个动效做得非常有节奏感，你可能想把它应用在音乐风格的网站上。
CProgress
Cprogress使用jQuery来展现一个非常酷的和易于使用的loadscreen。强大的是，你也能鼓捣成这几行代码，因为它们是完全可定制的！
Spin.js
一个让世界快速旋转的「Loading 」！你也可以通过控制右边的滑块来改变它的形状，给它加点阴影，甚至改变旋转的方向！
Alessio Atzeni
这教程又酷又好学，因为它是完全用HTML和CSS来实现的，还有三种进度模板供你选择。
Facebook-ish Loading Animation
如果你想让网站看起来像Facebook，那么这个进度条最适合你了，它的加载方式与Facebook加载图像时一样。
Flickr Style
如果你是Flickr的爱好者，那么这个不能错过，完全仿照Flickr的效果来。
文章来源：优设网编译（ 1stwebdesigner）
本文链接《 留住访客！超有趣网站进度条设计》
官方微信：woshipm，干货天天推荐，欢迎订阅
相关 [访客 网站 设计] 推荐：
网站首页的设计
- - 标点符网站首页的设计是一件非常让人头痛的事. 虽然她看上去很简单：产品经路随便从网站里拿点东西出来，堆出一个看上去靠谱的页面. 也正因此，它往往非常麻烦：很多人都可以发表自己的见解，以致最终陷入到无尽的争执中. 首页的设计相对于其他页面要难的原因是，其他页面更多的是解决用户“能做”的问题，而首页的更多要解决用户“想做”的问题.
移动友好型网站将访客变为客户
- - 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/.