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 控制:
1
2
3
4
div {
display: inline-block; /* 顯示區塊並設定成擁有區塊元素效果的行內元素 */
display: none; /* 隱藏區塊 */
}

後記

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

參考資料

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

希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)