Material Design The type system 字体系统

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

利用文字排版可以尽可能清晰有效地展示你的设计和内容。

目录

字体格式格式应用

字体格式

材料设计字体格式包含一系列可支持产品及其内容需求的对比样式。

字体格式由字体系统所支持的13种样式组成。它包含可重复使用的文本类别,每个类别都有倾向的应用场景和含义。

3gbdws4mckh.png插图

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

格式应用

字体格式在组件和整体布局中以文本形式出现。字体属性可在字体、字型、大小写、字号和字距上使用自定义值。

dfxmwuvqumj.png插图(1)

格式类别实际值

标题

在字体格式中,标题跨度范围为1到6。标题是界面中最大的文本,一般用于简短、重要的文本或数字。

对于标题,你可以选择一款富有表现力的字体,比如display(展示)、handwritten(手写)或 script(手迹) 等风格。这些非传统字体的设计具有丰富的细节和特色,有助于吸引眼球。

wvfraudgj1q.png插图(2)

标题2使用了display类型字体

n4gcroazjhm.png插图(3)

标题3使用了Script类型字体。

衬线和无衬线字体都适用于标题,特别是小字型。

qer0nx3ssh3.png插图(4)

标题6(H6)使用了无衬线字体。

副标题

副标题普遍小于标题。它们通常用于较短的中等强调文本。衬线和无衬线字体都适用于副标题。

dqfcjiglm0y.png插图(5)

副标题1使用了无衬线字体

对于副标题,应谨慎使用具有丰富表现力的字体,包括display、handwritten和script风格等。

3o2jrdx25w5.png插图(6)

ykahu0zpol2.png插图(7)

在副标题上应谨慎使用具有表现力的字体。

正文

正文文本的范围是1到2,由于它适用于小字型文本,所以通常用于撰写长篇文字。对应文本中的较长部分,推荐使用衬线或无衬线字体。

qit5nk5vimi.png插图(8)

正文1(Body 1)使用了衬线字体

sbh3nr0hlgy.png插图(9)

正文2((Body 2)使用了无衬线字体

不要在正文中使用表现力丰富的字体,包括display、handwritten或 script等。

4w2x15jhg0j.png插图(10)

psjkm2i45sr.png插图(11)

不要在正文中使用表现力丰富的字体。

说明文和上划线

说明文和上划线文本(文本上有条线)是所有字体中最小的。它们被少量地用于图像注释或标题引入。

cm4v5ctlapr.png插图(12)

说明文本(Caption)使用了衬线字体

ilp3ycb1v03.png插图(13)

上划线使用了无衬线字体

不要在说明文和上划线文本中使用表现力丰富的字体,包括display、handwritten和script风格等。

dvlbc1yhmqy.png插图(14)

psjkm2i45sr.png插图(11)

不要在上划线文本中使用表现力丰富的字体。

按钮

按钮文本是一种操作引导,它使用了不同的类型(如文本、线框和填充按钮等)并应用在选项卡、弹框和卡片中。

按钮文本通常是全大写的无衬线体。

jrdrdxvktpz.png插图(15)

按钮文本上使用一款全大写的无衬线体

按钮文本可以是首字母大写的无衬线或衬线体。

0lbx4zlrzfs.png插图(16)

ykahu0zpol2.png插图(7)

当按钮文本与非交互文本有明显区别时应谨慎使用,例如上图中下边的无衬线字体按钮。

不要在按钮文本中使用表现力丰富的字体,包括display、handwritten和script风格等。

dw4qtjpoxx5.png插图(17)

psjkm2i45sr.png插图(11)

不要对按钮文本使用display风格的字体。

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Understanding typography 排版指南

2020-10-13 20:05:05

UI设计

关于产品体验日记(上)

2020-10-13 22:04:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索