#完成度 50
相关
- [[系统列表页]]
## 视觉
### 大胆的视觉线索
你可以通过组合相关数据、按类型对行进行分组、添加包括图像、图标、颜色编码、进度条、字体粗细和大小在内的视觉提示以及调整单 q 位来改进表格中数据的显示方式。表设计的用户界面和表设计的用户体验共同增强了查看表和应用表操作的能力。[Data Table Design UX Patterns & Best Practices](https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/#types-of-data)
#### 利用图片
#### Icon
#### 标签
#### 进度条
#### 字体大小和字重
### 组合相关的字段，节省空间。
- Before 
- After 
### 按类型分组
- Before 
- After 
-
### 使用等宽的数字。
可以更好的对比。
- Before 
- After 
### 避免重复词汇
- Before 
- After 
### 去除纯视觉杂音
#### 弱化分割线
#### 斑马线不是必需品
也没有绝对，斑马线让长表格更好区分，但对应的需要准备更多的颜色来区分 hover 和 selected，还有禁用状态等等，可能不太好处理。
- Before 
- After 
### 让用户选择疏密程度
常见的分成 3 个档位的那种，例如舒适、标准、紧凑三种高度来满足用户需求。
![[Pasted image 20211114224033.png]]
### 对齐方式
#### 左对齐
- 普通文本类、数字、字母等，长短参差不齐。
- 格式化字段：日期、时间、部分枚举类等，字符数一致且较短的，左对齐。
- Zip/Postal code
- Phone number
#### 右对齐
数据字段：金额、数据、百分比。带小数点等数据，方便对比为主
![[Pasted image 20210823213342.png]]
#### 垂直对齐
##### 少于 3 行时
- Before 
- After 
##### 4 5 行及以上，顶部对齐。
如果行高变化超过 3 或 4 行，使用顶部对齐在易读性和确保所有内容都可见方面最有意义。
- Before 
- After 
## 交互
### 表头筛选
#### 可筛选常驻 icon
- 类似 COMMAND，易于发现，
- 缺点是，如果每个都能排序，会有很多重复信息。
#### Hover 时才展示。
来源于 [Data table – Carbon Design System](https://carbondesignsystem.com/components/data-table/usage/) 
### 自定义 Freeze
用户自己来决定要固定到哪一列 
### 用户自定义展示信息
#### Reszie
Like excel
#### Reorder & hide
### 列表编辑
1. 直接在表格行上记录大量数据还可以节约空间。点击可编辑的单元格展开输入框。编辑后返回 
2. 来自 [Data Table Design UX Patterns & Best Practices](https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/?utm_campaign=ux-pattern&utm_medium=organic&utm_source=newsletter) 
## 资源
- [Data Table Design UX Patterns & Best Practices](https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/) 非常干货 20220912
- [上万字干货！超全面的B端设计指南：表格篇（下） - 优设网 - UISDC](https://www.uisdc.com/b-end-form-design-2)
- [[Polaris Design System#^1a57cf|Polaris Design System 表格]]
- [[Salesforce Design System#^32320e|Salesforce Design System 表格]]
- [百度设计专家：B端复杂表格的优秀交互设计，都有这三大特征 (高频问题) (qq.com)](https://mp.weixin.qq.com/s/ULHWnrTcPjIElYoETvf6Cw) 总结的很不错，obsidian 的信息主要来自这里
- [数据表设计｜重新定义表格 · 语雀 (yuque.com)](https://www.yuque.com/suwenyuansuki/gz4y9q/pdp2um) 蛮细致的一篇语雀的 ![[Pasted image 20210911162121.png|400]]