· 我們得到的
柵格系統(tǒng)、流動(dòng)布局成為標(biāo)配給我們帶來了很多好處：
1、用戶在使用網(wǎng)頁時(shí)感到熟悉、輕松；
2、制作原型（相對）快速、簡便；
3、建站技術(shù)的高度標(biāo)準(zhǔn)化；
4、快速的布局可以節(jié)約成本；
5、嚴(yán)格的網(wǎng)格布局促成了響應(yīng)式設(shè)計(jì)；
這些標(biāo)準(zhǔn)化和組合技術(shù)帶來了巨大的價(jià)值，無數(shù)的個(gè)人和小企業(yè)使用這樣簡單、吸引人（但不獨(dú)特）的網(wǎng)頁設(shè)計(jì)與世界分享他們的
品牌并從中獲益，然而這只是故事的一個(gè)方面。
· 我們失去的
這些設(shè)計(jì)都開始變得如此相似。
· 網(wǎng)頁設(shè)計(jì)雷同的原因
1. 版式布局（LAYOUT）
版式布局的局限性是網(wǎng)頁設(shè)計(jì)缺乏變化最突出與明顯的的原因之一。去除顏色，動(dòng)畫，視差滾動(dòng)等等這類效果，你會看到一些基本布局統(tǒng)治了網(wǎng)頁設(shè)計(jì)。
2. 響應(yīng)式設(shè)計(jì)（RESPONSIVE WEB DESIGN）
終端設(shè)備變多導(dǎo)致網(wǎng)頁設(shè)計(jì)必須保證跨設(shè)備的用戶體驗(yàn)良好。
基礎(chǔ)的、可變寬、可折疊柵格系統(tǒng)使響應(yīng)式網(wǎng)頁的設(shè)計(jì)過程更簡單（相比版式設(shè)計(jì)更靈活的網(wǎng)頁）從而解決跨設(shè)備問題。
3. 框架( FRAMEWORKS )
Bootstrap與Foundation的流行導(dǎo)致許多設(shè)計(jì)師直接套用一模一樣的代碼庫、布局、甚至風(fēng)格。
4. 制作原型的工具與過程( PROTOTYPING TOOLS AND PROCESSES )
多數(shù)原型制作工具鼓勵(lì)甚至迫使你使用標(biāo)準(zhǔn)的符合網(wǎng)格布局的方方正正的元素。
5. 高質(zhì)量的免費(fèi)照片與圖像(HIGH-QUALITY FREE PHOTOS AND GRAPHICS)
免費(fèi)好用的圖片庫成了設(shè)計(jì)師可以輕松獲得的資源，還有圖標(biāo)、字體、樣式等等。
6. 設(shè)計(jì)趨勢(DESIGN TRENDS)
設(shè)計(jì)師的所見所聞?dòng)绊懥怂麄兊脑O(shè)計(jì)，網(wǎng)頁設(shè)計(jì)將這一點(diǎn)充分放大了。結(jié)果就是許多設(shè)計(jì)師從同樣的網(wǎng)站獲得靈感，追趕同樣的潮流。
7. 你和我
上面所列的工具和資源都是很有價(jià)值的，關(guān)鍵在于我們使用的方式。
· 如何挑戰(zhàn)現(xiàn)狀 – 一些例子
1. 讓布局變得奇怪
Phases Magazine：http://www.phasesmag.com
Phases Magazine的版式設(shè)計(jì)不同尋常，如果你覺得這樣的設(shè)計(jì)很奇怪，那正是這個(gè)網(wǎng)站設(shè)計(jì)者想要達(dá)到的效果，與眾不同。
Curious Space：http://www.curiousspace.com
Curious Space的想法與Phases Magazine差不多，網(wǎng)站的滾動(dòng)和斷點(diǎn)設(shè)置合理，體驗(yàn)良好，同時(shí)在交互的過程中有一些小驚喜，比如鼠標(biāo)hover住的圖片會被置于頂層，logo的字母部分會隨著滾動(dòng)改變位置，最終變?yōu)檎R的兩行文字，自然地變成導(dǎo)航欄的logo。
Le Temps Dun Trajet：http://letempsduntrajet.fr/
這個(gè)網(wǎng)站也是一個(gè)有趣的例子，它沒有采用標(biāo)準(zhǔn)網(wǎng)格，但是排布沒有讓人感覺到分散，而有一種有意識的安排。
當(dāng)鼠標(biāo)hover到一張靜態(tài)圖片時(shí)，圖片會變成一小段影片并放大，整個(gè)版式也會發(fā)生有趣的變化。(去網(wǎng)站實(shí)際體驗(yàn)一下~)
2. 不使用方塊元素
Built By Buffalo：http://builtbybuffalo.com
Built By Buffalo是一個(gè)個(gè)人作品集網(wǎng)頁，在寬屏下設(shè)計(jì)師使用六邊形代替了方塊元素，而在窄屏下才使用方塊元素。
Anakin Design Studio：http://www.anakin.co/en
巨大的蒙版字設(shè)計(jì)大膽, 令人印象深刻，在對作品的展示部分也沒有選擇簡單的方塊縮略圖，而是在縮略圖中使用留白造成形狀的變化。
Fixate：http://fixate.it
For Better Coffee : http://forbetter.coffee
這兩個(gè)網(wǎng)頁使用了看似復(fù)雜的插畫元素，這些插畫元素與極簡化的趨勢形成了鮮明的對比，給品牌帶來了獨(dú)特的個(gè)性。
For Better Coffee以一顆咖啡豆變成一杯咖啡的歷程將整個(gè)滾動(dòng)下拉貫穿起來。
Happy Fun Corp : http://happyfuncorp.com
HappyFunCorp網(wǎng)頁的導(dǎo)航是由一整個(gè)首頁插畫形成的，看上去有點(diǎn)古怪。用戶點(diǎn)擊游樂場的一個(gè)部分時(shí)，那部分場景就會放大。
3. 不同的體驗(yàn)
Vasilis Van Gemert : http://vasilis.nl
Vasilis Van Gemert的個(gè)人網(wǎng)頁讓每個(gè)菜單相互看上去重疊，并且每次進(jìn)入網(wǎng)頁時(shí)色彩主題都會不同，主要二級頁面也是一樣。
4. 創(chuàng)建一個(gè)獨(dú)特的視覺主題
另一個(gè)讓網(wǎng)頁看上去獨(dú)特的方法就是為整個(gè)頁面設(shè)定一個(gè)有趣的主題，制定了這個(gè)框架就可以跳出傳統(tǒng)的UI樣式。
當(dāng)然，這類設(shè)計(jì)并不適合所有類型的網(wǎng)頁；但是，對于活動(dòng)宣傳與小公司的網(wǎng)頁是行之有效的。
這個(gè)網(wǎng)頁采用了復(fù)古的未來主義風(fēng)格，它很好的證明了響應(yīng)式設(shè)計(jì)可以不那么平淡。
· 風(fēng)格獨(dú)特的網(wǎng)頁的問題
具有實(shí)驗(yàn)精神的設(shè)計(jì)師們遇到的一個(gè)問題是追求網(wǎng)頁的獨(dú)特與新奇時(shí)犧牲了用戶體驗(yàn)。我們可以努力的方向就是找到兩者之間的平衡點(diǎn)。
· 網(wǎng)頁設(shè)計(jì)不死
標(biāo)準(zhǔn)化的和可預(yù)見的設(shè)計(jì)總有其一席之地。事實(shí)上，這類網(wǎng)頁是大部分內(nèi)容類網(wǎng)頁在各類終端屏幕上展現(xiàn)的最可能的解決方案。
即便如此，我們?nèi)匀粦?yīng)該不時(shí)地發(fā)揮創(chuàng)意思維打破規(guī)則，因?yàn)榫W(wǎng)頁設(shè)計(jì)從來就是科技、藝術(shù)與設(shè)計(jì)交叉融合的領(lǐng)域。
原文鏈接：http://www.smashingmagazine.com/2015/07/06/hunt-for-the-webs-lost-soul/
]]>Web發(fā)展迅速，各種應(yīng)用和服務(wù)層出不窮，現(xiàn)在打開電腦，可能使用最多的程序應(yīng)該是瀏覽器了，訪問不同的網(wǎng)站，可以滿足人們購物，社交，獲取新聞資 訊，娛樂，等等需求。然而近幾年內(nèi)，移動(dòng)設(shè)備快速崛起，移動(dòng)互聯(lián)網(wǎng)慢慢進(jìn)入人們的生活，預(yù)計(jì)未來5年內(nèi)移動(dòng)設(shè)備的使用度會超過桌面計(jì)算機(jī)。所以需要您的網(wǎng) 站不僅要在桌面計(jì)算機(jī)大尺寸屏幕上可以為用戶提供友好的UI和用戶體驗(yàn)，同時(shí)在小尺寸屏幕上也應(yīng)該可以提供一致的用戶體驗(yàn)。使得用戶可以在桌面大屏幕上和 移動(dòng)小屏幕上平滑的切換使用，同時(shí)沒有任何的不適應(yīng)感覺。
(移動(dòng)設(shè)備趨勢：http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)
要網(wǎng)站在桌面大尺寸屏幕上和移動(dòng)小尺寸屏幕上提供一致的用戶體驗(yàn)，最直接的方法就是為每種設(shè)備及分辨率制作一個(gè)網(wǎng)站或者特定的頁面，使得移動(dòng)用戶在這些頁面里取得平滑友好的用戶體驗(yàn)。但是到底有多少不同的移動(dòng)設(shè)備和屏幕分辨率呢?這種方法需要投入多少成本能?
(早先的數(shù)據(jù)：2005至2008年市場中的400余種移動(dòng)設(shè)備的統(tǒng)計(jì)情況
http://www.quirksmode.org/mobile/mobilemarket.html
這份統(tǒng)計(jì)結(jié)果已經(jīng)比較早了，隨著時(shí)間的推移，又有很多移動(dòng)設(shè)備投入市場，為每種設(shè)備及分辨率制作一個(gè)網(wǎng)站或者特定的頁面，這應(yīng)該是比較大的工作量，是比較耗時(shí)耗費(fèi)資源的。是否可以只做一個(gè)網(wǎng)站一套頁面，既滿足桌面大尺寸屏幕，同時(shí)也可以滿足各種不同移動(dòng)設(shè)備的小尺寸屏幕。
因?yàn)橛辛诉@個(gè)問題，才有了響應(yīng)式Web設(shè)計(jì)這種方案：一個(gè)網(wǎng)站能夠兼容多種移動(dòng)設(shè)備屏幕尺寸，而不是為每種屏幕尺寸做一個(gè)特定的版本。這個(gè)概念可以說是為移動(dòng)互聯(lián)網(wǎng)而生的。國外已經(jīng)有一些這樣的應(yīng)用例子了,如: http://foodsense.is/， 此網(wǎng)站在Android 上的效果：
不采用響應(yīng)式Web設(shè)計(jì) news.sina.com.cn 在Android上的效果，需要用雙指進(jìn)行縮放才能友好瀏覽：
foodsense.is 在其它設(shè)備分辨率下的情況:
(iPad1/2 1024X768 橫向)
(iPad1/2 1024X768 縱向)
(iPhone4 320X480 橫向)
(iPhone4 320X480 縱向)
（ASUS Galaxy 7 480X800 縱向）
foodsense.is 可以在各種設(shè)備分辨率下，根據(jù)分辨率的不同做出響應(yīng)，對菜單和圖片進(jìn)行重新布局，來滿足顯示的需要。這種技術(shù)就是響應(yīng)式Web設(shè)計(jì)，這個(gè)概念是Ethan Marcotte在A List Apart發(fā)表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引響應(yīng)式建筑而得名的: “響應(yīng)式建筑(responsive architecture)，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種 可以根據(jù)周圍人群的情況進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu),還可以使用運(yùn)動(dòng)傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)"智能玻 璃"：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閥值時(shí)，這種玻璃可以自動(dòng)變?yōu)椴煌该鳎_保隱私。” Web借由建筑上這個(gè)概念，當(dāng)設(shè)備分辨率發(fā)生變化時(shí)，根據(jù)設(shè)備分辨率，調(diào)整菜單，圖片，文字，等其它頁面DOM的狀態(tài)和布局，使得頁面仍然可以給用戶提供 友好的使用體驗(yàn)。
]]>
]]>
Emrah Yaman
Vanity Claire
Authentic Style
David Hellmann
Trevor Saint
Jeff Broderick
fffunction
Ben Haddock
Isobar
Thibault Jorge
Maarten Kleyne
