複雜是介面的天敵。功能越加越多、選項越塞越滿，使用者反而越不會用。簡化不是「砍功能」，而是把複雜度藏到對的地方、在對的時機才揭露。本章把幾條簡化原則轉化為前端可以落實的做法。

最實用的一招：減少、組織、隱藏（SHE）#

面對一個複雜的介面，依序問三個問題：

flowchart LR
    A[複雜的介面] --> B{能不能拿掉?}
    B -- 能 --> R[Reduce 減少]
    B -- 不能 --> C{能不能分組?}
    C -- 能 --> O[Organize 組織]
    C -- 不能 --> H[Hide 隱藏]
    R --> Z[更簡單的介面]
    O --> Z
    H --> Z

• Reduce（減少）：能拿掉的就拿掉。最簡單的選項、最少的步驟、最短的表單。
• Organize（組織）：拿不掉的就分組。把相關的功能聚在一起，減少看起來的數量。
• Hide（隱藏）：不常用的就藏起來，需要時才出現。

漸進揭露（Progressive Disclosure）#

大多數使用者只會用到少部分功能。 與其把所有選項一次攤開，不如預設只顯示最常用的，把進階功能收在「更多設定」後面。

前端常見的漸進揭露手法：

<!-- 用原生 details 收納進階選項，不需要 JavaScript -->
<form>
  <label>Email <input type="email" /></label>

  <details>
    <summary>進階設定</summary>
    <label>暱稱 <input type="text" /></label>
    <label
      >時區
      <select>
        …
      </select></label
    >
  </details>
</form>

• 長表單拆成多步驟（stepper），一次只問一組問題，降低認知負荷。
• 不常用的操作收進「⋯」選單，而非全部攤在工具列。

好的預設值就是一種簡化#

每要使用者做一個決定，就是一次摩擦。 提供合理的預設值，讓多數人「什麼都不選」也能得到好結果，是最有效的簡化。

// 預設值讓常見情境「免設定」即可運作
function createUploader({
  maxSize = 5 * 1024 * 1024, // 預設 5MB
  accept = "image/*",
  multiple = false,
} = {}) {
  // 一般使用者直接 createUploader() 即可
}

自動偵測（語言、時區、深色模式）、記住上次選擇、智慧推薦，都是「替使用者先做決定」的簡化策略。

用回饋來「縮短」感受到的時間#

等待是一種複雜感。同樣的載入時間，有沒有回饋，體感差很多。

/* 骨架屏：用動畫佔位，暗示「內容正在來」 */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

樂觀更新（Optimistic UI）：使用者按下「按讚」時，先立刻把畫面改成已讚的狀態，再背景送出請求；失敗才回滾。使用者感受到的是「瞬間完成」，而非「等網路來回」。

信任也來自簡化#

危險操作要刻意「不簡單」，避免誤觸；安全操作則要盡量「一鍵完成」。

/* 危險操作：用顏色與位置降低誤觸 */
.btn-danger {
  color: #fff;
  background: var(--color-danger, #dc2626);
}

• 刪除、付款等不可逆操作，加一道確認，並把確認文案寫清楚（「確定刪除 3 個檔案？」而非「確定？」）。
• 提供「復原」往往比「事先確認」體驗更好——讓使用者大膽操作，犯錯能救回來。

小結#

簡化的核心不是「東西變少」，而是讓使用者在每個當下，只需要面對剛好夠用的資訊與選擇。

• SHE：先想能不能減少，再想能不能組織，最後才隱藏。
• 漸進揭露：預設顯示常用，進階收起來。
• 好預設值 > 多選項。
• 用回饋（骨架屏、樂觀更新、進度）縮短體感等待。
• 危險操作加摩擦，安全操作去摩擦；能復原就別只靠確認。