各設(shè)備像素參數(shù)
| 設(shè)備 | Retina | 像素(寬 x 高)(px) |
|---|---|---|
| iPhone 6+ (6S+) | Retina HD | 1080 x 1920 |
| iPhone 6 (6S) | Retina | 750 x 1334 |
| iPhone 5 (5S,5C) | Retina | 640 x 1136 |
| iPhone 4 (4,4S) | Retina | 640x 960 |
| iPhone (1,2,3) | No | 320 x 480 |
| iPad Air（1,2)/iPad(3,4) | Retina | 1536 x 2048 |
| iPad Pro | Retina | 2048 x 2732 |
| iPad Mini(2,3) | Retina | 1536 x 2048 |
| iPad(Mini1,1,2) | No | 768 x 1024 |
Points和Pixel的概念
Points是一個“分辨率無關(guān)”測量方法。
根據(jù)屏幕的像素密度饶号，一個point可以包含多個像素(例如：在一個常規(guī)retina屏幕里吼鳞，1pt包含2x2個像素)
當(dāng)設(shè)計(jì)師在對多種屏幕尺寸進(jìn)行設(shè)計(jì)時，應(yīng)該以points的角度考慮，然后以像素的角度進(jìn)行設(shè)計(jì)。
就是說你需要導(dǎo)出3份不同像素的切圖。
設(shè)計(jì)稿最好以points來標(biāo)注郭计，除非特別在數(shù)值后面標(biāo)注px,否則一般情況下認(rèn)為該數(shù)值為points
如下圖:
圖1中的標(biāo)注單位為points，實(shí)際代表的左圖像素為：640x1136 右圖為：750x1334
設(shè)備尺寸信息
| 設(shè)備 | 像素與points的倍率 | 屏幕ppi | 屏幕尺寸 |
|---|---|---|---|
| iPhone 6+ (6S+) | @3x | 401 | 5.5" |
| iPhone 6 (6S) | @2x | 326 | 4.7" |
| iPhone 5 (5S,5C) | @2x | 326 | 4.0" |
| iPhone 4 (4,4S) | @2x | 326 | 3.5" |
| iPhone (1,2,3) | @1x | 163 | 3.5" |
| iPad Air（1,2)/iPad(3,4) | @2x | 264 | 9.7" |
| iPad Pro | @2x | 264 | 12.9" |
| iPad Mini(2,3) | @2x | 326 | 7.9" |
| iPad Mini1 | @1x | 163 | 7.9" |
| iPad(1,2) | @1x | 132 | 9.7" |
iPhone6+的“縮減像素采樣”
iPhone6+的渲染像素和實(shí)際物理像素和其他設(shè)備不一樣椒振，因?yàn)樗钠聊坏南袼夭蛔阋灾蝡oints的@3x數(shù)量的像素昭伸，所以實(shí)際在手機(jī)屏幕上顯示的的像素值是point@3x分辨率的87%(就是從2208 x 1242 到 1920 x 1080的適配)
點(diǎn)擊這里查看所有設(shè)備的渲染像素和實(shí)際物理像素參考
App圖標(biāo)
| 設(shè)備 | App界面 | AppStore界面 | Spotlight界面 | 設(shè)置界面 |
|---|---|---|---|---|
| iPhone 6+ (6S+) | 180x180 px | 1024x1024 px | 120x120 px | 87x87 px |
| iPhone (6S,6,5S,5,5C,4S,4) | 120x120 px | 1024x1024 px | 80x80 px | 58x58 px |
| iPhone (1,2,3) | 57x57 px | 1024x1024 px | 29x29 px | 29x29 px |
| iPad Pro | 167x167 px | 1024x1024 px | 120x120 px | 58x58 px |
| iPad (Mini2,Mini3,Air,3,4) | 152x152 px | 1024x1024 px | 80x80 px | 58x58 px |
| iPad (1,2,Mini1) | 76x76 px | 1024x1024 px | 40x40 px | 29x29 px |
圓角:
自從iOS7以后，App圖標(biāo)使用的是超橢圓形狀澎迎。鑒于蘋果沒有提供官方的形狀模板庐杨，你可以使用非官方模板
雖然圓角不能用于最終的切圖(最終的app切圖必須是方形),但你可以在設(shè)計(jì)階段用來測試
警告：如果你為了給app邊緣加效果而給app加了超橢圓遮罩，請確保遮罩外部區(qū)域沒有使用透明通道夹供。
蘋果不支持對app圖標(biāo)使用透明通道灵份，如果你使用了，透明區(qū)域會被替換成黑色哮洽。
如果你的遮罩不是100%準(zhǔn)確填渠，用戶會發(fā)現(xiàn)你的app圖標(biāo)圓角邊緣有黑色線條。最好為畫布和app圖標(biāo)設(shè)置相同的背景
如果你的app圖標(biāo)的背景色為白色鸟辅，在設(shè)置界面和AppStore界面會自動在其邊緣加上寬度為1px的灰色線條
在iOS6之前的版本圓角的效果會有所不同氛什，而且app圖標(biāo)在手機(jī)主界面會出現(xiàn)陰影效果和光澤效果（光澤效果可以選擇不顯示）
排版
iOS9以前，蘋果使用的字體是Helvetica Neue（中文是：Heiti SC）匪凉，iOS9發(fā)布后屉更，蘋果將字體改為了San Francisco（中文叫：蘋方）
字體參數(shù)
| 界面元素 | Size(pt) | Weight | Spacing(pt) |
|---|---|---|---|
| 導(dǎo)航欄標(biāo)題（Nav Bar Title） | 17 | Medium | 0.5 |
| 導(dǎo)航欄按鈕（Nav Bar Button） | 17 | Regular | 0.5 |
| 搜索欄標(biāo)題（Search Bar） | 13.5 | Regular | 0 |
| 標(biāo)簽欄按鈕（Tab Bar Title） | 10 | Regular | 0.1 |
| 表格列表標(biāo)題（Table Header） | 12.5 | Regular | 0.25 |
| 表格列表正文（Table Row） | 16.5 | Regular | 0 |
| 表格列表副描述（Table Row Subline） | 16.5 | Regular | 0 |
| 表格頁腳(Table Footer) | 12.5 | Regular | 0.2 |
| 底部彈出菜單(Action Sheet) | 20 | Regular/Medium | 0.5 |
色調(diào)
以上列出的顏色值是iOS7以后蘋果的主要配色，進(jìn)行設(shè)計(jì)時可以使用這些顏色洒缀，或者自行選擇
按鈕的圖標(biāo)
按鈕的圖標(biāo)需要有兩種狀態(tài)：默認(rèn)狀態(tài)的圖文風(fēng)格的圖標(biāo)以1或者1.5pt的線條寬度，觸發(fā)點(diǎn)擊狀態(tài)的圖標(biāo)以單色填充
Activiy 視圖的圖標(biāo)
Activity視圖（有時也叫作分享視圖）,在iOS8以前是用圖文風(fēng)格的圖標(biāo)，iOS8之后只用了一個白色背景圖加一個圖標(biāo)的風(fēng)格树绩。
狀態(tài)欄
狀態(tài)欄有兩種風(fēng)格：暗和亮
導(dǎo)航欄
英文原文：http://iosdesign.ivomynttinen.com/
未完待續(xù)
翻譯水平有限萨脑，歡迎提出改進(jìn)意見
