文字的使用
文字是应用当中使用最多的要素。显示一段供用户阅读的文字,程序运行时的信息提示都离不开它。
文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中。
字体可以分成两种类型:有衬线的-serif
;无衬线的-sans-serif
,也简称sans
。serif
的笔划端部会多出来一截修饰;sans
的笔划端部是平的。
![serif_sans_difference2](http://7xrwhw.com1.z0.glb.clouddn.com/serif_sans_difference2.png)
在过去,serif
通常用来做文章的内容,sans
用来做标题;但是现在,内容也开始使用serif
了,这是一种新的趋势。在安卓系统中,就采用了sans
字体做文字的默认显示。
不同的文字内容,需要吸引用户不同程度的注意力。例如,按钮上的文字和内容都需要吸引用户的注意力,但是它们的重要程度是不一样的。这种吸引的程度可以通过字体的大小
和字体的颜色
来实现。
字体
前面提到的serif
与sans-serif
是通过衬线将字体分成了2类。接下来我们开始认识认识字体。
从文字的形状出发,可以将文字分成三类,
English-like:英文、拉丁文等字母组合型的文字;
Tall:像阿拉伯文字、泰文这种像绘画片段组合成的文字;
Dense:像中文、日文、韩文等具有高密度笔画等文字;
我们主要进行中文应用的开发,所以会遇到很多Dense
类型的字体。
字体
和某个具体的字体
是两个不同的概念,前者是对具有相同间架结构文字的总称,是个很宽泛的概念;而具体的字体指的是使用时,为了显示某个文字而具体使用的文字形状。
例如Arial
字体,它下面就拥有多个子项目
-字体家族
。
![arial_font](http://7xrwhw.com1.z0.glb.clouddn.com/arial_font.png)
字体家族-font family
是一个家族的名字,它的下面可以有多种字形-style
。例如Arial
字体家族,它就拥有多个字形:Regular-常规
Italic-斜体
Bold-粗体
Bold Italic-斜粗体
,这几种字形也是其他字体家族中最经常具有的。
![font_style](http://7xrwhw.com1.z0.glb.clouddn.com/font_style.png)
某个具体的字体,例如Arial Regular
,就是由它所在的字体家族和字形来决定。所以每说到一个具体的字体,都可以找到它对应的字体家族和字形。
例如下面的Arial
Arial Black
Arial Hebrew
,分别对应着3种不同的字体家族;而每个字体家族下面都有各自具体的字型。
![fontfamily_sample](http://7xrwhw.com1.z0.glb.clouddn.com/fontfamily_sample.png)
可以看到,有的字体家族下面可以只存在一种字形,也可以存在多种字形。这就完全看字体设计师的实现了。
例子里面的字体都是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](http://7xrwhw.com1.z0.glb.clouddn.com/noto_font_weight.png)
关于Noto
字体名字的由来,还有一个这样的小故事:
电脑中显示字符的时候,如果系统中没有安装对应的字体,那么就会在屏幕上显示一个空白的方框-口
来代替。如果连续出现很多个不能显示的文字,显示的内容就像是口口口口口
。外国人觉得这个方框像我们中国的豆腐,于是就叫它tofu
。为了消灭这些豆腐,No tofu
的口号就成为了Noto
的名字。看来Noto
为此发了大愿,消灭文字显示中的一切盲区。
大家可以在Google提供的官方网站获得Noto
字体更为细节的信息。
Roboto
对于English-like
类型的文字,安卓系统使用Google提供的开源字体Roboto
,它看上去要宽且圆润,现在在很多平台上得到了广泛的应用。
Roboto有6种字形:Thin,Light,Regular,Medium,Bold,Black。
![roboto_font_weight](http://7xrwhw.com1.z0.glb.clouddn.com/roboto_font_weight.png)
Roboto
与Noto
是兼容的,当选定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
来运用的。
格式
为了便于用户阅读,让用户有良好的阅读体验,我们还要考虑文字当中,
行之间的间距。
每一行占据的宽度。对于长段的内容,字符控制在60个每行;对于简短的内容,字符控制在30个每行。
颜色
文字使用的颜色与背景的颜色相关,采用白色或者黑色,目的是提高文字的可读性,不要让文字的颜色和背景的颜色混在一起。
文字的颜色需要根据显示的位置体现出不同的深浅颜色。这种颜色的深浅是通过调整字体的透明度实现的,而不是将字体设置成一种灰色。
字体颜色
安卓系统根据显示内容的重要性,将文字主要分成了好些类:textColorPrimary textColorSecondary textColorPrimaryActivated textColorSecondaryInverse
等等。不过最重要的就是:
textColorPrimary
:就是Primary text
-主要文字内容使用的颜色。它使用在文字的title
,headline
,subhead
,Body1~2
,Button
这些位置。textColorSecondary
:就是Secondary text
-次要文字内容使用的颜色。它使用在Display 1~4
,Caption
这些位置。
浅色背景
对于浅色背景,字体使用纯黑色-#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的简体中文字体来举例),
将得到的压缩包解压;
依次双击字体文件
*.ttf
或*.otf
;
这样就可以将这些自己安装到电脑上了,在设计的过程中,就能够选择到对应的字体了。
![select_noto_font](http://7xrwhw.com1.z0.glb.clouddn.com/select_noto_font.png)
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。