提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
不管是做普通 UI 还是后台、数据型设计,都会用到表格,可是在对齐表格内容时,你可想过如何处理? 为什么这么做?
吐槽:为啥 没有图片缩放……
LP 美图晋升答辩,偶尔提起这问题,被领导问到,没清楚如何回答。 后领导提及数据右对齐源于算盘。
而据我所知应是会计学的计算需求,主要考虑计算方便和对位问题,深度根源并不十分清楚。只有处理数据对齐的方法论罢了。
好奇宝宝是不会稀里糊涂的,所以有此文章,大家都不喜欢啰嗦,就简说结论,过程等尽量少说不说,参考里有不少,有兴趣可以看看。
综合资料,个人认为是从西方的算术 ->计算器 -> 计算机逐步发展而来都是西方舶来品,从真实世界的习惯(方法、效率形成)到技术发展后的迎合用户的习惯,到计算机时代的用户体验考量的真实世界映射。
列算式时(右对齐/分位对齐):
物理世界的计算器(右对齐):
Excel 被主要应用于数据、报表处理,它的默认对齐:
综上考虑,个人认为数据表格的对齐及设计规则应为:
────────────────────────────────
数据表格为阅览、分析数据分析(数据可读性/易读性)而设计,
应符合常用习惯,及真实世界映射。
────────────────────────────────
表格内容上的对齐,经过计算机技术的引入和应用,体验优化,现今可你要用的对齐方式如下(根据使用场景灵活应用):
在会计电子表格中,数字(尤其是货币金额)几乎总是右对齐,因为能使数字的“小数点”对齐,并确保数字的每一列都具有相同的数量级,从而变得非常容易快速浏览,心算。从而高效阅读/获取数据。
这里是 x k :
css 也提供了字符对齐的支持,MDN Web Docs:text-aligin 中提到:
/* Character-based alignment in a table column */ text-align: "."; text-align: "." center; |
在此示例中,数字不与小数点对齐。这是因为该表的目的是让读者轻松识别和提取乘数。在这种情况下,没有比较明显的用例来比较因子的相对大小,而十进制对齐会很有用。
原文发布于 jovi 的博客,欢迎访问我的 UX 资料站 交流。
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册