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

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 

导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需，因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游，告诉用户网站是干什么的，内容分类有哪些，在哪里可以找到什么信息。

而且导航栏也是整体布局的重要组成。

总结一下，导航栏的重要性。

1. 浏览完Logo后，导航栏是用户第一个看到的组件。
2. 导航栏的作用是引导用户。
3. 导航栏的作用也类似于索引，快速帮助用户找到所需信息。

想让导航栏更加优雅、美丽、响应式么？看看导航栏设计的三大要点吧！

1) 别再让导航胖下去了，给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必，通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏，看看下面的案例。

Design Instruct

Sugar Rush

评论(0) 浏览(4119)

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场，走过两旁堆满商品的走道之后，左转右转，看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台，一个笑容甜美的收银人员对你温柔的问好，并接过你手中的果酱，告诉你价钱，帮你包装，然后找给你零钱和发票并且愉快的说再见。

现在你来到一个购物网站，在首页看到许多特价商品，你点选了食品的分类选项，来到果酱的分类。稍微看了一下果酱的介绍文章，然后点击鼠标把果酱放到购物车中，并点选结账：结果出现的是一个冷淡又死气沉沉的表单（Form）。

表单绝对是网站中用户和系统互动的最主要的元素，网站透过表单向用户提出问题，用户则透过表单向网站表达他的想法。标单又可以细分成三种元素：1、说明目的的标签；2、提供响应的输入方块或选单；3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生，他的服务应该要符合下面几个项目：

在网页设计中，横向和竖向的直线非常常见，利用整齐的线条可以打造出有序的视觉路径以及信息层级。
当然，有些时候，可以不按理出牌，设计一些倾斜的线条，让你的网站不拘一格，更加与众不同。

打破传统布局，创造动态的自由视感，让构成更加复杂——无论是利用简约的几何图形，或是精致的倾斜图像。
让你的设计更具吸引力，不妨试试斜线。

Paseo Itaigara

形状感很强，整体设计的很成功，显得并不杂乱。菱形无处不在，拼嵌式的菱形，装饰性的菱形，按钮的菱形，很好的主题一致性。

Impero

交互式网站，积极的氛围、极简的色彩。设计师利用两组对角线（粗细交织）打造了视觉路径。

Alpina

强烈推荐！利用视觉滚错，加上美轮美奂的照片。来感受这趟视觉盛典吧。流畅优美的照片美景。斜线分割的很巧妙（试想用直线风格，效果不会这么到位）

一般来说，网页设计师都极少关注表单设计，这使得大多数表单看起来都差不多，普通至极，毫无特色。本文中的这些案例化腐朽为神奇，将枯燥的表单页面设计的多姿多彩。一起来看一下吧。

还记得那篇备受好评的《向左走、向右走？表单元素设计大揭密》吗？让很多网页设计师第一次认识到表单设计的一些魔鬼细节。那么今天再来看看实际中的一些新颖案例吧。本文收集了一大批优秀的联系表单设计，希望对你有所启发。

Contact Page from Café Evoke

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

移动至上是当今的大背景。交互设计、网页设计都不得不顾虑手机的”感受”，移动互联网方向的创业如同雨后春笋般出现，而有关移动端的Logo怎么设计？看看这里吧。

网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。

以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：

相信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG （24）似乎突然间风行了起来，不论图档尺寸是不是因此多了好几倍。

JPEG

由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为 8.3 的格式，因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩（lossy compression）的图档格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图档的档案大小。

我们总是会听到 “少即是多”。
有时，剥离了所有的噱头和幻想的元素从布局和专注于核心设计的原则出发，就会得到一个更美观的网页设计。
这篇文章向我们展示了一些极简主义的网站示例。

Yaron Schoen

Dan Cassaro

Dodge & Burn

Friends of The Web

Color Grade It

Simon Foster

Nudge

Johann Lucchini

Paravel

（接上篇）

7. 图片使用

增加图片可能会降低转化率。我做过几次A/B测试，发现主页的可点击图片会降低总注册量（甚至计算30天内回访也是如此，已排除先前访问数据）。我觉得Pinterest知道这个道理，所以不会让用户在诸如“申请邀请码”页面（http://pinterest.com/landing/）跳过关键动作。

注意页面底部的轮播图插件。它们是不可点击的，所以用户不会从注册启动页跳转走。从我的经验来看，如果这些图片可点击，该页面的邮件地址提交率估计会下跌5%。我过去测试过登出页面的可点击图片与不可点击图片，在每种情况下，不可点击图片的转化率都要高5%-7%，而且测试组用户与控制组用户的质量是保持一致的。

图片同样可以用来提高转化率。网络营销的其中一个说法是“有鸡就有点击”(Chicks get clicks)（“色情有市场”的粗俗说法）。咨询公司ion interactive为一家游戏公司做了一次测试，发现下面的设计的转化率比没有强调巨乳的同款设计竟然高出了35%。