適當調整點按目標大小

當 PageSpeed Insights 偵測到特定點按目標 (例如按鈕、連結或表格欄位) 可能太小或距離太近,容易造成使用者在觸控螢幕上點按的不便,就會觸發這個規則。

總覽

對於使用者而言,如果連結或按鈕太小或擺放太密集,想要在觸控螢幕上準確按到目標,就會比使用傳統滑鼠游標來得困難。為了避免造成使用者不慎按錯位置,請務必為每個點按目標設定足夠大小,同時保持其間擁有足夠距離,確保使用者按下任何目標時,其他手指不會覆蓋到另外的點按目標。考量到成人指腹平均 10 公釐寬 (比半英吋短一點),Android 使用者介面指南指出點按目標大小應以約 7 公釐以上為佳,這表示在行動檢視區設定完善的網站上,點按目標至少要有 48 CSS 像素。

建議

對於網站上最重要的點按目標 (使用者最常用到的按鈕或連結),請務必確保這些項目至少有 48 CSS 像素長/寬,讓使用者可以輕鬆點按 (如果您已適當設定檢視區)。使用頻率較低的連結可以比較小,但是必需和其他連結之間保持足夠距離,至少在 10 公釐寬的指腹按下時,不會輕易同時按到其他連結。基本上,使用者應該沒有必要藉由撥動手指進行縮放 (或使用其他會讓點按目標更清楚的瀏覽器使用者介面功能,例如 Chrome 的彈出式放大鏡),才能輕易且確定地按下所需的按鈕或連結。

將重要點按目標放大以便點按

這適用於使用者最常用到的點按目標,例如常用動作的按鈕、搜尋列與其他重要表格欄位,以及各個主要瀏覽連結。點按目標大小至少要有 7 公釐 (如果您已適當設定檢視區,即為 48 CSS 像素),如果小於 7 公釐,周圍則須留有充足的空間。

保持每個小型點按目標之間有足夠空間

對於使用率不高的連結或按鈕,尺寸小於建議的 7 公釐是沒有問題的。不過,點按目標仍最好不要長寬同時小於 5 公釐 (32 CSS 像素),以免使用者的手指按下某個項目時,不小心按到另一個點按目標。