當設計顯示在行動裝置上時,請確保按鈕或連結等互動元素的大小足夠大,且周圍保留足夠空間,方便使用者輕觸,同時避免意外重疊到其他元素。這造福了所有使用者,但對行動不便的使用者而言特別有幫助。
在設有正確設定的行動裝置可視區域的網站上,建議的觸控目標大小下限約為 48 個裝置獨立像素。舉例來說,雖然圖示的寬度和高度可能只有 24 像素,但您可以使用額外的邊框間距,將輕觸目標大小提高至 48 像素。48x48 像素的區域約為 9 公釐,相當於使用者的指腹區域大小。
在示範中,我已為所有連結新增邊框間距,確保連結符合最小大小。
觸控目標的水平和垂直間距也應相距約 8 個像素,以免使用者按下一個觸控目標時,不小心觸碰到另一個觸控目標。
測試觸控目標
如果目標是文字,且您使用了 em
或 rem
等相對值來設定文字和邊框間距的大小,可以使用 DevTools 檢查該區域的計算值是否足夠大。在以下範例中,我使用 em
做為文字和邊框間距。
檢查連結的 a
,然後在 Chrome 開發人員工具中切換至「Computed」窗格,您可以在其中檢查方塊的各個部分,並查看它們會解析為哪個像素大小。Firefox 開發人員工具中會提供版面配置面板。
您可以在這個面板中取得已檢查元素的實際大小。
使用媒體查詢偵測觸控螢幕使用情形
您可以透過更可靠的方式,根據實際裝置功能調整設計,而非只測試檢視區大小,然後猜測小尺寸可能屬於手機或平板電腦,進而使用觸控螢幕。
我們現在可以使用媒體查詢來測試的其中一個媒體功能,是檢查使用者的主要輸入是否為觸控螢幕 (pointer
),以及目前偵測到的任何輸入是否為觸控螢幕 (any-pointer
)。pointer
和 any-pointer
功能會傳回 fine
或 coarse
。有些人會使用滑鼠或觸控板,即使滑鼠已透過藍牙連線至手機也是如此。coarse
指標代表觸控螢幕,這可以是行動裝置,也可以是筆電或大型平板電腦。
如果您在媒體查詢中調整 CSS 以增加觸控目標,針對粗略指標進行測試,即可為所有觸控螢幕使用者增加輕觸目標。無論裝置是手機還是較大的裝置,都能提供更大的輕觸區域。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
如要進一步瞭解互動媒體功能 (例如指標),請參閱「回應式網頁設計基礎知識」一文。