設計實務

電商頁面的易讀性設計：對比、字級與高齡友善的實務標準

2026年4月21日・ViewInternet 編輯部

設計圈把「無障礙」當成公益題，電商應該把它當成生意題：看不清楚的字、按不到的按鈕、填不動的表單，每一個都在流失真金白銀的訂單。台灣的網購主力年齡逐年上移，四五十歲以上客群的消費力強、忠誠度高——而他們對「看不清楚」的容忍度最低。易讀性不是加分項，是轉換率的基本盤。這篇給可執行的標準。

色彩對比：最常見也最好修的問題

設計師的螢幕又大又亮，客人的手機在捷運上反著光——設計稿上「高級」的淺灰字，真實場景裡就是看不見。標準很明確：內文文字與背景的對比度至少 4.5:1（大字標題可放寬到 3:1），用免費的對比檢查工具（WebAIM Contrast Checker 這類）幾秒就能驗。高風險的慣犯：淺灰內文（#999 以下就危險）、彩色背景上的白字（品牌色不夠深時常不及格）、圖片上的文字沒墊底。快速自檢法：把螢幕亮度調到一半、瞇著眼看頁面——瞇眼看不見的字，就是一部分客人正常看不見的字。

字級的底線：行動版說了算

行動版的字級底線：內文 16px 起跳（14px 是妥協下限，12px 以下的內文是設計事故）、輔助說明至少 13px、價格與按鈕文字更大更重。行高抓字級的 1.6 到 1.8 倍。另一個常被忽略的：縮放不能鎖——viewport 設定裡禁止縮放（user-scalable=no）對視力不好的使用者是災難，也違反無障礙規範，檢查你的網站有沒有這行歷史遺毒。

高齡友善的五個調整

目標客群偏熟齡（保健、居家、旅遊品類）的頁面，再加五條：字級整體上調一級（內文直上 17-18px，別怕「不精緻」，看得清楚才有精緻可言）；按鈕加大加明確——觸控目標至少 44px 見方，按鈕要「長得像按鈕」（有底色有邊界，扁平到像文字的按鈕會被忽略）；流程減步驟——每多一步流失一批，能一頁完成的不要分三頁；避免純圖示溝通——漢堡選單、購物車圖示旁邊加上文字（「選單」「購物車」），圖示的抽象語言不是所有世代都熟；錯誤訊息說人話——「格式錯誤」不如「電話號碼請填 10 碼，範例：0912345678」。

表單的易用細節

結帳表單是易讀性問題的重災區：標籤放欄位外面（placeholder 當標籤用，一開始打字提示就消失，填到一半忘記這格要填什麼）；鍵盤類型對應（電話欄叫數字鍵盤——inputmode 一行設定，體驗差一個世代）；錯誤即時提示（填完當下就標紅說明，別等按送出才一次噴十個錯誤）；自動完成開著（autocomplete 屬性讓瀏覽器代填姓名地址，中高齡使用者尤其受惠）。

動態與閃爍的節制

輪播自動輪太快（讀不完就換頁）、促銷倒數的閃爍動畫、滿版彈窗關閉鈕藏在角落——這些「行銷活力」對部分使用者是干擾甚至障礙。原則：輪播給手動控制與暫停、動畫不要無限循環、彈窗的關閉鈕要大要明顯。轉換數據通常也站在節制這邊：干擾越多的頁面，跳出率越誠實。

把易讀性寫進驗收清單

易讀性不是一次性專案，是驗收標準：每次新頁面上線前過一遍——對比檢查工具跑過、行動版實機瞇眼測試、表單自己填一次、家裡的長輩試用一次（最誠實的可用性測試，零成本）。這張清單擋下的每個問題，都是原本會默默流失的訂單。

ViewInternet 的商品頁設計與轉換優化都把易讀性檢核內建在流程裡——好看且看得清楚，才是能賣貨的設計。你的頁面長輩看得清楚嗎？加 LINE 幫你檢一次。