表格是B端后台出现频率最高的组件,没有之一。但99%的设计师第一版都会踩坑👇
① 列宽不要平均分配 重要信息(名称、状态)给宽列,ID/时间等次要信息压窄。别什么列都一样宽,像Excel一样
② 文字左对齐,数字右对齐 这是排版铁律。数字右对齐方便用户纵向对比大小,左对齐看金额会疯
③ 行高至少 48-56px B端用户可能一盯表格盯一天,行高太矮眼睛会瞎。留够呼吸感
④ 斑马纹 or 悬浮高亮二选一 数据行多的时候需要视觉引导防止看串行。斑马纹(隔行变色)和 hover 高亮选一种就行,别叠加
⑤ 固定表头 + 固定首列 表格一滚动就不知道每列是什么了?固定表头。列太多横向滚动?固定左侧关键列
⑥ 操作列放最右且固定 编辑、删除、查看这些操作按钮永远放在最右列,并且固定住不跟着横向滚动走
⑦ 空状态不能只写"暂无数据" 告诉用户为什么没有数据,以及下一步该干什么。比如"还没有订单,去创建第一个订单吧"
⑧ 批量操作要有全选逻辑 全选当前页 vs 全选所有数据,这两个一定要区分清楚,不然用户删数据能删哭
⑨ 筛选和搜索放表格上方 常用筛选项直接外露,不常用的收进"更多筛选"。搜索框给明确的 placeholder 告诉能搜什么
表格设计看着简单,但细节多到离谱。这9条全做到,你的表格就超过80%的B端产品了✨






