唐老鴨

交互形式有什么?又如何使用?請帶著問題去尋找答案吧。

本期跟大家分享一下個人總結的移動端常見的篩選交互的形式以及其各自的常見運用場景。首先我把移動端常見的篩選大致分為三種形式,即入口型篩選、抽屜型篩選及全屏篩選,而抽屜型篩選又進一步根據交互細節和適用場景上的差異分為垂直抽屜和側邊抽屜,下面讓我們逐一分析:?

1.入口型篩選

▲?去哪兒
主要特征:篩選條件作為查詢結果的前提應用場景:常用于有明確目的性的篩選查詢,如:機場、酒店、旅游項目電影票等的預定,事先決定了主要篩選條件(時間、地點等)注意要點:作為入口的篩選條件最好不要多于三項;較為復雜且無必要事先決定的篩選內容可放在后續列表頁去做二次篩選代表產品:

去哪兒、攜程

 

2.抽屜型篩選

▲ 京東
常見形式有垂直抽屜和側邊抽屜兩種,主要用于實時篩選的列表,抽屜留出的窗口區可向用戶傳達篩選內容刷新的信息
優點為比全屏篩選更輕,篩選反饋更直接且強烈。

 

2.1垂直抽屜篩選彈層

▲ 美團
▲ 大眾點評
主要特征:在列表頁內以向縱向(多為向下)展開的形式出現的篩選彈層應用場景:主要用于篩選類目較少且展示直觀的場景;因為橫向空間充足,常用于有多個層級包含關系的單選項目的篩選注意要點:篩選類目最好不要多于五項(橫向);單選的篩選項后最好列出結果條目數量,便于幫助用戶做決定代表產品:

美團、大眾點評

 

2.2 側邊抽屜篩選彈層

▲ 京東?

 

3. 全屏篩選

▲ 雪球
主要特征:使用頁面跳轉或者全屏彈層的樣式做篩選應用場景:常用于篩選類目多且層級深、項目繁雜的較重篩選查詢相對于抽屜型篩選注重篩選項目與列表的互動,全屏篩選更側重聚焦篩選本身注意要點:此類篩選很接近入口型篩選的體驗,區別是全屏篩選的選項更繁雜且不夠集中;常與入口型篩選作為互補使用

代表產品:

Airbnb 雪球

 

4. 快速選擇合適的篩選交互

 

原文地址:Weimob設計中心(公眾號)
作者:微盟UED 李浩然

 

轉載請注明:學UI網 » 移動端篩選常見交互形式及運用

登錄收藏
 
你可能喜歡的:
免費圖標有很多,就是為了不用畫嗎?瞎扯!免費圖標有很多,就是為了不用畫嗎?瞎扯!
微信授權登錄中的驚艷設計微信授權登錄中的驚艷設計
聊一聊交互中的“大家來找茬”聊一聊交互中的“大家來找茬”
設計沒亮點,試試這樣!(下篇)設計沒亮點,試試這樣!(下篇)
你真的會設計小標簽嗎?你真的會設計小標簽嗎?
UI設計經驗分享,用實戰教你界面改版UI設計經驗分享,用實戰教你界面改版
想了解VR設計?看完這篇就夠了!想了解VR設計?看完這篇就夠了!
按鈕規范系列 - 「取消按鈕」的設計詳解 | 細節分析按鈕規范系列 – 「取消按鈕」的設計詳解 | 細節分析
產品圖標 - 谷歌 Material 規范產品圖標 – 谷歌 Material 規范
設計沒亮點,試試這樣!設計沒亮點,試試這樣!
?
江苏11选五今天开结果查询