唐老鴨

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

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

1.入口型篩選

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

去哪兒、攜程

 

2.抽屜型篩選

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

 

2.1垂直抽屜篩選彈層

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

美團、大眾點評

 

2.2 側邊抽屜篩選彈層

▲ 京東?

 

3. 全屏篩選

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

代表產品:

Airbnb 雪球

 

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

 

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

 

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

登錄收藏
 
你可能喜歡的:
5 招輕松打造系統圖標規范5 招輕松打造系統圖標規范
一款APP的交互文檔從撰寫到交付②一款APP的交互文檔從撰寫到交付②
Material Design Layout Spacing methods 間距規范Material Design Layout Spacing methods 間距規范
設計沉思錄|設計師應該了解的響應式知識設計沉思錄|設計師應該了解的響應式知識
【寶典在手,設計不愁】2019最全App設計備忘錄,助你輕松查漏【寶典在手,設計不愁】2019最全App設計備忘錄,助你輕松查漏
不會用APP,會被罵智商有問題?不會用APP,會被罵智商有問題?
如何做出好的“卡片”設計?8種方法大分享如何做出好的“卡片”設計?8種方法大分享
如何悄無聲息的如何悄無聲息的”殺死”交互等待
UI備忘單:文本字段UI備忘單:文本字段
B端篩選器的小秘密,你們發現了嗎?B端篩選器的小秘密,你們發現了嗎?
?
江苏11选五今天开结果查询 最好的股票配资平台排名 广东好彩1 北京pk10 极速11选5 最好的股票分析软件排行榜 怎样分析股票k线图的走势分析什么叫趋势持股 2019年上证指数查询 下周 股票推荐 股票配资选股 如何炒金 a股指数和上证指数 2013年上证指数 手机炒股软件 上证指数历年k线图 安徽快3 广西11选5