这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。
利用文字排版可以尽可能清晰有效地展示你的设计和内容。
目录
字体格式格式应用
字体格式
材料设计字体格式包含一系列可支持产品及其内容需求的对比样式。
字体格式由字体系统所支持的13种样式组成。它包含可重复使用的文本类别,每个类别都有倾向的应用场景和含义。
Material Design字体格式。(字距与Sketch兼容)
字体大小单位
以下单位用于表示Android、iOS和web的字体大小。
平台AndroidiOSWeb字号单位spptrem转换率1.01.00.0625
转换示例
AndroidiOSWeb10sp10sp0.625rem12sp12sp0.75rem24sp24pt1.5rem60sp60pt3.75rem
Web浏览器基于根元素大小计算REM(根em大小)。现代Web浏览器的默认值是16px,因此转换方式为SP_SIZE/16=rem*。
*SP=1/16rem=0.0625rem
字距单位
以下单位用于UI中的字距。
平台AndroidiOSWeb字距单位emptrem转换率(Sketch字距/sp字号)= 字距1.0(Sketch字距/px字号)= 字距
字距示例
AndroidiOSWeb(0.2字距/16sp字号 )= 0.0125 em-0.1 pt(0.2字距/16px字号 )= 0.0125 em
格式应用
字体格式在组件和整体布局中以文本形式出现。字体属性可在字体、字型、大小写、字号和字距上使用自定义值。
格式类别实际值
标题
在字体格式中,标题跨度范围为1到6。标题是界面中最大的文本,一般用于简短、重要的文本或数字。
对于标题,你可以选择一款富有表现力的字体,比如display(展示)、handwritten(手写)或 script(手迹) 等风格。这些非传统字体的设计具有丰富的细节和特色,有助于吸引眼球。
标题2使用了display类型字体
标题3使用了Script类型字体。
衬线和无衬线字体都适用于标题,特别是小字型。
标题6(H6)使用了无衬线字体。
副标题
副标题普遍小于标题。它们通常用于较短的中等强调文本。衬线和无衬线字体都适用于副标题。
副标题1使用了无衬线字体
对于副标题,应谨慎使用具有丰富表现力的字体,包括display、handwritten和script风格等。
在副标题上应谨慎使用具有表现力的字体。
正文
正文文本的范围是1到2,由于它适用于小字型文本,所以通常用于撰写长篇文字。对应文本中的较长部分,推荐使用衬线或无衬线字体。
正文1(Body 1)使用了衬线字体
正文2((Body 2)使用了无衬线字体
不要在正文中使用表现力丰富的字体,包括display、handwritten或 script等。
不要在正文中使用表现力丰富的字体。
说明文和上划线
说明文和上划线文本(文本上有条线)是所有字体中最小的。它们被少量地用于图像注释或标题引入。
说明文本(Caption)使用了衬线字体
上划线使用了无衬线字体
不要在说明文和上划线文本中使用表现力丰富的字体,包括display、handwritten和script风格等。
不要在上划线文本中使用表现力丰富的字体。
按钮
按钮文本是一种操作引导,它使用了不同的类型(如文本、线框和填充按钮等)并应用在选项卡、弹框和卡片中。
按钮文本通常是全大写的无衬线体。
按钮文本上使用一款全大写的无衬线体
按钮文本可以是首字母大写的无衬线或衬线体。
当按钮文本与非交互文本有明显区别时应谨慎使用,例如上图中下边的无衬线字体按钮。
不要在按钮文本中使用表现力丰富的字体,包括display、handwritten和script风格等。
不要对按钮文本使用display风格的字体。
原文地址:Material Design
译者:招财鱼