常見UI設(shè)計模式

1 評論 13621 瀏覽 5 收藏 10 分鐘

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

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

主體/細(xì)節(jié)模式可以分為橫向和縱向兩種。如果想讓用戶在同一頁面下，導(dǎo)航他們在項目間高效的切換，這無疑是一種理想的方式。當(dāng)用戶想看到主體更多信息的時候最好選擇橫向布局?；蛘弋?dāng)主體部分包含很多條目，并且每個包含附加信息的時候，也該選擇這種橫向布局。

一些舉例：

Mac mail

0.2分欄瀏覽

分欄瀏覽也分為橫向和縱向兩種。用戶可以通過它多入點進(jìn)入并清晰導(dǎo)航出用戶喜好的項目。

舉例：

Outlook逐級分欄的界面

0.3搜索/結(jié)果

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

0.4過濾數(shù)據(jù)組

分為橫向和縱向。對于開始定義一些已知信息，之后對于搜索后的結(jié)果再進(jìn)行過濾。

0.5表單

表單類型眾多，也是最能體現(xiàn)用戶體驗是否良好的地方。其中包含很多內(nèi)容。可以詳見UI設(shè)計模式詳細(xì)教程。推薦專門介紹表單的書：《Web Form Design: Filling in the Blanks》。

0.6調(diào)色盤/畫布

調(diào)色盤/畫布雖然是很少應(yīng)用的一種模式，但是它是新建文檔的唯一方式：限行或非線性；流程圖；頁面布局；制定物理大小的設(shè)計/圖表或控制布局。

0.7儀表盤

一個設(shè)計完善的儀表盤應(yīng)提供：一目了然的關(guān)鍵信息，實時數(shù)據(jù)，易讀的圖形，清晰的入口和瀏覽。理論上講，這些都很難在一個屏幕下展示復(fù)雜的數(shù)據(jù)。

水晶易表做的KPI儀表盤

0.8電子表格

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

0.9向?qū)?/strong>

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

0.10.Q&A

Q&A模式是指用戶獲取信息和找到解決方案的一種設(shè)計模式。Q&A不同于搜索模式，它用來幫助用戶弄清他們?nèi)狈?jīng)驗的領(lǐng)域里（比如健康保險，抵押，計劃，購買）有哪些可供的選擇或建議。

上海移動資費導(dǎo)購系統(tǒng)

0.11.平行面板

平行面板屏幕模式可以收起（一次只顯示一個），也可以展開（同時顯示全部）。這種模式適合組織大量類似或相互影響的信息，讓用戶在同一頁面更高效的獲得信息。最佳應(yīng)用在：需要申請者需要填寫各種沒有順序的類別目錄。

0.12.交互模型

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

附加：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是一個在線表單設(shè)計網(wǎng)站，初始后會引導(dǎo)用戶建立表單

14.其他模式

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

??– 門戶：如果你是市場調(diào)研專家，商業(yè)需求分析師和用戶反饋調(diào)研員設(shè)計門戶，可以參考控制面板的設(shè)計規(guī)范和案例。?– Tabs：其實Tab是一種部件，不是一種模式。它為在多種同語境下的數(shù)據(jù)提供多選一選擇。如果數(shù)據(jù)結(jié)構(gòu)導(dǎo)致你的設(shè)計tab顯得很多。有兩個小建議：第一，重新考慮架構(gòu)。通過使用卡片分類或請教一名專業(yè)的信息架構(gòu)師；第二，可以參考平行面板的規(guī)范和案例。 以上只是粗略說明，如希望看到更多細(xì)節(jié)請下載文檔： 參考文獻(xiàn)：《Designing interfaces》and 《Designing web interfaces》

來源：http://www.zhangyq.com/ui-ui-pattern-design-patterns/

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
旺旺旺旺旺仔
一直很尊重奶茶，沒去冰，沒少糖，沒少喝。
4319篇作品 34184106總閱讀量
09-273367 瀏覽
ToB與ToC最本質(zhì)的“客戶”區(qū)別
07-183638 瀏覽
小紅書上，月入百萬的餐飲小白都是誰？
12-181118 瀏覽
To B增長，產(chǎn)品為王：以產(chǎn)品為主導(dǎo)的增長策略
11-152042 瀏覽
冬跑深圳，夏跑北京，候鳥外賣騎手遷徙記
10-26825 瀏覽
前臺實名制要來了？互聯(lián)網(wǎng)“去匿名化”已是大勢所趨
評論
評論請登錄

  1. 干貨

    回復(fù)