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

 

語言文字的大小與樣式變化取決于字符類型:英文類、高形字或方塊字。

 

目錄

關于語言
Noto指南
語言類別參考

 

關于語言

字形

每種書面語言自己使用的那套字符稱為字形。

如果UI使用了多種語言文字,那么排版布局應該跟隨語言而改變。語言文字有不同的平均字長和字高,會影響在UI中的顯示方式。

字形排版

 

長度

不同種類語言文字的字長可能會有很大差異,即使它們的字形類似,例如英文和德文。

英文一般比其他歐洲語言文字短。例如德文有很多復合詞,需要更多行和行間距來表達。

 

對齊

一些文字系統,像阿拉伯文和希伯來文,字符是從右向左顯示的。那些字體在同樣的字號下可能會比拉丁文顯得更小,需要調整字間距和對齊方式,使排版在不同語言情況下也適用那套UI。

希伯來文從右向左排列

 

高度

很多文字系統需要比英文更多的縱向空間,所以你的UI應該給這些不同的系統提供足夠的縱向空間。

雖然越南文是用拉丁字母書寫的,但是它有些重音會增加一些字母的高度,例如ó。

 

縱向排版

縱向排版(雖然很少被使用)可以縱向顯示字符。

中國、日本和韓國的字體排版通常都是等寬的,這意味著每個詞占用的空間和其余的詞都一樣。它通常從左到右,從上到下放置。同時也可以縱向排布:從上到下,從右到左。

橫向和縱向排版樣式

 

語言選項

當每種語言都使用不同的書寫系統時,可能需要在同一UI里使用多種的字體來顯示多語言內容。

書面文字系統可分為三類:

  1. 英文類
  2. 高形字
  3. 方塊字

 

英文類字體

西歐、中歐、東歐和大部分非洲地區語言一般使用拉丁字母書寫。越南文是一個需注意的例外,它雖然使用了拉丁書寫系統的本地化形式,但其重音字形會高于那些西歐中的語言。希臘和西里爾語文字系統與拉丁文非常相似。

 

高形字體

需要額外的行高來匹配更大字形的語言文字,包括亞洲南部、東南部以及中東地區的語言,例如阿拉伯文、印地文、泰盧固文、泰文和越南文等。

 

方塊字體

需要額外的行高來匹配更大字形的語言文字,包括漢文、日文和韓文等。

 

Noto指南

Noto是所有未被Roboto所涵蓋語言的默認字體。它來源于Droid,旨在通過兼容的高度和筆劃粗度在語言和文字之間實現視覺上的協調一致。

該系列在Unicode6.0版本中有定義93種語言字體。

 

方塊字體注意事項

Noto漢文,日文和韓文(CJK)有七種字重可與Roboto相匹配,字重設置與英文相同。

字號小于標題樣式時應當依據拉丁字體格式進行調整。

漢文和日文

 

行高稍大于拉丁字符

行高匹配示例,漢文和日文

 

高形字體注意事項

Noto支持南亞、東南亞以及中東地區語言使用的高形字體,包括阿拉伯文、印地文和泰文??墒褂闷胀ㄗ种?,中等字重在Noto中不可用。應避免使用粗體,因為粗體過于沉重。

字體尺寸小于標題樣式時應該調整為拉丁字體格式。

泰文和梵文

 

高形文字行高稍大于拉丁字符。

行高匹配示例,泰文和梵文

 

語言文字類別參考

語言文字類別參考

為方便國際化,谷歌將語言文字分成了三類:英文類、高形字和方塊字。

英文類:拉丁文(除了越南文),希臘文、西里爾文、希伯來文、亞美尼亞文和格魯吉亞文。

高形字:語言文字需要額外行高來匹配更大字形,包括亞洲南部、東南部以及中東語,例如阿拉伯文、印地文、泰盧固文、泰文和越南文。

方塊字:語言文字需要額外行高來匹配更大字形,但和高型文本度量方法不同。方塊字包括漢文、日文和韓文。

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Language support 語言支持

登錄收藏
 
你可能喜歡的:
界面布局| 移動端常見8種界面布局的分析與運用界面布局| 移動端常見8種界面布局的分析與運用
砂之船奧萊數字化零售項目砂之船奧萊數字化零售項目
Material Design Shape and motion 形狀與動效Material Design Shape and motion 形狀與動效
Material Design Shape as expression 形狀表達Material Design Shape as expression 形狀表達
細說控件| Button按鈕的不同樣式與狀態細說控件| Button按鈕的不同樣式與狀態
Material Design Shape and hierarchy 形狀與層級Material Design Shape and hierarchy 形狀與層級
聊聊加載等待的那些事之“進度指示器”(原則篇)聊聊加載等待的那些事之“進度指示器”(原則篇)
Material Design About shape 形狀指南Material Design About shape 形狀指南
產品體驗設計-交互篇(三)產品體驗設計-交互篇(三)
下拉菜單設計的7個技巧下拉菜單設計的7個技巧
?
京东方a股票