Bible Network Crypto DeFi Onchain RWA AI Agent Stablecoin Chain SAFU CryptoTax DeFAI AGI Claude Me Claude Skill Claude Design Claude Cowork
獨立知識媒體
與任何項目無關聯
用 Claude Design,把想法變成可互動的視覺
claudedesign-me.com
最新
Figma 讓設計規則寫給 AI agent 看:Specs 與 Code layers 之後,設計系統文件由誰維護?  ·  只說「用我們的設計系統」不夠:一段可重複貼上的 primer,讓 AI 少用 18px 和 48px  ·  一個畫面要花多少?大多數 AI 設計工具答不出來:六種額度單位,沒辦法直接比價  ·  43.8% 的設計師把一半以上製作時間交給 AI 寫程式:角色落差與那個 7.39 分的滿意度  ·  Claude Design 獨立版 12 月 14 日關閉,Docs、Slides、Design 併入每一場對話  ·  91% 的設計師每週用 AI,62% 說輸出不穩定:採用率背後被忽略的驗證成本
名詞解析 · visual-design

Touch Target Size

觸控目標尺寸
visual-design intermediate

30 秒版 · 給沒耐心的人
按鈕、連結、表單控制項等可被點擊或觸碰的互動元素,在畫面上可被觸發的範圍大小;WCAG 2.2 的 2.5.8(AA 級)要求指標輸入的目標至少為 24×24 CSS 像素,除非符合特定例外。
完整解說 +
01 · 這是什麼?

觸控目標尺寸是什麼,WCAG 要求多大?

觸控目標尺寸指的是一個按鈕、連結或表單控制項「真正能被點中的範圍」有多大。注意是可點擊範圍,不是圖示看起來多大:一個 16 像素的圖示,外面包著 24 像素的可點擊區域,就算 24 像素。

WCAG 2.2 新增的成功準則 2.5.8「目標尺寸(最小)」屬於 AA 級,要求指標輸入的目標至少 24×24 CSS 像素。更嚴格的 2.5.5「目標尺寸(強化)」屬於 AAA 級,門檻是 44×44 像素。

02 · 為什麼存在?

為什麼需要這條規定?

小目標對很多人都是障礙:手部震顫或動作控制較弱的人容易點錯,用單手在手機上操作的人、在移動中使用的人也一樣。點錯的後果不只是不方便,如果相鄰的是「刪除」「付款」這類動作,就可能造成真實的錯誤。

2.5.8 的設計思路是在不強迫所有元素都放大的前提下,設一條可達成的底線:24 像素。需要更高保證的人可以追求 2.5.5 的 44 像素。

03 · 如何影響你的決策?

實際怎麼判斷一個元素有沒有達標?

先量可點擊範圍的寬與高,兩者都至少 24 CSS 像素就通過。小於 24 像素的目標,仍可能因下列例外而通過:間距(與每個相鄰目標都有至少 24 像素的偏移)、等效(同一頁面有另一個符合標準的控制項能達成同樣功能)、行內(目標在句子或文字區塊中)、使用者代理控制(尺寸由瀏覽器決定、作者沒有修改)、必要性(某種呈現方式是必要的或法律要求的)。

間距例外的檢查方式是:以每個小目標的邊界框為中心畫一個直徑 24 像素的圓,這些圓不能與其他目標或其他小目標的圓相交。

04 · 你該怎麼辦?

對設計師和用 AI 生成介面的人有什麼影響?

設計稿裡的圖示按鈕最容易失手:視覺上 16 像素很乾淨,但如果可點擊範圍也只有 16 像素、旁邊又緊貼其他按鈕,就同時不符合尺寸和間距的規定。解法通常不是把圖示放大,而是加大可點擊範圍(內距)或拉開間距。

用 AI 工具生成介面時,這類檢查值得列進驗收清單。有第三方評測指出,某些生成結果在色彩對比與觸控目標大小上達不到基本無障礙要求(該評測出自競品網站,需自行驗證)。把「所有互動元素的可點擊範圍至少 24×24 像素」寫進提示,並在交付前實際量過,比事後修補便宜。

資料來源:W3C WAI — Understanding Success Criterion 2.5.8: Target Size (Minimum)、AllAccessible — WCAG 2.5.8 Target Size (Minimum): Complete Implementation Guide
實際例子 +

W3C 對「間距」例外的說明是最清楚的實例:一個 16 像素的小圖示按鈕,即使本身不到 24 像素,只要以它為中心畫出的 24 像素直徑圓,不與鄰近按鈕或其他小目標的圓相交,就符合 2.5.8;若兩個 16 像素的按鈕緊貼在一起,圓會重疊,就不通過。句子裡的行內連結則直接適用「行內」例外,不受 24 像素限制。

常見誤解 +
✕ 誤解1
× 誤解:圖示畫成 24 像素才算過,實際是:判斷標準是可點擊範圍,不是圖示的視覺大小——16 像素的圖示加上內距讓可點擊區域達到 24 像素就通過,反過來,圖示畫得大但可點擊範圍很小也不通過
✕ 誤解2
× 誤解:低於 24 像素就一定不合規,實際是:2.5.8 有間距、等效、行內、使用者代理控制、必要性五種例外,間距足夠或同一頁面有等效控制項時,小目標仍可通過
這件事跟你有什麼關係 +
直接影響

優點是用一條可量測的底線降低誤點,對動作控制較弱的人與行動裝置使用者都有幫助;缺點是在密集的介面(工具列、表格操作列)中,滿足尺寸與間距會佔用更多空間,需要在資訊密度與可用性之間取捨,而 24 像素只是最低門檻,不保證真的好點。

提問
請至少輸入 10 個字
更多相關主題