我們得到的

柵格系統(tǒng)、流動布局成為標(biāo)配給我們帶來了很多好處：

用戶在使用網(wǎng)頁時感到熟悉、輕松；
制作原型（相對）快速、簡便；
建站技術(shù)的高度標(biāo)準(zhǔn)化；
快速的布局可以節(jié)約成本；
嚴(yán)格的網(wǎng)格布局促成了響應(yīng)式設(shè)計；

這些標(biāo)準(zhǔn)化和組合技術(shù)帶來了巨大的價值，無數(shù)的個人和小企業(yè)使用這樣簡單、吸引人（但不獨特）的網(wǎng)頁設(shè)計與世界分享他們的

品牌并從中獲益，然而這只是故事的一個方面。

我們失去的

這些設(shè)計都開始變得如此相似。

網(wǎng)頁設(shè)計雷同的原因

版式布局（LAYOUT）

版式布局的局限性是網(wǎng)頁設(shè)計缺乏變化最突出與明顯的的原因之一。去除顏色，動畫，視差滾動等等這類效果，你會看到一些基本布局統(tǒng)治了網(wǎng)頁設(shè)計。

響應(yīng)式設(shè)計（RESPONSIVE WEB DESIGN）

終端設(shè)備變多導(dǎo)致網(wǎng)頁設(shè)計必須保證跨設(shè)備的用戶體驗良好。

基礎(chǔ)的、可變寬、可折疊柵格系統(tǒng)使響應(yīng)式網(wǎng)頁的設(shè)計過程更簡單（相比版式設(shè)計更靈活的網(wǎng)頁）從而解決跨設(shè)備問題。

框架( FRAMEWORKS )

Bootstrap與Foundation的流行導(dǎo)致許多設(shè)計師直接套用一模一樣的代碼庫、布局、甚至風(fēng)格。

制作原型的工具與過程( PROTOTYPING TOOLS AND PROCESSES )

多數(shù)原型制作工具鼓勵甚至迫使你使用標(biāo)準(zhǔn)的符合網(wǎng)格布局的方方正正的元素。

高質(zhì)量的免費照片與圖像(HIGH-QUALITY FREE PHOTOS AND GRAPHICS)

免費好用的圖片庫成了設(shè)計師可以輕松獲得的資源，還有圖標(biāo)、字體、樣式等等。

設(shè)計趨勢(DESIGN TRENDS)

設(shè)計師的所見所聞影響了他們的設(shè)計，網(wǎng)頁設(shè)計將這一點充分放大了。結(jié)果就是許多設(shè)計師從同樣的網(wǎng)站獲得靈感，追趕同樣的潮流。

你和我

上面所列的工具和資源都是很有價值的，關(guān)鍵在于我們使用的方式。

如何挑戰(zhàn)現(xiàn)狀 - 一些例子

讓布局變得奇怪

Phases Magazine：http://www.phasesmag.com

Phases Magazine的版式設(shè)計不同尋常，如果你覺得這樣的設(shè)計很奇怪，那正是這個網(wǎng)站設(shè)計者想要達到的效果，與眾不同。

Curious Space：http://www.curiousspace.com

Curious Space的想法與Phases Magazine差不多，網(wǎng)站的滾動和斷點設(shè)置合理，體驗良好，同時在交互的過程中有一些小驚喜，比如鼠標(biāo)hover住的圖片會被置于頂層，logo的字母部分會隨著滾動改變位置，最終變?yōu)檎R的兩行文字，自然地變成導(dǎo)航欄的logo。

Le Temps Dun Trajet：http://letempsduntrajet.fr/

這個網(wǎng)站也是一個有趣的例子，它沒有采用標(biāo)準(zhǔn)網(wǎng)格，但是排布沒有讓人感覺到分散，而有一種有意識的安排。

當(dāng)鼠標(biāo)hover到一張靜態(tài)圖片時，圖片會變成一小段影片并放大，整個版式也會發(fā)生有趣的變化。(去網(wǎng)站實際體驗一下~)

不使用方塊元素

Built By Buffalo：http://builtbybuffalo.com

Built By Buffalo是一個個人作品集網(wǎng)頁，在寬屏下設(shè)計師使用六邊形代替了方塊元素，而在窄屏下才使用方塊元素。