首页

兰亭妙微|UI 产品细节体验:拆解优秀产品设计思维

涛涛 设计思维

在兰亭秒微为各行业客户做产品 UI 设计与体验优化时,我们一直坚持向大厂学细节、从用户看本质。大厂产品之所以好用、耐看、留得住用户,核心不在于视觉多炫酷,而在于把用户行为、场景需求、商业目标藏在每一个细节里。

兰亭妙微|被忽略的 UI 设计表现技巧:细节决定体验上限

涛涛 交互设计及用户体验

在兰亭秒微的 UI 设计与产品体验优化工作中,我们始终坚信:顶级界面不只靠规范,更靠被忽略的细节技巧。很多设计师专注于布局、色彩、组件搭建,却对手势、动效、引导、空状态等 “隐性体验” 不够重视。

兰亭妙微|探究 UI 设计中形状的创意与应用

涛涛 B端ui设计文章及欣赏

在兰亭秒微服务企业级产品、移动端 App、品牌视觉界面的全流程设计中,形状是贯穿视觉表达、交互体验与品牌识别的核心语言。形状不只是界面装饰,更是引导用户认知、传递产品气质、强化品牌记忆的关键载体。结合实战案例,我们系统拆解形状在 UI 中的设计原则、应用场景与落地方法。

兰亭妙微|UI 设计中的网格系统:让界面秩序与体验双升级

涛涛 B端ui设计文章及欣赏

在兰亭秒微为企业级软件、移动端 App、数据可视化平台等项目做 UI 设计时,我们始终把网格系统作为界面规范的核心底层框架。很多团队容易把网格当成 “辅助线”,却忽略它是统一视觉节奏、提升协作效率、保障多端还原度的关键工具。结合十六年行业实战经验,我们把网格系统的原理、构成与落地方法,整理成一套可直接复用的设计标准。

兰亭妙微ui设计公司带您了解筛选功能设计

清阳 移动端UI设计文章及欣赏

前言

 
“少即是多” 是设计的常用理念,但产品简化到一定程度,必然会出现不可简化的复杂性
 
诺曼曾说:复杂是世界的一部分,但它不应该令人困惑
 
筛选控件,就是让用户自主管理复杂信息的核心工具 —— 只要符合用户行为,合理的复杂反而会被用户接受。
 
兰亭妙微UI设计公司从类型、场景、维度、准则五个维度,完整拆解移动端筛选设计,帮你快速选对、用好筛选控件。
 

 

一、先搞懂:筛选是什么?为什么要用?

 

1. 筛选的定义

 
筛选 = 用户通过一个 / 多个条件,在海量内容里快速缩小范围,隐藏不匹配信息,高效找到目标。
 
筛选是过滤器,属于搜索框架的一部分。
 

2. 筛选 vs 搜索(核心区别)

image.png

 
  • 筛选:系统提供条件,用户被动选择 → 缩小范围
  • 搜索:用户主动输入明确关键词 → 精准查找

image.png

 

image.png

简单记:搜索找结果,筛选缩范围
 

3. 什么时候必须加筛选?

 
  1. 系统定义筛选(一级筛选)
     

    image.png

    大方向快速切换,如:订单(待支付 / 待发货)、优惠券(未使用 / 已过期)。
  2. 用户自定义筛选(二级 / 精细化筛选)
     
    在一级结果里进一步精准,如:价格、品牌、发货地、评分等。
 
最佳组合:一级分类 + 二级精细化 + 排序
 

 

二、5 种最常用筛选样式(直接对应场景)

 

1. Tab 筛选

 

image.png

  • 形态:横向 / 纵向常驻展示
  • 优点:一目了然、随时切换、无学习成本
  • 场景:内容大类划分(新闻频道、视频分类、商品一级类目)
  • 缺点:结果偏模糊,需搭配二次筛选
 

2. 弹窗式筛选

image.png

 
  • 形态:入口隐藏,点击蒙层弹出
  • 优点:省空间、多维度平铺、不占页面
  • 场景:电商列表、外卖、出行等高频精细化筛选
  • 适用:条件不多、操作快
 

3. 折叠式筛选

  • 形态:入口隐藏,点击展开、常驻页面
  • 优点:比 Tab 省空间,比弹窗更可控
  • 场景:中度筛选需求,需反复调整条件
 

4. 高级筛选(新页面)

image.png

 
  • 形态:跳转到独立页面
  • 优点:无干扰、可放大量细颗粒条件
  • 场景:汽车、房产、招聘、复杂 B 端筛选
  • 适用:条件多、层级深、需专注操作
 

5. 筛选 + 排序组合(移动端标配)

image.png

 
  • 形态:筛选按钮 + 综合 / 价格 / 销量等排序
  • 优点:一步完成 “缩小范围 + 重新排列”
  • 场景:几乎所有商品 / 内容列表
  • 代表:美团、饿了么、淘宝、京东
 

 

三、3 个筛选维度(决定怎么布局)

 

1. 单维度筛选

 

image.png

  • 一次只选一个条件,触发即生效
  • 标签简短(≤5 字)、语义清晰
  • 场景:订单状态、内容分类
 

2. 多维度筛选

image.png

 
  • 支持单选 / 多选 / 区间 / 滑块
  • 需配:确定 + 重置按钮
  • 移动端建议:一级维度≤9 个,多余整合到二级
 

3. 多等级筛选

 

image.png

  • 层级:一级分类 → 二级属性 → 三级参数
  • 移动端最多 3 级,避免迷路
  • 适合:类目复杂的电商、后台系统
 

 

四、筛选设计 3 大核心准则(必遵守)

 

1. 以用户效率为目标

image.png

 
筛选的本质不是 “好看”,而是帮用户更快找到
 
  • 不知道要什么的用户:靠分类 + 筛选引导
  • 知道要什么的用户:靠精准条件快速锁定
  • 最终目标:降低时间成本,提升转化与留存
 

2. 按产品类型定制条件

 

image.png

不要抄通用模板:
 
  • 电商:品牌、价格、销量、评分、服务
  • 新闻 / 内容:热度、时间、偏好、标签
  • 工具 / B 端:状态、时间区间、负责人、关键字
 

3. 按使用频率排优先级

 

image.png

高频条件前置,低频条件隐藏 / 后置
 
  • 买手机:品牌→内存→容量→价格
  • 买日用品:价格→销量→(品牌放高级)
 

 

五、总结(一句话记住)

 
筛选的核心价值:用最简单的交互,帮用户最高效缩小信息范围
 
选型只看两点:用户需求 + 使用场景
  • 简单分类 → Tab
  • 常规精筛 → 弹窗
  • 复杂深筛 → 高级页面
  • 列表标配 → 筛选 + 排序

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

 

image.png

兰亭秒微|UI 设计进阶:用好留白,让界面更有表现力

涛涛 设计思维

在兰亭秒微的 UI/UX 设计体系里,留白不是 “空着”,而是提升质感、聚焦信息、优化体验的核心手段。优秀的留白设计,能在简约风格与功能可用性之间达到完美平衡,需要长期实践与经验沉淀。

兰亭秒微 UI 设计进阶:以用户为中心的设计 —— 两本经典方法论解析

涛涛 交互设计及用户体验

作为专注 UI/UE 设计与用户体验优化的专业团队,兰亭秒微在工业软件、医疗设备、能源监控、企业信息化等领域长期实践,始终以以用户为中心为设计核心。本文将结合兰亭秒微项目经验,提炼《用户体验要素》《简约至上》两本经典书籍的核心观点,为产品设计与体验升级提供系统化理论支撑。

UI 设计中的用户体验设计|兰亭妙微设计实战全解

涛涛 交互设计及用户体验

设计师遇到瓶颈,最好的破局方式,是跳出纯视觉审美,回到用户体验本质,重新审视需求、场景、行为与感受,用科学方法做有依据、可落地、能产生价值的设计。

拓宽设计之路,成为炙手可热的跨行业大牛的进阶武器 —— 知识管理(下)

涛涛 设计管理与成长

上一篇的知识管理分享,我们围绕设计行业的知识管理核心,阐述了如何在合作中建立信任的底层逻辑,本篇分享将继续完善上篇观点,结合兰亭妙微十五年的设计实战经验,为大家拆解设计行业知识管理的落地方法与核心价值。

兰亭妙微|7 步搞定玻璃态 UI 设计,零基础也能学会

涛涛 设计管理与成长

玻璃态(Glassmorphism)作为当下主流 UI 风格,凭借通透、轻盈、高级的视觉效果,成为界面设计的热门选择。兰亭妙微结合实战经验,把复杂效果拆解为7 个简单步骤,清晰易懂,新手也能快速做出质感玻璃态 UI。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档