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

常見的UI設(shè)計模式如下圖：

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

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

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

舉例來說：

Windows窗口屬于縱向排布

Mac mail的橫向排布

0.2分欄瀏覽(Column Browse)

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

舉例：

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

0.3搜索/結(jié)果(Search/Result)

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

Gmail采用簡單搜索

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

標簽： UI設(shè)計 UI設(shè)計模式 設(shè)計模式 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。