交互設計師經常使用的web設計模式（轉）

交互設計師在設計線框圖原型時，熟知常見的web設計模式頗有幫助，作到「心中有數」才能創造出符合需求，用戶易學易用的界面來。所謂「沒有必要重複發明輪子」，模式每每容易解決常見問題，正確的模式能幫用戶熟悉界面、提升效率。

常見的UI設計模式以下圖：

下面分別進行具體分析，遇到不一樣需求的時候就能夠選擇合適UI設計模式。

01.主體/細節（Master/Detail）模式

　　主體/細節模式能夠分爲橫向和縱向兩種。若是想讓用戶在同一頁面下，引導他們在類目下高效地切換，這無疑是一種理想的方式。若是主體信息對於用戶來講更重要，最好選擇橫向佈局。或是主體部分不只條目多並且包含信息也多，那也該選擇這種橫向佈局。

　　舉例來講：

Windows窗口屬於縱向排布

Mac mail的橫向排布

0.2分欄瀏覽

　　分欄瀏覽也分爲橫向和縱向兩種。用戶能夠經過它，選擇不一樣的類別點進並逐步引導用戶找到須要的信息。

　　舉例：

Outlook採用逐級分欄的界面，用戶能夠選擇進入「收件箱」——>「某封收件」——>「具體郵件內容」

0.3搜索/結果

　　搜索屏幕模式對於想快速、直接看到具體結果的用戶來講很是便捷。從很簡單的到很是複雜的都有。

Gmail採用簡單搜索

而對於google學術的用戶，高級搜索限定更復雜的搜索條件會提煉出用戶更指望獲得的信息。

0.4過濾數據組

分爲橫向和縱向。開始定義一些已知信息，以後經過限定條件對搜索後的結果進行再過濾。

51job用戶在使用簡單搜索輸入所需職位後，縱向佈局的左邊面板提供諸如「發佈時間、薪金」等條件，進一步優化信息

以京東爲例，多數電子商務網站在用戶初步模糊搜索後，提供進一步優化的過濾條件。上圖中，京東採用的是橫向排列方式

0.5表單

　　表單類型衆多，也是最能體現用戶體驗是否良好的地方。其中包含不少內容，推薦專門介紹表單的書：《Web Form Design: Filling in the Blanks》。

註冊信息通常使用表單

0.6調色盤/畫布

　　調色盤/畫布雖然不算最多見模式，但它對於創造圖形類文檔有着不可替代的優點：好比設計線性或非線性圖；流程圖；頁面佈局；制定物理大小的設計/圖表或控制佈局。

對於設計師來講調色盤/畫布這種模式並不陌生，經常使用軟件，例如：Axure、ps都是採用這種方式。

0.7儀表盤

　　一個設計完善的儀表盤應提供：一目瞭然的關鍵信息，實時數據，易讀的圖形和操做，清晰的入口和瀏覽。理論上講，在一個屏幕下展現複雜的數據自己就很難。

以前我用水晶易表爲蘇寧電器作的實時監控各個地區門店銷售系統儀表盤

0.8電子表格

　　方便用戶快速瀏覽，編輯大板塊信息的理想模式。電子表格須要提供下列功能：標準的表格（諸如分類，隱藏/顯示 欄目，重列欄目，分組（若是能夠）），全局撤銷/重作，增長/插入/刪除排，鍵盤導航，導入和導出。

淘寶購物車選擇使用電子表格，可讓用戶對已選商品進行快速編輯（增長/減小數量，刪除等）

0.9嚮導

　　對於複雜的或是不常見的流程，嚮導/快速啓動屏幕模式能夠有效地導航。

京東上使用wizard快速引導不熟悉流程的顧客完成付款

0.10.Q&A

　　Q&A模式是指用戶經過選取相符條件，從而自主找到適合本身的解決方案。Q&A不一樣於搜索模式，它一般須要瞭解用戶基礎上，經過提問來幫助用戶弄清他們缺少經驗的在哪裏（好比健康保險，抵押，計劃，購買）有哪些可供的選擇或建議。

上海移動資費導購系統可讓用戶經過回答幾個問題，能夠建議用戶選擇哪一種話費套餐

0.11.平行面板

　　平行面板屏幕模式能夠收起（一次只顯示一個），也能夠展開（同時顯示所有）。這種模式適合組織大量相似或相互影響的信息，讓用戶在同一頁面更高效的得到信息。最佳應用在：須要申請者須要填寫各類沒有順序的類別目錄。

0.12.交互模型

　　交互模型屏幕模式應用在不少交互要素須要與關鍵項目（好比日曆、地圖、圖標、畫布等）進行交互的時候。是一種用戶體驗更貼近用戶心智模型的模式。在日曆、地圖、線狀圖、預設可能場景分析（包括計算器），所見即所得編輯器（包括圖片處理）時應用效果很是好。

Google的calendar在日曆上能夠直接編輯提示內容

附加：13.空白狀態

　　空白狀態指在任何數據輸入或進入系統前，應用的天然狀態。Getting real 一書曾說空白狀態的屏幕使得用戶更期待。經過給用戶一種預覽來下降擔憂、沮喪和猶豫。空白狀態屏幕包括：視頻，快速教程，幫助提示，安裝後的截圖。

Wufoo是一個在線表單設計網站，初始後會引導用戶創建表單

14.其餘模式

　　還有兩種普遍使用但在企業軟件不多使用的模式。

- 門戶：若是你是市場調研專家，商業需求分析師和用戶反饋調研員設計門戶，能夠參考控制面板的設計規http://www.uimaker.com/uimakerhtml/uistudy/2010/0825/4181.html範和案例。

- Tabs：其實Tab是一種部件，不是一種模式。它爲在多種同語境下的數據提供多選一選擇。若是數據結構致使你的設計tab顯得不少。有兩個小建議：第一，從新考慮架構。經過使用卡片分類或請教一名專業的信息架構師；第二，能夠參考平行面板的規範和案例。

參考文獻：《Designing interfaces》and 《Designing web interfaces》

轉載：