文字的使用

文字是应用当中使用最多的要素。显示一段供用户阅读的文字,程序运行时的信息提示都离不开它。

文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中。

字体可以分成两种类型:有衬线的-serif;无衬线的-sans-serif,也简称sansserif的笔划端部会多出来一截修饰;sans的笔划端部是平的。

 serif_sans_difference2

在过去,serif通常用来做文章的内容,sans用来做标题;但是现在,内容也开始使用serif了,这是一种新的趋势。在安卓系统中,就采用了sans字体做文字的默认显示。

不同的文字内容,需要吸引用户不同程度的注意力。例如,按钮上的文字和内容都需要吸引用户的注意力,但是它们的重要程度是不一样的。这种吸引的程度可以通过字体的大小字体的颜色来实现。

字体

前面提到的serifsans-serif是通过衬线将字体分成了2类。接下来我们开始认识认识字体。

从文字的形状出发,可以将文字分成三类,

  1. English-like:英文、拉丁文等字母组合型的文字;

     english_script_type
  2. Tall:像阿拉伯文字、泰文这种像绘画片段组合成的文字;

     tall_script_type
  3. Dense:像中文、日文、韩文等具有高密度笔画等文字;

     dense_script_type

我们主要进行中文应用的开发,所以会遇到很多Dense类型的字体。

字体某个具体的字体是两个不同的概念,前者是对具有相同间架结构文字的总称,是个很宽泛的概念;而具体的字体指的是使用时,为了显示某个文字而具体使用的文字形状。

例如Arial字体,它下面就拥有多个子项目-字体家族

 arial_font

字体家族-font family是一个家族的名字,它的下面可以有多种字形-style。例如Arial字体家族,它就拥有多个字形:Regular-常规 Italic-斜体 Bold-粗体 Bold Italic-斜粗体,这几种字形也是其他字体家族中最经常具有的。

 font_style

某个具体的字体,例如Arial Regular,就是由它所在的字体家族和字形来决定。所以每说到一个具体的字体,都可以找到它对应的字体家族和字形。

例如下面的Arial Arial Black Arial Hebrew,分别对应着3种不同的字体家族;而每个字体家族下面都有各自具体的字型。

 fontfamily_sample

可以看到,有的字体家族下面可以只存在一种字形,也可以存在多种字形。这就完全看字体设计师的实现了。

例子里面的字体都是Arial字体,它下面的子项名称中虽然都有Arial,但都属于不同的字体家族。

Noto

对于Dense类型的文字,安卓系统使用Google提供的开源字体Noto

Noto字体家族本身拥有了很多字体:Noto Sans,Noto Serif,Noto Momo……。

Noto拥有从英文字母到汉字的所有文字,对于我们开发中文应用,完全没有问题。显示简体中文的时候,使用的是Noto Sans CJK SC

Noto有7种字形:Thin,Light,DemiLight,Regular,Medium,Bold,Black。它们对应的具体字体的粗细是各不相同。

 noto_font_weight

关于Noto字体名字的由来,还有一个这样的小故事:

电脑中显示字符的时候,如果系统中没有安装对应的字体,那么就会在屏幕上显示一个空白的方框-来代替。如果连续出现很多个不能显示的文字,显示的内容就像是口口口口口。外国人觉得这个方框像我们中国的豆腐,于是就叫它tofu。为了消灭这些豆腐,No tofu的口号就成为了Noto的名字。看来Noto为此发了大愿,消灭文字显示中的一切盲区。

大家可以在Google提供的官方网站获得Noto字体更为细节的信息。

Roboto

对于English-like类型的文字,安卓系统使用Google提供的开源字体Roboto,它看上去要宽且圆润,现在在很多平台上得到了广泛的应用。

Roboto有6种字形:Thin,Light,Regular,Medium,Bold,Black。

 roboto_font_weight

RobotoNoto是兼容的,当选定Roboto的一种粗细的笔划时,就能在Noto当中找到对应粗细的笔划。

大家可以在Google提供的官方网站获得Roboto字体更为细节的信息。

大小

不同的位置,文字显示的大小也可能有所不同。Material Design对界面上各个显示元素中使用到的文字大小,作出了规定。

显示English-like内容的时候,在中文系统中显示英文:

显示的位置 字体类型 字体大小
Display 4 Light 112sp
Display 3 Regular 56sp
Display 2 Regular 45sp
Display 1 Regular 34sp
Headline Regular 24sp
Title Medium 20sp
Subheading Regular 16sp
Body 2 Medium 14sp
Body 1 Regular 14sp
Caption Regular 12sp
Button Meduim 14sp

显示Dense内容的时候,在中文系统中显示汉字:

显示的位置 字体类型 字体大小
Display 4 Light 112sp
Display 3 Regular 56sp
Display 2 Regular 45sp
Display 1 Regular 34sp
Headline Regular 24sp
Title Medium 21sp
Subheading Regular 17sp
Body 2 Medium 15sp
Body 1 Regular 15sp
Caption Regular 13sp
Button Meduim 15sp

规律就是,显示正文时(从title开始),中文比显示英文要大1sp。

Display对大家来说可能比较陌生:它的用法是将文字作为一个大区域的显示,例如手机待机时屏幕上显示的时间信息,就是将文字当作Display来运用的。

格式

为了便于用户阅读,让用户有良好的阅读体验,我们还要考虑文字当中,

  • 行之间的间距。

     2_4_table_text_format
  • 每一行占据的宽度。对于长段的内容,字符控制在60个每行;对于简短的内容,字符控制在30个每行。

颜色

文字使用的颜色与背景的颜色相关,采用白色或者黑色,目的是提高文字的可读性,不要让文字的颜色和背景的颜色混在一起。

文字的颜色需要根据显示的位置体现出不同的深浅颜色。这种颜色的深浅是通过调整字体的透明度实现的,而不是将字体设置成一种灰色。

字体颜色

安卓系统根据显示内容的重要性,将文字主要分成了好些类:textColorPrimary textColorSecondary textColorPrimaryActivated textColorSecondaryInverse 等等。不过最重要的就是:

  • textColorPrimary:就是Primary text-主要文字内容使用的颜色。它使用在文字的titleheadlinesubheadBody1~2Button这些位置。
  • textColorSecondary:就是Secondary text-次要文字内容使用的颜色。它使用在Display 1~4Caption这些位置。

浅色背景

对于浅色背景,字体使用纯黑色-#000000,根据使用场景的不同,透明度不同,

使用的场景 透明度
Primary text 87%
Secondary text 54%
Disable text, Hint text 38%

假如文字需要与图标配合使用,那么文字的颜色也是使用纯黑色-#000000,但是会根据图片当前是否处于激活的状态而不同,

图标激活状态 图标对应文字的透明度
激活 54%
未激活 38%

深色背景

对于深色背景,字体使用纯白色-#FFFFFF,根据使用场景的不同,透明度不同,

使用的场景 透明度
Primary text 100%
Secondary text 70%
Disable text, Hint text 50%

假如文字需要与图标配合使用,那么文字的颜色也是使用纯白色-#FFFFFF,但是会根据图片当前是否处于激活的状态而不同,

图标激活状态 图标对应文字的透明度
激活 100%
未激活 50%

字体的下载和使用

前面提到的Noto字体和Roboto字体,可以分别在
Noto的官网Robot的官网看到更为详细的介绍,并下载。

假如你的电脑上并没有安装这两种字体,请去官网下载。

下载以后(这里用安装Noto的简体中文字体来举例),

  1. 将得到的压缩包解压;

     noto_font_unzip
  2. 依次双击字体文件*.ttf*.otf

     installed_noto_font

这样就可以将这些自己安装到电脑上了,在设计的过程中,就能够选择到对应的字体了。

 select_noto_font