一、閑魚：AI發布提效

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

1. 零門檻發布，降低發布時間成本

解決非專業用戶 “不會寫文案、不懂專業術語” 的痛點，自動提取商品特征，組合成規范文案；相比傳統發布流程的耗時編輯文案、核對信息，更高效快捷。

2. 優化內容，提升交易轉化

自動生成符合當前市場熱點的文案表述，更能多文風轉換，一鍵轉為趣味的 “抽象文學”“黛玉文學”等，提升內容點擊率。

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

支付寶的首頁Banner通過游戲化的包裝，快速吸引注意力，驅動用戶主動點擊探索，高效地為活動頁面引流。

1. 互動機制強化用戶參與感

采用懸念式互動設計，button以 “猜猜是什么” 這類問答形式，激發用戶好奇心，通過游戲化場景的營造，降低參與門檻，驅動用戶主動點擊探索。

2. 場景氛圍營造提升吸引力

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

三、去哪兒：退票時挽留場景設計

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

1. 量化利益點

除了直達更方便之外，直達還有更省時間、金錢，保底票免費退等更多的利益點

2. 有兜底有安全感

用當前的中轉作為保底，先搶票，搶到了還能再退票。讓用戶安心下單，在未搶到心儀票的時候能有中轉的替補票，可以緩解用戶的焦慮情緒，有兜底的保障安全感

四、療愈類App Endel：引導充值會員的動畫

通過一個巧妙的互動行為“搖動手機”，降低用戶對會員充值廣告的反感。

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

“搖一搖”互動將被動觀看廣告轉變為主動參與，用戶通過簡單的物理動作即可觸發折扣，這種即時反饋機制增強了趣味性，降低了傳統廣告的侵入感。

2. 降低付費決策的心理門檻

通過互動行為展示折扣，巧妙地將付費流程包裝成一種“獎勵”而非強制推銷。用戶感受到的是“主動獲取優惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費選項。

五、小宇宙：創新列表設計

通過擬物化的卡牌堆疊形態，將傳統的平面信息流轉變為具有空間縱深感和探索趣味的交互式敘事焦點

1. 視覺層次突破傳統束縛

通過卡片堆疊、傾斜，在二維屏幕上創造出三維空間感。不對稱的布局打破了傳統設計的呆板，賦予界面動感與活力，能有效抓住用戶視線，對抗“橫幅盲視效應”

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

模擬物理世界卡牌的操作體驗，配合流暢的滑動動畫，讓用戶產生"翻閱卡片"的愉悅感，這種情感化設計能顯著提升用戶的操作滿足感和停留時長

3. 內容暗示激發探索行為

堆疊效果露出部分內容作為預覽，能有效刺激用戶的好奇心，主動進行滑動探索，提升內容消費深度

六、QQ音樂：個人中心下拉觸發金幣中心

該設計通過 “貼合用戶習慣的交互 + 強引導 + 積分激勵” 的組合策略，實現簽到轉化與用戶留存

1. 交互設計貼合用戶固有習慣

采用下拉觸發模式，無需額外學習成本，降低用戶參與簽到的操作門檻，提升即時轉化效率

2. 視覺設計強化引導與目標感知

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

3. 激勵設計構建留存閉環

用 “金幣” 作為即時激勵，滿足用戶即時反饋的心理需求，驅動次日復訪，同時聯動積分體系，將單次簽到轉化為長期行為

最后要說的話

本期的設計分享就到這里啦。

文章中的案例與思考來自于UED同學的日常分享。

后續我們將持續深度體驗產品，挖掘更多值得分享、學習的設計案例。努力將其中的方法理論應用到后續的產品設計中。

愿我們的努力為你帶來更好的體驗。下次見。

轉載：優設

蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

前言

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

1. 篩選的定義

2. 篩選 vs 搜索（核心區別）

• 篩選：系統提供條件，用戶被動選擇 → 縮小范圍
• 搜索：用戶主動輸入明確關鍵詞 → 精準查找

3. 什么時候必須加篩選？

1. 系統定義篩選（一級篩選）
    

   

   大方向快速切換，如：訂單（待支付 / 待發貨）、優惠券（未使用 / 已過期）。
2. 用戶自定義篩選（二級 / 精細化篩選）
    
   在一級結果里進一步精準，如：價格、品牌、發貨地、評分等。

二、5 種最常用篩選樣式（直接對應場景）

1. Tab 篩選

• 形態：橫向 / 縱向常駐展示
• 優點：一目了然、隨時切換、無學習成本
• 場景：內容大類劃分（新聞頻道、視頻分類、商品一級類目）
• 缺點：結果偏模糊，需搭配二次篩選

2. 彈窗式篩選

• 形態：入口隱藏，點擊蒙層彈出
• 優點：省空間、多維度平鋪、不占頁面
• 場景：電商列表、外賣、出行等高頻精細化篩選
• 適用：條件不多、操作快

3. 折疊式篩選

• 形態：入口隱藏，點擊展開、常駐頁面
• 優點：比 Tab 省空間，比彈窗更可控
• 場景：中度篩選需求，需反復調整條件

4. 高級篩選（新頁面）

• 形態：跳轉到獨立頁面
• 優點：無干擾、可放大量細顆粒條件
• 場景：汽車、房產、招聘、復雜 B 端篩選
• 適用：條件多、層級深、需專注操作

5. 篩選 + 排序組合（移動端標配）

• 形態：篩選按鈕 + 綜合 / 價格 / 銷量等排序
• 優點：一步完成 “縮小范圍 + 重新排列”
• 場景：幾乎所有商品 / 內容列表
• 代表：美團、餓了么、淘寶、京東

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

1. 單維度篩選

• 一次只選一個條件，觸發即生效
• 標簽簡短（≤5 字）、語義清晰
• 場景：訂單狀態、內容分類

2. 多維度篩選

• 支持單選 / 多選 / 區間 / 滑塊
• 需配：確定 + 重置按鈕
• 移動端建議：一級維度≤9 個，多余整合到二級

3. 多等級篩選

• 層級：一級分類 → 二級屬性 → 三級參數
• 移動端最多 3 級，避免迷路
• 適合：類目復雜的電商、后臺系統

四、篩選設計 3 大核心準則（必遵守）

1. 以用戶效率為目標

• 不知道要什么的用戶：靠分類 + 篩選引導
• 知道要什么的用戶：靠精準條件快速鎖定
• 最終目標：降低時間成本，提升轉化與留存

2. 按產品類型定制條件

• 電商：品牌、價格、銷量、評分、服務
• 新聞 / 內容：熱度、時間、偏好、標簽
• 工具 / B 端：狀態、時間區間、負責人、關鍵字

3. 按使用頻率排優先級

• 買手機：品牌→內存→容量→價格
• 買日用品：價格→銷量→（品牌放高級）

五、總結（一句話記住）

• 簡單分類 → Tab
• 常規精篩 → 彈窗
• 復雜深篩 → 高級頁面
• 列表標配 → 篩選 + 排序

蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

一、Aurora AI 設計亮點：AI 工具的體驗標桿

1. 視覺設計：科技感與溫度感的平衡

2. 信息架構：極簡高效，全流程閉環

3. 交互體驗：多模態適配，個性化賦能

一、先懂數據：列表設計的 3 個核心要素

1. 屬性字段：明確要展示的信息點

• 設計前要梳理全字段，不遺漏關鍵信息
• 給字段劃分權重與分類，優先突出核心信息，次要信息弱化或隱藏

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

• 明確字段值的限制：文本長度、圖片尺寸、狀態類型
• 統一轉化規則：比如 VIP 等級用金銀銅圖標替代文字，提升視覺效率

3. 字段狀態：適配不同場景的顯示邏輯

• 場景示例：外賣列表的配送標簽（快送 / 專送 / 自配）、配送時間樣式差異
• 設計全覆蓋：正常態、高亮態、禁用態、空態，確保所有場景適配

二、再定框架：列表頁的標準結構 + 2 種布局

列表頁標準框架

• 運營模塊控制篇幅，避免擠壓列表首屏展示
• 可在列表中插入運營廣告、內容推薦，平衡信息與轉化

移動端 2 種核心列表布局

1. 單列列表：一行一個數據項

• 引導型：核心目的是跳轉詳情，比如商品、酒店、外賣列表，突出封面與核心信息
• 展示型：直接呈現完整內容，無需跳轉，比如朋友圈、消息列表

2. 多列列表：一行多個數據項

• 等高布局：每條數據高度統一、對齊規整，適合字段統一、差異小的場景（如電商商品、圖集）
• 瀑布流布局：數據高度自適應，靈活度高，適合內容長短不一、視覺差異化大的場景（如筆記、穿搭、短視頻封面）

蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

健身健康類 App：數據可視化 + 陪伴感，打造高效健康管理工具

 

這款健身 App 的設計，精準貼合用戶 “科學健身、高效管理” 的核心需求，亮點突出：

 

1. 視覺風格溫暖有活力：以暖橙色為主色調，搭配柔和的米白底色，弱化工具的冰冷感，營造出積極、陪伴的健身氛圍，讓用戶在使用中獲得愉悅的情緒體驗；
2. 信息層級清晰直觀：首頁以體重、步數為核心視覺錨點，用卡片式布局聚合健康指標、運動計劃、營養數據，核心數據（如體重 72.5kg、步數 82641）突出展示，讓用戶一眼獲取核心狀態，快速掌握健身進度；
3. 交互便捷高效：“+” 號快速錄入健康數據、“STOP” 一鍵暫停運動，操作路徑極簡，貼合健身場景 “快速記錄、高效管理” 的需求；同時用曲線圖表直觀展示體重、步數趨勢，讓用戶清晰感知運動成果，強化堅持動力。

   

   

   

    

    

 

（二）Chegg Study 學習類 App：趣味化交互 + 學習閉環，讓學習更輕松

 

Chegg Study 作為學習類 App 的優質范本，設計邏輯精準匹配學生用戶需求：

 

1. IP 化視覺貫穿全端：以可愛的 AI 機器人為品牌 IP，搭配 3D 卡通學生形象、趣味數學符號插畫，將抽象的學習工具轉化為有溫度的陪伴角色，弱化學習的枯燥感，緩解學生的學習焦慮；
2. 全流程學習閉環搭建：從啟動頁引導、學科分類、多入口提問（文字 / 拍照 / 語音），到題庫管理、歷史問題復盤，完整覆蓋學生 “遇到問題→獲取答案→復盤學習” 的全流程，操作路徑極簡，大幅降低使用門檻；
3. 正向激勵強化粘性：個人中心聚合提問數、已解決數、收藏數等核心數據，用可視化成果強化學生的學習成就感，形成正向激勵，有效提升用戶留存與使用頻次。

 

---

  

蘭亭妙微深耕 C 端產品 UI/UX 設計多年，擁有豐富的健身、教育類產品設計、改版、重構經驗。近期，蘭亭妙微成功完成上市公司競業達教育軟件事業部重點產品的 UI/UE 全案重構，覆蓋教師端、學生端、教室端、平臺端全系列軟件，圓滿交付并獲得客戶高度認可。

 

本次改版圍繞 “貼合教育場景、提升教學效率、優化用戶體驗” 三大核心目標，蘭亭妙微對全系列產品進行了全方位升級：視覺上實現全端風格統一，兼顧教師端的專業性與學生端的親和性；信息架構上重構 “教 — 學 — 管” 全流程，讓各端功能布局更合理、操作路徑更簡潔；交互體驗上貼合課堂教學、課后學習、教學管理等不同場景，優化觸控適配、數據展示、快捷操作等細節，真正實現 “全場景覆蓋、多端一體化” 的使用體驗，助力競業達教育軟件提升產品競爭力。

 

蘭亭妙微始終堅持 “以用戶為中心” 的設計理念，無論是健身類產品的陪伴感打造，還是教育類產品的學習閉環搭建，都以 “提升用戶體驗、賦能業務增長” 為核心。如果您有健身、教育類 App 的 UI/UE 設計、產品改版、界面重構等需求，歡迎隨時與蘭亭妙微對接，我們將以專業的設計能力，為您打造貼合場景、體驗優質的產品解決方案。

 

---

 

三、設計總結

 

無論是健身類 App 的 “數據可視化 + 陪伴感”，還是學習類 App 的 “趣味交互 + 學習閉環”，都印證了 C 端產品 UI/UX 設計的核心邏輯：視覺貼合用戶場景、信息架構服務核心流程、交互體驗強化使用價值。蘭亭妙微將持續深耕 C 端產品設計，以專業能力為不同賽道的產品賦能，打造更有溫度、更高效的用戶體驗。

 

蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

作為深耕UI設計領域的專業團隊，北京蘭亭妙微UI設計團隊始終堅持以全球優質設計作品為學習標桿，在各類UI項目實踐中不斷沉淀經驗、打磨功底，從不同品類的數字產品設計中汲取靈感，優化設計思路與落地能力。本次針對熱門的健康管理、教育學習兩類App UI設計展開專業賞析，梳理核心設計亮點與實用思路，同步分享團隊學習心得，與業內同行、合作伙伴交流共進，北京蘭亭妙微，與你一起共成長。
一、健康管理類App UI：理性數據與感性關懷的平衡設計

這款健康管理類App UI，精準抓住用戶對健康數據可視化、操作便捷性與情感溫度感的核心需求，整體設計兼顧實用性與視覺舒適度，跳出同類產品冰冷刻板的設計誤區，整體調性溫和專業，適配全年齡段用戶的使用審美與操作習慣。

視覺層面選用暖調活力色系作為主色，搭配低飽和度淺灰與白色作為基底，弱化視覺壓迫感，打造柔和舒適的視覺氛圍。布局上采用清晰的卡片式模塊化設計，將步數、體重、身體指標、運動計劃、營養攝入等核心功能分區歸類，信息層級分明，用戶無需花費過多時間梳理，就能快速抓取關鍵健康數據，徹底避免信息雜亂、視覺過載的問題。

數據呈現上摒棄復雜生硬的圖表，改用柔和折線圖、環形進度條搭配簡約文字標注，兼顧數據專業性與視覺美觀度；核心操作按鈕做突出視覺處理，位置貼合移動端單手操作邏輯，輔助功能入口做輕量化隱藏，兼顧核心功能易用性與界面簡潔度，每一處細節都貼合用戶日常使用健康類App的真實場景。

二、教育學習類App UI：知識傳遞與趣味體驗的雙向融合

教育類App的核心使命是高效傳遞知識，同時降低用戶學習的心理門檻，緩解學習枯燥感，這款教育學習類App UI完美平衡了專業性與趣味性，整體風格清新明快，視覺統一性極強，適配學生、職場進修等不同群體的學習需求。

色彩體系以柔和暖橙搭配干凈白色為主，局部點綴低飽和亮色區分學科與功能模塊，視覺上清新治愈，有效緩解長時間使用的視覺疲勞。界面布局遵循移動端通用交互習慣，底部固定核心導航欄，首頁核心功能入口直觀展示，提問、搜題、文庫、個人中心等高頻功能一鍵可達，操作路徑極簡，新手也能快速上手。

設計中融入輕量化3D插畫與趣味視覺元素，替代純文字排版，讓界面更具生動感，同時不干擾核心學習功能的使用；針對付費升級、免費試用等功能入口，做差異化視覺設計，突出核心轉化點的同時，不破壞整體界面的和諧感，品牌視覺語言貫穿全程，強化用戶記憶點，實現體驗感與商業性的平衡。

三、蘭亭妙微團隊設計感悟與深耕方向

優質的UI設計從來不是單純的視覺美化，而是深度結合用戶需求、產品定位與使用場景，實現美觀度、實用性與易用性的統一。不管是健康管理類產品注重的情感關懷與數據效率，還是教育類產品看重的知識傳遞與趣味體驗，都為我們的日常UI設計工作提供了極具價值的參考思路。

北京蘭亭妙微UI設計團隊長期專注各類UI設計項目，始終保持空杯學習的心態，持續關注全球優質設計案例，不斷更新設計理念，打磨視覺表達與交互邏輯能力，把每一份學習收獲融入實際項目中，用心為客戶打造貼合產品定位、適配用戶需求的高品質UI設計方案。

未來我們依舊會堅守設計初心，穩步深耕UI設計領域，持續提升專業實力，與更多行業伙伴攜手進步，北京蘭亭妙微，與你一起共成長。

在移動端 UI 設計中，底部 Tab 欄是用戶操作的核心導航組件，直接影響產品的操作體驗與視覺質感。蘭亭妙微設計結合多年移動端設計實戰經驗，從布局、背景、標簽展現、圖標樣式四大核心維度，總結底部 Tab 欄的經典設計思路與實操技巧，為產品設計提供專業參考。