模式是廣泛適用的解決一般問題的解決方案。與此相反：

• 指南：具體規則
• 原則：指南的概念型框架

在開發應用程序過程中，無論是面對抽象還是實際問題，模式都大有用處。

它們是解決問題的模板。而標準屏幕模式對于優秀的Web程序甚至企業級軟件都很有幫助。

摘要/細節（Master/Detail）

摘要/細節模式可橫向也可豎向。該模式是滿足用戶既停留在一個頁面又可瀏覽多個條目需求的典范。

橫向

縱向

典型的摘要面板包含：

• 列表

• 樹

• 折疊板

• 表格

而細節面板可能是一個：

• 文本
• 小圖片/圖標（icons）
• 表格
• 圖表

• 表單

最佳實踐

顯示主窗格的數據量，例如：Inbox(34)

左邊使用列表、樹、表格等組件的時候，最好包含其標準的操作（添加、刪除、重命名、拖放等）

不要在摘要或者細節板塊中使用tabs（標簽)

在摘要板塊顯示更多的信息，例如主題或者描述，橫向布局是一個不錯的選擇。

最佳實踐

不要把面板底部當作表格的編輯區?？梢允褂肧preadsheet模式代替，或者一個高亮顯示的層來作為編輯區。

分列瀏覽（Column Browse）

該模式可橫可豎。該模式適用于用戶可以從很多入口點導航到他們需要的地方。

縱向

橫向

豎直的條目結構通?？蔀椋?/p>

• 列表
• 分列表
• 樹
• 折疊板

通常3-4欄，往往包含一個全局的搜索模塊

最佳實踐

只在第一列顯示有子節點項目

在標簽中加上它所顯示的條目數量

很多運用這種模式的程序都提供了一個備用的導航接口，比如樹、小圖標或者表格視圖。

當每個細化列中有很條目很少（少于20個），而且在細節框中有表格或者圖形的內容，水平布局是更好的選擇。

搜索/結果（Search/Result）

搜索/結果模式可以很簡單，也可以很復雜。對于用戶需要直接快速的定位所需條目或者設置條目的特殊規則是非常有用，高效的用戶體驗。

簡單搜索

高級搜索

通常，結果顯示為：

• 列表
• 表格（只讀/可編輯）
• 小圖標
• 地圖

搜索返回的數據：

• 默認排列方式
• 默認分組方式

除了簡單的顯示最初搜索結果，一般還會附加一些搜索的條件和完善的功能。

最佳實踐

除了顯示一個簡單的搜索框，最好框內包含”key words”字樣。

提供便捷的清楚搜索結果的方式（一點完成）。

在同一屏下顯示搜索結果。

在企業級運用中通常需要高級的搜索。

高級搜索通常包含如如下一個或者多個功能：

• 多條件搜索
• 自定義搜索（可保存）
• 可定制范圍搜索
• 保存搜索條件
• 保存搜索結果

• 多次搜索組合到一個列表

最佳實踐

在同一個屏幕上提供高級的搜索條件，NO 彈出框或者分屏。

不要讓用戶預設搜索域，可按需求設置一個附加功能。比起放在搜索框后面的下拉類表，將其整合到搜索框內更加完美。

數據過濾（Filter Dataset）

橫縱向皆可，適于用戶過濾已知的的數據，或者進一步過濾搜索數據。

縱向

橫向

過濾塊通常有以下這些組件構成：

• 文本框
• 滑塊
• 復選框
• 列表框
• 間隔列表框UI
• 日期范圍選擇器

最佳實踐

動態的過濾結果（無提交按鈕），可以使用一個定時器實現。

突出“Clear all filters”按鈕

左側過濾區最好不要使用多個可折疊板

水平布局給結果顯示提供了更大的寬度。這種方式便于在簡單搜索下面結果集上面擴展一個高級搜索。

Roost和Omio嘗試標簽化區分不同的類的過濾條件。然而，缺點在于用戶不能同時看到所有的過濾條件。

最佳實踐

如果用戶搜索過濾后得結果為空，非常有必要給用戶一個清楚的反饋和回復選項。

不要為了節約一套過濾而添加新的功能。這個可以考慮用搜索（高級搜索）模式

表單（Forms）

任何表單設計都需要對可用性設計和最佳實踐有深刻的理解，請參考Luke Wroblewski的書《Web Form Design：Filling in the Blanks》

最佳實踐

通常為左對齊一列式。

Label放在上邊或者左邊；在整個應用中保持一致的結構。

左對齊命令按鈕。

標注清楚必填域。

為用戶的每個操作給出清晰的反饋

給出清楚的錯誤信息和幫助

參考37signals的《Defensive Design for the Web》

調色板/畫布（Palette/Canvas）

很少被正確使用的模板，但是它是唯一在文檔制作和設計中使用的模式：

• 線性或非線性工序
• 流程圖
• 屏幕布局
• 任何受到實際大小約束的設計或圖表

最佳實踐

提供明確的“空白狀態”信息來說明開始

提供模板

按類型組織調色板中的對象，盡量可視化

提供可視的網格選項便于點擊

提供撤銷和重做功能

提供一個項目管理區來管理畫布（分組，復制，編輯以及刪除畫布）

儀表盤（Dashboard）

儀表盤是一個被嚴重濫用的模式，一個優秀的儀表板提供：

• 關鍵信息一覽

• 實時數據
• 易讀的圖表
• 明確的切入點

這不是簡單一屏度量就可以實現的（一個大的表格或者簡單一堆圖表）

高度定制化無法取代用戶研究和測試

設計最佳實踐

1. 選擇要顯示的數據
2. 依照實際用戶確認
3. 刪掉一半
4. 再次依照用戶確認剩下的元素
5. 選擇組件和布局，創建3-4方案用于測試
6. 全部修訂——關鍵是數據

電子表格（Spreadsheet）

電子表格模式允許用戶便捷的瀏覽修改和鍵入（大量）數據信息來提高用戶體驗

需提供以下功能：

• 標準的表格功能：分類，顯示/應藏列，重排列，分組
• 重做/撤銷
• 添加，插入，刪除行

• 鍵盤導航
• 導入導出

最佳實踐

從視覺上區分可編輯表格（沒有斑馬線）和只讀表格（使用斑馬線）。

指明哪些列可編輯，計算，和/或

不要進行多行或多單元格編輯——單擊即可編輯單個單元格或單行

點擊行或者單元格才顯示編輯器

出錯信息提醒

向導（Wizard）

對于引導用戶進行一些復雜的不常見的工作流程，該模式能有效的提高用戶體驗。

最佳實踐

最小化步驟

如果超過五步，在任務層分組，不要編號（類似于亞馬遜的購物車）

清晰的說明每個步驟

只在一些不常見的工作流程中使用該模式：設置、安裝、修復、填寫復雜的申請或者表單、提供給有經驗用戶選擇性推出

顯示正在進行的步驟，允許用戶“回退”到上一步

Q&A（Question&Answer）

該模式下，用戶可輸入已知的信息來獲得解決方法。

QA模式和搜索模式不一樣的地方在于前者在用戶不熟悉的地方提供一些可能的選項和建議。

例如，“我需要一個合適的抵押貸款”，與下個星期五訂一張從AUS到JFK的機票不一樣，當我看著搜索出來的抵押貸款的結果，缺乏專業知識來對比選擇搜索結果。QA模式可以根據我在提問板塊提供的信息來給出最佳的選擇。

最佳實踐

在問題模塊允許用戶指定其目標（超過十年以上的房屋居住權，低扣稅，高醫保（co-pay））

提供回答的評價：贊成/反對

平行板? is OK？=平行板：折疊板（Parallel Panels）

平行板模式有折疊（每次顯示一個項目）和展開（一次顯示所有項目）狀態。這種模式易于用來組織相似互相依賴的的多塊信息，一屏顯示大量信息。

最佳實踐

把折疊板放在左下角，把目標放在屏幕的上面、下面或者右邊。

用對比和邊距來突出折疊板，和屏幕下邊緣保持一定的距離

整個面板都可點擊，不單單是文本塊

三到五個面板為佳

展開模式的平行板被應用在：

• 需要同時顯示所有工具的程序
• 對話框-可折疊面板比起tabs標簽，用戶更加易于操作

最佳實踐

如果項目有層次或連續的關系，那折疊板模式就不適合了，可以試試摘要/細節或者向導模式

不能嵌套

互動模型（Interactive Model）

有很多和關鍵對象（一個日歷，地圖，圖，表，畫布）聯系的可交互元素是互動模式的特點。一個理想的用戶體驗模型，與用戶的心理模型緊密結合。

該模式可候選：

• 日歷

• 地圖
• Gantt 圖標
• 假定情景（包括計算表）

• WYSIWYG 編輯器（包括圖形編輯器）

最佳實踐

用戶可快速獲得交互對象（批量加載，少量問題，模板，合理的默認設置）

避免彈出窗口，直接互動最佳，拖動，縮放，刪除，雙擊創建……

源地址：http://island205.coolpage……ge.biz/?p=191