設計原則

自然 | Natural

• 遵循實體世界直覺，讓數位互動如呼吸般本能
• 實現路徑
  • 生物動效：組件過渡模擬自然運動（彈性/阻力曲線） 例：彈跳窗出現速率 300ms + 緩動 cubic-bezier(0.2, 0.8, 0.4, 1)
• 空間隱喻
  • 層級深度以陰影透明度對應（每級 opacity +4%）
  • 拖曳操作觸發質量感應（移動速度隨元素面積遞減）
• 現實物理
  • 全域光概念，避免光源混亂，如投影角度
  • 現實視覺距離，按鈕懸停代表懸浮，點擊代表按壓，懸浮時離人眼更近顏色較淺；按壓時離人眼更遠，顏色更深。
  • 物體容器化，透過卡片將內容承載起來

預見性 | Predictive

• 通用知識
  • 基於通用知識，使用戶可以對操作有預見性。即：操作前可以輕易知道會發生什麼，減少操作測試，並增強使用者對產品的掌控感。
• 操作閉環
  • 達到使用者互動三要素：操作前有預知，操作時有感知，操作後有回饋

回饋 | Responsive

保證訊息對使用者的互動回饋，並區分互動回饋的優先順序和強度。

一致性 | Consistent

三維統一體系

• 互動層：
  • 全域導覽列固定左置（西語系RTL則右置）
  • 確認/取消按鈕順序依OS規格（iOS右確認，Android左確認）
• 視覺層：
  • 建立「間距階梯」：4/8/12/16/24/36px 六階模數
  • 圖標家族線寬統一
  • 數位特殊字體使用
• 認知層：
  • 相同功能詞全平台統一（如「收藏」≠「關注」）
  • 英文格式書寫規範
  • 錯誤代碼映射標準話術庫

突出 | Prominent

• 關鍵操作區施加「視覺重力」，如微光、懸浮等
• 動態降級
  • 非核心功能折疊至「···」選單
  • 滾動時隱藏全域導航，上滑浮現

降噪 | Minimal

• 認知減負策略
• 資訊密度公式：
  • 界面元素數 ≤ 7 ± 2（米勒定律）
• 三色原則：
  • 主色（品牌色）佔8%
  • 輔助色（狀態色）6%
  • 強調色（危險操作）2%
• 動態清理規則：
  • 使用者停留≤3秒的頁面移除裝飾元素
  • 同一視圖僅允許1個動畫焦點

人性化 | Human-Centered

• 用缺陷思維設計完美體驗
• 拒絕冰冷的人機交互
  • 讓提示語充滿人情味

遵從與引導 | Adaptive Guidance

• 遵從
  • 遵從大眾心理與行為習慣
  • 理解小眾心理和行為習慣
• 引導
  • 引導使用者專注產品核心目標不偏移
  • 引導使用者在產品區間思考
  • 引導使用者達到產品目的