前言：為什麼文字交互值得精心設計？

文字佔據網頁 90%+ 信息量，卻常被視為靜態排版對象。精心設計的文字交互（Hover、Focus、Click、Drag）能：

• 降低認知負荷：明確可點擊性、狀態反饋
• 提升愉悅感：微動效創造「被理解」的順滑體驗
• 強化品牌調性：獨特的文字行為成為品牌記憶點
• 引導轉化：CTA 按鈕、鏈接的交互設計直接影響點擊率

一、文字顏色規範：交互的視覺基石

原則	建議值/做法	理由
主文字色	單一主色 + 最多 2 輔助色	建立視覺層級，避免色彩雜亂
正文色值	#333333 ~ #666666（深灰），或明度 ≤ 30% 的品牌色	確保長文閱讀對比度（WCAG AA 級）
鏈接藍色	專用於超鏈接，其他場景慎用	用戶心智模型：藍色+下劃線=可點擊
整體配色	規範服務於系統，靈活變通但保持一致性	品牌識別 > 僵化規範

二、四大經典文字交互模式解析

1. 顏色變化 + 下劃線：鏈接識別的雙重保險

• M&M's 活動站：按鈕內圖標自帶動態，Hover 時文字色+圖標同步變色，強化「可點擊」心理暗示，兼具號召力。
• Apple 官網：極簡風，Hover 僅出現同色下劃線，右側箭頭暗示導航方向。無顏色變化也能清晰傳達交互態。
• 設計啟示：顏色變化適合營銷/活動頁（高激勵），下劃線適合工具/內容型站點（低干擾）。

2. 懸停揭露新信息：決策輔助型交互

十年後網站 分類導航：初態乾淨只顯分類名；Hover 時文字上移，露出熱度指標（如「熱門」「新品」）。

• 降低決策成本：用戶無需點入即可掌握分類熱度
• 保持界面乾淨：非交互時不佔用視覺帶寬
• 動效邏輯：transform: translateY(-100%) + opacity 過渡，300ms ease-out

3. 按鈕狀態翻轉：微趣味的品牌時刻

AnyForWeb「關於我們」：紅框紅字 → Hover 白字紅底填滿。經典「鬼按鈕」轉「實心按鈕」模式，細節處見品牌調性。

4. 文字級微動效庫：字符級、單詞級、行級動畫

四個典型 Hover 效果啟發：

• 字符逐個浮現/位移：適合標題強調，span 包裹每字 + transition-delay 錯開
• 底線從中心/兩側展開：SVG stroke-dashoffset 或偽元素 width: 0 → 100%
• 文字剪切換色：background-clip: text + 漸變背景動畫
• 3D 翻轉/透視變換：transform-style: preserve-3d + rotateX/Y

三、實戰檢查清單：從「能動」到「好用」

1. 無障礙優先：:focus-visible 樣式 ≥ :hover，鍵盤用戶同等體驗；prefers-reduced-motion 媒體查詢尊重用戶動效偏好。
2. 性能預算：動效屬性限於 transform/opacity/color（合成器線程處理），避免 width/height/top/left 觸發佈局重排。
3. 語義一致：交互行為匹配 HTML 語義（<a> 導航、<button> 操作、<label> 切換）。
4. 觸屏降級：移動端無 Hover，關鍵信息必須可見或通過 @media (hover: none) 顯式展示。
5. 國際化預留：文字長度變化（德文+30%、日文-20%）不破壞動效邏輯，使用相對單位（em/ch）而非固定 px。

四、工具鏈推薦

• 設計端：Figma Prototype（Smart Animate）、Principle、Jitter、LottieFiles
• 開發端：CSS 原生 + @keyframes、Framer Motion (React)、GSAP、Motion One (Vue/Svelte/Vanilla)
• 檢測：Chrome DevTools Rendering 面板（Paint flashing、Layout shift）、Lighthouse 無障礙審計

「最好的文字交互，是用戶甚至沒意識到它的存在——它只是讓一切感覺『順手』、『自然』、『對了』。」