現(xiàn)在響應式的網(wǎng)站比較受歡迎，畢竟是一套代碼多個終端適用，這種成本又低，又能保證各個終端風格和體驗一致性。雖然響應式的網(wǎng)站有很多好處，但是設計響應式網(wǎng)頁的設計的確會有一些條條框框的限制。那么，響應式的網(wǎng)站設計讓網(wǎng)頁設計師限制了發(fā)揮了嗎？我們能否既讓網(wǎng)頁是響應式的，同時又讓設計師能設計出擁有靈魂的網(wǎng)頁？

 

 

在響應試網(wǎng)站中我們得到的：柵格系統(tǒng)、流動布局成為標配給我們帶來了很多好處：

1、用戶在使用網(wǎng)頁時感到熟悉、輕松；

2、制作原型（相對）快速、簡便；

3、建站技術(shù)的高度標準化；

4、快速的布局可以節(jié)約成本；

5、嚴格的網(wǎng)格布局促成了響應式設計；

這些標準化和組合技術(shù)帶來了巨大的價值，無數(shù)的個人和小企業(yè)使用這樣簡單、吸引人（但不獨特）的網(wǎng)頁設計與世界分享他們的品牌并從中獲益，然而這只是故事的一個方面。

 

我們失去的：所有的網(wǎng)頁設計都開始變得如此相似。

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

1. 版式布局（LAYOUT）

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

2. 響應式設計（RESPONSIVE WEB DESIGN）

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

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

3. 框架( FRAMEWORKS )

Bootstrap與Foundation的流行導致許多設計師直接套用一模一樣的代碼庫、布局、甚至風格。

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

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

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

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

6. 設計趨勢(DESIGN TRENDS)

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

 

如何挑戰(zhàn)現(xiàn)狀呢，下面舉一些例子：

1. 讓布局變得奇怪，版式設計不同尋常，如果你覺得這樣的設計很奇怪，那正是這個網(wǎng)站設計者想要達到的效果，與眾不同。網(wǎng)站的滾動和斷點設置合理，體驗良好，同時在交互的過程中有一些小驚喜，比如鼠標hover住的圖片會被置于頂層，logo的字母部分會隨著滾動改變位置，最終變?yōu)檎R的兩行文字，自然地變成導航欄的logo。沒有采用標準網(wǎng)格，但是排布沒有讓人感覺到分散，而有一種有意識的安排。

 

2. 不使用方塊元素。在寬屏下設計師使用六邊形代替了方塊元素，而在窄屏下才使用方塊元素。巨大的蒙版字設計大膽, 令人印象深刻，在對作品的展示部分也沒有選擇簡單的方塊縮略圖，而是在縮略圖中使用留白造成形狀的變化。

 

3. 不同的體驗

讓每個菜單相互看上去重疊，并且每次進入網(wǎng)頁時色彩主題都會不同，主要二級頁面也是一樣。

 

4. 創(chuàng)建一個獨特的視覺主題

另一個讓網(wǎng)頁看上去獨特的方法就是為整個頁面設定一個有趣的主題，制定了這個框架就可以跳出傳統(tǒng)的UI樣式。當然，這類設計并不適合所有類型的網(wǎng)頁；但是，對于活動宣傳與小公司的網(wǎng)頁是行之有效的。

 

標準化的和可預見的設計總有其一席之地。事實上，這類網(wǎng)頁是大部分內(nèi)容類網(wǎng)頁在各類終端屏幕上展現(xiàn)的最可能的解決方案。