關(guān)于響應(yīng)式網(wǎng)站開(kāi)發(fā)的一些注意事項(xiàng)

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

在響應(yīng)式網(wǎng)站的設(shè)計(jì)和開(kāi)發(fā)中，我們需要注意哪些問(wèn)題，下面我們聊一聊這個(gè)話(huà)題。

 

對(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é)順序的技巧，在這里可能并不適用。

 

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

 

響應(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)行框架搭建。

 

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

 

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