互動設計師在設計線框圖原型時,熟知常見的web設計模式很有幫助,做到“心中有數”才能創造出符合需求,使用者易學易用的`介面來。所謂“沒有必要重複發明輪子”,模式往往容易解決常見問題,正確的模式能幫使用者熟悉介面、提高效率。
常見的UI設計模式如下圖:
下面分別進行具體分析,遇到不同需求的時候就可以選擇合適UI設計模式。
01.主體/細節(Master/Detail)模式
主體/細節模式可以分為橫向和縱向兩種。如果想讓使用者在同一頁面下,引導他們在類目下高效地切換,這無疑是一種理想的方式。如果主體資訊對於使用者來說更重要,最好選擇橫向佈局。或是主體部分不僅條目多而且包含資訊也多,那也該選擇這種橫向佈局。
舉例來說:
Windows視窗屬於縱向排布
Mac mail的橫向排布
0.2分欄瀏覽(Column Browse)
分欄瀏覽也分為橫向和縱向兩種。使用者可以通過它,選擇不同的類別點進並逐步引導使用者找到需要的資訊。