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

• 指南：具體規(guī)則
• 原則：指南的概念型框架

在開發(fā)應(yīng)用程序過程中，無論是面對抽象還是實(shí)際問題，模式都大有用處。

它們是解決問題的模板。而標(biāo)準(zhǔn)屏幕模式對于優(yōu)秀的Web程序甚至企業(yè)級軟件都很有幫助。

摘要/細(xì)節(jié)（Master/Detail）

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

橫向

縱向

典型的摘要面板包含：

• 列表

• 樹

• 折疊板

• 表格

而細(xì)節(jié)面板可能是一個：

• 文本
• 小圖片/圖標(biāo)（icons）
• 表格
• 圖表

• 表單

最佳實(shí)踐

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

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

不要在摘要或者細(xì)節(jié)板塊中使用tabs（標(biāo)簽)

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

最佳實(shí)踐

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

分列瀏覽（Column Browse）

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

縱向

橫向

豎直的條目結(jié)構(gòu)通?？蔀椋?/p>

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

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

最佳實(shí)踐

只在第一列顯示有子節(jié)點(diǎn)項(xiàng)目

在標(biāo)簽中加上它所顯示的條目數(shù)量

很多運(yùn)用這種模式的程序都提供了一個備用的導(dǎo)航接口，比如樹、小圖標(biāo)或者表格視圖。

當(dāng)每個細(xì)化列中有很條目很少（少于20個），而且在細(xì)節(jié)框中有表格或者圖形的內(nèi)容，水平布局是更好的選擇。

搜索/結(jié)果（Search/Result）

搜索/結(jié)果模式可以很簡單，也可以很復(fù)雜。對于用戶需要直接快速的定位所需條目或者設(shè)置條目的特殊規(guī)則是非常有用，高效的用戶體驗(yàn)。

簡單搜索

高級搜索

通常，結(jié)果顯示為：

• 列表
• 表格（只讀/可編輯）
• 小圖標(biāo)
• 地圖

搜索返回的數(shù)據(jù)：

• 默認(rèn)排列方式
• 默認(rèn)分組方式

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

最佳實(shí)踐

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

提供便捷的清楚搜索結(jié)果的方式（一點(diǎn)完成）。

在同一屏下顯示搜索結(jié)果。

在企業(yè)級運(yùn)用中通常需要高級的搜索。

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

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

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

最佳實(shí)踐

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

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

數(shù)據(jù)過濾（Filter Dataset）

橫縱向皆可，適于用戶過濾已知的的數(shù)據(jù)，或者進(jìn)一步過濾搜索數(shù)據(jù)。

縱向

橫向

過濾塊通常有以下這些組件構(gòu)成：

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

最佳實(shí)踐

動態(tài)的過濾結(jié)果（無提交按鈕），可以使用一個定時器實(shí)現(xiàn)。

突出“Clear all filters”按鈕

左側(cè)過濾區(qū)最好不要使用多個可折疊板

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

Roost和Omio嘗試標(biāo)簽化區(qū)分不同的類的過濾條件。然而，缺點(diǎn)在于用戶不能同時看到所有的過濾條件。

最佳實(shí)踐

如果用戶搜索過濾后得結(jié)果為空，非常有必要給用戶一個清楚的反饋和回復(fù)選項(xiàng)。

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

表單（Forms）

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

最佳實(shí)踐

通常為左對齊一列式。

Label放在上邊或者左邊；在整個應(yīng)用中保持一致的結(jié)構(gòu)。

左對齊命令按鈕。

標(biāo)注清楚必填域。

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

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

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

調(diào)色板/畫布（Palette/Canvas）

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

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

最佳實(shí)踐

提供明確的“空白狀態(tài)”信息來說明開始

提供模板

按類型組織調(diào)色板中的對象，盡量可視化

提供可視的網(wǎng)格選項(xiàng)便于點(diǎn)擊

提供撤銷和重做功能

提供一個項(xiàng)目管理區(qū)來管理畫布（分組，復(fù)制，編輯以及刪除畫布）

儀表盤（Dashboard）

儀表盤是一個被嚴(yán)重濫用的模式，一個優(yōu)秀的儀表板提供：

• 關(guān)鍵信息一覽

• 實(shí)時數(shù)據(jù)
• 易讀的圖表
• 明確的切入點(diǎn)

這不是簡單一屏度量就可以實(shí)現(xiàn)的（一個大的表格或者簡單一堆圖表）

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

設(shè)計(jì)最佳實(shí)踐

1. 選擇要顯示的數(shù)據(jù)
2. 依照實(shí)際用戶確認(rèn)
3. 刪掉一半
4. 再次依照用戶確認(rèn)剩下的元素
5. 選擇組件和布局，創(chuàng)建3-4方案用于測試
6. 全部修訂——關(guān)鍵是數(shù)據(jù)

電子表格（Spreadsheet）

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

需提供以下功能：

• 標(biāo)準(zhǔn)的表格功能：分類，顯示/應(yīng)藏列，重排列，分組
• 重做/撤銷
• 添加，插入，刪除行

• 鍵盤導(dǎo)航
• 導(dǎo)入導(dǎo)出

最佳實(shí)踐

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

指明哪些列可編輯，計(jì)算，和/或

不要進(jìn)行多行或多單元格編輯——單擊即可編輯單個單元格或單行

點(diǎn)擊行或者單元格才顯示編輯器

出錯信息提醒

向?qū)В╓izard）

對于引導(dǎo)用戶進(jìn)行一些復(fù)雜的不常見的工作流程，該模式能有效的提高用戶體驗(yàn)。

最佳實(shí)踐

最小化步驟

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

清晰的說明每個步驟

只在一些不常見的工作流程中使用該模式：設(shè)置、安裝、修復(fù)、填寫復(fù)雜的申請或者表單、提供給有經(jīng)驗(yàn)用戶選擇性推出

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

Q&A（Question&Answer）

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

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

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

最佳實(shí)踐

在問題模塊允許用戶指定其目標(biāo)（超過十年以上的房屋居住權(quán)，低扣稅，高醫(yī)保（co-pay））

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

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

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

最佳實(shí)踐

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

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

整個面板都可點(diǎn)擊，不單單是文本塊

三到五個面板為佳

展開模式的平行板被應(yīng)用在：

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

最佳實(shí)踐

如果項(xiàng)目有層次或連續(xù)的關(guān)系，那折疊板模式就不適合了，可以試試摘要/細(xì)節(jié)或者向?qū)Ｊ?/p>

不能嵌套

互動模型（Interactive Model）

有很多和關(guān)鍵對象（一個日歷，地圖，圖，表，畫布）聯(lián)系的可交互元素是互動模式的特點(diǎn)。一個理想的用戶體驗(yàn)?zāi)Ｐ停c用戶的心理模型緊密結(jié)合。

該模式可候選：

• 日歷

• 地圖
• Gantt 圖標(biāo)
• 假定情景（包括計(jì)算表）

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

最佳實(shí)踐

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

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

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