首頁 部落格 行動網站設計:自適應網頁設計與響應式網頁設計
Jericho
Mar 02, 2022
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

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

什麽是自適應設計?

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

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

 

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

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

 

遠離網頁顯示問題

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

操作介面

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

網頁結構

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

網站導覽

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

視覺特效

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

選單圖示

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

頁籤適用性

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

好的網頁設計如何讓網站在競爭中脫穎而出
好的網頁設計如何讓網站在競爭中脫穎而出
Jericho
Jericho
Dec 13, 2024
網站設計有效著陸頁的10個技巧
網站設計有效著陸頁的10個技巧
Jericho
Jericho
Dec 04, 2024
設計完美網站標誌的10個技巧
設計完美網站標誌的10個技巧
Jericho
Jericho
Nov 27, 2024