行動網站設計：自適應網頁設計與響應式網頁設計

什麽是自適應設計？

自適應網頁設計又稱為響應式設計，是指同一項網頁設計技術。

網頁設計最早只需符合電腦螢幕解析度，但手機迅速取代電腦成為上網工具，即使手機與電腦螢幕解析度相同，畫面呈現卻完全不同，成為網頁設計難題。為了解決這個問題，響應式網頁設計可以根據顯示器的解析度，自動調整版面的布局。使用筆記型電腦、手機、平板電腦等裝置，瀏覽網頁都有最佳體驗。

響應式設計和自適應設計有什麽區別？

不過，響應式設計和自適應設計有些區別，早期也有人以「液態版型」稱呼自適應網頁設計。自適應設計允許網頁內不同元素，布局在不同解析度的螢幕上。而響應式網頁設計則是可以更為彈性的調整，例如某些功能只會在桌上型網站出現，而不會出現於手機網站。但如今大部分的人都會將這兩個技術視為相同的技術。

遠離網頁顯示問題

今天人們使用更多元的方式訪問網站與網頁，已經不再受到手機尺寸、螢幕解析度等問題困擾，這是許多設計師與工程師心血調整出來的結果，事實上背後仍有許多技術細節是不為一般人所知的，舉例來說：

操作介面

電腦使用滑鼠，手機使用觸控，是兩種裝置最大的區隔，自適應與響應式設計大多可以完美處理操作界面的差異，但仍有一些問題：例如在手機上文字過小的問題，電腦端上看起來又會過大，不熟悉的設計師可能第一次會感到困擾，必須試圖找到最佳設計解決方案。

網頁結構

網頁結構無論是電腦或手機並無影響，因為網頁結構是一種網站設計原則，設計師應該要留意結構化/顯示內容的重要性。有哪一些必然出現的，必然要保留的，請留下來。舉例來說，手機上並不適合填寫大量文字，有些表格與欄位的部分，可以透過技術將其隱藏起來減少結構的混亂。

網站導覽

導覽在選擇響應式和自適應網頁設計時，要考慮的另一個問題。導覽選單告訴我們要走哪條路，因此請確保無論是手機或電腦都可以看到網站導覽，最好是在頁尾也要添加導覽資訊。

視覺特效

感謝HTML5的技術，目前網頁上的特效已經可以結合響應式網頁設計，無論桌上電腦或手機都看得到，但對手機來說，過多特效仍是很大的運算負擔。有些設計師的共識是：當響應式在手機平台時，減少或是停用視覺特效。

選單圖示

圖示很棒，過去網頁設計很管用，如今也是如此，但近年圖示有些氾濫成災，挑選對用戶有效的圖示，而不是灌水使用無意義的圖示。許多響應式網站設計框架有預設的圖示，已經非常直觀實用且國際通用，設計師大可不須重新自己自製圖示。

頁籤適用性

約略十年前頁籤(Tab)的設計非常風行，但手機的顯示畫面受到限制，頁籤會占用許多畫面，反而是一個大問題。你可以試著使用少許的頁籤達到同樣的用途，但切勿大量使用導致操作上的不便。