漫談網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是：頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備;換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。

　　1. 如何理解響應(yīng)式設(shè)計(jì)(RWD)

　　學(xué)究一些，首先大家先了解一下響應(yīng)，然后再講一下設(shè)計(jì)，響應(yīng)就是我發(fā)出的請(qǐng)求能得到什么樣子的回復(fù)，比如我說(shuō)“你好”，你會(huì)很容易的給我回復(fù)“你好”，因?yàn)榇蠹叶际侵袊?guó)人，如果我說(shuō)“hello”，我們這代人如果上過(guò)初中，他也會(huì)給我說(shuō)“Hello”，但是如果我給對(duì)你說(shuō)“Bonjour”，那可能只有高配的人才可能知道了。這里面，就舉了一個(gè)例子，我的應(yīng)答對(duì)象就相當(dāng)于我們要講的響應(yīng)式的設(shè)備，他必須能夠解析我發(fā)給他的需求。然后咱們?cè)僦v一下設(shè)計(jì)，設(shè)計(jì)的官方解釋是這樣的：

　　1.設(shè)下計(jì)謀。

　　2.根據(jù)一定要求﹐對(duì)某項(xiàng)工作預(yù)先制定圖樣﹑方案。

　　3.指搞設(shè)計(jì)工作的人。

　　直白的講，設(shè)計(jì)其實(shí)就是設(shè)了一個(gè)計(jì)，來(lái)完成我們的需要的工作目標(biāo)。

　　從前面我們講的響應(yīng)可以看到，響應(yīng)是雙方的，是互動(dòng)的過(guò)程，在這個(gè)過(guò)程中我們要考慮雙方的承受能力，比如我們總不能讓小孩子扛大包。在咱們網(wǎng)頁(yè)設(shè)計(jì)方面就是咱們要考慮設(shè)備的性能，從網(wǎng)速、Dom 節(jié)點(diǎn)數(shù)量、屏幕的大小等等，如果我們從前后端結(jié)合，對(duì)小孩子給糖果，給苦力大包，那樣就做到了響應(yīng)式。

　　但是，我下面講的響應(yīng)式是狹隘的，我們只是從 Web Builder 這一層做到了響應(yīng)式。

　　2.響應(yīng)式設(shè)計(jì)中的界面設(shè)計(jì)

　　對(duì)于界面設(shè)計(jì)，我們以前針對(duì)桌面產(chǎn)品的設(shè)計(jì)可能就是一個(gè)尺寸的，每個(gè)模塊的位置比較固定，但是在響應(yīng)式設(shè)計(jì)中，這些東西就改變了，設(shè)計(jì)師會(huì)根據(jù)產(chǎn)品的需要設(shè)計(jì)多個(gè)版本的設(shè)計(jì)，在這些不同的版本中，模塊A在1024的寬度下，可能會(huì)是黑色背景，但是到了768下面可能會(huì)變成白色背景，實(shí)現(xiàn)了在不同寬度的不同展現(xiàn)。這里面顏色、背景、寬高等都可改變，但是有一點(diǎn)我們需要注意的是 DOM 節(jié)點(diǎn)的順序最好保持一致，因?yàn)樵陧憫?yīng)式的頁(yè)面中，我們會(huì)使用流式布局，在固定版式通過(guò)絕對(duì)定位或者外邊距負(fù)值的方式改變DOM 順序和視覺(jué)順序的技巧，在這里可能并不適用。

　　3.針對(duì)媒體查詢的斷點(diǎn)

　　我們知道，我們通過(guò)媒體查詢(Media Query)的方式改變網(wǎng)頁(yè)的布局，我們?cè)谀男挾认赂淖儾季?，也就是我們所稱作的斷點(diǎn)，我們更習(xí)慣的思維是針對(duì)某些設(shè)備(比如桌面、平板電腦、手機(jī))的數(shù)據(jù)來(lái)設(shè)置斷點(diǎn)，比如 1024 對(duì)應(yīng)桌面、768對(duì)應(yīng)pad、480 對(duì)應(yīng)手機(jī)，但實(shí)際上，這些東西是靠不住的，因?yàn)檫@些屏幕尺寸會(huì)根據(jù)時(shí)代的發(fā)展不斷的變化，我們的響應(yīng)不應(yīng)該只針對(duì)某些設(shè)備，我們需要的是一個(gè)區(qū)間值，而不是將某一分辨率對(duì)應(yīng)一種設(shè)備。斷點(diǎn)肯定是需要有的，那這些斷點(diǎn)是如何設(shè)置的呢?怎么才能不是為了斷點(diǎn)而斷點(diǎn)呢?實(shí)際上，這些斷點(diǎn)的設(shè)置都是根據(jù)內(nèi)容的需要做的，當(dāng)我們的內(nèi)容在達(dá)到一個(gè)臨界點(diǎn)后，視覺(jué)效果不符合人們的審美或影響了內(nèi)容獲取時(shí)，這就是我們需要的斷點(diǎn)。但是我們可能無(wú)法在視覺(jué)設(shè)計(jì)的階段就能覆蓋其尺寸區(qū)間內(nèi)容所有狀況，這樣我們就需要把它和現(xiàn)有的設(shè)備相結(jié)合確立斷點(diǎn)。

　　因此，個(gè)人認(rèn)為不同的項(xiàng)目，在響應(yīng)式設(shè)計(jì)中需要的斷點(diǎn)是不一樣的。我們知道在媒體查詢中有 width 和 device-width 兩個(gè)特性，因?yàn)樵谑殖衷O(shè)備中多數(shù)用到的是 webkit 內(nèi)核的瀏覽器，我們一般會(huì)通過(guò) viewport 的屬性，將設(shè)備寬度賦予視窗的寬度

　　這樣我們就能根據(jù)設(shè)備的寬度來(lái)對(duì)某些設(shè)備做媒體查詢了。

　　@media screen and (max-device-width:480px){ selector{ } }

　　4.交互上的那些不同

　　在響應(yīng)式設(shè)計(jì)中，我們不僅要考慮以前桌面用戶的使用習(xí)慣，也必須兼顧不同尺寸的手持設(shè)備。比如大家在PC上習(xí)慣使用的浮層在某些小尺寸的設(shè)備上就沒(méi)法使用了，就像我們下圖中看到的。而且一些響應(yīng)區(qū)域小的鏈接也不方便我們使用手指來(lái)操作，因此我們可以做到“求同存異”。比如我們根據(jù)屏幕的尺寸，來(lái)決定是否使用浮層、或者增大操作區(qū)域、或者“整齊劃一”。比如在新浪視頻項(xiàng)目區(qū)別設(shè)備來(lái)使用浮層，將所有的鏈接的操作區(qū)域做成方便手指操作的大小。

　　5. 具體項(xiàng)目開發(fā)流程

　　5-1. 產(chǎn)品策略與信息架構(gòu)

　　在我們介入具體項(xiàng)目開發(fā)流程前，我們應(yīng)該已經(jīng)確認(rèn)了自己產(chǎn)品所面向的內(nèi)容消費(fèi)群體，以及潛在目標(biāo)用戶，比如簡(jiǎn)單的只面向小屏幕的移動(dòng)用戶群或者我們要囊括所有的顯示設(shè)備(mobile、pad、pc等等)。

　　當(dāng)我們確定目標(biāo)用戶的內(nèi)容消費(fèi)習(xí)慣的同時(shí)，我們應(yīng)該也對(duì)他們的訪問(wèn)習(xí)慣、時(shí)段等等做一些初步分析。這不僅僅面向一個(gè)響應(yīng)式站點(diǎn)，這對(duì)產(chǎn)品定位到開發(fā)都有決策作用。

　　在移動(dòng)博客項(xiàng)目前期的產(chǎn)品分析中我們能看到，隨著時(shí)代的前進(jìn)用戶內(nèi)容的消費(fèi)習(xí)慣也在發(fā)生著變化。

　　而訂閱設(shè)備的變化是在從PC迅速的向phone、pad進(jìn)化，所以我們更有必要提高移動(dòng)設(shè)備的閱讀體驗(yàn)來(lái)提供面向移動(dòng)用戶的響應(yīng)式站點(diǎn)。

　　當(dāng)我們確定了以上的群體以及習(xí)慣后我們就要針對(duì)這類群體對(duì)產(chǎn)品自身做架構(gòu)調(diào)整了。產(chǎn)品架構(gòu)或者內(nèi)容架構(gòu)在不同用戶不同設(shè)備間影響著內(nèi)容信息的可用性和可尋性，并且響應(yīng)式一定會(huì)在不同分辨率不同設(shè)備上對(duì)頁(yè)面中的模塊重新調(diào)整，以符合不同模塊在不同設(shè)備中所符合的優(yōu)先級(jí)

　　5-2. 響應(yīng)式產(chǎn)品設(shè)計(jì)

　　響應(yīng)式設(shè)計(jì)是從產(chǎn)品角度來(lái)進(jìn)行的設(shè)計(jì)，在這個(gè)階段我們需要產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、設(shè)計(jì)師以及工程師共同介入了。我們需要打破傳統(tǒng)的思維模式去思考設(shè)計(jì)，從純粹傳統(tǒng)的Web向移動(dòng)應(yīng)用過(guò)度。通過(guò)我們第一步明確的信息架構(gòu)，來(lái)從最小顯示屏的移動(dòng)設(shè)備做產(chǎn)品設(shè)計(jì)，在移動(dòng)設(shè)備中拋棄更多的使用干擾，保證核心功能的最優(yōu)體驗(yàn);同時(shí)交互與設(shè)計(jì)師的介入處理如何把模塊設(shè)計(jì)的更小更有彈性，并初步確定設(shè)計(jì)風(fēng)格、設(shè)計(jì)框架等方案;而工程師需要在產(chǎn)品經(jīng)理與設(shè)計(jì)師確定的方案中進(jìn)行代碼測(cè)試，充分利用不同設(shè)備獨(dú)有的特性并進(jìn)行框架搭建。

　　5-3. 響應(yīng)式開發(fā)

　　雖然在上一步我們提到從最小顯示屏的移動(dòng)設(shè)備做產(chǎn)品設(shè)計(jì)，但實(shí)際不論是設(shè)計(jì)師還是工程師都是從最復(fù)雜的桌面端開始，把表現(xiàn)最豐富最復(fù)雜的功能實(shí)現(xiàn)，做減法對(duì)結(jié)構(gòu)的改動(dòng)會(huì)適當(dāng)?shù)臏p少。

　　移動(dòng)博客項(xiàng)目的前期開發(fā)其實(shí)是一個(gè)與產(chǎn)品、交互和設(shè)計(jì)師邊測(cè)試邊溝通邊確認(rèn)不斷循環(huán)的過(guò)程，因?yàn)樵诓煌脑O(shè)備中內(nèi)容的呈現(xiàn)及某些特性的支持都不同，有些是與我們的預(yù)期有出入的。

　　對(duì)我們頁(yè)面制作工程師而言，在只有桌面端的時(shí)候，我們面向的設(shè)計(jì)稿是單一的，但是到了響應(yīng)式設(shè)計(jì)，這種情況就改變了，雖然說(shuō)我們可以讓設(shè)計(jì)師根據(jù)我們產(chǎn)品的受眾總結(jié)的屏幕寬度斷點(diǎn)給予幾個(gè)版本的設(shè)計(jì)稿，但是這些設(shè)計(jì)稿并不能覆蓋我們用戶的所有設(shè)備情況，比如我們縮放瀏覽器的時(shí)候，從1024到320之間，包含了太多不同分辨率的設(shè)備。因此，在此開發(fā)過(guò)程中我們需要不斷的和設(shè)計(jì)師溝通在設(shè)計(jì)稿無(wú)法覆蓋情況下的特殊狀況。