互動狀態詞條 4-02

聚焦Focus State

也常叫做：聚焦狀態、Focus、輸入焦點

你可能會這樣說

填表單時點了某個欄位，那個欄位的外框變色或發光，像被「選中」；用鍵盤 Tab 跳欄位時也會出現同樣的提示。想幫自己的表單加上這種效果。

聚焦（focus）指的是「你現在正在操作的對象」：點進輸入框，或按 Tab 跳到按鈕時，那個元件就取得了焦點，網頁用樣式告訴你「焦點在這」。

它對鍵盤使用者特別重要：只靠 Tab 在欄位間移動的人，全憑聚焦樣式才知道自己現在停在哪一格，沒有它等於閉著眼睛填表。

常見做法是換外框顏色或加一圈光暈；重點是要夠醒目，不要只把邊框從淺灰改成深灰，讓人找半天。

Tab 走到按鈕：外框亮起

這是一個連結連結也要能聚焦

整卡可點：同樣要亮

王

滑鼠移過：那是 hover

用滑鼠移，再用 Tab 鍵走一輪——聚焦樣式是鍵盤使用者的路標，不能省。

圖 4-3　移上去是 hover，Tab 走到是聚焦——兩種狀態都要看得見。

中文就可以

請幫表單的每個欄位加上聚焦樣式：
1. 聚焦時外框換成主色，並加上一圈柔和的光暈。
2. 移除瀏覽器預設樣式前，先確認有清楚的替代樣式。
3. 滑鼠點擊與鍵盤 Tab 都要有一致的效果。
4. 光暈控制在 3 像素左右，不要糊成一片。