有序列表中数字对齐的最佳实践

平面设计 印刷设计 网站设计 文本 格式化 列表
2022-02-20 13:56:06

除了代码复杂性之外,以下两个选项中的哪一个更适合显示 html 有序列表?

第一个将项目编号向右对齐(小数全部对齐)。第二个将项目编号向左对齐(编号的第一个数字全部对齐)

显示两个有序列表的图像。 第一个数字右对齐。 第二个具有相同的列表,数字左对齐

3个回答

左或右取决于上下文,因此每个选项都可以是好的。这是由设计师决定的,没有“最佳实践”。您可以做的是使用 Open Type 表格数字功能改进您的选择,此处解释:https ://graphicdesign.stackexchange.com/a/110877/62949

在此处输入图像描述

这真是见仁见智

我更喜欢右对齐的数字,然后在数字右侧插入左对齐的文本。

我也更喜欢我的编号列表根本没有句号或括号。除非至少有一个列表项文本数字开头 - 然后我将使用右括号将项目符号与内容分开。

1 一个项目
 2 另一个项目
 3 第三项
10 第十项
11 最后一项

或者

1) 首先
 2) 第二
 3) 3 项
10) 倒数第二项
11) 共 11 项

同样,这是我的偏好

列表的主要因素是始终与它们在一件或品牌中的样式保持一致。您不想以某种方式格式化一个列表,然后以不同的方式格式化另一个列表。因此,请使用对所有需要的列表通用的格式。

当对平面设计有疑问时,最好的就是对比。

  • 决定:添加区分字符以按数字分隔项目。
  • 问题:这个角色如何以图形方式交互。

如果我们隔离区分字符,它会显示垂直对齐:

垂直对齐

在像点一样小的字符中无法察觉,但如果我们夸大这个字符,不规则性会增加:

不规则

当我们在设计中加入数字列表时,是为了便于阅读。如果为了有利于这种阅读,我们添加一系列数字加上一个新的字符,这个不和谐的元素应该尽可能地避免成为阅读中新的不规则噪音。