這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

排版表達了層次結構和品牌形象。

 

目錄

字體屬性
字體分類
易讀性
系統字體

 

字體屬性

字體是字母的集合。雖然每個字母都是唯一的,但字母間有確切的共享形態。字體代表了通過字母集合而形成的共享模式。

當使用排版設計的基本原則時,根據其樣式、辨識性和易讀性來選擇字體是最有效的。

字型部分名稱:孔徑(Apeture)、升部(Acender)、基線(baseline)、大寫字高(Cap Height),降部(descender)、行距(leading)、字間距(letter spacing)、無襯線(sans serif)、襯線(serif)、字干(stem)、筆畫(stroke)、X行高(X-height)。

 

基線

基線是指文本行所??康哪菞l看不見的線。在Material Design中,基線是測量文本與元素間垂直距離的重要規范。

基線

 

4dp網格

字體與4dp網格基線對齊

無論pt/sp的大小,文字基線必須位于4dp網格上。為維持這個網格標準,行高必須是能被4整除的值。

 

從基線開始測量

規定UI元素與文字的距離以到基線為標準?;€值與軟件無關,所以可在任何設計程序中使用,網格也同樣如此。在Android和iOS上,代碼可以從基線相關的規格轉換成內邊距。對于web,可以使用Sass或CSS自動計算。

 

大寫字高

大寫字高是指從基線開始測量的扁平大寫字母(如M或I)的高度。圓形和尖角的大寫字母(如S和A),可通過視線調節使這類字母略微高過大寫字高,從而達到大小一致的視覺效果。每種字體都有其獨特的大寫字高。

大寫字高

 

X字高

“X字高”是指小寫字母“x”的高度,它可以表示字體中每個字形將會達到的高度或長度。

滿足“X字高”的字體在使用小字型時具有更高的可讀性,因為每個字母內的空白區域更清晰。

字體小寫字母x的高度決定了其“X字高”。

 

升部與降部

升部存在于部分小寫字母中,是超過大寫字高或基線的垂直方向筆劃。降部是這些字母中垂直向下的筆劃。在一些情況下,當行高(基線間的垂直距離)過于緊湊時,筆劃間可能會產生沖突。

升部與降部

 

字重

字重指的是字體筆劃的相對粗細。一個字體可以有很多個字重,通常情況是4-6個。

一般字重:

  1. 普通
  2. 中等
  3. 粗體

 

字體分類

襯線體

襯線是出現在字母筆劃始端或末端的小形狀或突起。帶有襯線的字體稱為襯線字體。襯線體可歸為以下類型之一:

舊式襯線體類似于墨水書寫作品,具有:

  1. 筆劃粗細對比低
  2. 筆劃中強調斜線
  3. 小寫字母升部上襯線傾斜

 

過渡襯線體具有:

  1. 筆劃粗細對比高
  2. 中等高度的“X字高”
  3. 筆劃中強調垂直線
  4. 括弧性襯線

 

Didone或新古典主義襯線體具有:

  1. 筆劃粗細對比非常高
  2. 筆劃中強調垂直線
  3. 筆劃末端成“球形”

 

Slab襯線體具有:

  1. 筆劃粗細區別非常微小的粗襯線
  2. 細微或沒有括弧性襯線

  1. EB Garamond字體,舊式襯線體
  2. Libre Baskerville字體,過渡襯線體
  3. Libre Bodoni字體,Didone/新古典主義襯線體
  4. Bitter,粗襯線體

 

無襯線體

沒有襯線的字體稱之為無襯線體,來自于法語單詞“sans”,意思是“沒有”。 無襯線體可歸為以下類型之一:

  1. Grotesque:筆劃粗細對比低,縱向或無明顯加重
  2. Humanist:筆劃粗細對比中等,傾斜加重
  3. Geometric:筆劃粗細對比低,縱向加重和圓形風格

  1. Work Sans, grotesque無襯線體
  2. Alegreya Sans, humanist無襯線體
  3. Quicksand, geometric無襯線體

 

Monospace

Monospace字體中所有字符都顯示為同樣的寬度。

  1. Roboto Mono, monospace
  2. Space Mono, monospace
  3. VT323, monospace

 

手寫體

手寫字體是非常規的,具有自然書寫的感覺。這些字體通常在格式中使用H1-H6。它們有以下幾種形式:

  1. Black letter: 高度對比、窄、有直線和角度曲線
  2. Script:書法風格的重現(相對更正式)
  3. Handwriting: 手寫風格重現(相對沒那么正式)

  1. UbifrajturMaguntia, black letter
  2. Dancing Script, script
  3. Indie Flower, handwriting

 

展覽體(Display)

這是多種類型字體的混合,它們僅僅適用于大尺寸的顯示。

展覽體通常在字體格式中使用H1-H6。

  1. Shrikhand, 展覽體
  2. Chewy, 展覽體
  3. Faster One,展覽體

 

易讀性

可讀性取決于字體中的字符,而易讀性是指閱讀單詞或文本塊的容易程度,這會受到字體風格的影響。

字間距

字間距,也稱作字距,用于文字中對字母間距離的統一調節。

 

大型字體(例如標題)可通過縮緊字間距來減小字母間的距離并提高易讀性。

縮緊字間距

 

對于小型字體,更疏松的字間距可以提高易讀性,因為增大字母間隙加強了它們的形狀對比。全部大寫的文字,即使是小型尺寸,也會由于增加字間距而提高易讀性。

疏松字間距

 

表格數字

在表格內或其它數值可能會經常變化的地方使用表格數字(也稱作等寬數字),而非比例數字。

表格數字使數值保持視覺對齊,以便更好地瀏覽。

 

行寬

正文的行寬通常在40至60個字符之間。而在更寬的區域(例如桌面),行寬能達到120個字符,此時需要將行高從20sp增加到24sp。

對于英語正文來說,理想的行寬是40-60個字符。

 

短行英文的理想長度是20-40個字符。

 

行高

行高(也稱作行距)控制了文本塊中基線之間的空間量。文本的行高與其字號成比例。

  1. 字號14,行高20dp
  2. 字號20,行高28dp

 

段間距

將段間距保持在行高的0.75倍到1.25倍之間。

字號20sp,行高30dp,段間距28dp

 

字體對齊

字體對齊決定了文本在其顯示空間內的對齊方式。方式有以下三種:

  1. 左對齊:文本靠左對齊排列
  2. 右對齊:文本靠右對齊排列
  3. 居中:文本與其所在區域的中間對齊排列

 

左對齊

左對齊文本是左到右語言(如英語)最常用的方式。

正文中使用文本左對齊

 

右對齊

右對齊文本是右至左語言(如阿拉伯語和希伯來語)最常用的方式。

左至右語言也可使用右對齊文本,但最好用于突出布局中的短版元素(如旁注),不推薦在長文本中使用。

旁注使用右對齊文本

 

居中

居中文本最適于突出布局中的短版元素(如重要引述),不推薦在長文本中使用。

重要引述使用居中文本對齊。

 

系統字體

系統字體已預先安裝在電腦或設備中。它們通常有廣泛的語言支持且不收取開發者許可證費。在APP字體中使用系統默認字體會將平臺的一致性與APP的界面和使用感受相互融合。不過,由于它們在設備中隨處可見,因此可能不會特別突出。

 

使用系統字體

原生系統字體應該在大段文本或任何字號低于14sp的文本上使用。

Roboto是Android的默認系統字體。對于Android之外的平臺和web產品,請使用對應平臺推薦的系統字體。例如,iOS應用程序就應該使用蘋果的San Francisco字體。

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Understanding typography 排版指南

登錄收藏
 
你可能喜歡的:
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
異常場景怎么處理?異常場景怎么處理?
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
?
京东方a股票