常見UI設(shè)計(jì)模式

1、常見UI設(shè)計(jì)模式交互設(shè)計(jì)師在設(shè)計(jì)線框圖原型時(shí)，熟知常見的web設(shè)計(jì)模式很有幫助，做到“心中有數(shù)” 才能創(chuàng)造出符合需求，用戶易學(xué)易用的界面來。所謂沒有必要重復(fù)發(fā)明輪子”，模式往往容 易解決常見問題，正確的模式能幫用戶熟悉界面、提高效率。常見的UI設(shè)計(jì)模式如下圖：主體，細(xì)節(jié)分欄瀏覽Master/DetailColumn Browse搜索，結(jié)果Search/Resul:過濾器去單FormO(3調(diào)色盤畫布Palet?e/Canvas儀表盤Dashboard向?qū)izard電子數(shù)據(jù)表Spreadsheet間答Cluestion/Answer并行Parallel互動(dòng)Interactive下面分別進(jìn)行具體分

2、析，遇到不同需求的時(shí)候就可以選擇合適UI設(shè)計(jì)模式。01.主體/細(xì)節(jié)(Master/Detail)模式主體/細(xì)節(jié)模式可以分為橫向和縱向兩種。如果想讓用戶在同一頁面下，引導(dǎo)他們在類 目下高效地切換，這無疑是一種理想的方式。如果主體信息對于用戶來說更重要，最好選擇橫向布局?；蚴侵黧w部分不僅條目多而且包含信息也多，那也該選擇這種橫向布局。舉例來說:Windows窗口屬于縱向排布4J144wha I n.mAnuM n VA iLf Iphui AnxzQn cwpA/rufan gwn AmuDncwn AiiUMhd.Mn Amfmn CWPAmUFLCWfl AmiranccniIfan 11 J

3、OO* CnmtwrZkZWF 也*w瓦2W11*ai-NgU 11UF . 21304MW* 341 mv1.-KMFreni 5ui wnE&AmUM 看 laimtri VMr g M-wralw 7S. 0W? !PljM #xiw and *(i Amkwi 詢 wrfi 郵 khit hmmhi!mufl!-hwe Qjfe t g&eiiegbie pHcwMac mail的橫向排布0.2分欄瀏覽分欄瀏覽也分為橫向和縱向兩種。用戶可以通過它，選擇不同的類別點(diǎn)進(jìn)并逐步引導(dǎo)用 戶找到需要的信息。舉例：j 小 2，/Ldv *umWgk. 6AhI hcwi fay Molwmani

4、fii uc-andi|-.MKTWCCTcsn d yMcHWEmI 4mJ -dnBDirc FijeeiJ-li-XH-7-3t-XM-5*HjVfSUniU HUWHM-KLu ivw Mibu rasEitwOutlook采用逐級分欄的界面，用戶可以選擇進(jìn)入“收件箱” “某封收件” “具體郵件內(nèi)容，0.3搜索/結(jié)果Gm ai lMll 鳳W TaskInboHBuzz |.10fi* | C 牢孫d女&B(1E M4搜索屏幕模式對于想快速、直接看到具體結(jié)果的用戶來說非常便捷。從很簡單的到非常 復(fù)雜的都有。pufSflSJChSwgh lbs V燦巖帷臼颯知m抵問艷h匚叮時(shí)聞e .號能

5、西新牙諺.外炭直桂逐沁。人小萬 / Afchne R&git 鄰 8E 餡 Mti-.e w Intcn Labels hlore a ipLflirjgn)i com 46 同*AB MailGmail采用簡單搜索taH.5 -SJl dr.EOil MH VWFFtKI IffTTWm叫HH+wkIEiMTniin-iZxfrv#tbi M-r.r? r：.iiFi W而對于google學(xué)術(shù)的用戶，高級搜索限定更復(fù)雜的搜索條件會(huì)提煉出用戶更期望得到的信息。0.4過濾數(shù)據(jù)組分為橫向和縱向。開始定義一些已知信息，之后通過限定條件對搜索后的結(jié)果進(jìn)行再過 濾。51job用戶在使用簡單搜索輸入所需職

6、位后，縱向布局的左邊面板提供諸如，發(fā)布時(shí)間、薪金”等條件，進(jìn)一步優(yōu)化信息arv-4n .jQr以京東為例，多數(shù)電子商務(wù)網(wǎng)站在用戶初步模糊搜索后，提供進(jìn)一步優(yōu)化的過濾條件。上圖中，京東采用的是橫向排列方式0.5表單表單類型眾多，也是最能體現(xiàn)用戶體驗(yàn)是否良好的地方。其中包含很多內(nèi)容，推薦專門 介紹表單的書：Web Form Design: Filling in the Blanks。-flit RM H 蜜ef iqni41r =sn注冊信息一般使用表單0.6調(diào)色盤/畫布調(diào)色盤/畫布雖然不算最常見模式，但它對于創(chuàng)造圖形類文檔有著不可替代的優(yōu)勢：比 如設(shè)計(jì)線性或非線性圖；流程圖；頁面布局；制定物理大

7、小的設(shè)計(jì)/圖表或控制布局。對于設(shè)計(jì)師來說調(diào)色盤/畫布這種模式并不陌生，常用軟件，例如：Axure、ps都是采用這 種方式。0.7儀表盤一個(gè)設(shè)計(jì)完善的儀表盤應(yīng)提供：一目了然的關(guān)鍵信息，實(shí)時(shí)數(shù)據(jù)，易讀的圖形和操作， 清晰的入口和瀏覽。理論上講，在一個(gè)屏幕下展示復(fù)雜的數(shù)據(jù)本身就很難。#0上mH Wt-jrA Zi-Lz山的廠兩a adi-riRB-iitaPErstaDi m就 *也抑廣畫MSfi% f&2時(shí)K 1山!*叫74|K 1早后與日tHi&K D59r* tIlZD79BGOii fDS54?W% 1心心理#*. .硯g，土 1IMilglillMMTTramDM471kb之前我用水晶易表

8、為蘇寧電器做的實(shí)時(shí)監(jiān)控各個(gè)地區(qū)門店銷售系統(tǒng)儀表盤0.8電子表格方便用戶快速瀏覽，編輯大板塊信息的理想模式。電子表格需要提供下列功能：標(biāo)準(zhǔn)的表格（諸如分類，隱藏/顯示 欄目，重列欄目，分組（如果可以），全局撤銷/重做，增加/插入/刪除排，鍵盤導(dǎo)航，導(dǎo)入和導(dǎo)出。n g:tfi.- HUX*U /妙札上SAIJ 1。企w.tutwkum HFn#回 fl*- u口EE口 *電Twr理g W 回1 遂s r-=寸 h0T r毛昭kTVjWIMX Ji L - 1: -.|-I i7? i*e _ a ij 1M L皂 IWvraij=:鍬心iJriFi |淘寶購物車選擇使用電子表格，可以讓用戶對己選商

9、品進(jìn)行快速編輯（增加/減少數(shù)量，刪除等）0.9向?qū)τ趶?fù)雜的或是不常見的流程，向?qū)?快速啟動(dòng)屏幕模式可以有效地導(dǎo)航。1 一我的購物車卜2 一埴寫核對訂單信息3 一成功提交訂單日我的購物車京東上使用wizard快速引導(dǎo)不熟悉流程的顧客完成付款0.10.Q&AQ&A模式是指用戶通過選取相符條件，從而自主找到適合自己的解決方案。Q&A不同 于搜索模式，它通常需要了解用戶基礎(chǔ)上，通過提問來幫助用戶弄清他們?nèi)狈?jīng)驗(yàn)的在哪里 （比如健康保險(xiǎn)，抵押，計(jì)劃，購買）有哪些可供的選擇或建議。上海移動(dòng)資費(fèi)導(dǎo)購系統(tǒng)可以讓用戶通過回答幾個(gè)問題，可以建議用戶選擇哪種話費(fèi)套餐0.11.平行面板平行面板屏幕模式可以收起（一次

10、只顯示一個(gè)），也可以展開（同時(shí)顯示全部。這種模 式適合組織大量類似或相互影響的信息，讓用戶在同一頁面更高效的獲得信息。最佳應(yīng)用在： 需要申請者需要填寫各種沒有順序的類別目錄。0.12.交互模型交互模型屏幕模式應(yīng)用在很多交互要素需要與關(guān)鍵項(xiàng)目（比如日歷、地圖、圖標(biāo)、畫布 等）進(jìn)行交互的時(shí)候。是一種用戶體驗(yàn)更貼近用戶心智模型的模式。在日歷、地圖、線狀圖、 預(yù)設(shè)可能場景分析（包括計(jì)算器），所見即所得編輯器（包括圖片處理）時(shí)應(yīng)用效果非常好。smirriwi-rtnirJi J ,r D n 狗Iiwn*施日-N日布心：fmnnnM ? jfcii V.WMlUi IGoogle的calendar在日歷上可以直接編輯提示內(nèi)容 附加：13.空白狀態(tài)空白狀態(tài)指在任何數(shù)據(jù)輸入或進(jìn)入系統(tǒng)前，應(yīng)用的自然狀態(tài)。Getting real 一書曾說空 白狀態(tài)的屏幕使得用戶更期待。通過給用戶一種預(yù)覽來降低擔(dān)心、沮喪和猶豫。空白狀態(tài)屏 幕包括：視頻，快速教程，幫助提示，安裝后的截圖。Wufoo是一個(gè)在線表單設(shè)計(jì)網(wǎng)站，初始后會(huì)引導(dǎo)用戶建立表單14.其他模式還有兩種廣泛使用但在企業(yè)軟件很少使用的模式。-門戶：如果你是市場調(diào)研專家，商業(yè)需求分析師和用戶反饋調(diào)研員設(shè)計(jì)門戶，可以參考控 制面板的設(shè)計(jì)規(guī)范和案例。-Tabs