隨著便攜設(shè)備用戶的指數(shù)級(jí)增長(zhǎng)，網(wǎng)頁設(shè)計(jì)師采用響應(yīng)式設(shè)計(jì)作為多平臺(tái)布局解決方案，不但節(jié)省了設(shè)計(jì)師的時(shí)間，而且從長(zhǎng)遠(yuǎn)角度來講，響應(yīng)式設(shè)計(jì)能夠?yàn)橛脩籼峁└孢m的操作環(huán)境。
如果你毫無經(jīng)驗(yàn)，不知從何開始，那么這份工具列表將大大的幫助你，能夠讓你的布局更有“彈性”。

Simple Grid

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

Susy

Susy “語義變焦”的柵格系統(tǒng)，無需額外標(biāo)記和特殊的類，很方便使用Sass的人。

Tiny Fluid Grid

Tiny Fluid Grid 很棒的網(wǎng)頁應(yīng)用，能幫你選擇柵格系統(tǒng)。一旦完成后，提供CSS文件下載。

Variable Grid System

Variable Grid System依據(jù)960柵格系統(tǒng)，能夠自動(dòng)產(chǎn)生布局，在調(diào)整后，提供CSS文件下載。

Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 標(biāo)記很方便，可以方便的選擇不同方案中元素的放置位置。

Style Tiles

可以通過該網(wǎng)站制定完美的響應(yīng)式設(shè)計(jì)流程。

響應(yīng)式設(shè)計(jì)是當(dāng)前網(wǎng)頁設(shè)計(jì)的趨勢(shì)，針對(duì)不同的設(shè)備，提供布局解決方案。
而且很多技術(shù)狂人正在不斷的進(jìn)行各種實(shí)驗(yàn)，爭(zhēng)取讓響應(yīng)式設(shè)計(jì)越來越好。

響應(yīng)式設(shè)計(jì)的難點(diǎn)是導(dǎo)航菜單?？刹荒芟窨s放頁面那樣縮放導(dǎo)航菜單。在設(shè)計(jì)之前，要謀劃好導(dǎo)航菜單在手機(jī)、平板、桌面上的布局。

更多超炫的網(wǎng)站：
《想讓網(wǎng)站動(dòng)感十足？試試網(wǎng)頁設(shè)計(jì)中的韻律線條》
《想設(shè)計(jì)自己的網(wǎng)站？先來看這15個(gè)優(yōu)秀設(shè)計(jì)師的酷站》

本文收集了25例出眾的響應(yīng)式設(shè)計(jì)，大家可以使用響應(yīng)式在線測(cè)試工具Responsinator來看看，他們的導(dǎo)航菜單，是怎樣設(shè)計(jì)的。

Ableton 

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

而且導(dǎo)航欄也是整體布局的重要組成。

總結(jié)一下，導(dǎo)航欄的重要性。

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

想讓導(dǎo)航欄更加優(yōu)雅、美麗、響應(yīng)式么？看看導(dǎo)航欄設(shè)計(jì)的三大要點(diǎn)吧！

1) 別再讓導(dǎo)航胖下去了，給導(dǎo)航減個(gè)肥

導(dǎo)航菜單重要性不言而喻。一些設(shè)計(jì)師往往使用一些繁雜的裝飾來做突出。其實(shí)大可不必，通過字體、懸停效果、留白可以設(shè)計(jì)出簡(jiǎn)約、優(yōu)雅的極簡(jiǎn)主義風(fēng)格導(dǎo)航欄，看看下面的案例。

Design Instruct

Sugar Rush

評(píng)論(0) 瀏覽(3976)

表單應(yīng)該就像個(gè)溫柔又有禮貌的服務(wù)生。想象你走進(jìn)一間超級(jí)市場(chǎng)，走過兩旁堆滿商品的走道之后，左轉(zhuǎn)右轉(zhuǎn)，看到你想買的果醬并且挑選了兩罐放在購(gòu)物袋中。

終于你走向結(jié)賬柜臺(tái)，一個(gè)笑容甜美的收銀人員對(duì)你溫柔的問好，并接過你手中的果醬，告訴你價(jià)錢，幫你包裝，然后找給你零錢和發(fā)票并且愉快的說再見。

現(xiàn)在你來到一個(gè)購(gòu)物網(wǎng)站，在首頁看到許多特價(jià)商品，你點(diǎn)選了食品的分類選項(xiàng)，來到果醬的分類。稍微看了一下果醬的介紹文章，然后點(diǎn)擊鼠標(biāo)把果醬放到購(gòu)物車中，并點(diǎn)選結(jié)賬：結(jié)果出現(xiàn)的是一個(gè)冷淡又死氣沉沉的表單（Form）。

表單絕對(duì)是網(wǎng)站中用戶和系統(tǒng)互動(dòng)的最主要的元素，網(wǎng)站透過表單向用戶提出問題，用戶則透過表單向網(wǎng)站表達(dá)他的想法。標(biāo)單又可以細(xì)分成三種元素：1、說明目的的標(biāo)簽；2、提供響應(yīng)的輸入方塊或選單；3、以及提交表單的按鈕。表單的設(shè)計(jì)就可以想象成一個(gè)稱職的服務(wù)生，他的服務(wù)應(yīng)該要符合下面幾個(gè)項(xiàng)目：

在網(wǎng)頁設(shè)計(jì)中，橫向和豎向的直線非常常見，利用整齊的線條可以打造出有序的視覺路徑以及信息層級(jí)。
當(dāng)然，有些時(shí)候，可以不按理出牌，設(shè)計(jì)一些傾斜的線條，讓你的網(wǎng)站不拘一格，更加與眾不同。

打破傳統(tǒng)布局，創(chuàng)造動(dòng)態(tài)的自由視感，讓構(gòu)成更加復(fù)雜——無論是利用簡(jiǎn)約的幾何圖形，或是精致的傾斜圖像。
讓你的設(shè)計(jì)更具吸引力，不妨試試斜線。

Paseo Itaigara

形狀感很強(qiáng)，整體設(shè)計(jì)的很成功，顯得并不雜亂。菱形無處不在，拼嵌式的菱形，裝飾性的菱形，按鈕的菱形，很好的主題一致性。

Impero

交互式網(wǎng)站，積極的氛圍、極簡(jiǎn)的色彩。設(shè)計(jì)師利用兩組對(duì)角線（粗細(xì)交織）打造了視覺路徑。

Alpina

強(qiáng)烈推薦！利用視覺滾錯(cuò)，加上美輪美奐的照片。來感受這趟視覺盛典吧。流暢優(yōu)美的照片美景。斜線分割的很巧妙（試想用直線風(fēng)格，效果不會(huì)這么到位）

一般來說，網(wǎng)頁設(shè)計(jì)師都極少關(guān)注表單設(shè)計(jì)，這使得大多數(shù)表單看起來都差不多，普通至極，毫無特色。本文中的這些案例化腐朽為神奇，將枯燥的表單頁面設(shè)計(jì)的多姿多彩。一起來看一下吧。

還記得那篇備受好評(píng)的《向左走、向右走？表單元素設(shè)計(jì)大揭密》嗎？讓很多網(wǎng)頁設(shè)計(jì)師第一次認(rèn)識(shí)到表單設(shè)計(jì)的一些魔鬼細(xì)節(jié)。那么今天再來看看實(shí)際中的一些新穎案例吧。本文收集了一大批優(yōu)秀的聯(lián)系表單設(shè)計(jì)，希望對(duì)你有所啟發(fā)。

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

移動(dòng)至上是當(dāng)今的大背景。交互設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)都不得不顧慮手機(jī)的”感受”，移動(dòng)互聯(lián)網(wǎng)方向的創(chuàng)業(yè)如同雨后春筍般出現(xiàn)，而有關(guān)移動(dòng)端的Logo怎么設(shè)計(jì)？看看這里吧。

網(wǎng)頁設(shè)計(jì)中，切圖輸出是指設(shè)計(jì)師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁用的圖片格式、并交由下一位人員網(wǎng)頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計(jì)得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時(shí)間、有效的減少服務(wù)器的負(fù)擔(dān)。

以設(shè)計(jì)師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲(chǔ)存為網(wǎng)頁用…」的功能。與默認(rèn)的存盤模式不同，在這個(gè)模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對(duì)網(wǎng)頁圖文件需求的選項(xiàng)：

相信許多人都知道網(wǎng)頁設(shè)計(jì)中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇 GIF 后的輸出結(jié)果看起來變得很糟，于是 PNG （24）似乎突然間風(fēng)行了起來，不論圖檔尺寸是不是因此多了好幾倍。

JPEG

由于舊型計(jì)算機(jī)系統(tǒng)以及文件系統(tǒng)的限制，計(jì)算機(jī)檔案文件名與擴(kuò)展名被規(guī)定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺(tái)數(shù)字相機(jī)、照相手機(jī)都可以（甚至只能）輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossy compression）的圖檔格式，也就是說使用者每次進(jìn)行 JPEG 的存檔動(dòng)作后，圖檔的內(nèi)容都會(huì)遭到破壞，這個(gè)特性在肉眼辨識(shí)下并不明顯，但卻可以有效的降低圖檔的檔案大小。

我們總是會(huì)聽到 “少即是多”。
有時(shí)，剝離了所有的噱頭和幻想的元素從布局和專注于核心設(shè)計(jì)的原則出發(fā)，就會(huì)得到一個(gè)更美觀的網(wǎng)頁設(shè)計(jì)。
這篇文章向我們展示了一些極簡(jiǎn)主義的網(wǎng)站示例。

Yaron Schoen

Dan Cassaro

Dodge & Burn

Friends of The Web

Color Grade It

Simon Foster

Nudge

Johann Lucchini

Paravel

（接上篇）

7. 圖片使用

增加圖片可能會(huì)降低轉(zhuǎn)化率。我做過幾次A/B測(cè)試，發(fā)現(xiàn)主頁的可點(diǎn)擊圖片會(huì)降低總注冊(cè)量（甚至計(jì)算30天內(nèi)回訪也是如此，已排除先前訪問數(shù)據(jù)）。我覺得Pinterest知道這個(gè)道理，所以不會(huì)讓用戶在諸如“申請(qǐng)邀請(qǐng)碼”頁面（http://pinterest.com/landing/）跳過關(guān)鍵動(dòng)作。

注意頁面底部的輪播圖插件。它們是不可點(diǎn)擊的，所以用戶不會(huì)從注冊(cè)啟動(dòng)頁跳轉(zhuǎn)走。從我的經(jīng)驗(yàn)來看，如果這些圖片可點(diǎn)擊，該頁面的郵件地址提交率估計(jì)會(huì)下跌5%。我過去測(cè)試過登出頁面的可點(diǎn)擊圖片與不可點(diǎn)擊圖片，在每種情況下，不可點(diǎn)擊圖片的轉(zhuǎn)化率都要高5%-7%，而且測(cè)試組用戶與控制組用戶的質(zhì)量是保持一致的。

圖片同樣可以用來提高轉(zhuǎn)化率。網(wǎng)絡(luò)營(yíng)銷的其中一個(gè)說法是“有雞就有點(diǎn)擊”(Chicks get clicks)（“色情有市場(chǎng)”的粗俗說法）。咨詢公司ion interactive為一家游戲公司做了一次測(cè)試，發(fā)現(xiàn)下面的設(shè)計(jì)的轉(zhuǎn)化率比沒有強(qiáng)調(diào)巨乳的同款設(shè)計(jì)竟然高出了35%。