對於一位移動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 設計字體:
2、iOS蘋果麗黑字體Hiragino_Sans_GB_W3完整版下載
如今iphone6和iphone6+開始流行,我們設計的字體規范也有所改變。
因為iPhone6和iPhone 6Plus都有標准模式和放大模式2種分辨率:
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 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
如果想看下詳細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
方正蘭亭中黑和方正蘭亭黑