前言

優秀的介面設計不僅關乎美觀，更關乎轉換率、信任感與使用者留存。本文整理 frog 等機構實務經驗，提煉 75 條核心原則，分上下兩篇刊載。上篇涵蓋佈局、說服心理、互動模式、表單設計、信任建立與視覺細節等 40 條原則。

佈局與資訊架構 (1-3)

1. 單欄佈局優於多欄

單欄引導視線流向清晰，敘事連貫，行動裝置天然適配。多欄易分散注意力，造成決策癱瘓。做法：用邏輯敘事串聯內容，末端置入主要 CTA。

2. 禮品誘惑優於生硬推銷

贈送禮品/優惠啟動「互惠原則」，降低防備心理，提升後續轉換。關鍵：禮品需具真實價值、與核心產品相關、無隱形條件。

3. 合併重複功能避免碎片化

隨時間增長，介面易出現功能重複的模組。碎片化增加學習曲線。做法：定期稽核、重構，合併同質功能，建立統一設計系統。

信任與社會證明 (4)

4. 使用者評價優於自吹自擂

真實用戶見證 (含姓名、頭像、具體數據、影片) 遠比廠商宣稱可信。進階：提供可驗證的第三方平台評價連結、案例研究 PDF。

行動召喚按鈕 (CTA) 設計 (5-6)

5. 重複主要 CTA

長頁面/分頁流程中，每個決策點都放置主要 CTA，減少使用者往返滾動成本。

6. 明確區分可點擊、已選、純文字三種狀態

視覺線索：顏色、深度、對比度。慣例：藍色 = 可點擊、黑色/深色 = 已選/當前、灰色 = 停用/純文字。全站保持一致。

決策簡化策略 (7)

7. 給出推薦而非讓使用者獨自選擇

選項過多導致「決策癱瘓」。高亮預設/推薦方案 (如「最受歡迎」、「專家推薦」)，引導決策，仍保留自主選擇權。

錯誤容忍與操作流暢度 (8)

8. 復原功能優於確認對話框

確認框打斷心流、質疑使用者智商。撤銷 符合人類本能、操作流暢。僅在不可逆高風險操作 (刪除帳號、付款) 使用確認框。

產品定位與語氣 (9-10)

9. 精準定位目標族群而非面面俱到

精準定位雖縮小潛在池，但建立專業權威與信任，吸引高價值種子用戶。

10. 直接果斷的文案優於猶豫試探

避免「也許」、「感興趣嗎？」、「要不要試試？」改為「開始免費試用」、「立即獲得報價」。適當保留留白讓用戶思考，但核心 CTA 必須堅定。

視覺層次與對比 (11-12)

11. 介面對比鮮明，重點一眼可見

手法：明暗對比、陰影/漸層建立層次、互補色 (色相環對向) 凸顯主視覺。目標：主要意圖與背景元素明顯區隔。

12. 個性化表達優於千篇一律

真實照片、創辦人簽名、產地故事、團隊介紹 — 建立情感連結，隱性提升品牌聲譽。

表單設計黃金法則 (13-14)

13. 極度精簡表單欄位

每個欄位都流失用戶。嚴審必要性：能否稍後收集？能否自動填入？能否用第三方登入替代？長表單拆分多步驟，顯示進度條。

14. 直接暴露選項而非隱藏在下拉選單

下拉選單隱藏資訊、增加點擊成本。關鍵選項 (2-5 項) 用單選鈕/分段控制直接顯示。下拉保留給「日期、國家、已知有限選項」等慣用場景。

敘事與流程設計 (15-16)

15. 環環相扣的敘事優於平鋪直敘

長頁面設「小節」，以懸念、利益點、社會證明串聯，引導繼續閱讀。節與節留白適中，避免斷裂感。

16. 克制連結數量，避免分散注意力

主要目標若是「下載按鈕」，移除無關導航/外部連結。導航與操作連結用樣式區分，保持單一視覺焦點。

狀態可見性 (17)

17. 即時呈現操作狀態/進度

郵件已讀/未讀、帳單已付/未付、上傳進度條、同步狀態圖示。讓用戶知曉結果、預判下一步，降低焦慮。

按鈕文案心理學 (18)

18. 獲利導向按鈕優於功能導向

「幫你省錢」>「立即註冊」。獲利文案可放按鈕旁，不必擠進按鈕內。功能型按鈕用於高頻重複操作 (如「儲存」、「下一步」)。

互動模式創新 (19-20)

19. 就地操作優於脫離上下文的選單

列表項操作按鈕置於項目上；點擊地址直接編輯；拖曳排序。減少「選中 → 找按鈕 → 點擊」的認知負荷。

20. 直接顯示表單優於彈窗/跳轉

寬屏下直接呈現註冊表單：減少點擊、預設預期 (表單不長)、降低放棄率。適用於簡單表單 (≤5 欄位)。

動畫與微互動 (21)

21. 平滑過渡優於生硬切換

淡入/出、縮放、位移加上 transition: 150-300ms ease。動畫不可過長 (>400ms 會讓急性用戶不耐)。

引導式註冊 (22)

22. 漸進式體驗優於強制註冊

讓用戶先體驗核心價值 (試用、預覽、個性化設定)，價值感知建立後再引導註冊。降低門檻、提高完成率。

視覺雜訊控制 (23)

23. 減少邊框，用留白/背景色/對齊分組

邊框喧賓奪主、分散注意力。用 gap、background、text-align 區隔區塊。所見即所得工具易過度拖拉區塊，改用垂直對齊系統。

利益導向文案 (24)

24. 展示「帶來的好處」而非「產品特性」

用戶關心：愛、金錢、認同、自由時間。將特性轉譯為利益：「128GB 記憶體」→「裝下 4 萬張照片，旅行隨拍不擔心」。

空狀態設計 (25)

25. 精心設計「零資料」狀態

初次使用見到空白頁會困惑。空狀態應：引導建立第一筆資料、展示範例、說明核心價值、提供模板/快速啟動按鈕。

預設值策略 (26-28)

26. 善用預設選項 (倫理邊界內)

預設為「同意/啟用」提高採納率。倫理考量：用雙重否定或模稜兩可措辭降低強迫感，或提供明確「拒絕」同等顯眼。

27. 保持介面一致性，降低學習成本

操作模式、視覺語言、術語全站一致。適度打破一致性 可強調關鍵差異 (如危險操作用紅色破壞常規)。

28. 智慧預設值減少輸入負擔

地理位置自動填城市、根據時區預設提醒時間、根據裝置預設語言/幣別。每個預設值為用戶省下一次決策。

慣例與創新平衡 (29)

29. 遵循慣例避免重複造輪子

右上角 × 關閉、Logo 連首頁、購物車右上角、下拉選單向下展開。打破慣例需有明確理由 (更好、更快、更無障礙) 且經過測試驗證。

損失厭惡心理應用 (30)

30. 強調「避免失去」優於「獲得新利益」

心理學證實：損失厭惡係數約 2:1。文案：「別再浪費 3 小時手動整理」>「省下 3 小時」。保險業經典話術：「保障您辛苦累積的資產不受損」。

視覺層次與可讀性 (31-32)

31. 層次分明的圖形化優於平鋪文字

對齊、間距、顏色、縮進、字重、字體大小、元素尺寸 — 七大視覺變數建立層次。層次分明讓眼睛有停留點，引導閱讀節奏。

32. 相關功能分組，避免雜亂

刀叉放一起、開關檔放一起。符合心智模型，降低尋找成本。Gestalt 近接律、相似律、連續律指導佈局。

表單即時驗證 (33)

33. 行內即時驗證優於送出後報錯

輸入即檢查、即時顯示綠勾/紅叉 + 具體修正建議。避免「送出 → 錯誤頁 → 返回 → 修正」的挫折循環。

輸入寬容度 (34)

34. 寬鬆輸入格式，後端/前端自動標準化

電話號碼接受：(02)1234-5678, 02-12345678, 0212345678, +886212345678。開發者多寫幾行正規化代碼，換來百萬用戶零挫折。

緊迫感與稀缺性 (35-36)

35. 適度緊迫感催化決策

倒數計時、限量庫存、限時優惠。暗示資源稀缺、機會成本。合法合規前提下使用，避免虛假倒數損信譽。

36. 饑餓行銷製造稀缺感

「僅剩 3 名額」、「今日結束」。數位產品雖無實體庫存，可限制「服務名額」、「研討會席位」、「Beta 邀請碼」。

辨識優於回憶 (37)

37. 讓用戶從選項中辨識，而非腦海回憶

下拉選單/自動完成/標籤雲/歷史記錄 — 讓用戶認出而非憑空回想。選擇題比問答題快的同理。

點擊熱區放大 (38)

38. 擴大可點擊區域 (Hit Area)

Fitts 定律：目標越小、越遠，點擊時間越長。行動裝置最小 44×44pt。技巧：padding 擴大、::before 擴展熱區、label 包裹輸入框。

效能即體驗 (39)

39. 極致優化載入速度，心理學緩解等待焦慮

技術優化：壓縮、快取、CDN、關鍵 CSS 內聯、程式碼分割。心理緩解：進度條、骨架屏、趣味文案/插畫、預載下一頁資源。

鍵盤快捷鍵 (40)

40. 除滑鼠操作外提供鍵盤捷徑

高階用戶依賴效率。通用鍵：J/K 上下、/ 搜尋、? 說明、Esc 關閉。Gmail、Twitter、Notion、Linear 皆採用。

下篇預告

下篇將涵蓋：行動裝置適配、無障礙設計、國際化/本地化、錯誤處理、引導流程、個人化、資料視覺化、效能感知、設計系統治理等 35 條進階原則。