掌握UI交互设计筛选功能体验设计要点和技巧

发布时间:2024-05-13 17:49:21 浏览量:113次

在设计移动端筛选时,有哪些体验细节值得注意?

本文搜集了一些主流App的筛选功能设计,从细节上进行拆解和分析。

筛选容器

筛选容器指的是承载着选项的弹窗。

弹窗形态

根据弹窗形态可分为半弹窗和全局弹窗。

弹窗弹出方式

根据弹窗的弹出方式,筛选容器可分为顶部弹出、底部弹出和侧边弹出。

弹窗布局

根据弹窗的布局,筛选容器可分为分组折叠式和左右结构导航式。

筛选项

筛选项常用单选/复选,复杂场景下也会用到数字输入、滑动输入等。

选项排布

筛选项的排布可以分为列表式和标签式。

快捷筛选

在设计时可以外置一些高频的筛选项——快捷筛选,极大缩短用户路径,便于用户使用。

案例解析

结合下面的案例,感受一下筛选设计的复杂性。

增加辅助描述

在选项上增加一些辅助描述,帮助用户完成决策。

总结

弹窗形态:
• 半弹窗适用于结构较简单的筛选;
• 全局弹窗适合复杂的结构(如左右结构导航)

弹窗布局:
• 分组折叠式选项的浏览效率高,适合需要在多个类目下选择选项的情况;
• 左右结构导航式类目查找效率高,适用于类目层级较

热门课程推荐

热门资讯

请绑定手机号

x

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定