隨著便攜設備用戶的指數級增長，網頁設計師采用響應式設計作為多平臺布局解決方案，不但節省了設計師的時間，而且從長遠角度來講，響應式設計能夠為用戶提供更舒適的操作環境。
如果你毫無經驗，不知從何開始，那么這份工具列表將大大的幫助你，能夠讓你的布局更有“彈性”。

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

可以通過該網站制定完美的響應式設計流程。

響應式設計是當前網頁設計的趨勢，針對不同的設備，提供布局解決方案。
而且很多技術狂人正在不斷的進行各種實驗，爭取讓響應式設計越來越好。

響應式設計的難點是導航菜單?？刹荒芟窨s放頁面那樣縮放導航菜單。在設計之前，要謀劃好導航菜單在手機、平板、桌面上的布局。

更多超炫的網站：
《想讓網站動感十足？試試網頁設計中的韻律線條》
《想設計自己的網站？先來看這15個優秀設計師的酷站》

本文收集了25例出眾的響應式設計，大家可以使用響應式在線測試工具Responsinator來看看，他們的導航菜單，是怎樣設計的。

Ableton 

導航菜單可能是網頁設計中最重要的部分了。每個用戶瀏覽網站時一定有所需，因此導航菜單能夠幫助用戶尋找信息。好的導航菜單像是導游，告訴用戶網站是干什么的，內容分類有哪些，在哪里可以找到什么信息。

而且導航欄也是整體布局的重要組成。

總結一下，導航欄的重要性。

1. 瀏覽完Logo后，導航欄是用戶第一個看到的組件。
2. 導航欄的作用是引導用戶。
3. 導航欄的作用也類似于索引，快速幫助用戶找到所需信息。

想讓導航欄更加優雅、美麗、響應式么？看看導航欄設計的三大要點吧！

1) 別再讓導航胖下去了，給導航減個肥

導航菜單重要性不言而喻。一些設計師往往使用一些繁雜的裝飾來做突出。其實大可不必，通過字體、懸停效果、留白可以設計出簡約、優雅的極簡主義風格導航欄，看看下面的案例。

Design Instruct

Sugar Rush

評論(0) 瀏覽(4168)

表單應該就像個溫柔又有禮貌的服務生。想象你走進一間超級市場，走過兩旁堆滿商品的走道之后，左轉右轉，看到你想買的果醬并且挑選了兩罐放在購物袋中。

終于你走向結賬柜臺，一個笑容甜美的收銀人員對你溫柔的問好，并接過你手中的果醬，告訴你價錢，幫你包裝，然后找給你零錢和發票并且愉快的說再見。

現在你來到一個購物網站，在首頁看到許多特價商品，你點選了食品的分類選項，來到果醬的分類。稍微看了一下果醬的介紹文章，然后點擊鼠標把果醬放到購物車中，并點選結賬：結果出現的是一個冷淡又死氣沉沉的表單（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%。