自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Material Design之字體排版(Typography)

移動開發(fā) Android
自從Ice Cream Sandwich發(fā)布以來,Roboto都是Android系統(tǒng)的默認(rèn)字體集。在這個版本中,將Roboto做了進(jìn)一步全面優(yōu)化,以適配更多平臺。寬度和圓度都輕微提高,從而提升了清晰度,并且看起來更加愉悅。

Roboto

自從Ice Cream Sandwich發(fā)布以來,Roboto都是Android系統(tǒng)的默認(rèn)字體集。在這個版本中,將Roboto做了進(jìn)一步全面優(yōu)化,以適配更多平臺。寬度和圓度都輕微提高,從而提升了清晰度,并且看起來更加愉悅。

style-typography-roboto-typography.roboto2_specimen_large_mdpi

Roboto字體 - 1.21 MB(.zip)

標(biāo)準(zhǔn)樣式(Standard Styles)

字體排版的縮放和基本樣式(Typographic Scale & Basic Styles)

同時使用過多的字體尺寸和樣式可以很輕易的毀掉布局。字體排版的縮放是包含了有限個字體尺寸的集合,并且他們能夠良好的適應(yīng)布局結(jié)構(gòu)。最基本的樣式集合就是基于12、14、16、20和34號的字體排版縮放。

這些尺寸和樣式在經(jīng)典應(yīng)用場合中讓內(nèi)容密度和閱讀舒適度取得平衡。字體尺寸是通過SP(可縮放像素?cái)?shù),scaleable pixels)指定的,讓大尺寸字體獲得更好的可接受度。

style-typography1_large_mdpi

style-typography-8_large_mdpi

style-typography2_large_mdpi

“顯示(Display)”樣式的例子

style-typography4_large_mdpi

style-typography5_large_mdpi

“頭條(Headline)”樣式的例子

就任何表格元素來講,App Bar中出現(xiàn)的所有標(biāo)題都要使用“標(biāo)題”樣式。

style-typography6_large_mdpi

style-typography7_large_mdpi

“標(biāo)題(Title)”樣式的例子

在某些特定場合中,要使用“次要標(biāo)題”樣式,而不用較小的“主體”樣式。這些個體包含了一小段文字預(yù)覽,或者有標(biāo)題與一行“主體”樣式的文字一同出現(xiàn)。

style-typography9_large_mdpi

style-typography-23_large_mdpi

“次要標(biāo)題(Subhead)”樣式的例子

style-typography10_large_mdpi

style-typography11_large_mdpi

“主體(Body)”樣式的例子

style-typography12_large_mdpi

style-typography13_large_mdpi

“主體(Body)”樣式的例子

style-typography14_large_mdpi

style-typography15_large_mdpi

“按鈕(Button)”樣式的例子

基本色/色彩對比度(Basic colors/Color contrast)

最基本的常識是,相同顏色的背景和文字是很難閱讀的。但有些人不知道的是,帶有過強(qiáng)對比度的文本會有些炫目,同樣難以閱讀。這一點(diǎn)在深色背景下尤其明顯。

要獲得良好的辨識度,文本應(yīng)當(dāng)滿足一個最低的對比度,也就是4.5:1(依據(jù)明度計(jì)算)。7:1的對比度是最適合閱讀的。

這些色彩的組合同樣要考慮到某些非典型用戶對于對比度的不同反應(yīng)。

style-typography-16_large_mdpi

style-typography-17_large_mdpi

style-typography-18_large_mdpi

style-typography-19_large_mdpi

style-typography-20_large_mdpi

大號字/動態(tài)字體尺寸(Big Type / Dynamic Type sizes)

如果使用得當(dāng),大號字會讓應(yīng)用顯得更加有趣、容易辨別布局,并幫助用戶快速理解內(nèi)容。

動態(tài)字體尺寸讓大號字可以在文本長度未知的情況下保持在容器之內(nèi)。動態(tài)尺寸是根據(jù)可用空間和預(yù)估的字符空間,從字體排版縮放中選擇的。

避免輕率地的使用小號字來適配較小的容器,除非萬不得已。

style-typography-21_large_mdpi

style-typography-22_large_mdpi<

> 樣例對比

style-typography-23_large_mdpi

style-typography-24_large_mdpi

行高(Line Height)

行高是通過每個樣式各自的尺寸和粗細(xì)決定的,以獲得良好的可讀性和合適的間距。只有“主體”、“次要標(biāo)題”、“大綱”等類似的樣式中才允許使用自動換行。其它所有樣式應(yīng)當(dāng)以單行形式出現(xiàn)。

style-typography-25_large_mdpi<

> 樣例對比

 

style-typography-27_large_mdpi

style-typography-30_large_mdpi

換行規(guī)則/連字符(Line breaking rules / Hypenation)

style-typography-33_large_mdpi

|

不要

每行長度包含的字符(Characters per line lengths)

可讀性和行長度參考了來自Baymard Institute的建議:

“要得到良好的閱讀效果,每行應(yīng)當(dāng)包含60個字符左右。每行所包含的字符數(shù)量是決定閱讀舒適度的關(guān)鍵因素。”

“過寬:如果每行文本過多,用戶的眼睛將難以找到在文本上對焦。這是因?yàn)檫^長的文字導(dǎo)致用戶難以判斷一行的起始點(diǎn),甚至在大段文字中出現(xiàn)讀錯行的現(xiàn)象。”

“過窄:如果每行文本過少,會導(dǎo)致眼睛來回掃視過于頻繁,破壞閱讀的節(jié)奏。過短的內(nèi)容還會給人壓力,導(dǎo)致用戶完成本行閱讀前過早跳轉(zhuǎn)到下一行閱讀(因此會錯過潛在的重要信息)。”

參考: 可讀性: 最佳行長度

字間距(Tracking and kerning)

style-typography-36_large_mdpi

原文:Typography 翻譯:acely 校對:chenyusi

責(zé)任編輯:閆佳明 來源: design.1sters
相關(guān)推薦

2014-12-08 14:35:51

Material De真實(shí)動作

2014-12-08 13:40:10

Material De色彩

2014-12-08 15:03:17

Material De圖像

2013-09-22 16:22:58

扁平化UI設(shè)計(jì)

2014-08-21 15:40:53

Material De真實(shí)動作

2014-08-21 15:29:29

Material De概述

2014-08-07 14:19:46

Material DeGoogle

2015-07-21 15:02:37

設(shè)計(jì)扁平

2017-02-14 13:35:15

AndroidMaterial De動畫

2014-10-27 14:18:06

Material De交互響應(yīng)

2015-08-07 10:24:17

AndroidMaterialDes

2018-04-25 09:06:32

Chrome瀏覽器語言

2014-09-10 10:35:11

Material De設(shè)計(jì)原則

2014-08-19 16:10:05

Material DeUI設(shè)計(jì)趨勢

2016-02-02 10:03:15

chromeMaterial De

2017-02-20 16:03:35

Android We谷歌硬件

2022-01-20 20:08:38

MaterialpalettesMaterial 3

2014-08-11 11:19:19

Material De

2014-07-02 10:26:52

Material DeGoogle

2014-08-07 10:13:43

谷歌Material De設(shè)計(jì)規(guī)范
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號