關于響應式網站開發的(de)一些注意事項

響應式Web設計(Responsive Web design)的(de)理(lǐ)念是：頁面的(de)設計與開發應當根據用(yòng)戶行爲以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的(de)響應和(hé)調整。無論用(yòng)戶正在使用(yòng)筆記本還(hái)是iPad，我們的(de)頁面都應該能夠自動切換分(fēn)辨率、圖片尺寸及相關腳本功能等，以适應不同設備。

在響應式網站的(de)設計和(hé)開發中，我們需要注意哪些問題，下(xià)面我們聊一聊這(zhè)個(gè)話(huà)題。

 

對(duì)于界面設計，我們以前針對(duì)桌面産品的(de)設計可(kě)能就是一個(gè)尺寸的(de)，每個(gè)模塊的(de)位置比較固定，但是在響應式設計中，這(zhè)些東西就改變了(le)，設計師會根據産品的(de)需要設計多(duō)個(gè)版本的(de)設計，在這(zhè)些不同的(de)版本中，模塊A在1024的(de)寬度下(xià)，可(kě)能會是黑(hēi)色背景，但是到了(le)768下(xià)面可(kě)能會變成白色背景，實現了(le)在不同寬度的(de)不同展現。這(zhè)裏面顔色、背景、寬高(gāo)等都可(kě)改變，但是有一點我們需要注意的(de)是 DOM 節點的(de)順序最好保持一緻，因爲在響應式的(de)頁面中，我們會使用(yòng)流式布局，在固定版式通(tōng)過絕對(duì)定位或者外邊距負值的(de)方式改變DOM 順序和(hé)視覺順序的(de)技巧，在這(zhè)裏可(kě)能并不适用(yòng)。

 

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

 

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

 

雖然我們提到從最小顯示屏的(de)移動設備做(zuò)産品設計，但實際不論是設計師還(hái)是工程師都是從最複雜(zá)的(de)桌面端開始，把表現最豐富最複雜(zá)的(de)功能實現，做(zuò)減法對(duì)結構的(de)改動會适當的(de)減少。

 

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