網(wǎng)頁(yè)設(shè)計(jì)是否喪失了靈魂？這是否要?dú)w咎于響應(yīng)式設(shè)計(jì)呢？我的朋友兼同事Noah Stokes提出了這些題目，不得不說(shuō)是有點(diǎn)聳人聽(tīng)聞。究竟，響應(yīng)式網(wǎng)頁(yè)不僅能讓我們通過(guò)日益豐碩的聯(lián)網(wǎng)設(shè)備瀏覽網(wǎng)頁(yè)，還能感慨感染其樂(lè)趣。
作為設(shè)計(jì)師，我們的首要任務(wù)是解決題目，這可能遠(yuǎn)遠(yuǎn)超過(guò)其他的事情。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一種絕妙的解決方案，能創(chuàng)造出適應(yīng)各種設(shè)備的虛擬體驗(yàn)。但仍舊有很多題目亟待解決，尤其是如何讓各種內(nèi)容都有趣迷人。一頁(yè)純文字可以成為一篇柔美的博文，一大堆無(wú)聯(lián)系關(guān)系的JPG圖片可以成為一部專業(yè)的作品集。
然后，題目就變成了：我們能同時(shí)實(shí)現(xiàn)兩者嗎？
我們所獲得的
毫無(wú)疑問(wèn)，網(wǎng)絡(luò)已經(jīng)成為一個(gè)美學(xué)勝地?；诳煽康木W(wǎng)格布局，構(gòu)建簡(jiǎn)樸迷人的網(wǎng)站，已經(jīng)成為一種尺度?；ヂ?lián)網(wǎng)的墾荒已經(jīng)完成，以框架和流動(dòng)?xùn)鸥裥问椒浩鸬穆煞ㄅc秩序，已經(jīng)掌管這片泥土，開(kāi)始了和平的統(tǒng)治。
所有這些都是好事。簡(jiǎn)樸迷人的網(wǎng)站，上風(fēng)顯而易見(jiàn)且豐碩：
認(rèn)識(shí)，便于用戶瀏覽（操縱準(zhǔn)確的話）。
原型設(shè)計(jì)（相對(duì)）簡(jiǎn)樸快速。
建站技術(shù)的高度尺度化（流水線取代了工匠）。
快速布局節(jié)省了大量開(kāi)銷（有一定可能會(huì)轉(zhuǎn)嫁給消費(fèi)者）。
嚴(yán)格的柵格布局促進(jìn)了響應(yīng)式設(shè)計(jì)（它嚴(yán)峻依靠極簡(jiǎn)的布局趨勢(shì)）。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
漫步Awwwards這樣的網(wǎng)頁(yè)設(shè)計(jì)畫(huà)廊，其中展出的網(wǎng)站，有成百上千個(gè)都符合簡(jiǎn)樸迷人的尺度。
絕不夸張的說(shuō)，尺度化與其相關(guān)技術(shù)確有重大意義。無(wú)數(shù)的個(gè)人與小公司從中受益，通過(guò)簡(jiǎn)樸迷人（卻毫無(wú)獨(dú)特性）的網(wǎng)站，向全世界分享他們的品牌。但是，那只是一方面。
我們所失去的
將個(gè)人行為納入考量，如今的專業(yè)網(wǎng)站看起來(lái)基本上都很棒。拿一個(gè)名不見(jiàn)經(jīng)傳的設(shè)計(jì)師作品集網(wǎng)站，與十年前最好的設(shè)計(jì)機(jī)構(gòu)網(wǎng)站比擬，你甚至?xí)姓J(rèn)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)這件事上，已經(jīng)做得好太多了。然而，四下看看，很輕易得到結(jié)論：一切看起來(lái)都趨于同化。
是不是設(shè)計(jì)師都喪失了開(kāi)拓精神？便捷是否犧牲了創(chuàng)造性？在回答這些題目前，我們先看看是什么致使今天網(wǎng)頁(yè)設(shè)計(jì)缺乏多樣性。
為何網(wǎng)站看起來(lái)都一樣
看看如今的網(wǎng)站，同化的背后是什么氣力在驅(qū)使？應(yīng)該怪誰(shuí)？事實(shí)證實(shí)，并不能簡(jiǎn)樸歸咎于某種工具或方法。響應(yīng)式設(shè)計(jì)或許推波助瀾，但它只是諸多因素之一。下面是一些疑犯。
布局
有限的布局創(chuàng)意，是網(wǎng)站缺乏多樣性最主要也最顯而易見(jiàn)的原因之一。抽離色彩、動(dòng)畫(huà)、視覺(jué)差動(dòng)彈及類似效果之后，你就會(huì)留意到一些基本的網(wǎng)頁(yè)布局原則。有多少網(wǎng)站是在這5種布局上稍作調(diào)整而成的？
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
5種常見(jiàn)的網(wǎng)站布局。
Noah哀嘆“到處都是條條框框”，指的就是這個(gè)。我們好像停滯了，獨(dú)特的布局成為了一種失傳的藝術(shù)。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
在以前，你可以確保，所有的網(wǎng)站訪客都在用低分辨率的臺(tái)式電腦屏幕瀏覽。如今，網(wǎng)站在所有尺寸與分辨率上表現(xiàn)良好，這已不是一種奢靡，而是一種必須。寬度流動(dòng)、可伸縮的基本柵格系統(tǒng)，使得響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)比隨性的布局更易處理。
框架
網(wǎng)頁(yè)設(shè)計(jì)框架或許可以加速設(shè)計(jì)與開(kāi)發(fā)流程。對(duì)很多人而言，它們是建立跨瀏覽器響應(yīng)式網(wǎng)頁(yè)最安全快速的方式。作為獎(jiǎng)勵(lì)，他們還會(huì)留意保持內(nèi)容簡(jiǎn)略，從按鈕到表單，涵蓋所有通用元素。Bootstrap和Foundation這類工具有著驚人的人氣，導(dǎo)致成千上萬(wàn)的網(wǎng)頁(yè)設(shè)計(jì)師在他們每個(gè)項(xiàng)目中使用完全相同的代碼庫(kù)、布局、甚至美學(xué)風(fēng)格。
原型工具和設(shè)計(jì)流程
即使在從零開(kāi)始的過(guò)程中，設(shè)計(jì)流程也在有意識(shí)地按捺創(chuàng)造力。多數(shù)原型工具都鼓勵(lì)、甚至可能迫使你使用尺度化的方框元素，嚴(yán)格遵循網(wǎng)格局的布局。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
很多原型工具都鼓勵(lì)使用常規(guī)網(wǎng)格布局結(jié)構(gòu)。
高清免費(fèi)照片與圖片
獲取柔美的免費(fèi)設(shè)計(jì)資源真是史無(wú)前例地輕易。利便與可承受占據(jù)了支配地位，設(shè)計(jì)師們蜂擁向免費(fèi)照片網(wǎng)站，從一個(gè)小小（但在不斷增長(zhǎng)）的池子中獲取相同的資源。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
兩張免費(fèi)攝影圖片。
在過(guò)去的兩年中，你看到過(guò)多少個(gè)網(wǎng)站用了其中某張照片（或者兩張）？假如你常常瀏覽網(wǎng)站，我打賭有幾十個(gè)。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
The Village Style和Jigglist； College Essay Guy和Get Busy Make Money
這還不僅僅是照片，還包括圖標(biāo)、字體、設(shè)計(jì)模式等等。好的方面是，沒(méi)有任何預(yù)算的設(shè)計(jì)師也能做出好看的網(wǎng)站；糟糕的是，所有其他設(shè)計(jì)師也在用同樣的資源做著同樣的設(shè)計(jì)。
設(shè)計(jì)趨勢(shì)
對(duì)于某些設(shè)計(jì)師而言，“趨勢(shì)”是一個(gè)貶義詞。但它不該是貶義詞。在20世紀(jì)找一個(gè)年代，看那十年的設(shè)計(jì)趨勢(shì)。你會(huì)發(fā)現(xiàn)真叫人著迷。它為那個(gè)時(shí)代賦予了獨(dú)特的風(fēng)格與個(gè)性，往往能反映出整個(gè)文化環(huán)境。即使你看不見(jiàn)，它也正發(fā)生在你的工作中。你看到與體驗(yàn)到的一切，都在影響你的行為，互聯(lián)網(wǎng)則前所未有地放大了這種效應(yīng)。導(dǎo)致很多設(shè)計(jì)師從相同的資源獲取靈感，追逐相同的趨勢(shì)。
我們?cè)O(shè)計(jì)師
上面列出的每一項(xiàng)工具與資源都極有價(jià)值。它們能簡(jiǎn)化工作，讓網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的大門(mén)向更多人敞開(kāi)，也為客戶省錢(qián)。我不會(huì)胡亂使用它們，我會(huì)精心挑選。假如真要尋找破壞網(wǎng)頁(yè)設(shè)計(jì)多樣性的首惡，我會(huì)舉起自己的手，就是我。我覺(jué)得不是每個(gè)項(xiàng)目都值得進(jìn)行獨(dú)特的設(shè)計(jì)，我要向那些嘗試有趣設(shè)計(jì)的設(shè)計(jì)師們脫帽致敬。
要知道，有一點(diǎn)很重要，你用上面所有這些資源仍舊可以創(chuàng)造出獨(dú)特的設(shè)計(jì)。這都取決于你如何使用這些工具。
如何挑戰(zhàn)現(xiàn)狀
你的網(wǎng)站是否有獨(dú)特的設(shè)計(jì)，現(xiàn)在想必你冷暖自知了?；蛟S你不在乎這個(gè)——這完全沒(méi)題目。但假如你想要打破尺度的工作流程，這里有些概念能幫你實(shí)現(xiàn)，還有些網(wǎng)站可以作為非常棒的案例。
奇特的布局
關(guān)掉你的原型工具，拿出紙筆，思索一下如何創(chuàng)作出有趣且有用的布局，脫離你以前的套路。
Phases Magazine
Phases Magazine就是個(gè)很好的例子，在布局上大膽勇敢突破。它也有條條框框——其中有網(wǎng)格——但他們以某種方式創(chuàng)造出了完全不同于尺度網(wǎng)站的體驗(yàn)（屏幕截圖不能讓你很好地感慨感染到，請(qǐng)一定要切身打開(kāi)看）。假如你看到這個(gè)覺(jué)得，“哇，這太希奇了”，那么很好！他們要的就是這個(gè)效果。有人會(huì)喜歡，有人會(huì)討厭，但我喜歡的是他們?cè)趪L試做一些改變。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
Phases Magazine用了一種非傳統(tǒng)的網(wǎng)格。
不幸的是，這個(gè)網(wǎng)站的整體體驗(yàn)非常糟糕。有不必要的滾屏，表面上是響應(yīng)式布局，但在某些尺寸下嚴(yán)峻錯(cuò)亂。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
Phases Magazine的布局在小屏幕上完全亂了。
Curious Space
這個(gè)概念還有一個(gè)更好的應(yīng)用案例，Curious Space。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
Curious Space的布局。
這里的網(wǎng)格也有些自然隨性的感覺(jué)，但動(dòng)彈功能是常規(guī)的，響應(yīng)式斷點(diǎn)也運(yùn)轉(zhuǎn)良好。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
Curious Space適應(yīng)各種不同設(shè)備。
操縱這個(gè)網(wǎng)站時(shí)，你會(huì)留意到很多不錯(cuò)的小設(shè)計(jì)細(xì)節(jié)。例如，鼠標(biāo)懸停會(huì)影響圖片的層疊順序。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 網(wǎng)站策劃
鼠標(biāo)懸停會(huì)讓內(nèi)容到前面來(lái)。
而且，動(dòng)彈時(shí)還有點(diǎn)小趣味，但至少不會(huì)打亂操縱，也與網(wǎng)站隨性的視覺(jué)主題相吻合。logo開(kāi)始是一堆混亂的字母，跟著頁(yè)面動(dòng)彈，它們各自歸位，在導(dǎo)航條中組成了“Curious Space”。
