通过我们长期对设计类网站的发掘，总结出了一个现象，那就是很多关于响应式设计的文章只给出了桌面版的网页设计，却没有提供移动版网页设计的对比，这在我们看来，多少显得有点不够专业。

于是，我们在这里收集整理了25例优秀的响应式网页设计，均有桌面版和移动版的对比。在方便您阅读这篇文章的同时，您不妨也思考一下灵活性这个主题。
对了，如果您还不够了解响应式设计，请至我们这篇文章《经验分享：响应式排版中的基础知识》回顾学习。

Whisperism

World Wildlife

Naspa

有同学喜欢玩黑白配，但是却一直不得要领，总设计不出让人眼前一亮的佳作出来？今天就让我们来这些优秀案例里找原因。

深色的背景看起来具有神秘感，能提供前景元素、背景元素的高度对比。有了黑色的铺垫渲染，任何一个色彩都可以轻易在它之上焕发光彩。
那么怎么才能更好的在网页设计中运用深色背景呢？想要成为一名”高级黑”设计师吗？先来欣赏本文的绝赞范例吧。

The Blue Cube

外观整洁干练，对照鲜明。黑色背景凸显了白色文本。

当你浏览一款网站时，一般会迅速的对网站的外观和使用感受做个评判，整体的设计风格是第一印象，能否引导用户继续阅读取决于此。

金玉其外败絮其中必然无法长久，功能性也是重要考量。推荐您也好好学习《网站用户体验的76个要点》。
好的用户体验不仅仅关乎到功能性和设计美学，还需要考虑很多因素，我们一起来看一下吧。

一致性

最重要的交互元素一定要友好，并且风格一致。

尽管在设计一款网站时，我们可以融入很多创新点和美学风格，但是一些经常使用、且重要的元素，风格一定要一致，比如按钮、链接、导航栏、表单等等。我建议可以多浏览一些电商网站，他们在这一点上做的就很棒，他们通常有很多的茶品页面，但是整体体验却相差不大，我们可以看看优衣库的网站。

• 像产品类别、当前按钮和重要的文本信息都通过红色来高亮显示
• 页面不同，布局基本相同。

假如你正好想为自己创建一个网站，那WordPress肯定是你的不二之选。插件众多，安全性较高，主题模板丰富，便于维护跟管理都是它的优点，今天向你推荐30款新颖的WordPress主题模板，每一款都各有千秋，设计师们赶紧来瞧瞧，总能淘到最心仪的那个。

对了，如果您还不知道什么是wordpress，可以去wordpress的中文网查看。http://cn.wordpress.org/

提醒：这里的模版绝大多数都是要收费的，建议您预览查看，学习借鉴别人的优点就好。关于WP建站，这和免费的PSD不一样，大家不要总想着下载免费的，免费主题在功能上总会缺失一部分，而且极少有漂亮的主题，大部分都过时咯。

相关推荐：
《不用编码！全球10大高端建站神器推荐》
《干货！23套全新的免费HTML5网页模版》

Simplicity

<p style="white-space:normal;text-transform:none;word-spacing:0px;color:#525252;font:1.2em/1.8 Tahoma, Verdana, 宋体;margin:20px 0px;orphans:2;widows:2;letter-spacing:normal;background-color:#ffffff;text-indent:0px;-webkit-text-size-ad

作为一名设计师，每年都会沉浸在一些新的设计趋势中兴奋不已。接下来，我们将探寻2013年的设计趋势，这绝对是意义非凡的事情。Web设计师必须洞悉所有相关领域的新趋势，紧跟时尚潮流。

这些新趋势让设计变得妙趣横生。但是很多专家还会倡导那些并非最时髦、最震撼世界的设计。当然，响应式设计不仅去年是热点，今年依然还会被人们重视。同样，栅格化设计作为最基本的设计，也会被继续延续下去。

这次，我想探索一下那些逐渐发展起来的设计潮流。也许过去我们只是偶尔尝试一下这些设计风格，但是今年我们会真正关注它们。

优设哥很遗憾的告诉大家：“文章的这些优秀案例，大部分要翻墙。。。”

更多留白/负空间

手机已经成了我们生活中不可分割的一部分，手机应用也在扮演着越来越重要的角色。它们或者帮我们打发无聊时间，或者帮助我们紧密联系远方的朋友，抑或对学习知识、获取资讯有所裨益。

手机应用有不少有趣的交互方式值得深思和学习。让我们来看看它们中有哪些好玩的交互，我们又是如何通过它们来进行操作的。

摇一摇：摇摆的节奏

自从微信引入了摇一摇的交互方式后，立即四处风靡，各种应用纷纷推出各种基于摇一摇的功能：摇一摇更换皮肤、摇一摇推荐餐馆、摇一摇换歌等。有些应用结合的比较自然，还有一些则有些牵强附会。当然，在此之前 iPhone 就已经加入了打字时晃动撤销的交互，虽然很新潮，但隐藏较深，不少用户不了解也没有形成习惯。

吹一吹：吹出的精彩

iOS 上有一款仿陶笛的应用 Ocarina。只要对着界面上方正中央箭头（话筒）的位置吹，就可以看到往外围泛出声波的效果，界面中央四个蓝点分别代表笛孔，在吹的时候按住不同的笛孔会发出不同的音调，而且界面会提示每次按压住哪几个孔，这样即使像我这种完全没有音乐细胞的人也可以吹奏出美妙的音乐。最关键的是，你还能听到来自全世界其他地方分享的声音。

如果你要在网络上开展自己的事业，那么拥有优秀的网页是成功的关键因素。其优点在于，不仅能提高网络营销的可见度，也能维护起持续增长的客户群。但是呢，罗马非一天建成，在我们要创建一个优秀网站之前，前期的构思是必不可少的。

创建一个成功的网站究竟该做些什么

近年来，网站摇身一变成为了更好的交流场所和绝佳的信息来源地。Boss们不仅想让网站品牌化，同时也希望游客能在浏览时找到有价值的信息。SO，如果一个网站不能提供精准且广泛的信息给目标顾客，顾客们就会转而去其他的网站。
网站的另一个目的在于让生活更便利，让工作更快捷。它通过放大双向沟通的方式，让游客对此留下深刻印象，从而产生依赖心理，并愿意长久的通过网站的查询方式来联系业务和订票等。这样一来，方便顾客这一目标就达到了。除此之外，网站还可以有效的节省你的时间，帮助你迅速增加用户基础以及让一些进程自动化。
前面提到的网站优点都只是抱砖引玉，网站真正的目的在于——最终能给顾客带去价值。这些价值除了鼓励顾客通过网站相互交流，并参与到商务处理流程中，还应该提供更好评定信息、规避长久的等待阵列、授与顾客权利去挖掘更广泛的产品和服务信息等。
本文主要是向你阐述，创建一个成功的网站究竟该做些什么。

Step.1 写一份网站说明书

写一份切实可行的网站说明书是创建一个专业网站所不可缺少的，它是最关键的文件之一，能助企业挖掘出优先考虑事项、明晰企业责任和树立企业品牌形象。必要的计划和精准的信息对一份网站说明书来讲是最重要的。但是当下，成功的寻找到有力的营销方法和持久最佳努力的前提是 —— 你有策划一个缜密计划的能力吗？
一份优秀的网站说明书要涵盖： 企业的预算、因不能及时交付产品而延误的时间、可交付产品、知识产权、网站的目的、网站的体系结构、域名、网站使用的编程语言。除此之外，以下几点是绝对不可缺少的：

1.创建这份文件的意图
2.项目介绍

@米田的天空最近比较忙，整理作品的速度明显放缓了许多。今天总结些前段时间做的微信第三方网站。要清楚，它是网站不是单独的一个网页。需要考虑更多是整体性的问题。

在拿到项目时，首先需要冷静下来。而不是急着去动手，大部分同学肯定都理解了解其缘由。这边要说的更多是前期先看看相似对手的情况。因为视觉设计相对于产品功能，是最容易拉开差异感的部分。或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来。

大部分的普遍

大部分的微信第三方，和似乎都不太注重展示部分。即视觉部分，隐隐有些暴发户的感觉。而且现在做这块的公司似乎已经有当年做团购的景象。多，十分多，最后迷失在一片片营销的海洋里。

做为设计师，先跳出来观察下。其实我们会惊讶的发现，这些站的普遍性都是为你做个微信mini站，就是所谓的新时代营销。最核心的功能基本也是一致，如下：

• 智能导航（调用地理位置地图接口）
• 在线支付
• 全景看图（自由图片组合）
• 抽奖营销活动

随便打开搜索”微信 营销 专家”，一堆类似微信第三方网站。现在很多的创业者也在做类似的项目，总之，就是很多很多公司做着类似的尝试。当然，国内任何的领域基本都是同时存在上百个同类的项目，能真正运营下去到最后也只有3-4家而已。

自己随便打开其中一个站点，发现其推广的核心点，也是如上述说的一样，功能部分的几乎所有的微信第三方都做着差不多的事情。如果你随便打开这个网页，你觉得你会主动去联系他们么？在很多相似产品存在的情况下。

随着便携设备用户的指数级增长，网页设计师采用响应式设计作为多平台布局解决方案，不但节省了设计师的时间，而且从长远角度来讲，响应式设计能够为用户提供更舒适的操作环境。
如果你毫无经验，不知从何开始，那么这份工具列表将大大的帮助你，能够让你的布局更有“弹性”。

Simple Grid

Simple Grid是难以置信的CSS框架，无所限制的栅格布局，支持不同大小的屏幕。

Susy

Susy “语义变焦”的栅格系统，无需额外标记和特殊的类，很方便使用Sass的人。

Tiny Fluid Grid

Tiny Fluid Grid 很棒的网页应用，能帮你选择栅格系统。一旦完成后，提供CSS文件下载。

Variable Grid System

Variable Grid System依据960栅格系统，能够自动产生布局，在调整后，提供CSS文件下载。

Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 标记很方便，可以方便的选择不同方案中元素的放置位置。

Style Tiles

可以通过该网站制定完美的响应式设计流程。

响应式设计是当前网页设计的趋势，针对不同的设备，提供布局解决方案。
而且很多技术狂人正在不断的进行各种实验，争取让响应式设计越来越好。

响应式设计的难点是导航菜单。可不能像缩放页面那样缩放导航菜单。在设计之前，要谋划好导航菜单在手机、平板、桌面上的布局。

更多超炫的网站：
《想让网站动感十足？试试网页设计中的韵律线条》
《想设计自己的网站？先来看这15个优秀设计师的酷站》

本文收集了25例出众的响应式设计，大家可以使用响应式在线测试工具Responsinator来看看，他们的导航菜单，是怎样设计的。

Ableton