UI設計師:熟知常見的web設計模式

網頁製作Webjx文章簡介：互動設計師常用的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.互動模型

　　互動模型螢幕模式應用在很多互動要素需要與關鍵項目（比如日曆、地圖、表徵圖、畫布等）進行互動的時候。是一種使用者體驗更貼近使用者心智模型的模式。在日曆、地圖、線狀圖、預設可能情境分析（包括計算機），所見即所得 (WYSIWYG)編輯器（包括圖片處理）時應用效果非常好。

Google的calendar在日曆上可以直接編輯提示內容

附加：13.空白狀態

　　空白狀態指在任何資料輸入或進入系統前，應用的自然狀態。Getting real 一書曾說空白狀態的螢幕使得使用者更期待。通過給使用者一種預覽來降低擔心、沮喪和猶豫。空白狀態螢幕包括：視頻，快速教程，協助提示，安裝後的截圖。

Wufoo是一個線上表單設計網站，初始後會引導使用者建立表單

14.其他模式

　　還有兩種廣泛使用但在企業軟體很少使用的模式。



- 門戶：如果你是市場調研專家，商業需求分析師和使用者反饋調研員設計門戶，可以參考控制台的設計規範和案例。

- Tabs：其實Tab是一種組件，不是一種模式。它為在多種同語境下的資料提供多選一選擇。如果資料結構導致你的設計tab顯得很多。有兩個小建議：第一，重新考慮架構。通過使用卡片分類或請教一名專業的資訊架構師；第二，可以參考平行面板的規範和案例。

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