iOS&Android 移動設計字體規范整理大全


對於一位移動APP設計師來說,字體的把控非常重要。特別是app設計。因為不同的字體在不同的移動終端顯示出來的效果真是百花齊放。終極沒達到我們設計圖的效果。

所以,ios和android都有各自的設計規范。也是告訴各位一定APP設計和開發人員可以遵循這些規范來設計開發,盡量達到最佳顯示效果。

25學堂今天來跟大家回顧和整理iOS&Android 移動設計字體規范。

其他詳細的尺寸規范大家可以點擊查看:APP設計尺寸規范大全

 

一、IOS版本的字體設計規范和常識

iOS 的 1 pt = 邏輯像素 1 px = 物理像素 1 px(非 Retina)或 2 px(Retina)

如果你新建 Photoshop 文檔時將 PPI 設定為 72,則文檔中 1 pt = 1 px;如果你把 PPI 設為 144,則 1 pt = 2 px。

單位術語:pt: point     px: pixel        PPI: pixels per inch

Photoshop 默認使用 1 inch = 72 pt 的標准,所以為什么我們設計APP界面設計效果的時候,設置的分辨率就是72,主要是這樣設計方便、免了換算之苦。

 

1、如果你是iOS客戶端開發人員,你在編程時使用的默認簡體中文字體,就是常用的華文Heiti SC。
2、如果你是iOS UI設計人員,你在設計時如果使用Photoshop,請選中“黑體-簡”或Heiti SC,並設置為“細體”、“渾厚”是與iOS上的實際效果最接近的(Heiti SC Thin)。或者是冬青黑簡體、黑體等等。英文字體是 Helvetica Neue Ultra Light。

之前25學堂報道的相關ios 設計字體:

1、iOS7字體設計規范以及APP設計中英文字體下載

2、iOS蘋果麗黑字體Hiragino_Sans_GB_W3完整版下載

 

如今iphone6和iphone6+開始流行,我們設計的字體規范也有所改變。

因為iPhone6和iPhone 6Plus都有標准模式和放大模式2種分辨率:

iphone6的兩種模式

 

1.iPhone4和iPhone5寬度一樣,5只是比4高176像素,所以5和4一套規范即可;

2.iPhone6的放大模式分辨率是640*1136,和iPhone5正好相同;

3.iPhone6的標准模式分辨率為750*1334,整體放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。

我們來看淘寶購物車的截圖(從左到右依次為iPhone4、5、6):

iphone設計字體規范

 

總結: 我們可以看出iPhone 4、5、6是可以共用一套字體大小規范。

而iPhone6 plus在放大模式下的字體正好是在此基礎上放大  1.5倍:

 

如下我們來看下一般規律(72像素/英寸下的字號大小規律,即72ppt下面)

導航欄標題:大概34px-42px;現在標題越來越小,一般36比較合適。

如果是iphone plus 那么字體大小應該是51-63px之間。  最合適的54px。

標簽欄文字:20-24px。ios自帶應用都是20px。個人認為標簽欄時(圖標+文字)形式的的話不要大於22比較合適。

正文:28px-36px,新聞類基本都在用36,比如網易新聞正文部分。

 除了新聞類,其他類型的APP   正文   列表  表單 都可以是30-32px左右。 

 

二、安卓android APP字體設計規范

安卓中文字體: droid sans fallback

安卓英文字體:roboto

安卓手機的默認中文字體都是droid sans fallback,是谷歌自己的字體,與微軟雅黑很像,小米miui v5 用的也是這種字體。

安卓字體

 

大家可以閱讀25學堂之前發布的《Android APPUI設計師必知:pt sp dp之間的關系

sp與px的換算公式:sp*ppi/160 = px

sp與px的換算公式

sp與px的換算公式

如果想看下詳細android字體:Android移動APP設計字體規范詳解

 

題外話:為什么android安卓機器上的字體沒ios的好看,原因有2點

第一點:android分辨率很多,字體渲染機制不一樣。

第二點:和 iOS 相比,Android 的“字體系統”最大的一個缺點其實是缺字。正好體現了 iOS 在 Android 字符數面前的優越感。

 

附加各大主流的移動或者桌面操作系統的默認中英文字體

以下列出的是西英文字體和簡體中文字體:

Windows(Vista 及更高版本)
Segoe UI
微軟雅黑 [1](Windows 8 開始用微軟雅黑 UI [2])

Windows(Vista 之前)
Tahoma
中易宋體(又稱宋體、SimSun)

Windows Phone
Segoe WP
方正等線(簡體中文 locale,詳見 [3])或微軟雅黑 [1](英語 locale)

Mac OS X
Lucida Grande
華文黑體(具體情況比較復雜,詳見 [4])

iOS
Helvetica Neue [5](非 Retina display 的設備用 Helvetica)
華文黑體(該版本稱作黑體-簡,參見 [4])

Android
Droid Sans(4.0 之前)或 Roboto [6](4.0 及更高版本)
Droid Sans Fallback [1](文泉驛微米黑之母)

Ubuntu
文泉驛微米黑 [1]

MIUI V5
方正蘭亭中黑和方正蘭亭黑


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM