案例 攜程的飯店篩選模組中結合用戶選擇比例來推薦飯店位置熱門位置一目了然。 篩選功能設計：互動細節全面拆解案例 增加可視化的意符以弱引導的方式提供使用者參考。 如京東在按鈕的底色上顯示可視化的百分比以熱門程度的維度給用戶推薦選項。在美團外送中透過滑動條上展示折線圖顯示篩選範圍內對應的結果數。其亮點在於它在不給原本的訊息增負的同時讓使用者很快就感知到可以重點關注的選項。 篩選功能設計：互動細節全面拆解 案例解析 當然我們會發現在日常使用的中有很多的篩選設計都比上面說的複雜得多。 為什麼要設計成這樣呢？結合下面的案例我們感受一下。
上提供了兩種控制輸入：單選框+滑動輸入數位輸入。 為什麼要這樣做呢？ 篩選 美国电话数据 功能設計：互動細節全面拆解 滑動輸入和數位輸入提供了自由的輸入範圍但操作成本略高；單選框輸入範圍局限但更有效率且快速。因此兩者結合使用會更加科學既能照顧有精確需求的用戶又能提供便利的選項。 案例 左圖是大眾美食類型的篩選器：預設為單選邏輯右上角有一個「多選」按鈕點擊會轉換為多選邏輯。 這個互動乍看之下還有點複雜但為什麼要設計成這樣而不是像右圖一樣設計成多選的樣式既能同時滿足單選和多選的需求介面也更簡單呢？ 篩選功能設計：互動細節全面拆解 促成這種設計的可能性很多以下為可能的原因： 單選為高頻場景多選為低頻場景也就是說大部分人都在使用單選只有少部分人需要用到多選；但如果設計成多選的樣式在高頻場景下操作流程就變繁瑣了。
優先為高頻場景考慮不要一味追求統一性和介面精簡。 多選是新功能當引入一個新功能時如果無法確定效果可以不覆蓋原本的邏輯以免影響到老用戶的使用習慣。 總結彈窗形態： 半彈窗適用於結構較簡單的篩選； 全域彈窗適合複雜的結構(如左右結構導航) 彈窗佈局： 分組折疊式選項的瀏覽效率高適合需要在多個類別下選擇選項的情況； 左右結構導航式類目查找效率高適用於類目層級較多的情況。篩選項： 列表式排布適合檢索標籤式排布的展示效率更高； 合理外置高頻篩選項； 在選項上增加輔助描述有助於使用者決策。 作者：皮皮；微信公眾號：K權發佈於人人都是產品經理未經作者許可禁止轉載 題圖來自基於 協議 此文觀點僅代表作者本人人人都是產品經理平台僅提供資訊儲存空間服務。