Android系統字型規範

來源:互聯網
上載者:User

標籤:

我們在做Android移動APP設計的時候,字型大小的選擇也是很讓人頭疼,轉載一份有關Android系統字型規範,如果在做Android項目的使用者應該看看,如果有任何建議歡迎在留言處與我們交流探討。

主要從以下幾點做了分析:

  • 移動設計中與字型大小有關的基本概念
  • Android系統預設字型及字型大小
  • Android字型單位sp與px的換算
  • 規範字型大小的意義
  • 印刷業的規範字型大小的用法
  • Android規範字型大小的近似用法
  • 如何向前端輸出?
  • 如何在photoshop裡選擇字型大小?
1. 移動設計中與字型大小有關的基本概念
  • px:Pixels即像素,基本原色素及其灰階的基本編碼。
  • DPI:dots per inch,是印刷上的記量單位,意思是每個英寸上,所能印刷的網點數。
  • PPI:pixels per inch 數字影像的解析度,意思是每英寸所擁有的像素數,即像素密度。
  • PPI = √(長度像素數² + 寬度像素數²) / 螢幕對角線英寸數
  • pt:Point,磅因,國際通行的印刷單位,是一個自然界標準的長度單位。

    inch = 2.54cm = 25.4 mm = 72pt, 1pt≈0.35mm
    Photoshop裡的字型單位pt和point不一樣。在Photoshop裡,同樣是10pt的字,只要變換字型,字的高度就會變化。

  • dp:Density-independent pixels,以160PPI螢幕為標準,則1dp=1px
  • dp和px的換算公式 :dp*ppi/160 = px
  • sp:Scale-independent pixels.安卓的字型單位,以160PPI螢幕為標準,當字型大小為 100%時, 1sp=1px
  • sp 與 px 的換算公式:sp*ppi/160 = px
2. Android 系統預設字型 Rotobo,限定使用以下字型大小

3. Android 字型單位 sp 與 px 的換算
  • PPI = √(長度像素數² + 寬度像素數²) / 螢幕對角線英寸數
  • sp與px的換算公式:sp*ppi/160 = px

以三星Note2為例,PPI = √(1280² + 720²) / 5.5=267

經測量,三星Note2的字型高度確實如此,見:

4. 規範字型大小的意義

保證相同字型大小的字在不同PPI螢幕上顯示的物理高度一致,下面來驗證一下。

  • 設定 PPI為 267 時,高度18sp(即 30px)的字的物理高度為 X,則:
    一英寸裡的像素數 267 / 一英寸裡的毫米數 25.4mm = 30 / X
    X ≈ 2.86mm
  • 設定 PPI為 160 時,高度18sp(即 18px)的字的物理高度為 Y,則:
    一英寸裡的像素數 160 / 一英寸裡的毫米數 25.4mm = 18 / Y
    Y ≈ 2.86mm

綜上,X = Y,這就證明了同為18sp的字在 PPI分別為 267 和 160 時,顯示的物理高度都是 2.86mm

5. 印刷業的規範字型大小的用法

看書的時候眼睛距離書本的最佳距離為 33cm,書本的閱讀距離比較接近於手機的閱讀距離,所以我們來參考下書本上印刷文字的規範。

印刷業已經有成熟的行業字型大小標準,如下表所示:

其中本文常用的字型大小是六號(7.5p)、小五號(9p)、五號(10.5p),如下表所示:

6. Android 規範字型大小的近似用法

通過計算出 Android規範字型大小的物理高度,找到每個字型大小最接近的印刷字型大小:

再根據印刷字型大小的用途,近似得出Android 規範字型大小的用法

7. 如何向前端輸出?

第一步:將sp 換算成px。但是px隨PPI 變化而變化,這一點可以從sp 與px的換算公式“sp*ppi/160 = px ”看出來。我們不能算出所有的情況,所以只計算首選需要適配的ppi 對應的像素高度。

第二步:把算好的像素高度和換算公式“ sp * ppi/160 = px ”同時輸出給前端,這樣以後再換ppi,前端可以自動計算。另外,前端代碼裡定義字型高度用的也是px,所以設計師向前端輸出以px計算的字型大小尺寸是非常合適的。例如:

8. 如何在photoshop裡選擇字型大小?

上文中,我們已經算出了字型像素高度,把這些像素高度畫到ps 裡,
再把你要使用的字型調到這樣的像素高度,得出photoshop 裡對應的字型大小,用於設計。也就是說Photoshop 裡的字型大小都需要根據實際情況,手動調出來,沒有捷徑。例如ppi 為240 時,對應的像素高度和字型字型大小如所示:

如果ppi 變化,上面的圖就不能用了,又要重新算,比較勞神費力,但我目前還沒有更好的辦法,歡迎大家拍磚,我會積極採納意見,最佳化方案。

參考文獻:
1.Android 設計指南:
http://www.sunjw.us/adchs/style/typography.html

2.維基百科:點(印刷)
http://zh.wikipedia.org/wiki/%E7%82%B9_(%E5%8D%B0%E5%88%B7

3.百度文庫《印刷文字的字型與字型大小規定》
http://wenku.baidu.com/view/c3f12af9aef8941ea76e05f2.html

Android系統字型規範

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.