#pages 指的是各种 B 端产品中的列表页面。 相关页面 - [[表格 Table]] - [[系统详情页]] 成熟优秀案例 - [[Mixpanel]] - Hubspot - Freshsale # Web ## 解构 ### 筛选区 #### 常规展示   - 适用场景：当筛选条件有高低频之分，且对页面空间要求较高。 - 优点：高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷，同时占用空间较小。 - 缺点：平台通用性较差，当高频筛选项过多时，页面同样会出现信息冗杂、空间占比大等问题。 #### 矩阵平铺类  - 适用场景 - 优点 - 多维度筛选且每个用户对信息筛选的颗粒度需求不一致，同时希望备选项被选中。 - 筛选较多时 - 缺点 - 占据页面空间较大，此类型一般配合“勾选即执行”使用，因此在执行筛选的过程（动画或加载时长）可能分散用户精力。 这里就可以很好的理解电商类产品在筛选区往往采用矩阵式布局，比如：挑选一台电脑，有人希望按品牌筛选、有人希望按内存容量、有人希望按系统，我们很难判断哪个频率更高。 面对这种情况，只能将所有的筛选条件平铺出来供用户选择。同时电商产品将品牌的备选项平铺出来，可以增加品牌的曝光度，这无疑是一个可带来利益的隐形广告位。 ### 表头区域 表头的作用是解释当前列数据，表头并不是表格的必要元素，当数据本身能自我表意的时候（例如邮箱），表头是可以删减掉的，毕竟表头也占据一定的空间。 ## 最佳实践 ### 视觉 #### 摒弃输入框样式？ ##### Coding 直接舍弃了输入框，好像也不错？可以保留 lable，估计选项多了会挺乱的。 ##### [[Ones]]  #### 筛选条件的标签太占空间？ - 通过 plceholder 提示，不太友好，但是非常节约空间。 #### 把 Lable 放到筛选的输入框里？ ### 交互 #### 搜索栏如果没有查询按钮，如何提高检索体验？ 可以在输入文字后，0.5s 再进行搜索，coding 是这么做的，如果一边输入一边搜，就很吃性能，很卡顿。 #### 列表筛选类型 ##### 常规一排选择框 例如 COMMAND ##### 高自由度条件组合。 ###### Intercome ![[屏幕录制2023-03-06 17.41.00_new.mp4]] #### 保存筛选条件 ##### ONES 记录 20220320 保存前 保存中 保存后  ##### Coding 保存前 保存中 保存后 ##### Jira 保存前 ![[Pasted image 20220319124600.png]] 保存中 ![[Pasted image 20220319124637.png]] 保存后 ![[Pasted image 20220319124716.png]] #### 不同维度筛选条件的合并 在 C3 种，产品名称和客户名称是 2 个搜索框，感觉合并会更优雅一点。例如这种形式。 来自于[[领星erp]]  #### 选择菜单 - 支持搜索 #### 列表自定义 ##### 位置 - 一般在列表的最后一列有个设置按钮 - 或者在表格顶部区域 ##### 功能点 - 字段显示有排序 - 顺序 - 疏密程度 - 列筛选 - 如果字段特别多，那可能需要用到[[穿梭框]]，这样方便用户查看都挑选了哪些字段。 - 穿梭框案例  # 移动端 ## 最佳实践 在移动端上隐藏一些内容是可以的，只要商家可以通过点击获取细节。 # 资源 - [B端要吃透系列：表格数据筛选交互设计指南 (图解)](https://mp.weixin.qq.com/s?__biz=MzU0MTkxMjcyNw==&mid=2247520819&idx=1&sn=8972e3394e4f37e3668a715c2ce0df08&chksm=fb2069cbcc57e0dd4ba34fb88ef9fed4409d5c33ea5ea61687606f20aca7a24e69e3234595b6&mpshare=1&scene=1&srcid=0404ZaSURSkPh0GaCUCnck4K&sharer_sharetime=1680570776520&sharer_shareid=8e5761795979ccf9d8cbc70ce3ecd654#rd) #公众号/携程TripDesign 质量还不错，分析的很系统。