表格设计:数据的对齐方式


设计规范

在 Material Design、macOS 的 HIG、Fiori Design、Ant Design 等规范中,默认表格都是文本左对齐,数值右对齐。



其他相关文章的建议

  1. 数值右对齐
  2. 文本左对齐
  3. 表头标题和单元格数据保持一致的对齐方式
  4. 不要使用居中对齐




总结

  • 左对齐
    一般情况下,文本的对齐方式均采用左对齐。
    原因是:(1)现代人的阅读习惯是从左到右,符合心智;(2)左对齐的文本,便于用户扫描过程中快速找到下一行文本开始的位置,数据可读性更高;(3)左对齐的文本,起到了纵向分割线的作用,在没有纵向直线分割的情况下,也可以让表格数据简洁、整齐。

  • 右对齐
    适用于字段值是数字类型的字段,例如 “数量”、“金额”等字段。
    原因是:数字是从右向左读的,个位、十位、百位上下对应的话,方便直观地对比数值。
    但可能带来其他问题:假设表格宽度较大,但只有两列,属性列左对齐,数值列右对齐,则中间过大的间距会导致两者关联性较弱。(鼠标悬停时整行高亮,可加强两列之间的相关性。)


  • 居中对齐
    一般情况下,居中对齐会导致表格的行 “ 参差不齐”,浏览条目会更难。
    但是,对于字段值长度相对固定的字段,如 “日期”,可采用居中对齐的方式,视觉上会更均衡。
    所有使用居中对齐的字段,也都可以使用居左对齐。

  • 表头标题和单元格数据保持一致的对齐方式
    保持表格竖直方向整洁,给用户视觉上的统一感。




  1. 以上内容包含个人理解,仅作为个人学习笔记使用。如有错误,欢迎指正啊,非常感谢 ^^
  2. 以下为参考文章链接,非常感谢作者 ^^
    Design Better Data Tables(作者:Matthew Ström;来源 Medium)
    表格的设计思考(作者:黄粲;来源:知乎)




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容