一、高效信息抓取：讓系統(tǒng)替用戶 “讀” 與 “填”

• 釘釘代辦：自動(dòng)識(shí)別文本中的時(shí)間，一鍵完成日程設(shè)置

  

• 微信圖片文字識(shí)別：指尖滑動(dòng)即可選中、復(fù)制、轉(zhuǎn)發(fā)，告別手動(dòng)打字

  

• 閑魚 × 淘寶：訂單數(shù)據(jù)互通，一鍵同步已購(gòu)商品，自動(dòng)給出估價(jià)

  

• 支付寶綁卡：拍照識(shí)別卡號(hào)與開戶行，免去逐位輸入

  

二、避免重復(fù)閱讀與操作：跳過無(wú)效流程

• 愛奇藝劇集：一鍵跳過片頭，支持整劇默認(rèn)跳過

  

• 微信朋友圈：重返時(shí)一鍵 “跳到未看位置”，不重復(fù)瀏覽

  

• 微信群未讀：標(biāo)記未讀條數(shù)，點(diǎn)擊直達(dá)最新消息位置

  

三、降低出錯(cuò)概率：提前預(yù)判，減少返工

• 美團(tuán)配送：惡劣天氣先派單給騎手，再通知商家，避免無(wú)人配送

  

• 高德地圖：提前預(yù)警擁堵路段，給用戶決策時(shí)間

  

• 微信紅包 / 轉(zhuǎn)賬：超時(shí)提醒，一鍵定位對(duì)應(yīng)聊天，防止遺漏

  

• 美團(tuán)單車：App 內(nèi)關(guān)鎖，杜絕忘鎖、折返鎖車

  

   

四、用選擇代替輸入：少打字、多點(diǎn)選

• 餓了么備注：歷史備注一鍵選用，不用重復(fù)編輯
• 攜程拼音：姓名一鍵轉(zhuǎn)拼音，多音字自動(dòng)提供選項(xiàng)

  

• 京東評(píng)價(jià)：預(yù)設(shè)評(píng)價(jià)標(biāo)簽，快速完成評(píng)分

  

• 微信零錢通：“全部轉(zhuǎn)入” 快捷按鈕，不用輸入金額

  

五、提供下一步路徑：連貫操作，不用折返

• 高德地圖：查路線后，直接顯示單車 / 地鐵掃碼入口
• 支付寶出行：地鐵支付成功，一鍵喚起網(wǎng)約車

  

• 螞蟻森林：“找能量” 直達(dá)可收取好友界面，高效偷取

  

• 得到 / 大眾點(diǎn)評(píng)：截屏自動(dòng)彈出分享按鈕，一步分享

一、閑魚：AI發(fā)布提效

閑魚發(fā)閑置功能接入AI，只需上傳商品圖片就可以直接生成描述文案，極大幫助用戶簡(jiǎn)化發(fā)布流程

1. 零門檻發(fā)布，降低發(fā)布時(shí)間成本

解決非專業(yè)用戶 “不會(huì)寫文案、不懂專業(yè)術(shù)語(yǔ)” 的痛點(diǎn)，自動(dòng)提取商品特征，組合成規(guī)范文案；相比傳統(tǒng)發(fā)布流程的耗時(shí)編輯文案、核對(duì)信息，更高效快捷。

2. 優(yōu)化內(nèi)容，提升交易轉(zhuǎn)化

自動(dòng)生成符合當(dāng)前市場(chǎng)熱點(diǎn)的文案表述，更能多文風(fēng)轉(zhuǎn)換，一鍵轉(zhuǎn)為趣味的 “抽象文學(xué)”“黛玉文學(xué)”等，提升內(nèi)容點(diǎn)擊率。

二、支付寶：廣告位游戲化包裝

支付寶的首頁(yè)Banner通過游戲化的包裝，快速吸引注意力，驅(qū)動(dòng)用戶主動(dòng)點(diǎn)擊探索，高效地為活動(dòng)頁(yè)面引流。

1. 互動(dòng)機(jī)制強(qiáng)化用戶參與感

采用懸念式互動(dòng)設(shè)計(jì)，button以 “猜猜是什么” 這類問答形式，激發(fā)用戶好奇心，通過游戲化場(chǎng)景的營(yíng)造，降低參與門檻，驅(qū)動(dòng)用戶主動(dòng)點(diǎn)擊探索。

2. 場(chǎng)景氛圍營(yíng)造提升吸引力

在以功能入口為主的首頁(yè)，該模塊具有游戲化趣味性的氛圍營(yíng)造，從視覺上差異化的呈現(xiàn)，相比傳統(tǒng)的靜態(tài)廣告位，更能有效抓住用戶眼球，高效地為活動(dòng)頁(yè)面引流。

三、去哪兒：退票時(shí)挽留場(chǎng)景設(shè)計(jì)

當(dāng)有中轉(zhuǎn)單的用戶在點(diǎn)擊退票時(shí)，用挽留浮層及時(shí)給用戶彈出更優(yōu)的解決方案，并在方案中量化利益點(diǎn)，同時(shí)保證原有票的安全感。整體通過 “先抓痛點(diǎn)→再給解決方案→最后引導(dǎo)操作” 的路徑，優(yōu)化了用戶出行體驗(yàn)。

1. 量化利益點(diǎn)

除了直達(dá)更方便之外，直達(dá)還有更省時(shí)間、金錢，保底票免費(fèi)退等更多的利益點(diǎn)

2. 有兜底有安全感

用當(dāng)前的中轉(zhuǎn)作為保底，先搶票，搶到了還能再退票。讓用戶安心下單，在未搶到心儀票的時(shí)候能有中轉(zhuǎn)的替補(bǔ)票，可以緩解用戶的焦慮情緒，有兜底的保障安全感

四、療愈類App Endel：引導(dǎo)充值會(huì)員的動(dòng)畫

通過一個(gè)巧妙的互動(dòng)行為“搖動(dòng)手機(jī)”，降低用戶對(duì)會(huì)員充值廣告的反感。

1. 提升用戶參與感與趣味性

“搖一搖”互動(dòng)將被動(dòng)觀看廣告轉(zhuǎn)變?yōu)橹鲃?dòng)參與，用戶通過簡(jiǎn)單的物理動(dòng)作即可觸發(fā)折扣，這種即時(shí)反饋機(jī)制增強(qiáng)了趣味性，降低了傳統(tǒng)廣告的侵入感。

2. 降低付費(fèi)決策的心理門檻

通過互動(dòng)行為展示折扣，巧妙地將付費(fèi)流程包裝成一種“獎(jiǎng)勵(lì)”而非強(qiáng)制推銷。用戶感受到的是“主動(dòng)獲取優(yōu)惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費(fèi)選項(xiàng)。

五、小宇宙：創(chuàng)新列表設(shè)計(jì)

通過擬物化的卡牌堆疊形態(tài)，將傳統(tǒng)的平面信息流轉(zhuǎn)變?yōu)榫哂锌臻g縱深感和探索趣味的交互式敘事焦點(diǎn)

1. 視覺層次突破傳統(tǒng)束縛

通過卡片堆疊、傾斜，在二維屏幕上創(chuàng)造出三維空間感。不對(duì)稱的布局打破了傳統(tǒng)設(shè)計(jì)的呆板，賦予界面動(dòng)感與活力，能有效抓住用戶視線，對(duì)抗“橫幅盲視效應(yīng)”

2. 建立擬物化的趣味交互

模擬物理世界卡牌的操作體驗(yàn)，配合流暢的滑動(dòng)動(dòng)畫，讓用戶產(chǎn)生"翻閱卡片"的愉悅感，這種情感化設(shè)計(jì)能顯著提升用戶的操作滿足感和停留時(shí)長(zhǎng)

3. 內(nèi)容暗示激發(fā)探索行為

堆疊效果露出部分內(nèi)容作為預(yù)覽，能有效刺激用戶的好奇心，主動(dòng)進(jìn)行滑動(dòng)探索，提升內(nèi)容消費(fèi)深度

六、QQ音樂：個(gè)人中心下拉觸發(fā)金幣中心

該設(shè)計(jì)通過 “貼合用戶習(xí)慣的交互 + 強(qiáng)引導(dǎo) + 積分激勵(lì)” 的組合策略，實(shí)現(xiàn)簽到轉(zhuǎn)化與用戶留存

1. 交互設(shè)計(jì)貼合用戶固有習(xí)慣

采用下拉觸發(fā)模式，無(wú)需額外學(xué)習(xí)成本，降低用戶參與簽到的操作門檻，提升即時(shí)轉(zhuǎn)化效率

2. 視覺設(shè)計(jì)強(qiáng)化引導(dǎo)與目標(biāo)感知

以金幣掉落清晰的視覺元素突出金幣中心入口，讓用戶快速捕捉核心功能，減少尋找成本，縮短 “看到 - 參與” 的路徑

3. 激勵(lì)設(shè)計(jì)構(gòu)建留存閉環(huán)

用 “金幣” 作為即時(shí)激勵(lì)，滿足用戶即時(shí)反饋的心理需求，驅(qū)動(dòng)次日復(fù)訪，同時(shí)聯(lián)動(dòng)積分體系，將單次簽到轉(zhuǎn)化為長(zhǎng)期行為

最后要說(shuō)的話

本期的設(shè)計(jì)分享就到這里啦。

文章中的案例與思考來(lái)自于UED同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品，挖掘更多值得分享、學(xué)習(xí)的設(shè)計(jì)案例。努力將其中的方法理論應(yīng)用到后續(xù)的產(chǎn)品設(shè)計(jì)中。

愿我們的努力為你帶來(lái)更好的體驗(yàn)。下次見。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

前言

一、先搞懂：篩選是什么？為什么要用？

1. 篩選的定義

2. 篩選 vs 搜索（核心區(qū)別）

• 篩選：系統(tǒng)提供條件，用戶被動(dòng)選擇 → 縮小范圍
• 搜索：用戶主動(dòng)輸入明確關(guān)鍵詞 → 精準(zhǔn)查找

3. 什么時(shí)候必須加篩選？

1. 系統(tǒng)定義篩選（一級(jí)篩選）
    

   

   大方向快速切換，如：訂單（待支付 / 待發(fā)貨）、優(yōu)惠券（未使用 / 已過期）。
2. 用戶自定義篩選（二級(jí) / 精細(xì)化篩選）
    
   在一級(jí)結(jié)果里進(jìn)一步精準(zhǔn)，如：價(jià)格、品牌、發(fā)貨地、評(píng)分等。

二、5 種最常用篩選樣式（直接對(duì)應(yīng)場(chǎng)景）

1. Tab 篩選

• 形態(tài)：橫向 / 縱向常駐展示
• 優(yōu)點(diǎn)：一目了然、隨時(shí)切換、無(wú)學(xué)習(xí)成本
• 場(chǎng)景：內(nèi)容大類劃分（新聞?lì)l道、視頻分類、商品一級(jí)類目）
• 缺點(diǎn)：結(jié)果偏模糊，需搭配二次篩選

2. 彈窗式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊蒙層彈出
• 優(yōu)點(diǎn)：省空間、多維度平鋪、不占頁(yè)面
• 場(chǎng)景：電商列表、外賣、出行等高頻精細(xì)化篩選
• 適用：條件不多、操作快

3. 折疊式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊展開、常駐頁(yè)面
• 優(yōu)點(diǎn)：比 Tab 省空間，比彈窗更可控
• 場(chǎng)景：中度篩選需求，需反復(fù)調(diào)整條件

4. 高級(jí)篩選（新頁(yè)面）

• 形態(tài)：跳轉(zhuǎn)到獨(dú)立頁(yè)面
• 優(yōu)點(diǎn)：無(wú)干擾、可放大量細(xì)顆粒條件
• 場(chǎng)景：汽車、房產(chǎn)、招聘、復(fù)雜 B 端篩選
• 適用：條件多、層級(jí)深、需專注操作

5. 篩選 + 排序組合（移動(dòng)端標(biāo)配）

• 形態(tài)：篩選按鈕 + 綜合 / 價(jià)格 / 銷量等排序
• 優(yōu)點(diǎn)：一步完成 “縮小范圍 + 重新排列”
• 場(chǎng)景：幾乎所有商品 / 內(nèi)容列表
• 代表：美團(tuán)、餓了么、淘寶、京東

三、3 個(gè)篩選維度（決定怎么布局）

1. 單維度篩選

• 一次只選一個(gè)條件，觸發(fā)即生效
• 標(biāo)簽簡(jiǎn)短（≤5 字）、語(yǔ)義清晰
• 場(chǎng)景：訂單狀態(tài)、內(nèi)容分類

2. 多維度篩選

• 支持單選 / 多選 / 區(qū)間 / 滑塊
• 需配：確定 + 重置按鈕
• 移動(dòng)端建議：一級(jí)維度≤9 個(gè)，多余整合到二級(jí)

3. 多等級(jí)篩選

• 層級(jí)：一級(jí)分類 → 二級(jí)屬性 → 三級(jí)參數(shù)
• 移動(dòng)端最多 3 級(jí)，避免迷路
• 適合：類目復(fù)雜的電商、后臺(tái)系統(tǒng)

四、篩選設(shè)計(jì) 3 大核心準(zhǔn)則（必遵守）

1. 以用戶效率為目標(biāo)

• 不知道要什么的用戶：靠分類 + 篩選引導(dǎo)
• 知道要什么的用戶：靠精準(zhǔn)條件快速鎖定
• 最終目標(biāo)：降低時(shí)間成本，提升轉(zhuǎn)化與留存

2. 按產(chǎn)品類型定制條件

• 電商：品牌、價(jià)格、銷量、評(píng)分、服務(wù)
• 新聞 / 內(nèi)容：熱度、時(shí)間、偏好、標(biāo)簽
• 工具 / B 端：狀態(tài)、時(shí)間區(qū)間、負(fù)責(zé)人、關(guān)鍵字

3. 按使用頻率排優(yōu)先級(jí)

• 買手機(jī)：品牌→內(nèi)存→容量→價(jià)格
• 買日用品：價(jià)格→銷量→（品牌放高級(jí)）

五、總結(jié)（一句話記住）

• 簡(jiǎn)單分類 → Tab
• 常規(guī)精篩 → 彈窗
• 復(fù)雜深篩 → 高級(jí)頁(yè)面
• 列表標(biāo)配 → 篩選 + 排序

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在蘭亭秒微的 UI/UX 設(shè)計(jì)體系里，留白不是 “空著”，而是提升質(zhì)感、聚焦信息、優(yōu)化體驗(yàn)的核心手段。優(yōu)秀的留白設(shè)計(jì)，能在簡(jiǎn)約風(fēng)格與功能可用性之間達(dá)到完美平衡，需要長(zhǎng)期實(shí)踐與經(jīng)驗(yàn)沉淀。

作為專注 UI/UE 設(shè)計(jì)與用戶體驗(yàn)優(yōu)化的專業(yè)團(tuán)隊(duì)，蘭亭秒微在工業(yè)軟件、醫(yī)療設(shè)備、能源監(jiān)控、企業(yè)信息化等領(lǐng)域長(zhǎng)期實(shí)踐，始終以以用戶為中心為設(shè)計(jì)核心。本文將結(jié)合蘭亭秒微項(xiàng)目經(jīng)驗(yàn)，提煉《用戶體驗(yàn)要素》《簡(jiǎn)約至上》兩本經(jīng)典書籍的核心觀點(diǎn)，為產(chǎn)品設(shè)計(jì)與體驗(yàn)升級(jí)提供系統(tǒng)化理論支撐。

設(shè)計(jì)師遇到瓶頸，最好的破局方式，是跳出純視覺審美，回到用戶體驗(yàn)本質(zhì)，重新審視需求、場(chǎng)景、行為與感受，用科學(xué)方法做有依據(jù)、可落地、能產(chǎn)生價(jià)值的設(shè)計(jì)。

上一篇的知識(shí)管理分享，我們圍繞設(shè)計(jì)行業(yè)的知識(shí)管理核心，闡述了如何在合作中建立信任的底層邏輯，本篇分享將繼續(xù)完善上篇觀點(diǎn)，結(jié)合蘭亭妙微十五年的設(shè)計(jì)實(shí)戰(zhàn)經(jīng)驗(yàn)，為大家拆解設(shè)計(jì)行業(yè)知識(shí)管理的落地方法與核心價(jià)值。

一、Aurora AI 設(shè)計(jì)亮點(diǎn)：AI 工具的體驗(yàn)標(biāo)桿

1. 視覺設(shè)計(jì)：科技感與溫度感的平衡

2. 信息架構(gòu)：極簡(jiǎn)高效，全流程閉環(huán)

3. 交互體驗(yàn)：多模態(tài)適配，個(gè)性化賦能

一、先懂?dāng)?shù)據(jù)：列表設(shè)計(jì)的 3 個(gè)核心要素

1. 屬性字段：明確要展示的信息點(diǎn)

• 設(shè)計(jì)前要梳理全字段，不遺漏關(guān)鍵信息
• 給字段劃分權(quán)重與分類，優(yōu)先突出核心信息，次要信息弱化或隱藏

2. 字段值：確定信息的展示形式

• 明確字段值的限制：文本長(zhǎng)度、圖片尺寸、狀態(tài)類型
• 統(tǒng)一轉(zhuǎn)化規(guī)則：比如 VIP 等級(jí)用金銀銅圖標(biāo)替代文字，提升視覺效率

3. 字段狀態(tài)：適配不同場(chǎng)景的顯示邏輯

• 場(chǎng)景示例：外賣列表的配送標(biāo)簽（快送 / 專送 / 自配）、配送時(shí)間樣式差異
• 設(shè)計(jì)全覆蓋：正常態(tài)、高亮態(tài)、禁用態(tài)、空態(tài)，確保所有場(chǎng)景適配

二、再定框架：列表頁(yè)的標(biāo)準(zhǔn)結(jié)構(gòu) + 2 種布局

列表頁(yè)標(biāo)準(zhǔn)框架

• 運(yùn)營(yíng)模塊控制篇幅，避免擠壓列表首屏展示
• 可在列表中插入運(yùn)營(yíng)廣告、內(nèi)容推薦，平衡信息與轉(zhuǎn)化

移動(dòng)端 2 種核心列表布局

1. 單列列表：一行一個(gè)數(shù)據(jù)項(xiàng)

• 引導(dǎo)型：核心目的是跳轉(zhuǎn)詳情，比如商品、酒店、外賣列表，突出封面與核心信息
• 展示型：直接呈現(xiàn)完整內(nèi)容，無(wú)需跳轉(zhuǎn)，比如朋友圈、消息列表

2. 多列列表：一行多個(gè)數(shù)據(jù)項(xiàng)

• 等高布局：每條數(shù)據(jù)高度統(tǒng)一、對(duì)齊規(guī)整，適合字段統(tǒng)一、差異小的場(chǎng)景（如電商商品、圖集）
• 瀑布流布局：數(shù)據(jù)高度自適應(yīng)，靈活度高，適合內(nèi)容長(zhǎng)短不一、視覺差異化大的場(chǎng)景（如筆記、穿搭、短視頻封面）

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。