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

下面分別進(jìn)行具體分析,遇到不同需求的時(shí)候就可以選擇合適UI設(shè)計(jì)模式。
01.主體/細(xì)節(jié)(Master/Detail)模式

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

Windows窗口屬于縱向排布

Mac mail的橫向排布
0.2分欄瀏覽(Column Browse)

分欄瀏覽也分為橫向和縱向兩種。用戶可以通過它,選擇不同的類別點(diǎn)進(jìn)并逐步引導(dǎo)用戶找到需要的信息。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。