焦慮戳戳樂
把感受，變成一個小動作。
統一規格檢查
依你確認的原則，線條只保留辨識與無障礙所需的最低程度。原品牌、字體與玻璃材質沿用 revision 03；本頁的按鈕與互動契約是統一修訂稿。網站與此頁載入同一份元件樣式及行為，Figma 原核准版尚未改寫。
02 · 真實操作
用滑鼠滑入、按住、移出，再以Tab切換。儲存示範會模擬一次處理，不會儲存資料；連點不重複計數。
尚未執行儲存。
03 · 卡片與點擊範圍
作品整片開啟介紹，「＋」是同一個操作的提示；文章整片前往內容。圖片取自兩件作品的 App Store 官方宣傳截圖。
內容容器
創作筆記
這裡只呈現資訊，沒有下一步操作，因此沒有「＋」、箭頭或 hover 反白。
04 · 唯一規格表
下載同版本規格 JSON · 以下內容由同一份規格資料產生。
| 字體 | Inter＋Noto Sans TC；14/24正文、20/28卡片標題、32/40章節、48/56展示 |
|---|---|
| 材質 | Plain：白60%、blur0；Photo：灰45%、blur16；Detailed：白23%、blur28；引用原master tokens |
| 狀態色 | Primary：品牌紅／白字；hover混入8%白、pressed混入12%墨。Secondary：情境selected淡底；Quiet：透明底。兩者hover前景色16%、pressed前景色24%，均不加框。 |
| Focus | 一般模式以墨底白字顯示鍵盤焦點；強制色彩模式保留系統色焦點線與控件邊界；不改操作位置。 |
| Motion | 狀態色160ms ease-out；操作不改位置尺寸；Reduced Motion取消過渡及旋轉，保留動作名稱與處理中文字。 |
| 使用層級 | Primary：目前流程唯一主要動作；Secondary：明確的次要操作；Quiet：導航／輔助。只有導航Quiet使用Compact水平12，其餘文字操作水平24。 |
| Disabled／Loading | Disabled原生disabled、opacity .45；Loading aria-busy＋aria-disabled，保留動作文字、名稱與尺寸；左右對稱16px預留槽，文字中心對齊按鈕中心；右側為指示槽，阻止重複提交，結果用status宣告。 |
| Fallback | 減少透明或無backdrop-filter時使用原不透明fallback；觸控不套hover |
| 適用範圍 | 此次涵蓋目前網站的Button／Link／Card／Dialog。未使用的表單、選單、通知不冒稱已定義。 |
| 載入指示 | 參考Apple HIG：未知進度用旋轉活動指示；有可量測進度才用確定進度，不虛構百分比。網頁實作設定為16px、2px線、0.8秒線性旋轉，並非Apple指定數值。只在處理中出現；Reduced Motion靜止並提供具體處理文字。 |
| 最低必要線條 | 最低必要線條：預設減少裝飾框與分隔線；載入指示、必要焦點及強制色彩模式允許功能線條，不把必要提示做得過細或過淡。 |
| 卡片素材 | 作品媒體來自開發者 Fu Syuan Wang 的 App Store 官方宣傳截圖；完整呈現、不裁切介面，介紹面板提供對應商店入口。來源記錄見 assets/projects/sources.json。 |
| 面板動態 | 面板只改變透明度，保持文字與圖片原尺寸，禁止卡片到面板的幾何縮放。Web Animations管理反向播放；背景保持鎖定直到關閉完成，焦點再返回。這是依使用者舒適度修正的Binoki實作，非宣稱Apple指定動畫。 |
| 對話框遮罩 | 品牌墨色 rgba(33,31,27,.56)，與照片文字遮罩22%分開；開啟閱讀面板時降低周邊亮度。 |
規範依據：Apple HIG · Progress indicators ↗。上述尺寸、轉速與網頁適配是 Binoki 的實作選擇。
Button
- 結構
- 容器＋文字＋可選16px前／後圖示；icon-only使用20px圖示且有accessible name
- 幾何
- 最小高44；文字14/24、500；水平24、垂直10；gap8；圓角12；圖示鈕44×44
- 行為
- 動作用button；導航型CTA用a。hover與pressed只作用於可見控件，無位移／縮放／padding變動。
- 狀態
- Primary／Secondary／Quiet均有Default、Hover、Pressed、Focus、Disabled、Loading。focus獨立於hover；disabled不觸發；loading鎖定重複操作且保留原寬。
Link
- 結構
- 行內連結以字重與淡底辨識，不加底線；導航使用Quiet Compact；外部CTA標示目的地與↗
- 幾何
- 行內隨段落行高；獨立導航最小44、水平12；CTA與Button共用44／24／12
- 行為
- a的href是實際目的地，支援鍵盤／另開分頁；不以a攔截後執行彈窗動作。
- 狀態
- Hover強調連結；Focus可見；不提供假disabled或loading連結。
Card
- 結構
- Container只承載資訊；Navigation Card整片為一個連結、箭頭提示目的地；Disclosure Card由覆蓋整片的單一button展開內容，右下＋不另設第二個按鈕。
- 幾何
- 作品卡片外圓角24、桌面內容padding32、手機24；作品媒體卡最小高680／620、圖片完整顯示420／360；右下40px提示距外緣20；命中範圍是整張卡片。
- 行為
- 作品圖文與＋觸發同一個介紹面板；hover／pressed作用於整片、不位移縮放。文章卡片前往實際href。資訊容器不反白。
- 狀態
- Default／Hover／Pressed／Focus；鍵盤焦點以整片2px品牌紅外框、offset4辨識，關閉面板返回卡片焦點且不捲動。
Dialog
- 結構
- 標題、內容、明確關閉鈕；由button開啟；原生dialog管理焦點與背景互動
- 幾何
- position:fixed；閱讀面板最大760，桌面外側至少24、手機16；padding40／24；圓角24；內容內部捲動、關閉鈕保持可見。
- 行為
- Esc／關閉鈕／點背景關閉，返回開啟控件且preventScroll；開關前後背景scrollY不變。
- 狀態
- Closed／Opening／Open／Closing；面板維持固定位置與尺寸，只做160ms ease-out淡入／淡出，不縮放或位移。開啟途中關閉會從當下透明度反向，重複關閉不重啟。Reduced Motion直接切換。
05 · 檢查順序
- 三種層級、三種背景的預設與互動狀態。
- 按住、移出：控件是否原地、反白是否跟著命中範圍。
- 鍵盤Tab：焦點表面是否清楚，停用是否跳過。
- 連點儲存：尺寸不變，完成次數只加一。
- 開關對話框：原閱讀位置不變，焦點回到開啟按鈕。
- 手機寬度與系統減少動態。
待你檢查的是規格與手感。這不是已通過使用者驗收的定版；未使用的元件也未宣稱已完成。