一、闲鱼：AI发布提效

闲鱼发闲置功能接入AI，只需上传商品图片就可以直接生成描述文案，极大帮助用户简化发布流程

1. 零门槛发布，降低发布时间成本

解决非专业用户 “不会写文案、不懂专业术语” 的痛点，自动提取商品特征，组合成规范文案；相比传统发布流程的耗时编辑文案、核对信息，更高效快捷。

2. 优化内容，提升交易转化

自动生成符合当前市场热点的文案表述，更能多文风转换，一键转为趣味的 “抽象文学”“黛玉文学”等，提升内容点击率。

二、支付宝：广告位游戏化包装

支付宝的首页Banner通过游戏化的包装，快速吸引注意力，驱动用户主动点击探索，高效地为活动页面引流。

1. 互动机制强化用户参与感

采用悬念式互动设计，button以 “猜猜是什么” 这类问答形式，激发用户好奇心，通过游戏化场景的营造，降低参与门槛，驱动用户主动点击探索。

2. 场景氛围营造提升吸引力

在以功能入口为主的首页，该模块具有游戏化趣味性的氛围营造，从视觉上差异化的呈现，相比传统的静态广告位，更能有效抓住用户眼球，高效地为活动页面引流。

三、去哪儿：退票时挽留场景设计

当有中转单的用户在点击退票时，用挽留浮层及时给用户弹出更优的解决方案，并在方案中量化利益点，同时保证原有票的安全感。整体通过 “先抓痛点→再给解决方案→最后引导操作” 的路径，优化了用户出行体验。

1. 量化利益点

除了直达更方便之外，直达还有更省时间、金钱，保底票免费退等更多的利益点

2. 有兜底有安全感

用当前的中转作为保底，先抢票，抢到了还能再退票。让用户安心下单，在未抢到心仪票的时候能有中转的替补票，可以缓解用户的焦虑情绪，有兜底的保障安全感

四、疗愈类App Endel：引导充值会员的动画

通过一个巧妙的互动行为“摇动手机”，降低用户对会员充值广告的反感。

1. 提升用户参与感与趣味性

“摇一摇”互动将被动观看广告转变为主动参与，用户通过简单的物理动作即可触发折扣，这种即时反馈机制增强了趣味性，降低了传统广告的侵入感。

2. 降低付费决策的心理门槛

通过互动行为展示折扣，巧妙地将付费流程包装成一种“奖励”而非强制推销。用户感受到的是“主动获取优惠”的成就感，而非被广告打扰的抵触情绪，从而更愿意接受付费选项。

五、小宇宙：创新列表设计

通过拟物化的卡牌堆叠形态，将传统的平面信息流转变为具有空间纵深感和探索趣味的交互式叙事焦点

1. 视觉层次突破传统束缚

通过卡片堆叠、倾斜，在二维屏幕上创造出三维空间感。不对称的布局打破了传统设计的呆板，赋予界面动感与活力，能有效抓住用户视线，对抗“横幅盲视效应”

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

模拟物理世界卡牌的操作体验，配合流畅的滑动动画，让用户产生"翻阅卡片"的愉悦感，这种情感化设计能显著提升用户的操作满足感和停留时长

3. 内容暗示激发探索行为

堆叠效果露出部分内容作为预览，能有效刺激用户的好奇心，主动进行滑动探索，提升内容消费深度

六、QQ音乐：个人中心下拉触发金币中心

该设计通过 “贴合用户习惯的交互 + 强引导 + 积分激励” 的组合策略，实现签到转化与用户留存

1. 交互设计贴合用户固有习惯

采用下拉触发模式，无需额外学习成本，降低用户参与签到的操作门槛，提升即时转化效率

2. 视觉设计强化引导与目标感知

以金币掉落清晰的视觉元素突出金币中心入口，让用户快速捕捉核心功能，减少寻找成本，缩短 “看到 - 参与” 的路径

3. 激励设计构建留存闭环

用 “金币” 作为即时激励，满足用户即时反馈的心理需求，驱动次日复访，同时联动积分体系，将单次签到转化为长期行为

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于UED同学的日常分享。

后续我们将持续深度体验产品，挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到后续的产品设计中。

愿我们的努力为你带来更好的体验。下次见。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

一、Aurora AI 设计亮点：AI 工具的体验标杆

1. 视觉设计：科技感与温度感的平衡

2. 信息架构：极简高效，全流程闭环

3. 交互体验：多模态适配，个性化赋能

一、先懂数据：列表设计的 3 个核心要素

1. 属性字段：明确要展示的信息点

• 设计前要梳理全字段，不遗漏关键信息
• 给字段划分权重与分类，优先突出核心信息，次要信息弱化或隐藏

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

• 明确字段值的限制：文本长度、图片尺寸、状态类型
• 统一转化规则：比如 VIP 等级用金银铜图标替代文字，提升视觉效率

3. 字段状态：适配不同场景的显示逻辑

• 场景示例：外卖列表的配送标签（快送 / 专送 / 自配）、配送时间样式差异
• 设计全覆盖：正常态、高亮态、禁用态、空态，确保所有场景适配

二、再定框架：列表页的标准结构 + 2 种布局

列表页标准框架

• 运营模块控制篇幅，避免挤压列表首屏展示
• 可在列表中插入运营广告、内容推荐，平衡信息与转化

移动端 2 种核心列表布局

1. 单列列表：一行一个数据项

• 引导型：核心目的是跳转详情，比如商品、酒店、外卖列表，突出封面与核心信息
• 展示型：直接呈现完整内容，无需跳转，比如朋友圈、消息列表

2. 多列列表：一行多个数据项

• 等高布局：每条数据高度统一、对齐规整，适合字段统一、差异小的场景（如电商商品、图集）
• 瀑布流布局：数据高度自适应，灵活度高，适合内容长短不一、视觉差异化大的场景（如笔记、穿搭、短视频封面）

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、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 栏的经典设计思路与实操技巧，为产品设计提供专业参考。

一、移动端界面：医疗严谨与视觉清晰的平衡

• 数据可视化：采用点阵式心电图替代传统折线图，既保留医学专业感，又通过红色高亮让用户直观识别心律状态，同时避免了复杂线条带来的阅读压力，契合北京兰亭妙微 “专业信息轻量化呈现” 的设计理念。
• 状态反馈：左侧界面清晰标注 “Stressful” 状态与 “Normal ECG” 结论，右侧测量页以粒子动效强化实时感，配合进度条与操作按钮，让用户清晰感知测量进程，降低医疗类产品的使用焦虑。
• 信息层级：核心数据（心率 bpm）以大号像素字体突出，辅助信息（测量时长、设备状态）置于次要位置，符合移动端 “一眼获取关键信息” 的使用场景，与北京兰亭妙微擅长的 “重点突出、层级分明” 设计逻辑高度一致。

二、穿戴端界面：极简交互适配腕上场景

• 适配小屏：手表端界面极致简化，仅保留核心心率数字、测量进度与停止按钮，避免信息过载，完全贴合腕上设备的快速操作需求，体现了 “少即是多” 的交互设计原则。
• 视觉联动：延续移动端的红色粒子动效，实现跨设备视觉一致性，让用户在手机与手表间切换时无需重新适应，这与北京兰亭妙微在跨端产品设计中强调的 “体验连贯性” 理念不谋而合。

三、桌面端 / 平板端：专业管理与数据复盘

• 大屏信息整合：桌面端界面将用户信息、ECG 数据、设备状态、健康趋势等模块有序排布，既满足专业用户的深度复盘需求，又通过卡片式布局保持视觉清爽，是北京兰亭妙微在企业级数据产品中常用的 “高效信息聚合” 设计思路。
• 功能闭环：从账号创建、设备连接到数据查看、报告导出，全流程在桌面端完整呈现，同时保留与移动端一致的交互逻辑（如底部导航、数据卡片样式），实现了 “移动端便捷操作 + 桌面端专业管理” 的产品闭环。

四、设计总结与专业视角

• 用视觉化手段降低医学数据的理解门槛，同时保留专业严谨性；
• 跨端设计高度统一，保证了用户在不同设备间的流畅体验；
• 色彩与动效的运用克制且精准，既传递情绪（如压力状态提示），又不干扰核心功能。