交互設(shè)計(jì)師在設(shè)計(jì)線框圖原型時(shí)，熟知常見(jiàn)的web設(shè)計(jì)模式很有幫助，做到“心中有數(shù)”才能創(chuàng)造出符合需求，用戶易學(xué)易用的界面來(lái)。所謂“沒(méi)有必要重復(fù)發(fā)明輪子”，模式往往容易解決常見(jiàn)問(wèn)題，正確的模式能幫用戶熟悉界面、提高效率。

常見(jiàn)的UI設(shè)計(jì)模式如下圖：

下面分別進(jìn)行具體分析，遇到不同需求的時(shí)候就可以選擇合適UI設(shè)計(jì)模式。

01.主體/細(xì)節(jié)（Master/Detail）模式

　　主體/細(xì)節(jié)模式可以分為橫向和縱向兩種。如果想讓用戶在同一頁(yè)面下，引導(dǎo)他們?cè)陬惸肯赂咝У厍袚Q，這無(wú)疑是一種理想的方式。如果主體信息對(duì)于用戶來(lái)說(shuō)更重要，最好選擇橫向布局?；蚴侵黧w部分不僅條目多而且包含信息也多，那也該選擇這種橫向布局。

　　舉例來(lái)說(shuō)：

Windows窗口屬于縱向排布

Mac mail的橫向排布

0.2分欄瀏覽

　　分欄瀏覽也分為橫向和縱向兩種。用戶可以通過(guò)它，選擇不同的類別點(diǎn)進(jìn)并逐步引導(dǎo)用戶找到需要的信息。

　　舉例：

Outlook采用逐級(jí)分欄的界面，用戶可以選擇進(jìn)入“收件箱”——>“某封收件”——>“具體郵件內(nèi)容”

0.3搜索/結(jié)果

　　搜索屏幕模式對(duì)于想快速、直接看到具體結(jié)果的用戶來(lái)說(shuō)非常便捷。從很簡(jiǎn)單的到非常復(fù)雜的都有。

Gmail采用簡(jiǎn)單搜索

而對(duì)于google學(xué)術(shù)的用戶，高級(jí)搜索限定更復(fù)雜的搜索條件會(huì)提煉出用戶更期望得到的信息。

0.4過(guò)濾數(shù)據(jù)組

　　分為橫向和縱向。開(kāi)始定義一些已知信息，之后通過(guò)限定條件對(duì)搜索后的結(jié)果進(jìn)行再過(guò)濾。

51job用戶在使用簡(jiǎn)單搜索輸入所需職位后，縱向布局的左邊面板提供諸如“發(fā)布時(shí)間、薪金”等條件，進(jìn)一步優(yōu)化信息

以京東為例，多數(shù)電子商務(wù)網(wǎng)站在用戶初步模糊搜索后，提供進(jìn)一步優(yōu)化的過(guò)濾條件。上圖中，京東采用的是橫向排列方式

0.5表單

　　表單類型眾多，也是最能體現(xiàn)用戶體驗(yàn)是否良好的地方。其中包含很多內(nèi)容，推薦專門介紹表單的書：《Web Form Design: Filling in the Blanks》。

注冊(cè)信息一般使用表單

0.6調(diào)色盤/畫布

　　調(diào)色盤/畫布雖然不算最常見(jiàn)模式，但它對(duì)于創(chuàng)造圖形類文檔有著不可替代的優(yōu)勢(shì)：比如設(shè)計(jì)線性或非線性圖；流程圖；頁(yè)面布局；制定物理大小的設(shè)計(jì)/圖表或控制布局。

對(duì)于設(shè)計(jì)師來(lái)說(shuō)調(diào)色盤/畫布這種模式并不陌生，常用軟件，例如：Axure、ps都是采用這種方式。

0.7儀表盤

　　一個(gè)設(shè)計(jì)完善的儀表盤應(yīng)提供：一目了然的關(guān)鍵信息，實(shí)時(shí)數(shù)據(jù)，易讀的圖形和操作，清晰的入口和瀏覽。理論上講，在一個(gè)屏幕下展示復(fù)雜的數(shù)據(jù)本身就很難。

之前我用水晶易表為蘇寧電器做的實(shí)時(shí)監(jiān)控各個(gè)地區(qū)門店銷售系統(tǒng)儀表盤

0.8電子表格

　　方便用戶快速瀏覽，編輯大板塊信息的理想模式。電子表格需要提供下列功能：標(biāo)準(zhǔn)的表格（諸如分類，隱藏/顯示 欄目，重列欄目，分組（如果可以）），全局撤銷/重做，增加/插入/刪除排，鍵盤導(dǎo)航，導(dǎo)入和導(dǎo)出。

淘寶購(gòu)物車選擇使用電子表格，可以讓用戶對(duì)已選商品進(jìn)行快速編輯（增加/減少數(shù)量，刪除等）

0.9向?qū)?/STRONG>