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

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

在響應式網站的設計和開發中，我們需要注意哪些問題，下面我們聊一聊這個話題。

 

對于界面設計，我們以前針對桌面產品的設計可能就是一個尺寸的，每個模塊的位置比較固定，但是在響應式設計中，這些東西就改變了，設計師會根據產品的需要設計多個版本的設計，在這些不同的版本中，模塊A在1024的寬度下，可能會是黑色背景，但是到了768下面可能會變成白色背景，實現了在不同寬度的不同展現。這里面顏色、背景、寬高等都可改變，但是有一點我們需要注意的是 DOM 節點的順序最好保持一致，因為在響應式的頁面中，我們會使用流式布局，在固定版式通過絕對定位或者外邊距負值的方式改變DOM 順序和視覺順序的技巧，在這里可能并不適用。

 

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

 

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

 

雖然我們提到從最小顯示屏的移動設備做產品設計，但實際不論是設計師還是工程師都是從最復雜的桌面端開始，把表現最豐富最復雜的功能實現，做減法對結構的改動會適當的減少。

 

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