RWD 響應式網頁設計該注意的 UI 細節

早期只有電腦上網時期，只要針對電腦設計網頁即可。然而行動上網的普及，也促成了 RWD 的發展。然而設計響應式網頁時，並不是單純讓視窗大小能夠維持不跑版這麼簡單，還有更深入的設計細節。

動線設計：並非所有內容都要全部塞到網頁內容

PC 版

• 網頁左邊可能會有選單、廣告，右邊會有內容，最下面有頁尾。

Mobile 版

• 如果依照 PC 版邏輯設計，在手機上的顯示會是：選單、廣告、內容、頁尾。
• 對使用者會有一個問題：我想看內容，卻要先依序看選單、廣告，才能看到內容。
• 因此在 Mobile 不一定要顯示全部內容，像是廣告就可以隱藏或是放到下面。

斷點時機：設計多欄式佈局的必要觀念

• 如果段落文字寬度太長，使用者眼睛要一直左右滑動。
• 但如果段落文字寬度太短，可能沒看個幾個字就要換行，會打擾思緒，眼睛要不斷往下。

盲點範例

• PC 版單欄式但文字太長。
  • 建議可兩欄或是調整段落文字寬度。
• PC 轉 pad 直接從兩欄變成單欄，導致文字段落太長。
  • 建議一樣維持兩欄，不過寬度都可以調整。

點擊範圍：設計讓人好點選的元素

• 一個好的設計稿或是美感佳的網頁，也要兼顧使用者體驗。
• 如果點擊範圍太小，很可能點不太到或甚至於點擊到其它事件。

設計建議

• 一般來講手指點擊範圍建議設在 44px，iPhone 設定介面的按鈕便是這個高度。

少即是多：避免資訊量爆炸

PC 版

• 由於螢幕較大，以文章列表為例，可以顯示較多資訊。
• Ex. 縮圖 + 標題 + 局部內文 + 其它說明。

Mobile 版

• 由於螢幕較小，以呈現重要資訊為主，避免資訊量爆炸。
• Ex. 只呈現縮圖 + 標題。

載具特性：使用者行為 touch、hover 傻傻分不清楚

• PC 板使用滑鼠控制，因此有 hover 滑動效果以及 active 點擊效果
• 平板以及行動裝置只有點擊行為，因此這部分要注意
• Ex. PC 版選單滑到即可呈現子選單，由於觸控裝置利用手指控制，所以須做成點擊效果

斷點元素：只有手機才會顯示的功能與 Layout 切換

PC 版

• 以選單為例：由於寬度夠寬，所以可以直接呈現所有選單鏈結在 header

pad 版以及 Mobile 版

• 由於裝置寬度較小可能無法顯示所有選單，會做成麵包選單
• pad 寬度雖然可能剛好足夠，但如果選單一多可能就不夠了，所以也能做成麵包選單
• 麵包選單指須要點擊按鈕才會顯示選單

操作方式

• PC 版：顯示選單、隱藏麵包選單
• pad 版以及 Mobile 版：隱藏選單、顯示麵包選單
  • 打開麵包選單後，顯示選單並隱藏麵包選單按鈕，改成顯示關閉麵包選單按鈕「X」
  • 按下關閉麵包選單按鈕後隱藏選單跟關閉按鈕，顯示麵包選單按鈕

利用 CSS 控制

• Layout 切換可利用 CSS 控制：

div {
    display: inline-block; /* 顯示區塊並設定成擁有區塊元素效果的行內元素 */
    display: none; /* 隱藏區塊 */
}

後記

網頁除了好看，使用者的視覺與互動感受，都是要兼顧的，因此並不單單只是裝置大小的差異。尤其是現在主流是行動上網，對於手機版面的設計更要下比較多功夫啊！一起加油吧～

參考資料

• 六角學院網頁切版直播班