流金岁月 » 前端设计

向Google学习打造灵动的web体验

simondai — Fri, 10 Feb 2012 03:23:24 +0000

Google的设计一向以简单著称，让页面清爽优雅地呈现，一方面节省了页面载入的时间，减少用户的等待，另一方面也减少了用户在浏览页面时的分心。然而，在这简单的设计背后，并不是设计师偷懒，而是更加灵敏、细致、轻便的交互体验设计。Google+作为社交网络的又一力作，在继承了公司著名的十大设计准则下，在如何更轻、更快速、更人性化方面有了很大的突破。本文主要以社交网络为例，分析总结出了六条让web体验更灵动的设计方法，供大家参考。

1.图形化的导航 　　　　社交网的信息十分繁杂，因此导航的引导就显得至关重要。没有公司比Google更大胆了，将导航的tab全部简化成icon，只有鼠标hover上去的时候才会显示这个tab的注释。显然，这对新手用户而言，有一定的学习门槛的，但是我们从中无不从中感受到了简洁的力量，图形化导航让整栏显得干净整洁，功能集中，切换方便。

纵观国内外几大主流社交网的导航，导航大多采用的是文字，虽然从功能上看一目了然，但是由于文字本身不够简洁，排布起来有局限，那么只好在设计的时候，更要考虑功能的归纳分布以及优先级展示，隐藏不常用的功能。

2.使用灰色按钮 　　　　经常做设计的人都知道，灰色按钮代表着是被禁用的功能，是不可点击的。然而Google+却大胆的使用了灰色按钮，通过鼠标hover告诉用户这是可点的。仔细想来，这用做以下两个原因：一、平衡了页面的配色。由于Google的logo主题色有四种，如果让按钮们默认展示原有的颜色，页面会看起来很花，没有重点。像这样灰掉的处理，使选中的tab更加突出，也不会带来干扰。二、按钮由灰点变彩色的方式给人一种点亮图标的暗示，增强了用户点击按钮的欲望。

从图标的发展趋势来看，无论颜色还是形态都是朝着简洁方向走的，过去花花绿绿的图标已经失去了它原有的标识感，纯色的图标应用起来会显得更上流，更高端。更优雅，更亲切的科技感。

3.鼠标所到之处均有反馈

网页上的大多数元素，在鼠标滑过的时候，都应该有其相应的反馈。无论是仅仅发生鼠标指针变化，还是出现下划线，或是结合一些简单功能的操作和注释来显示。设计师在做静态设计稿时，很容易忽略这些设计细节，但这正是一个产品体现良好交互性能的关键时刻。就好比和人交谈，如果他对我的话语没有任何反映，我也会减少对他诉说的兴趣，如果他时而点头，时而微笑，时而赞许，那么我可能会有更多更有意思的事情告诉他。因此，哪怕仅仅是边框的颜色变深了一些，也能表达这个页面对用户是友好的，而不是不理不睬的。

hover态是展示用户在当前页想知道的相关内容的最佳时机。例如鼠标划到头像时，会出现那个人的相关信息等。Hover态还可以对某一模块有强引导的作用，例如Google会强调它的搜索功能。另外，还可以用于隐藏一些不常用的操作，例如删除等。

4.简单任务在当前页完成

这里最值得一提的是Google+加好友和分组的流程优化。原本加好友和分组是两个独立的任务，分组是在对方同意加好友时才能进行，由于Google+推出的是单向关系链，因此将分组可以提前到添加好友这一步做。原本加好友是需要点击按钮，如今只用hover上去就会出现分组框，大大降低了加好友和分组的操作门槛。用户最少只要点击一下即可完成两步步骤。如今Face book等一些双向关系链的社交网也开始学习这种快速加好友和分组的方式。

5.feed实时滚屏更新

Feed就是我们的每天订阅的新消息。相信大家对下面的小黄条都不陌生吧，国内大部分网站都是采用点击小黄条来查看新的消息，而Google+是自动滚屏的方式展示最新消息，并在左侧出现一条蓝竖线，表示是最新更新。Google的设计之所以显得灵动，还有一个重要的原因，在于它的这些状态的改变都伴随着优雅的动画，而不是赤裸裸的出现、消失。包括feed的评论和赞，都是实时更新，配上简单华丽的动画，简直就像在看现场直播。

6.即时的系统反馈

　　类似上图中的提示条在整个网站都是统一一致的，它们都是自动出现，自动消失，有的还肩负着简单的操作，例如图中的撤消等。有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。　　综上所述，本文从灵敏轻便的角度，对Google+的体验进行分析，总结出以上六点让web更轻便灵敏的设计方法，希望能给大家带来一些参考。

(本文出自Tencent CDC Blog，转载时请注明出处)http://cdc.tencent.com/?p=5179

50个免费的Photoshop名片模板素材

simondai — Fri, 10 Feb 2012 02:02:07 +0000

网上一直流行着的XX青年从2011侃到2012。今天我们也来调侃一下。话说设计师里当然也有普通青年，文艺青年和二X青年了。普通青年太常见了，大多数公司里的小盆友都属于普通青年里，大家都规规矩矩做事，根据总监的脚印慢慢的延伸。文艺青年嘛，属于小众了，独立设计师占据大多数，他们可能木有钱，可能处于无业状态，也可能是某某行业的顶级设计师，这些人通常怀抱单反，甭管近视与否黑框眼镜是必须的，还有气质非凡。二X青年也是有的，这就好比每个故事里都需要有个胖子一样，每个设计团队里都有那么一个二X青年，他们总是在创意的时候听着你无法忍受的老歌or网络流行歌曲（我去，每次听到那些歌灵感瞬间都崩溃了！），有着你捉摸不透的装扮风格（怎么搭都不和谐那种！）。当然，上面的只是调侃一下，大家一笑过去就好。今天呢，我们上一些关于名片设计的模板素材（好东西，有木有！）。

Free Modern Business Card – II

Psd Business Card Mock-Up

Brown retro business card, PSD template

Cardboard And Torn Paper Business Card

Creative Business Card Vol 3

GFX-Design

Free Business Card PSD v1

Business Card Template

Corporate AND

A Business Card Template Pack

Exclusive business card

Themed Photoshop Business Card

Splat Business Card with PSD

Black business card

4 Asian-Inspired Personal Business Cards

Business card

Login Form Business Card UPDATED

Free Modern Business Card

DS Free Business Card Print Template

Deviant_ID Card Template

Business Card PSD Template

Free Business Card PSD

Org Bookkeeper Business Card

Clean Business Card PSD

Floral Business Card

Business Is Business

Gold Business Card

Psd Business Card Mock-Up

Business card PSD template

Business Card PSD Templates (front & back)

Industrial Business Card Vol 1

Corporate Business Card Vol 2

Corporate Business Card Vol 1

Personal Business Card Design

Two-Sided Medical Business Card

Women Business Card

Business Card PSD Template

VECTOR FLORAL B-CARD

Grunge business card Photoshop template

Free Avista Business Card

Free Business Card PSD v3

Free Business Card PSD v6

PSD Business Card Template

Hot vintage business card

Black Designer Business Card

Grungy Business Card

FREE Corporate Business Card

Graphic Agency Business Card

Free Business Card PSD Template

Technix Business Card

原文：http://www.jackchen.cn/blog/?p=6557

拒绝平庸——浅谈WEB登录页面设计

simondai — Mon, 16 Jan 2012 05:51:43 +0000

用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方 　　如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验，安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现 　　iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图 　　在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达 　　设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框 　　越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单 　　WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受，好了，今天就先侃到这，作为用户使用的入口，希望这篇小文可以让大家对登录页面重视起来，设计出更多精彩的登录页面。

原文：http://cdc.tencent.com/?p=5037

14款非常有用的 CSS 网格系统生成工具

simondai — Sat, 14 Jan 2012 09:24:51 +0000

今天这篇文章向大家推荐14款非常有用的 CSS 网格系统生成工具，它们能够帮助你构建适合你网站项目的 CSS 网格系统。一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法，帮助设计师们节省了大量的时间和精力。

1. Tiny Fluid Grid

2. ZURB CSS Grid Builder

3. Grid System Generator

4. Variable Grid System

5. inuit Grid Builder

6. 1200px Grid System

7. Negative Grid 1kb Fluid CSS Grid

8. YAML

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

9. Construct Your CSS

10. gridr buildrrr

11. Gridinator

12. Grid Calculator

13. Grid Generator

14. YUI CSS Builder

本文链接：推荐14个非常有用的 CSS 网格系统生成工具

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

25个优秀的国外单页网站设计作品欣赏

simondai — Sat, 14 Jan 2012 09:23:06 +0000

单页网站是指只有一个页面的网站形式，曾经非常流行，现在依然有很多人喜欢。不过，并不是每个网站都适合做成单页，一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做。如果你也想做一个这样的网站，那么本文收集的25个漂亮的单页网站设计作品相信能够帮助你寻找灵感。

1. Incub

2. Intelligent Dimension

3. IDesign

4. Salonpatadecabra

5. Maxlabs

6. Jomurgel

7. Just dot

8. Wing Cheng

9. Eshbeata

10. Arbel Designs

11. Helen & Josh Sitting in Tree

12. Phase 2 Technology

13. Yugendran

14. Found Colour

15. Quality Laundry

16. Mariuszm Michalski

17. Head 2 Heart

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

18. Coucou Shop

19. Academy For Global Citizenship

20. Zap

21. Petejcain

22. Docteurbourdon

23. Tompain

24. Wisk Design

25. Sophie Hardach

英文来源：25 Best Outstanding Single Page Website Designs

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

时尚的CSS3进度条

simondai — Thu, 12 Jan 2012 01:21:07 +0000

时尚的CSS3进度条先看效果图，非常漂亮吧：

demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码： HTML代码比较简单

1 2 3

.progress-bar – 定义进度栏的常规样式。
.blue – 定义进度条的风格，这里是蓝色的
.stripes – 当前进度的动画类型。
span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; }
.progress-bar span { display: inline-block; height: 25px; width: 200px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; -o-transition: width .4s ease-in-out; transition: width .4s ease-in-out; }

添加颜色，进度条风格：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.blue span { background-color: #34c2e3; }
.orange span { background-color: #fecf23; background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215)); background-image: -webkit-linear-gradient(top, #fecf23, #fd9215); background-image: -moz-linear-gradient(top, #fecf23, #fd9215); background-image: -ms-linear-gradient(top, #fecf23, #fd9215); background-image: -o-linear-gradient(top, #fecf23, #fd9215); background-image: linear-gradient(top, #fecf23, #fd9215); }
.green span { background-color: #a5df41; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916)); background-image: -webkit-linear-gradient(top, #a5df41, #4ca916); background-image: -moz-linear-gradient(top, #a5df41, #4ca916); background-image: -ms-linear-gradient(top, #a5df41, #4ca916); background-image: -o-linear-gradient(top, #a5df41, #4ca916); background-image: linear-gradient(top, #a5df41, #4ca916); }

条纹样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; }
@-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} }
@-moz-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} }

闪烁样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

.shine span { position: relative; }
.shine span::after { content: ”; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
-webkit-animation: animate-shine 2s ease-out infinite; -moz-animation: animate-shine 2s ease-out infinite; }
@-webkit-keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;} }
@-moz-keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;} }

发光样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.glow span { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-animation: animate-glow 1s ease-out infinite; -moz-animation: animate-glow 1s ease-out infinite; }
@-webkit-keyframes animate-glow { 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }
@-moz-keyframes animate-glow { 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《时尚的CSS3进度条》

85个国外优秀的响应式网站设计作品范例【系列二】

simondai — Tue, 10 Jan 2012 03:58:28 +0000

响应式网页设计是时下网页设计领域最热门的话题之一，该概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出（详见：Responsive Web Design），其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。这篇文章继续向大家分享收集的优秀的响应式网页设计作品范例。

Glitch

Get Skeleton

Illyissimo

More Hazards

Food Sense

Naomi Atkinson Design

Diablo Media

Touch Tech

Greg Mcausland

Visua Design

Glue Isobar

Henry Brown

Boston Globe

ASU Online

10K An Event Apart

Helloxie

Melt Media

Space150

Colly

do Lectures

Less Framework

Hicks Design

Five Details

Think Vitamin

Naomi Atkinson

8Faces

Clearleft

Lanyrd

英文来源：Amazing Showcase of Responsive Web Design

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

85个国外优秀的响应式网页设计作品范例（上篇）

simondai — Mon, 09 Jan 2012 01:56:23 +0000

响应式网页设计是时下网页设计领域最热门的话题之一，该概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出（详见：Responsive Web Design），其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。今天开始推出系列文章向大家分享国外优秀的响应式网页设计作品范例，希望这些精美的网站能够帮助大家了解响应式网页设计。

Forefathers

Form CMS

Havoc Inspired

Jet Cooper

Filidor Wiese

Conferencia Rails

Designing With Data

The Happy Bit

Webdesign Yorkshire

Highway Hurricanes

Simple Bits

2011 dConstruct

Hardboiled Webdesign

Stephen Caver

Nicely Replayed

Electric Pulp

Teixido

Edge of My Seat

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例

Robot or Not

Tee Gallery

Camendesign Forum

Authentic Jobs

Lynn and Tonic

CalebAcuity

3200 Tigres

Upper Dog

Five Simple Steps

Urban Svensson

英文来源：Amazing Showcase of Responsive Web Design

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

Loading，让烦躁少一些

simondai — Thu, 05 Jan 2012 11:53:20 +0000

这是一个浮躁的年代，长听到这样的抱怨“好慢！”“等到死！”，每次看到那个转啊转的圈圈，或者是那个“loading…”后面那三个点不停滴闪动，心里总是有莫名的焦躁，彼时的心情就好像下面这张图片一样，不知您是否有同感…

有人统计，用户能够忍受的最长等待时间大约在 6～8秒之间。8秒是一个临界值，如果网页加载时间在8秒以上，很有可能大部分访问者最终都会离开该页面。除非他一定要打开那个页面。

以上三种是常见的loading方式，如果是我，我更希望看到第三种的进度条，因为我实在不知道第一个圈圈要转多久才能算加载成功，也不知道第二个点点点要点到猴年马月。

但是如果这个时候，界面除了看到“加载”以外的东西，是否就能转移用户的注意力呢？比如我们在银行排队的时候，如果我们无时不刻看着自己手中的号码牌和叫号板，虽然知道自己大概什么时候会轮到，但是依旧会无聊和烦躁。这时候银行里的一些宣传单起到了很好的作用：比如各种银行的理财产品，如果你不小心还看到了适合自己投资的，肯定会激动不已，觉得这个等待时间给自己带来的意外的收获，即使没有得到自己想要的信息，也不会觉得那么无聊了。又比如视频在缓冲的过程中，总是会放一段广告，我一直弱弱滴认为这个好鸡肋，舍不得放弃看那个视频，但又要忍耐这个加载时候的广告。但是如果广告做得很棒，就一点都不烦躁了，甚至还在评论里看到求加载广告的地址。网页的loading就承担了宣传单跟加载广告的作用。

在页面局部加载时常能看到第一个圈圈的身影，不过每次看到这个圈圈都差不多，如果换一种转圈的形式，也许会觉得“这个圈圈跟别的好像不太一样”，通过好奇减少等待的焦躁。

下面我找了一些变过形的圈圈，是不是多了一些新意呢？

减少用户的焦虑，可以给个允诺，示意他们还要加载多久，告诉现在的进度（有个进程百分比），算给一个定心丸。例如以下的方式：

其中上图最下面一种进度条又有不同的设计：

上面两种确定性进度条虽然都提示了现在的进程，但它们的差别是，第一种的进度条内容是纯色，第二种进度条内容有动画效果，如果这个进度条再某点上突然停住了，这时候会给用户造成困扰，到底是卡死了还是这段的加载比较慢呢？如果是下一种进度条就一目了然，如果卡死，那动画效果就没了，如果依然有动画效果，那就说明只是这一段加载比较缓慢。

如果进度条再进行一些变形，不仅告诉了用户现在的加载进程，还别有一种欣赏的意味：

PS：上右是搜狗实验室的logo，但是这个创意做成loading也很棒啊，还加强了品牌印象。

除了进度条变形外，还可以从文案下手，例如，下面的是“下厨房”的APP的加载页，虽然只有短短的一句话“是谁来自山川湖海却囿于昼夜厨房与爱”虽然只闪过短短一秒钟，这非但没给用户带来烦躁的感觉，反而觉得这个应用有一种特别的气质，不仅加深了印象，更带来了好感。

一般电影上映前都有一段预告片来吸引观众去观影。显露冰山一角，以此激起用户的好奇心，也告诉了用户大概情况。

上图是QZONE的热门应用游戏——捕鱼大亨的登陆页，这个loading的进度设计就像一个鱼雷的行程，不仅告诉玩家现在加载到哪个进度，尾部的小水花也似乎在说我一直在努力加载。另外，这个加载速度有点慢，上方还有场景图介绍，以此让玩家有更多的了解。这种弹出窗口展示放大图片和多个视图也是许多顶级在线零售商所采用的方法。虽然加载有点慢，但是给玩家这样一个暗示：这是非常值得的等待。

此外，如果要加载的东西比较多，那么加载进度肯定会比较慢，呈现一种加载条一直滞留不动的情况，在这种情况下，我们可以把进度条分成多个进度条多次加载以安抚用户焦躁的心。但是每次加载最好都配有文字显示现在在加载的内容，不然一次又一次的进度条会让用户恐慌“这到底要加载多少次才是个头！”但是如果像下面一样，明确告诉用户在加载的内容，就算用户是有些烦躁“怎么有这么多要加载”但是每次都相对加载得比较快，而且每次加载都有理有据，让用户觉得这个加载还是有必要的。

要减弱用户的焦躁，“增强用户的期待值”也不失为一种好方法，除了对本身网站的期待，还有对“进度条本身”的期待。

如果在不同的百分点上都会有不一样的颜色，那么用户也许在等待的时候会想：下一秒会是什么颜色呢，从而，好像也不是那么急了。

这个小人的表情好丰富，但是似乎又代表了用户的心情，看着他挪动并有不同的心理，就像在看一个好玩的gif。

这是印像派的新版制作间登陆，在等待的同时还告诉客户有哪些产品可以使用到制作间，既传达了品牌的信息，也让用户在等待时不那么枯燥。

此外，如果这个是多次登陆的网站，那么不管捕鱼大亨的场景展示，还是yxp的步骤流程展示，似乎这些展示只在第一次会起到比较特别的作用，但是如果每次都附带给登陆者不同的信息，那么，用户每次都有小惊喜，比如每次都随机出现一些小提示（以下分别是四次loading）：

虽然加载是个小细节，但是也很有可能不经意间让用户流失。以上是我的一些小心得，虽然搜集的这些设计方式可以减缓一些用户烦躁的等待情绪，但是真正可以减缓的办法还是加载的速度增快；别致的设计可以治标，加载速度提高是治本。在加载页中显示进度，给出承诺，增加信息量或者幽默内容都能使用户潜移默化减少“觉察”正在加载的时间。当然，烦躁是一种心情，加载是烦躁的导火索，但是如果每天保持好心情，那对待等待的耐心也会大大增加哦^.^

最后，送上一个可以生成加载圈圈的小工具，希望可以对您有帮助：

http://preloaders.net/en/circular

原文：http://uedc.163.com/8809.html

2011年高品质免费PSD文件华丽收集

simondai — Thu, 05 Jan 2012 11:49:05 +0000

PSD素材对于很多设计师来说都是宝贵的资源。在日复一日的设计周期里设计师要不停的和时间赛跑，要不停的翻新创意方式，不断的颠覆自己颠覆别人的大脑。这样的超负荷需要你有一个完美的后备资源来支撑。对于热爱收集素材的设计师来说这些都是最好的宝藏。今天我们分享出一些2011年收集到的高品质的PSD文件，你可以下载收藏用作下一次的设计创作中。这个素材集里包括了网页元素，图形元素，标识，按钮，图标等等。一定有你中意的素材！

黑暗狮子UI

一个免费的小型音乐播放器设计（PSD）