材料设计排版 - 标题、标题、间距、文本外观

25

我一直在遵循Google官方的Material Design设计规范 (http://www.google.com/design/spec/style/typography.html),但我发现这些规范还是有欠缺的。例如,他们列出了10种类型的文本样式供您在应用程序中使用,如body、subhead、title、headline、display1、display2等... 这就引出了第一个问题。

问题1:人们怎么知道什么是"子标题(subhead)",或者是"标题(title)"与"头条(headline)"之间的区别,或者何时应该使用"display1"而不是"display4",是否有标准规定这些项目?

此外,规范指出行高应包括领先空间。 因此,这就出现了第二个问题。

问题2:在Android中如何为文本添加“领先空间”,这是否与Android指导相关?

问题3:虽然我已经下载了最新版本的Roboto字体,但我的中等字体看起来非常粗体,与谷歌优雅略厚的中等字体不同,我如何确认我的字体实际上与谷歌的不同?

非常感谢您。

1个回答

36
"Show me the code"不是我的话,但请参见下面的评论以获取一个选项,还可以通过访问Github上的源代码(BaselineGridTextView类)来了解Plaid应用程序(Butcher)如何解决排版挑战。
免责声明:我绝不是这个主题的参考,但是你的问题已经一个月没有回答了,尽管它很重要,并且从现在开始它的重要性只会增加。话虽如此,我至少会尝试给出一些指引并提供我的头脑,因为可能会有错误。
问题#1:如何知道“子标题”是什么,或者“标题”与“头条新闻”之间的区别,或者何时应该使用“display1”而不是“display4”,这些项目是否有标准?
这些是常见的、标准化的、抽象的文本实体,它们来自印刷出版传统。
Display:大字体,通常用于标语、吸引人的口号和需要竞争注意力的事物,当用户没有关注时应该引起注意。它不太易读,因为它应该非常短(立即引起注意,而不是广泛流动的一部分)。我想Material Design中的4种不同的显示大小只是Matias和他的团队额外关心的结果,但我怀疑应用程序将永远不会使用多个显示大小(也许杂志和丰富的媒体应用程序除外)。大多数应用程序甚至根本不使用显示大小。
Headline:传统上,如果我浅薄的理解是正确的话,标题大小被用作故事的简短 标语。不是描述,只是标语,一个简短的消息。一个标题的例子: ASSASSIN KILLS KENNEDY 。在遵循Material Design的常见应用程序中,它被用作屏幕的主要主题(就像报纸的页面)。我认为(并不确定)这可能在其他地方被称为“标题”。
Title:老实说,它非常通用,并且由于其谦虚的大小(与标题和显示相比),它是我最常用的样式之一:它非常适用于文本块上方的位置。例如,“Eula”作为接下来标题文本的标题,或者在作者列表之前立即出现“Authors”。它在框架中广泛使用
Subhead:这更具体。它是“标题”的直接、低等级,用于提供摘录、引用或文本块的简要描述。子标题的例子(以下是标题示例): Texas州长受伤,马克思主义者被控谋杀。在Material Design中,由于其大小,我看到它最常见的地方是在两个项目列表项中,因为它用作电子邮件的摘要(以提供概述)或电话号码(特定人员的最重要资产的细节)。
Body:主文本。非常明显。它们中最易读的,也是长文本的唯一选项。
Caption:脚注和小字。在印刷品中,它经常用作图像的标题。在Holo中,我认为(并不确定)它被用作分隔符文本(但是全部大写)。在Material Design中,我认为分隔符停止使用说明文字,并使用浅色“正文”。

其他程序也使用这些(部分或全部)概念,但会有一些细微的变化:

  • 文字处理器中的文本样式;
  • 图像软件(如 Photoshop、Illustrator 等)中的字体设置;
  • 字体的光学大小调整。例如,Adobe 使用 “标题”、“常规”、“副标题” 和 “展示”,可以看出,它旨在通过特别定制的字体形状来补充不同大小跨度的大小和行距;

总的概念似乎是这些抽象实体代表了文本集中的重要性渐变,并且可能具有灵活的规则在出版物之间,只要在出版物、主题、应用等内部保持一致性即可。

问题2#:我如何为 Android 中的文本添加“行距”?

这是针对那些混合使用不同样式的TextView的情况,就像图像示例中一样(当然也适用于文本段落)。

让我坦白地说:目前,为了紧急情况,我正在使用叠加网格来检查我的行距。我从行距大小开始,然后减去下一行文本的字体大小和当前行的下行高度作为一定量。如果需要,我会进行微小的光学调整。这些元素(x-高度、大写字母高度、下行高度等)可以精确计算, 但我还没有深入研究过它们(但可能是可行的)。在我的布局中,只要不完美,我就满意于我的“眼测仪”。

然而,我刚刚看了一下(没有试过),我相信你可以深入研究FontMetrics,测量字段并在上面两个TextView之间动态应用适当的尺寸。我会首先尝试这个方法(下一个的上升和前一个的下降)。
“这是否与Android相关?” 是的,非常相关。当不同的样式放置在文本下方时,例如标题后跟正文,并且尝试随便猜测:它不起作用,您的应用程序将与系统不一致。请参见上文。
问题#3:虽然我已经下载了最新版本的Roboto,但我的中等字体看起来绝对粗体,与Google优雅且稍微厚重的中等字体不同,如何确认我的字体实际上与Google不同?
请告诉我们您获取两个样本进行比较的确切位置。字体呈现可能受到许多不同因素的影响,每个系统都使用自己的微调算法,除了许多其他因素。即使在不同的Roboto版本和不同的Android版本之间也会有轻微的变化。当然,与常规相比,中等看起来“粗体”,但实际上并不是粗体。

您可以在sdk/platforms/android-APIVERSION/data/fonts文件夹中检查字体。在Ubuntu 15.04(轻微提示)下呈现,截至android-22

Roboto black

Roboto bold

Roboto medium

Roboto regular

Roboto light

Roboto thin

我认为它与示例相应保持一致。
与另一种广泛使用的字体进行比较,这是Ubuntu字体家族的一部分(分别为常规、中等和粗体)。在我看来,中等字体也比常规字体更接近粗体字体:

Ubuntu regular

Ubuntu medium

Ubuntu bold

Minion Pro(常规,中等,半粗和粗体)。它的权重更加均匀,可能是因为它还提供了半粗体变体,但我们谈论的是一种用于精细印刷并在市场上经过长时间不断改进的衬线字体:

Minion Pro regular

Minion Pro medium

Minion Pro semibold

Minion Pro bold

我希望这可以帮到您。

大卫!你太棒了。我通过解释指南成功地更新到了材料设计,并最终使用了你编写的样式。一开始可能会有些压力,但是当你不断使用它时,你就会掌握它的要领。至于前导空格的相关性,我想知道如何实现它?我没有看到textviews的前导空格属性,我错过了什么吗?我认为这不需要其他类(FontMetrics)来处理前导空格..我目前正在使用填充作为前导空格。 - AutoM8R
@AutoM8R 不用谢。leading属性没有用处是因为它在TextView之间特别有用,所以在TextView内部无意义。这涉及到我在FontMetrics和其字段中所说的内容:我们知道leading是从一个baseline到下一个TextView中的距离,因此在你深入研究复杂的事情之前,请记住你可以为Roboto找到这些值,并将它们预缓存为每个文本样式中的XML边距值。无需即时计算。 - davidcesarino
3
最近我制作了一个小型库,用于解决这个问题(允许设置行间距、首行间距和末行下沉,并根据它们计算所需的顶部/底部填充和额外的行间距调整)。欢迎查看:https://github.com/Actinarium/Aligned - Actine
@Actine 是的,刚在 Google+ 上看到了你的帖子! - davidcesarino

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接