Touch Target
Touch Target

Touch Target

Touch Target

手指可點擊的範圍

⚡️ 相關文件

Guideline

規範

Minimum size 最小尺寸

KKBOX App 定義最小點擊範圍以 48 x 48 dp/pt 為 Android / iOS、大 / 小螢幕的統一標準。

若點擊範圍設計過小,將有可能阻擋使用者體驗完整功能,且影響我們與平台方的合作,請設計師務必遵守規範。若開發時程緊繃,也請將點擊範圍列為功能上線的「必要條件」,確實開發。

💡
Android 官方規範的點擊範圍應至少為 48 x 48 dp,iOS 則為 44 x 44 pt。
image

Fixed target size when scaling text size 縮放文字時固定尺寸

在相同螢幕尺寸的規格中,點擊範圍為固定數值,不會因為使用者縮放文字而改變。

若原始點擊範圍設定 (18, 12),文字放大後依然是 (18, 12)
若原始點擊範圍設定 (18, 12),文字放大後依然是 (18, 12)

Large & Small Screens 大 / 小螢幕

為了維持畫面的視覺比例,大 / 小螢幕分別定義不同的點擊範圍尺寸。

image

若大螢幕與小螢幕使用相同尺寸的 icon 按鈕,則不需分別定義不同的點擊範圍尺寸。

image

How to provide a touch target spec

如何提供點擊範圍的規格

Design from small screen to large screen 由小螢幕的設計推算大螢幕的設計

若物件的高度或寬度(任一)不足,以 小螢幕尺寸 / 正常字級 的設計為基準,擴大點擊範圍至 48 單位為止。

原本的按鈕高度僅 28 單位,設計時需將點擊範圍的高度擴大至 48 單位
原本的按鈕高度僅 28 單位,設計時需將點擊範圍的高度擴大至 48 單位

將小螢幕的點擊範圍尺寸 x 1.15 倍 後,即為大螢幕的點擊範圍尺寸。

小螢幕尺寸的按鈕點擊範圍為上下各 10,大螢幕尺寸為 10 x 1.15 再四捨五入取整數為上下各 12
小螢幕尺寸的按鈕點擊範圍為上下各 10,大螢幕尺寸為 10 x 1.15 再四捨五入取整數為上下各 12

Changelog

Date
Version
Notes
Chapters
Person
July 26, 2023
1.33

・新增 Touch Target 草稿

Touch Target
Verna Wang