對於交互設計師而言，在繪製線框圖與原型時，若能熟練掌握常見的 Web 設計模式，無疑能事半功倍。所謂「心中有數」，才能創造出既符合需求、又讓用戶易學易用的介面。正如「不必重複發明輪子」，成熟的設計模式往往能輕鬆解決常見問題，正確套用模式更能幫助用戶快速熟悉介面、提升操作效率。

十二大經典 UI 設計模式解析

以下整理了十二種核心 UI 設計模式，並輔以實例說明，助您在面對不同需求時，能精準選擇最適合的方案。

01. 主體/細節模式

此模式分為橫向與縱向兩種佈局。若希望用戶在同一頁面內，於類目間高效切換，這是理想之選。當主體資訊佔據核心地位，或主體條目眾多且資訊豐富時，橫向佈局更為合適；反之，若細節內容需更大顯示空間，縱向佈局（如 Windows 檔案總管）則更具優勢。

實例： Mac Mail 採用橫向佈局，左側郵件列表為主體，右側郵件內容為細節；Windows 視窗屬性則常採用縱向排布。

02. 分欄瀏覽模式

同樣分橫向與縱向。用戶可透過逐級選擇類別，層層深入尋找所需資訊。Outlook 的郵件操作即為典型：收件箱 → 特定郵件 → 郵件內容，清晰呈現層級關係。

03. 搜索/結果模式

針對追求快速、直觀獲取結果的用戶，此模式極為便捷。從簡單的關鍵字搜尋到複雜的高級搜尋均適用。Gmail 的簡易搜尋與 Google 學術的高級搜尋限定條件，分別滿足了不同層級的查找需求。

04. 過濾數據組模式

用戶先進行模糊搜尋，再透過面板提供的條件（如發布時間、薪資、品牌等）進一步篩選優化結果。51job 採用縱向左側面板，京東等電商則常用橫向頂部篩選欄，兩者各有千秋。

05. 表單模式

表單類型繁多，是體現用戶體驗優劣的關鍵環節。設計時需注意標籤對齊、輸入驗證、錯誤提示等細節。推薦參閱《Web Form Design: Filling in the Blanks》一書。註冊頁、設置頁皆為典型應用場景。

06. 調色盤/畫布模式

雖非最常見，但對於繪圖、流程圖、頁面佈局等創作類應用不可或缺。Axure、Photoshop 等專業軟件皆採用此模式：左側/右側為工具調色盤，中間為畫布工作區。

07. 儀表盤模式

優秀的儀表盤需提供：一目了然的關鍵指標、即時數據、易讀的圖表與操作、清晰的導航入口。在有限螢幕空間呈現複雜數據極具挑戰，需極致精簡。作者曾為蘇寧電器設計門店銷售實時監控儀表盤，即屬此類。

08. 電子表格模式

適合需快速瀏覽、編輯大量結構化數據的場景。需支援排序、隱藏/顯示欄位、拖拽調序、分組、全局撤銷/重做、鍵盤導航、導入導出等功能。淘寶購物車即巧妙運用此模式，讓用戶高效修改商品數量、刪除項目。

09. 向導模式

針對複雜或低頻操作流程（如首次付款、複雜設置），向導能分步引導用戶完成任務，降低認知負荷。京東付款流程即採用此模式，逐步引導新用戶完成支付。

10. 問答模式

不同於搜尋，問答模式基於對用戶狀況的了解，透過一系列問題引導用戶找到適合的方案。適用於保險選擇、貸款規劃、套餐推薦等決策輔助場景。上海移動資費導購系統即透過幾個問題推薦話費套餐。

11. 平行面板模式

面板可摺疊（單顯示）或展開（並列顯示），適合組織大量相似或相互關聯的資訊，讓用戶在單頁高效獲取。The Train.com 火車票編輯介面即採用堆疊面板，避免頁面跳轉帶來的迷失感。

12. 交互模型模式

應用於日曆、地圖、圖表、畫布等需深度交互的核心元件，旨在讓介面操作貼近用戶心智模型，提供直觀、自然的操作體驗。

靈活運用這些模式，並非生搬硬套，而是根據業務場景、用戶目標、內容屬性進行組合與創新，方能設計出真正好用的產品介面。