设计规范
在 Material Design、macOS 的 HIG、Fiori Design、Ant Design 等规范中,默认表格都是文本左对齐,数值右对齐。
其他相关文章的建议
- 数值右对齐
- 文本左对齐
- 表头标题和单元格数据保持一致的对齐方式
- 不要使用居中对齐
总结
左对齐
一般情况下,文本的对齐方式均采用左对齐。
原因是:(1)现代人的阅读习惯是从左到右,符合心智;(2)左对齐的文本,便于用户扫描过程中快速找到下一行文本开始的位置,数据可读性更高;(3)左对齐的文本,起到了纵向分割线的作用,在没有纵向直线分割的情况下,也可以让表格数据简洁、整齐。-
右对齐
适用于字段值是数字类型的字段,例如 “数量”、“金额”等字段。
原因是:数字是从右向左读的,个位、十位、百位上下对应的话,方便直观地对比数值。
但可能带来其他问题:假设表格宽度较大,但只有两列,属性列左对齐,数值列右对齐,则中间过大的间距会导致两者关联性较弱。(鼠标悬停时整行高亮,可加强两列之间的相关性。)
居中对齐
一般情况下,居中对齐会导致表格的行 “ 参差不齐”,浏览条目会更难。
但是,对于字段值长度相对固定的字段,如 “日期”,可采用居中对齐的方式,视觉上会更均衡。
所有使用居中对齐的字段,也都可以使用居左对齐。-
表头标题和单元格数据保持一致的对齐方式
保持表格竖直方向整洁,给用户视觉上的统一感。
- 以上内容包含个人理解,仅作为个人学习笔记使用。如有错误,欢迎指正啊,非常感谢 ^^
- 以下为参考文章链接,非常感谢作者 ^^
Design Better Data Tables(作者:Matthew Ström;来源 Medium)
表格的设计思考(作者:黄粲;来源:知乎)