前言

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

1. 篩選的定義

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

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

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

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

   

   大方向快速切換，如：訂單（待支付 / 待發(fā)貨）、優(yōu)惠券（未使用 / 已過(guò)期）。
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)擊展開(kāi)、常駐頁(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.hengshangtqd.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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

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

1. 視覺(jué)設(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)替代文字，提升視覺(jué)效率

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)短不一、視覺(jué)差異化大的場(chǎng)景（如筆記、穿搭、短視頻封面）

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

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

 

這款健身 App 的設(shè)計(jì)，精準(zhǔn)貼合用戶 “科學(xué)健身、高效管理” 的核心需求，亮點(diǎn)突出：

 

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

   

   

   

    

    

 

（二）Chegg Study 學(xué)習(xí)類 App：趣味化交互 + 學(xué)習(xí)閉環(huán)，讓學(xué)習(xí)更輕松

 

Chegg Study 作為學(xué)習(xí)類 App 的優(yōu)質(zhì)范本，設(shè)計(jì)邏輯精準(zhǔn)匹配學(xué)生用戶需求：

 

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

 

---

  

蘭亭妙微深耕 C 端產(chǎn)品 UI/UX 設(shè)計(jì)多年，擁有豐富的健身、教育類產(chǎn)品設(shè)計(jì)、改版、重構(gòu)經(jīng)驗(yàn)。近期，蘭亭妙微成功完成上市公司競(jìng)業(yè)達(dá)教育軟件事業(yè)部重點(diǎn)產(chǎn)品的 UI/UE 全案重構(gòu)，覆蓋教師端、學(xué)生端、教室端、平臺(tái)端全系列軟件，圓滿交付并獲得客戶高度認(rèn)可。

 

本次改版圍繞 “貼合教育場(chǎng)景、提升教學(xué)效率、優(yōu)化用戶體驗(yàn)” 三大核心目標(biāo)，蘭亭妙微對(duì)全系列產(chǎn)品進(jìn)行了全方位升級(jí)：視覺(jué)上實(shí)現(xiàn)全端風(fēng)格統(tǒng)一，兼顧教師端的專業(yè)性與學(xué)生端的親和性；信息架構(gòu)上重構(gòu) “教 — 學(xué) — 管” 全流程，讓各端功能布局更合理、操作路徑更簡(jiǎn)潔；交互體驗(yàn)上貼合課堂教學(xué)、課后學(xué)習(xí)、教學(xué)管理等不同場(chǎng)景，優(yōu)化觸控適配、數(shù)據(jù)展示、快捷操作等細(xì)節(jié)，真正實(shí)現(xiàn) “全場(chǎng)景覆蓋、多端一體化” 的使用體驗(yàn)，助力競(jìng)業(yè)達(dá)教育軟件提升產(chǎn)品競(jìng)爭(zhēng)力。

 

蘭亭妙微始終堅(jiān)持 “以用戶為中心” 的設(shè)計(jì)理念，無(wú)論是健身類產(chǎn)品的陪伴感打造，還是教育類產(chǎn)品的學(xué)習(xí)閉環(huán)搭建，都以 “提升用戶體驗(yàn)、賦能業(yè)務(wù)增長(zhǎng)” 為核心。如果您有健身、教育類 App 的 UI/UE 設(shè)計(jì)、產(chǎn)品改版、界面重構(gòu)等需求，歡迎隨時(shí)與蘭亭妙微對(duì)接，我們將以專業(yè)的設(shè)計(jì)能力，為您打造貼合場(chǎng)景、體驗(yàn)優(yōu)質(zhì)的產(chǎn)品解決方案。

 

---

 

三、設(shè)計(jì)總結(jié)

 

無(wú)論是健身類 App 的 “數(shù)據(jù)可視化 + 陪伴感”，還是學(xué)習(xí)類 App 的 “趣味交互 + 學(xué)習(xí)閉環(huán)”，都印證了 C 端產(chǎn)品 UI/UX 設(shè)計(jì)的核心邏輯：視覺(jué)貼合用戶場(chǎng)景、信息架構(gòu)服務(wù)核心流程、交互體驗(yàn)強(qiáng)化使用價(jià)值。蘭亭妙微將持續(xù)深耕 C 端產(chǎn)品設(shè)計(jì)，以專業(yè)能力為不同賽道的產(chǎn)品賦能，打造更有溫度、更高效的用戶體驗(yàn)。

 

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

作為深耕UI設(shè)計(jì)領(lǐng)域的專業(yè)團(tuán)隊(duì)，北京蘭亭妙微UI設(shè)計(jì)團(tuán)隊(duì)始終堅(jiān)持以全球優(yōu)質(zhì)設(shè)計(jì)作品為學(xué)習(xí)標(biāo)桿，在各類UI項(xiàng)目實(shí)踐中不斷沉淀經(jīng)驗(yàn)、打磨功底，從不同品類的數(shù)字產(chǎn)品設(shè)計(jì)中汲取靈感，優(yōu)化設(shè)計(jì)思路與落地能力。本次針對(duì)熱門的健康管理、教育學(xué)習(xí)兩類App UI設(shè)計(jì)展開(kāi)專業(yè)賞析，梳理核心設(shè)計(jì)亮點(diǎn)與實(shí)用思路，同步分享團(tuán)隊(duì)學(xué)習(xí)心得，與業(yè)內(nèi)同行、合作伙伴交流共進(jìn)，北京蘭亭妙微，與你一起共成長(zhǎng)。
一、健康管理類App UI：理性數(shù)據(jù)與感性關(guān)懷的平衡設(shè)計(jì)

這款健康管理類App UI，精準(zhǔn)抓住用戶對(duì)健康數(shù)據(jù)可視化、操作便捷性與情感溫度感的核心需求，整體設(shè)計(jì)兼顧實(shí)用性與視覺(jué)舒適度，跳出同類產(chǎn)品冰冷刻板的設(shè)計(jì)誤區(qū)，整體調(diào)性溫和專業(yè)，適配全年齡段用戶的使用審美與操作習(xí)慣。

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

數(shù)據(jù)呈現(xiàn)上摒棄復(fù)雜生硬的圖表，改用柔和折線圖、環(huán)形進(jìn)度條搭配簡(jiǎn)約文字標(biāo)注，兼顧數(shù)據(jù)專業(yè)性與視覺(jué)美觀度；核心操作按鈕做突出視覺(jué)處理，位置貼合移動(dòng)端單手操作邏輯，輔助功能入口做輕量化隱藏，兼顧核心功能易用性與界面簡(jiǎn)潔度，每一處細(xì)節(jié)都貼合用戶日常使用健康類App的真實(shí)場(chǎng)景。

二、教育學(xué)習(xí)類App UI：知識(shí)傳遞與趣味體驗(yàn)的雙向融合

教育類App的核心使命是高效傳遞知識(shí)，同時(shí)降低用戶學(xué)習(xí)的心理門檻，緩解學(xué)習(xí)枯燥感，這款教育學(xué)習(xí)類App UI完美平衡了專業(yè)性與趣味性，整體風(fēng)格清新明快，視覺(jué)統(tǒng)一性極強(qiáng)，適配學(xué)生、職場(chǎng)進(jìn)修等不同群體的學(xué)習(xí)需求。

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

設(shè)計(jì)中融入輕量化3D插畫與趣味視覺(jué)元素，替代純文字排版，讓界面更具生動(dòng)感，同時(shí)不干擾核心學(xué)習(xí)功能的使用；針對(duì)付費(fèi)升級(jí)、免費(fèi)試用等功能入口，做差異化視覺(jué)設(shè)計(jì)，突出核心轉(zhuǎn)化點(diǎn)的同時(shí)，不破壞整體界面的和諧感，品牌視覺(jué)語(yǔ)言貫穿全程，強(qiáng)化用戶記憶點(diǎn)，實(shí)現(xiàn)體驗(yàn)感與商業(yè)性的平衡。

三、蘭亭妙微團(tuán)隊(duì)設(shè)計(jì)感悟與深耕方向

優(yōu)質(zhì)的UI設(shè)計(jì)從來(lái)不是單純的視覺(jué)美化，而是深度結(jié)合用戶需求、產(chǎn)品定位與使用場(chǎng)景，實(shí)現(xiàn)美觀度、實(shí)用性與易用性的統(tǒng)一。不管是健康管理類產(chǎn)品注重的情感關(guān)懷與數(shù)據(jù)效率，還是教育類產(chǎn)品看重的知識(shí)傳遞與趣味體驗(yàn)，都為我們的日常UI設(shè)計(jì)工作提供了極具價(jià)值的參考思路。

北京蘭亭妙微UI設(shè)計(jì)團(tuán)隊(duì)長(zhǎng)期專注各類UI設(shè)計(jì)項(xiàng)目，始終保持空杯學(xué)習(xí)的心態(tài)，持續(xù)關(guān)注全球優(yōu)質(zhì)設(shè)計(jì)案例，不斷更新設(shè)計(jì)理念，打磨視覺(jué)表達(dá)與交互邏輯能力，把每一份學(xué)習(xí)收獲融入實(shí)際項(xiàng)目中，用心為客戶打造貼合產(chǎn)品定位、適配用戶需求的高品質(zhì)UI設(shè)計(jì)方案。

未來(lái)我們依舊會(huì)堅(jiān)守設(shè)計(jì)初心，穩(wěn)步深耕UI設(shè)計(jì)領(lǐng)域，持續(xù)提升專業(yè)實(shí)力，與更多行業(yè)伙伴攜手進(jìn)步，北京蘭亭妙微，與你一起共成長(zhǎng)。

在移動(dòng)端 UI 設(shè)計(jì)中，底部 Tab 欄是用戶操作的核心導(dǎo)航組件，直接影響產(chǎn)品的操作體驗(yàn)與視覺(jué)質(zhì)感。蘭亭妙微設(shè)計(jì)結(jié)合多年移動(dòng)端設(shè)計(jì)實(shí)戰(zhàn)經(jīng)驗(yàn)，從布局、背景、標(biāo)簽展現(xiàn)、圖標(biāo)樣式四大核心維度，總結(jié)底部 Tab 欄的經(jīng)典設(shè)計(jì)思路與實(shí)操技巧，為產(chǎn)品設(shè)計(jì)提供專業(yè)參考。

一、移動(dòng)端界面：醫(yī)療嚴(yán)謹(jǐn)與視覺(jué)清晰的平衡

• 數(shù)據(jù)可視化：采用點(diǎn)陣式心電圖替代傳統(tǒng)折線圖，既保留醫(yī)學(xué)專業(yè)感，又通過(guò)紅色高亮讓用戶直觀識(shí)別心律狀態(tài)，同時(shí)避免了復(fù)雜線條帶來(lái)的閱讀壓力，契合北京蘭亭妙微 “專業(yè)信息輕量化呈現(xiàn)” 的設(shè)計(jì)理念。
• 狀態(tài)反饋：左側(cè)界面清晰標(biāo)注 “Stressful” 狀態(tài)與 “Normal ECG” 結(jié)論，右側(cè)測(cè)量頁(yè)以粒子動(dòng)效強(qiáng)化實(shí)時(shí)感，配合進(jìn)度條與操作按鈕，讓用戶清晰感知測(cè)量進(jìn)程，降低醫(yī)療類產(chǎn)品的使用焦慮。
• 信息層級(jí)：核心數(shù)據(jù)（心率 bpm）以大號(hào)像素字體突出，輔助信息（測(cè)量時(shí)長(zhǎng)、設(shè)備狀態(tài)）置于次要位置，符合移動(dòng)端 “一眼獲取關(guān)鍵信息” 的使用場(chǎng)景，與北京蘭亭妙微擅長(zhǎng)的 “重點(diǎn)突出、層級(jí)分明” 設(shè)計(jì)邏輯高度一致。

二、穿戴端界面：極簡(jiǎn)交互適配腕上場(chǎng)景

• 適配小屏：手表端界面極致簡(jiǎn)化，僅保留核心心率數(shù)字、測(cè)量進(jìn)度與停止按鈕，避免信息過(guò)載，完全貼合腕上設(shè)備的快速操作需求，體現(xiàn)了 “少即是多” 的交互設(shè)計(jì)原則。
• 視覺(jué)聯(lián)動(dòng)：延續(xù)移動(dòng)端的紅色粒子動(dòng)效，實(shí)現(xiàn)跨設(shè)備視覺(jué)一致性，讓用戶在手機(jī)與手表間切換時(shí)無(wú)需重新適應(yīng)，這與北京蘭亭妙微在跨端產(chǎn)品設(shè)計(jì)中強(qiáng)調(diào)的 “體驗(yàn)連貫性” 理念不謀而合。

三、桌面端 / 平板端：專業(yè)管理與數(shù)據(jù)復(fù)盤

• 大屏信息整合：桌面端界面將用戶信息、ECG 數(shù)據(jù)、設(shè)備狀態(tài)、健康趨勢(shì)等模塊有序排布，既滿足專業(yè)用戶的深度復(fù)盤需求，又通過(guò)卡片式布局保持視覺(jué)清爽，是北京蘭亭妙微在企業(yè)級(jí)數(shù)據(jù)產(chǎn)品中常用的 “高效信息聚合” 設(shè)計(jì)思路。
• 功能閉環(huán)：從賬號(hào)創(chuàng)建、設(shè)備連接到數(shù)據(jù)查看、報(bào)告導(dǎo)出，全流程在桌面端完整呈現(xiàn)，同時(shí)保留與移動(dòng)端一致的交互邏輯（如底部導(dǎo)航、數(shù)據(jù)卡片樣式），實(shí)現(xiàn)了 “移動(dòng)端便捷操作 + 桌面端專業(yè)管理” 的產(chǎn)品閉環(huán)。

四、設(shè)計(jì)總結(jié)與專業(yè)視角

• 用視覺(jué)化手段降低醫(yī)學(xué)數(shù)據(jù)的理解門檻，同時(shí)保留專業(yè)嚴(yán)謹(jǐn)性；
• 跨端設(shè)計(jì)高度統(tǒng)一，保證了用戶在不同設(shè)備間的流暢體驗(yàn)；
• 色彩與動(dòng)效的運(yùn)用克制且精準(zhǔn)，既傳遞情緒（如壓力狀態(tài)提示），又不干擾核心功能。

一、核心視覺(jué)：卡通 IP 驅(qū)動(dòng)的情感化設(shè)計(jì)

• IP 形象體系：黃色主形象搭配紫、粉、藍(lán)等多色變體，對(duì)應(yīng)不同功能模塊與用戶角色，視覺(jué)層次清晰且記憶點(diǎn)極強(qiáng)。
• 表情系統(tǒng)：豐富的表情庫(kù)（戴眼鏡、微笑、害羞、犯困等）貫穿全界面，既用于個(gè)性化頭像設(shè)置，也作為學(xué)習(xí)日歷、進(jìn)度反饋的情緒載體，讓冰冷的數(shù)據(jù)變得生動(dòng)有溫度。
• 動(dòng)作語(yǔ)言：攤手疑惑、點(diǎn)贊鼓勵(lì)、滿足休憩等動(dòng)態(tài)化形象，讓 App 的交互反饋更具人情味，有效降低學(xué)習(xí)壓力。

二、功能模塊：清晰直觀的學(xué)習(xí)體驗(yàn)設(shè)計(jì)

• 個(gè)人主頁(yè)：直觀展示用戶名、學(xué)習(xí)進(jìn)度（聽(tīng) / 說(shuō) / 錯(cuò)誤率 / 語(yǔ)言等級(jí)）及任務(wù)入口，用柔和的進(jìn)度條可視化學(xué)習(xí)狀態(tài)，降低信息認(rèn)知成本。
• 學(xué)習(xí)日歷：以表情化小怪物標(biāo)記每日學(xué)習(xí)情況，下方統(tǒng)計(jì)月度學(xué)習(xí)天數(shù)、專注時(shí)長(zhǎng)、專注分?jǐn)?shù)與精力值，讓用戶清晰感知學(xué)習(xí)成果，形成正向激勵(lì)。
• 個(gè)性化頭像：提供多色、多表情的 IP 形象選擇，強(qiáng)化用戶歸屬感，讓產(chǎn)品更具 “專屬感”。
• 學(xué)習(xí)交互頁(yè)：選擇題、填空題等題型設(shè)計(jì)簡(jiǎn)潔，搭配 IP 形象的情緒反饋，完成學(xué)習(xí)后彈出鼓勵(lì)性提示（如 “You studied for 15 minutes!”），將學(xué)習(xí)行為轉(zhuǎn)化為正向情緒體驗(yàn)。
• 登錄與課程頁(yè)：支持多渠道登錄（社交賬號(hào) / 郵箱），針對(duì)不同年齡段（4-12 歲 / 12-18 歲）的課程定價(jià)模塊，用對(duì)應(yīng)顏色的 IP 形象區(qū)分，視覺(jué)引導(dǎo)清晰。

三、設(shè)計(jì)風(fēng)格：童趣與專業(yè)的平衡

• 色彩系統(tǒng)：以明亮黃、紫、粉為主色調(diào)，搭配淺灰背景，既符合兒童與青少年審美，又避免視覺(jué)過(guò)載。
• 排版與組件：采用圓潤(rùn)無(wú)襯線字體，所有按鈕、卡片均做圓角處理，整體氛圍溫暖友好，契合目標(biāo)用戶的使用習(xí)慣。
• 數(shù)據(jù)可視化：將抽象學(xué)習(xí)數(shù)據(jù)（天數(shù)、時(shí)長(zhǎng)、分?jǐn)?shù)）轉(zhuǎn)化為直觀數(shù)字與進(jìn)度條，讓用戶清晰感知進(jìn)步，同時(shí)保持界面輕盈不雜亂。

四、設(shè)計(jì)價(jià)值：讓學(xué)習(xí)成為愉悅的習(xí)慣

• 用 IP 形象消解學(xué)習(xí)焦慮，讓用戶在輕松氛圍中持續(xù)學(xué)習(xí)；
• 清晰的進(jìn)度與數(shù)據(jù)反饋，幫助用戶建立學(xué)習(xí)成就感；

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。