UI設(shè)計(jì)模式大閱兵

2014-6-24    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.820esy.cn  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.cssn.cn/ysx/ysx_sjx/201310/t20131026_611976.shtmll

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

交互設(shè)計(jì)師在設(shè)計(jì)線框圖原型時(shí),熟知常見(jiàn)的Web設(shè)計(jì)模式很有幫助,做到“心中有數(shù)”才能創(chuàng)造出符合需求,用戶易學(xué)易用的界面來(lái)。常見(jiàn)的設(shè)計(jì)模式有哪些呢?在商業(yè)中有哪些案例呢?某公司交互設(shè)計(jì)師張雅秋寫(xiě)了一篇博文對(duì)此進(jìn)行了總結(jié),現(xiàn)轉(zhuǎn)載于此,全文如下:

交互設(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ì)模式。

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

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

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

Windows窗口屬于縱向排布

Mac mail的橫向排布

2.分欄瀏覽(Column Browse)

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

舉例:

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

3.搜索/結(jié)果(Search/Result)

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

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

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

4.過(guò)濾數(shù)據(jù)組(Filter Dataset)

分為橫向和縱向。開(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ò)濾條件。上圖中,京東采用的是橫向排列方式

5.表單(Forms)

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

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

6.調(diào)色盤(pán)/畫(huà)布(Palette/Canvas)

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

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

7.儀表盤(pán)(Dashboard)

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

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

8.電子表格(Spreadsheet)

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

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

9.向?qū)В╓izard)

對(duì)于復(fù)雜的或是不常見(jiàn)的流程,向?qū)?快速啟動(dòng)屏幕模式可以有效地導(dǎo)航。

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

10. Q&A(Question&Answer)

Q&A模式是指用戶通過(guò)選取相符條件,從而自主找到適合自己的解決方案。Q&A不同于搜索模式,它通常需要了解用戶基礎(chǔ)上,通過(guò)提問(wèn)來(lái)幫助用戶弄清他們?nèi)狈Φ慕?jīng)驗(yàn)在哪里(比如健康保險(xiǎn),抵押,計(jì)劃,購(gòu)買(mǎi))有哪些可供的選擇或建議。

上海移動(dòng)資費(fèi)導(dǎo)購(gòu)系統(tǒng)可以讓用戶通過(guò)回答幾個(gè)問(wèn)題,可以建議用戶選擇哪種話費(fèi)套餐

11.平行面板(Parallel Panels)

平行面板屏幕模式可以收起(一次只顯示一個(gè)),也可以展開(kāi)(同時(shí)顯示全部)。這種模式適合組織大量類(lèi)似或相互影響的信息,讓用戶在同一頁(yè)面更的獲得信息。最佳應(yīng)用在:申請(qǐng)者需要填寫(xiě)各種沒(méi)有順序的類(lèi)別目錄。

12.交互模型(Interactive Model)

交互模型屏幕模式應(yīng)用在很多交互要素需要與關(guān)鍵項(xiàng)目(比如日歷、地圖、圖標(biāo)、畫(huà)布等)進(jìn)行交互的時(shí)候。是一種用戶體驗(yàn)更貼近用戶心智模型的模式。在日歷、地圖、線狀圖、預(yù)設(shè)可能場(chǎng)景分析(包括計(jì)算器),所見(jiàn)即所得編輯器(包括圖片處理)時(shí)應(yīng)用效果非常好。

Google的calendar在日歷上可以直接編輯提示內(nèi)容

附加:

13.空白狀態(tài)(Bonus. Blank State)

空白狀態(tài)指在任何數(shù)據(jù)輸入或進(jìn)入系統(tǒng)前,應(yīng)用的自然狀態(tài)。Getting real 一書(shū)曾說(shuō)空白狀態(tài)的屏幕使得用戶更期待。通過(guò)給用戶一種預(yù)覽來(lái)降低擔(dān)心、沮喪和猶豫。空白狀態(tài)屏幕包括:視頻,快速教程,幫助提示,安裝后的截圖。

Wufoo是一個(gè)在線表單設(shè)計(jì)網(wǎng)站,初始后會(huì)引導(dǎo)用戶建立表單

14.其他模式

還有兩種廣泛使用但在企業(yè)軟件很少使用的模式。

> 門(mén)戶:如果你是市場(chǎng)調(diào)研專家,商業(yè)需求分析師和用戶反饋調(diào)研員設(shè)計(jì)門(mén)戶,可以參考控制面板的設(shè)計(jì)規(guī)范和案例。

> Tabs:其實(shí)Tab是一種部件,不是一種模式。它為在多種同語(yǔ)境下的數(shù)據(jù)提供多選一選擇。如果數(shù)據(jù)結(jié)構(gòu)導(dǎo)致你的設(shè)計(jì)tab顯得很多。有兩個(gè)小建議:第一,重新考慮架構(gòu)。通過(guò)使用卡片分類(lèi)或請(qǐng)教一名專業(yè)的信息架構(gòu)師;第二,可以參考平行面板的規(guī)范和案例。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔