265. To B 端 Web 页面上线前 checklist

表格与图表最佳实践
本文详细介绍了表格设计规范,包括数值对齐、千分位显示、分页与排序验证、大小写过滤等,同时探讨了饼图Legend排序及前端Action响应的一致性检查。

表格

  • [ ] 数值类字段:右对齐
  • [ ] 非数值类字段,左对齐
  • [ ] 数值类字段:千分位
  • [ ] 小数类字段:保留两位小数
  • [ ] 分页数据是否正确:offset、limit
  • [ ] 降序、逆序是否正确(如果是后端分页,需要检查跨页的排序是否正确)
  • [ ] 搜索需要支持大小写过滤

样式

  1. 可点击区域,鼠标样式为:cursor: pointer;, 小手的样式

Chart

  1. 饼图中的Legend 按照占比排序(可降序或者逆序)

下拉菜单

  1. 页面中同时最多有一个下拉菜单可以展开

数据

  1. 前端点击 Action,发起请求,观察 API 是否与 Postman 中的数据,是否一致(如果存在分页,至少需要测试到两页以后的数据)

过滤、搜索

  1. 表格、下拉菜单 Filter 支持忽略大小写

错误处理

  1. 500、502、504 之类的错误是否处理
处理 500 之类的错误的同时,需要将前一次搜索的数据清空掉。防止看到错误的数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值