歡迎光臨博评网福州新生代校區

  博评网ui設計教程-UI設計模式大閱兵

  交互設計師在設計線框圖原型時,熟知常見的Web設計模式很有幫助,做到“心中有數才能創造出符合需求,用戶易學易用的界麵來。常見的設計模式有哪些呢?在商業中有哪些案例呢?某公司交互設計師張雅秋寫了一篇博文對此進行了總結,現轉載於此,全文如下:

  交互設計師在設計線框圖原型時,熟知常見的Web設計模式很有幫助,做到“心中有數才能創造出符合需求,用戶易學易用的界麵來。所謂“沒有必要重複發明輪子,模式往往容易解決常見問題,正確的模式能幫用戶熟悉界麵、提升效率。

  常見的UI設計模式如下圖:

  下麵分別進行具體分析,遇到不同需求的時候就可以選擇合適UI設計模式。

  1.主體/細節(Master/Detail)模式

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

  舉例來說:

  Windows窗口屬於縱向排布

  Mac mail的橫向排布

  2.分欄瀏覽(Column Browse)

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

  舉例:

  Outlook采用逐級分欄的界麵,用戶可以選擇進入“收件箱——>“某封收件——>“具體郵件內容

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

  搜索屏幕模式對於想快速、直接看到具體結果的用戶來說非常便捷。從很簡單的到非常複雜的都有。

  Gmail采用簡單搜索

  而對於google學術的用戶,搜索限定更複雜的搜索條件會提煉出用戶更期望獲得的信息。

  4.過濾數據組(Filter Dataset)

  分為橫向和縱向。開始定義一些已知信息,之後通過限定條件對搜索後的結果進行再過濾。

  51job用戶在使用簡單搜索輸入所需職位後,縱向布局的左邊麵板提供諸如“發布時間、薪金等條件,進一步優化信息

  以京東為例,多數電子商務網站在用戶初步模糊搜索後,提供進一步優化的過濾條件。上圖中,京東采用的是橫向排列方式

  5.表單(Forms)

  表單類型眾多,也是能體現用戶體驗是否良好的地方。其中包含很多內容,推薦專門介紹表單的書:《Web Form Design: Filling in the Blanks》。

  注冊信息一般使用表單

  6.調色盤/畫布(Palette/Canvas)

  調色盤/畫布雖然不算常見模式,但它對於創造圖形類文檔有著不可替代的優勢:比如設計線性或非線性圖;流程圖;頁麵布局;製定物理大小的設計/圖表或控製布局。

  對於設計師來說調色盤/畫布這種模式並不陌生,常用軟件,例如:Axure、ps都是采用這種方式。

  7.儀表盤(Dashboard)

  一個設計完善的儀表盤應提供:一目了然的關鍵信息,實時數據,易讀的圖形和操作,清晰的入口和瀏覽。理論上講,在一個屏幕下展示複雜的數據本身就很難。

  之前我用水晶易表為蘇寧電器做的實時監控各個地區門店銷售係統儀表盤

  8.電子表格(Spreadsheet)

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

  淘寶購物車選擇使用電子表格,可以讓用戶對已選商品進行快速編輯(增加/減少數量,刪除等)

  9.向導(Wizard)

  對於複雜的或是不常見的流程,向導/快速啟動屏幕模式可以有效地導航。

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

  10. Q&A(Question&Answer)

  Q&A模式是指用戶通過選取相符條件,從而自主找到適合自己的解決方案。Q&A不同於搜索模式,它通常需要了解用戶基礎上,通過提問來幫助用戶弄清他們缺乏的經驗在哪裏(比如健康保險,抵押,計劃,購買)有哪些可供的選擇或建議。

  上海移動資費導購係統可以讓用戶通過回答幾個問題,可以建議用戶選擇哪種話費套餐

  11.平行麵板(Parallel Panels)

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

  12.交互模型(Interactive Model)

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

  Google的calendar在日曆上可以直接編輯提示內容

  附加:

  13.空白狀態(Bonus. Blank State)

  空白狀態指在任何數據輸入或進入係統前,應用的自然狀態。Getting real 一書曾說空白狀態的屏幕使得用戶更期待。通過給用戶一種預覽來降低擔心、沮喪和猶豫。空白狀態屏幕包括:視頻,快速教程,幫助提示,安裝後的截圖。

  Wufoo是一個在線表單設計網站,初始後會引導用戶建立表單

  14.其他模式

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

  > 門戶:如果你是市場調研專家,商業需求分析師和用戶反饋調研員設計門戶,可以參考控製麵板的設計規範和案例。

  > Tabs:其實Tab是一種部件,不是一種模式。它為在多種同語境下的數據提供多選一選擇。如果數據結構導致你的設計tab顯得

我的位置: 首頁 >> 博评网ui設計教程-UI設計模式大閱兵

2018-08-01

來源:


 

相關熱詞搜索:博评网課程博评网學費

在線答疑更多++

熱門專題更多++

福建省福州市博评网新生代校區

地址:福州市倉山區北園路122號

電話:400-9966-370   0591-87880522

網址: www.huybio.com

福州校區乘車路線:白湖亭站、下濂站、埔壋站

博评网福州新生代校區公眾平台

福州博评网