iOS設(shè)備的分辨率和尺寸(參考The Ultimate Guide To iPhone Resolutions)
分辨率
點(diǎn)（point）： 開(kāi)發(fā)過(guò)程中，所有基于坐標(biāo)系的繪制都以point為單位伟众，point和屏幕上的像素是一一對(duì)應(yīng)的
渲染像素（Render Pixels）：以point為單位繪制最終渲染成pixels舍沙，這個(gè)過(guò)程被稱(chēng)為光柵化胚嘲，基于point的坐標(biāo)系乘以比例因子可以得到基于像素的坐標(biāo)系陶冷，高比例因子會(huì)使更多的細(xì)節(jié)展示，目前的比例因子會(huì)是1x，2x青伤，3x
物理像素（Physical Pixels）： 設(shè)備屏幕實(shí)際像素
設(shè)備屏幕的物理長(zhǎng)度（Physical Device）：設(shè)備的物理長(zhǎng)度，使用英寸作為單位殴瘦，比如iPhone8是4.7英寸狠角，iPhone11是6.1英寸等，這里的數(shù)字是指手機(jī)屏幕對(duì)角線的物理長(zhǎng)度蚪腋，實(shí)際上會(huì)是Physical Pixels的像素值會(huì)渲染到該屏幕丰歌，而不是Render Pixels的像素值，屏幕上會(huì)有PPI（Pixels-per-inch）的特性屉凯，PPI的值告訴你每英寸會(huì)有多少像素渲染
iOS 各個(gè)設(shè)備對(duì)應(yīng)的分辨率
| 機(jī)型 | 屏幕寬高(point) | 渲染像素(pixel) | 物理像素(pixel) | 屏幕對(duì)角線長(zhǎng)度(英寸） | 屏幕模式 |
|---|---|---|---|---|---|
| Phone 5,5s,5c,se | 320 * 568 | 640 * 1136 | 640 * 1136 | 4(326 PPI) | 2x |
| Phone 6,6s,7,8 | 375 × 667 | 750 * 1334 | 750 * 1334 | 4.7(326PPI) | 2x |
| Phone 6p,6sp,7p,8p | 414 * 736 | 1242 * 2208 | 1080 * 1920 | 5.5(401PPI) | 3x |
| Phone X,Xs,11Pro | 375 * 812 | 1125*2436 | 1125*2436 | 5.8(458PPI) | 3x |
| Phone 11,Xr | 414*896 | 828*1792 | 828*1792 | 6.1(326PPI) | 2x |
| Phone 11Pro Max,Xs Max | 414*896 | 1242 *2688 | 1242 *2688 | 6.5(458PPI) | 3x |
| iPad 4,5,Air,Air2立帖，mini3，mini4 | 1024×768 | 2048×1536 | 2048×1536 | 9.7(264ppi) | 2x |
| iPad Pro | 1366*1024 | 2732×2048 | 2732×2048 | 12.9(264ppi) | 2x |
屏幕模式（1x, 2x, 3x）：描述的就是屏幕中一個(gè)點(diǎn)有多少個(gè) Rendered Pixels 渲染悠砚，對(duì)于2倍屏(又稱(chēng) Retina 顯示屏)晓勇，會(huì)有 2 * 2 = 4 個(gè)像素的面積渲染，對(duì)于3倍屏(又稱(chēng) Retina HD 顯示屏)，會(huì)有 3 * 3 = 9 個(gè)像素的面積渲染
iOS 開(kāi)發(fā)中绑咱，所有控件的坐標(biāo)以及控件大小都是以點(diǎn)為單位的绰筛，假如我在屏幕上需要展示一張 20 * 20 (單位：point)大小的圖片，那么設(shè)計(jì)師應(yīng)該怎么給我圖呢描融？
這里就會(huì)用到屏幕模式的概念铝噩，如果屏幕是 2x，那么就需要提供 40 * 40 (單位: pixel)大小的圖片窿克，如果屏幕是 3x骏庸，那么就提供 60 * 60 大小的圖片，且圖片的命名需要遵守以下規(guī)范:
Standard:<device_modifier>.<filename_extension>
High resolution:@2x<device_modifier>.<filename_extension>
High HD resolution:@3x<device_modifier>.<filename_extension>
ImageName: 圖片名字年叮，根據(jù)場(chǎng)景命名
device_modifier: 可選敞恋，可以是 ~ipad 或者 ~iphone, 當(dāng)需要為 iPad 和 iPhone 分別指定一套圖時(shí)需要加上此字段
filename_extension: 圖片后綴名，iOS中使用 png 圖片
例如:
MyImage@2x.png - 2x 顯示屏自動(dòng)加載的圖片版本
MyImage@3x.png - 3x 顯示屏自動(dòng)加載的圖片版本
MyImage@2x~iphone.png - 2x iPhone 和 iPod touch 顯示屏自動(dòng)加載的圖片版本
MyImage@3x~iphone.png - 3x iPhone and iPod 顯示屏自動(dòng)加載的圖片版本
設(shè)計(jì)和開(kāi)發(fā)之間的多屏適配問(wèn)題
現(xiàn)在iPhone的屏幕尺寸也不再單一谋右，那么現(xiàn)在以怎樣的流程來(lái)進(jìn)行iOS的研發(fā)更合適呢硬猫？
一個(gè)基本思路是：
選擇一種尺寸作為設(shè)計(jì)和開(kāi)發(fā)基準(zhǔn)
定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸
特殊適配效果給出設(shè)計(jì)效果
這個(gè)問(wèn)題很早之前在知乎上已經(jīng)被討論改执，附上鏈接：手機(jī)淘寶設(shè)計(jì)師pigtwo的回答
多屏適配規(guī)范
- 文字流式
- 控件彈性
- 圖片等比縮放
控件彈性指的是啸蜜，navigation、cell辈挂、bar等適配過(guò)程中垂直方向上高度不變衬横；水平方向?qū)挾茸兓瘯r(shí)，通過(guò)調(diào)整元素間距或元素右對(duì)齊的方式實(shí)現(xiàn)自適應(yīng)终蒂。這樣屏幕越大蜂林，在垂直方向上可以顯示更多內(nèi)容，發(fā)揮大屏幕的優(yōu)勢(shì)
關(guān)于xib拇泣、storyboard噪叙、代碼
xib和StoryBoard
xib:每個(gè)viewcontroller對(duì)應(yīng)單獨(dú)的xib，可以更加方便單獨(dú)管理霉翔，項(xiàng)目也方便多人一起開(kāi)發(fā)睁蕾，改動(dòng)視圖方便，不用全局改動(dòng)
StoryBoard:StoryBoard是一個(gè)包含了多個(gè)xib的文件债朵，管理方便子眶，在StoryBoard中不僅可以看到每個(gè) ViewController的布局樣式，也可以知道各個(gè)ViewController之間的轉(zhuǎn)換關(guān)系
-
區(qū)別
- 項(xiàng)目大的話序芦，xib文件過(guò)多臭杰，不容易統(tǒng)一管理。跳轉(zhuǎn)只能在代碼實(shí)現(xiàn)谚中，比較混亂
- StoryBoard適合單獨(dú)開(kāi)發(fā)并且是中小型項(xiàng)目的時(shí)候使用
xib和代碼區(qū)別
-
xib優(yōu)缺點(diǎn)
- xib可視化渴杆，開(kāi)發(fā)速度快射窒，代碼量少
- 合作開(kāi)發(fā)，彼此閱讀困難将塑，無(wú)法在git上查看歷史改動(dòng)脉顿，容易造成沖突，造成沖突后難以解決点寥，容易產(chǎn)生不必要的commit
- 性能上艾疟，xib加載慢，打開(kāi)速度也慢敢辩，而且會(huì)占用app包的體積
-
代碼優(yōu)缺點(diǎn)
- 靈活蔽莱，方便，所有的屬性都可以通過(guò)代碼來(lái)控制戚长，簡(jiǎn)單來(lái)說(shuō)盗冷，xib 能做的，純代碼都能做而他們不能做的同廉，純代碼也能做
- 對(duì)大型項(xiàng)目仪糖、團(tuán)隊(duì)開(kāi)發(fā)都很友好，尤其是在版本控制迫肖，代碼管理方面锅劝。唯一的缺點(diǎn)就是繁瑣以及代碼量大
