前言
在設計與實作 UI 時，常常會遇到這樣的情況：「這個互動叫什麼名字來著？」「類似的模式很多，到底該用哪一個才好？」
因此這次我將UI 設計模式與說服式設計模式，依照使用情境分類，並以樹狀結構整理如下。
適合閱讀對象
- 前端工程師・UI 工程師
- UI 設計師・UX 設計師
- 「知道模式名稱，但還沒有整理過」的人
本文的使用方式
- 作為實作時的字典：「想實作這種動作」→ 確認對應的模式名稱
- 作為設計時的檢查清單：確認是否有漏掉某些模式
- 作為評審與討論時的共同語言：團隊可以一起說「這是〇〇模式」
關於兩種模式
| 類別 | 說明 |
|---|---|
| UI 設計模式 | 為了提升 UX，在互動或畫面結構上常見的標準模式 |
| 說服式設計模式 | 活用人類的認知與心理，促使使用者採取行動的模式 |
補充：各模式的具體實作，常可在 MUI、Ant Design、Shadcn/ui 等元件函式庫中找到對應元件。函式庫僅是實作手段的一種。
📋 目錄
UI 設計模式
取得輸入 (Getting Input)
-
Forms（表單）
- Drag and Drop（拖放）
- Structured Format（結構化格式）
- Keyboard Shortcuts（鍵盤快捷鍵）
- Rule Builder（規則建構器）
- Captcha（驗證碼）
- Inplace Editor（就地編輯器）
- Morphing Controls（變形控制項）
- Password Strength Meter（密碼強度表）
- Fill in the Blanks（填空）
- Input Feedback（輸入回饋）
- WYSIWYG（所見即所得編輯器）
- Calendar Picker（日期選擇器）
- Autosave（自動儲存）
- Preview（預覽）
- Expandable Input（可展開輸入）
- Forgiving Format（寬容格式）
- Settings（設定）
- Input Prompt（輸入提示）
- Undo（復原）
- Good Defaults（良好的預設值）
-
Explaining the Process（流程說明）
-
Community Driven（社群驅動）
導覽 (Navigation)
-
Tabs（分頁）
-
Jumping in Hierarchy（階層跳轉）
-
Menus（選單）
-
Content（內容）
資料操作 (Dealing with Data)
-
Tables（表格）
-
Formatting Data（資料格式化）
-
Images（圖片）
-
Search（搜尋）
社交 (Social)
-
Reputation（聲譽）
-
Social Interactions（社交互動）
其他 (Miscellaneous)
-
Shopping（購物）
-
Increasing Frequency（提高頻率）
新手引導 (Onboarding)
-
Guidance（引導）
-
Registration（註冊）
說服式設計模式
認知 (Cognition)
-
Loss Aversion（損失規避）
-
Other Cognitive Biases（其他認知偏誤）
-
Scarcity（稀缺性）
遊戲機制 (Game Mechanics)
-
Gameplay Design（遊戲玩法設計）
-
Fundamentals of Rewards（獎勵基礎）
-
Gameplay Rewards（遊戲玩法獎勵）
知覺與記憶 (Perception and Memory)
-
Attention（注意力）
-
Comprehension（理解）
回饋 (Feedback)
- Timing（時機）
社會偏誤 (Social Biases)
- Authority Bias（權威偏誤）
- Liking（喜好）
- Retaliation（報復）
- Role Playing（角色扮演）
- Self-Expression（自我表達）
- Reciprocation（互惠）
- Social Proof（社會認同）
- Positive Mimicry（正向模仿）
- Cognitive Dissonance（認知失調）
- Commitment & Consistency（承諾與一致性）
- Reputation（聲譽）
- Halo Effect（光環效應）
- Nostalgia Effect（懷舊效應）
- Competition（競爭）
- Autonomy（自主性）
- Status（地位）
- Noble Edge Effect（高尚邊緣效應）
📚 參考連結
資源網址UI Patternshttps://ui-patterns.comMUI (Material UI)https://mui.com/material-ui/Ant Designhttps://ant.design/components/overview/TanStack Tablehttps://tanstack.com/table/latestReact Hook Formhttps://react-hook-form.comdnd kithttps://dndkit.comFloating UIhttps://floating-ui.comTiptap Editorhttps://tiptap.devDriver.js (Tour)https://driverjs.comSwiperhttps://swiperjs.com---
祝你有美好的一天！
原文出處：https://qiita.com/TOMOSIA-HieuNT/items/5644ff9243ebcdaf08a3
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
