導(dǎo)讀：標(biāo)注圖是客戶端進(jìn)入企業(yè)級開發(fā)階段后必不可少的一部分，好的標(biāo)注圖直接影響到客戶端最后的還原與實現(xiàn)樱调。隨著iPhone的機型越來越多约素，不同機型上的屏幕大小還不一樣届良，設(shè)計師在標(biāo)注的過程中遇到了很多問題，我作為開發(fā)圣猎，在和設(shè)計師深入探討后士葫，最后和設(shè)計師達(dá)成了一個標(biāo)注方案。這個方案沒有什么新奇的地方送悔，但很好的解決了我們碰到的問題慢显。這篇文章會圍繞標(biāo)注過程中產(chǎn)生的問題，深入研究欠啤，詳細(xì)解答荚藻，幫路人解惑。由于本人才疏學(xué)淺洁段，如有大神路過应狱，定要拍磚指正。
問題的由來
在泡沫上的iOS開發(fā)
08年的7月11號祠丝，當(dāng)蘋果發(fā)布iPhone3G并推出AppStore和iOS開發(fā)SDK之后疾呻，iOS開發(fā)正式出現(xiàn)了。隨著iPhone的熱賣写半，App作為移動互聯(lián)網(wǎng)的入口凸現(xiàn)了它的巨大價值岸蜗，無數(shù)創(chuàng)業(yè)團隊開始紛紛開發(fā)自己的App，iOS開發(fā)的身價也是水漲船高污朽。由于蘋果提供了完善的開發(fā)工具和健全的App市場散吵，App的設(shè)計與開發(fā)只能按照蘋果的標(biāo)準(zhǔn)來龙考，所以320X480的尺寸成了設(shè)計師們設(shè)計App的標(biāo)準(zhǔn)尺寸蟆肆。
這個標(biāo)準(zhǔn)到2012年發(fā)布iPhone5之前一直是金科玉律，設(shè)計師無須關(guān)心什么是px(pixel)晦款，什么是pt(point)炎功，原因是早期的iPhone中，像素和點是對等的缓溅；后來雖然有點小插曲出了retina屏幕蛇损，設(shè)計師設(shè)計時也只需要把原來的尺寸放大一倍即可，開發(fā)人員會默認(rèn)縮小一倍做開發(fā)坛怪∮倨耄可以說蘋果當(dāng)時是非常照顧開發(fā)和設(shè)計人員的，即使升級了retina屏幕袜匿，開發(fā)和設(shè)計之間的默契馬上會自動達(dá)成更啄。但這也給之后埋下了隱患。
泡沫之后一地雞毛
iPhone4s是喬布斯的遺作居灯，但它也可以看作是小團隊開發(fā)iOS應(yīng)用浪潮中泡沫的分水嶺祭务。
之后問題開始慢慢暴露了内狗。首先是iPhone5變長了，當(dāng)時我們都挺驚訝的义锥，連忙去確認(rèn)了尺寸柳沙，發(fā)現(xiàn)屏幕從{320,480}變成了{(lán)320,568}。有經(jīng)驗的iOS開發(fā)通過動態(tài)計算屏幕高度馬上解決了這個問題拌倍。然后赂鲤，開發(fā)同學(xué)和設(shè)計同學(xué)溝通好，把效果圖和標(biāo)注圖的尺寸改成了{(lán)640,1136}柱恤。這次蘋果的改動其實并沒有影響原來開發(fā)的方式和設(shè)計的原則蛤袒，所以可是說是虛驚一場。
但是好景不長膨更，iPhone6和iPhone6 Plus出現(xiàn)了妙真，蘋果第一次在一場發(fā)布會上發(fā)布2款不同尺寸的手機。這時候荚守，iOS攻城獅心中是一群草泥馬在萬馬奔騰珍德。從那時起，開發(fā)和設(shè)計之間的問題就徹底暴露了矗漾。
當(dāng)然锈候，蘋果也給了一個萬金油的方案，如果我們什么都不改敞贡，App會在iPhone6和iPhone6 Plus等大屏手機上自動等比放大展示泵琳。作為企業(yè)級的App，怎么能容忍放大版的App在iPhone6 Plus上顯示呢（因為它真的很大）誊役。然后获列，我們給不同尺寸的機型補上了不一樣的啟動圖(示意圖如下)。
驗證完所有需要支持的iPhone機型蛔垢，我們得到了4種不同的屏幕尺寸击孩，分別是{320,480}，{320,568}鹏漆，{375巩梢，667}，{414,736}(示意圖如下)艺玲。
這次蘋果給工程師和設(shè)計師真的是留了一地雞毛括蝠。
標(biāo)注單位px和pt之爭
開發(fā)之殤和設(shè)計之痛
開發(fā)同學(xué)一看到需要給App開發(fā)4種尺寸時，一開始的心態(tài)是悶逼的饭聚。設(shè)計人員也納悶到底拿哪個尺寸做效果圖呢忌警。因為都沒有經(jīng)驗，一開始我們繼續(xù)讓設(shè)計師用{640,1136}做標(biāo)注圖若治，這樣我們結(jié)合屏幕的寬度和高度慨蓝，可以很快的調(diào)整好不同尺寸下的布局感混。
隨著iPhone6和iPhone6 Plus的大量普及以及高端Android手機市場份額的提升，之前{640,1136}做的效果圖在真機上展示很不理想礼烈，于是設(shè)計師們把效果圖的設(shè)計尺寸改成了{(lán)750,1334}弧满，而且還考慮用{1080,1920}做效果圖。一般設(shè)計師們都是在效果圖上直接做標(biāo)注此熬，由于效果圖尺寸變成了{(lán)750,1334}庭呜，我們iOS開發(fā)拿到標(biāo)注圖的尺寸也變成了{(lán)750,1334}。然后犀忱，開發(fā)拿著px做各種換算募谎，碰到了各種奇怪的問題，做出來的頁面和效果圖的差距總是很大阴汇。我列舉下幾個常見的問題：
- 文本高度總是算不對数冬，導(dǎo)致布局總是不精確
- 設(shè)計師看到大屏幕上的字體特別小，而小屏幕上的字體剛剛好搀庶，于是要求開發(fā)把大屏幕的字體放大1號拐纱，然后經(jīng)常出現(xiàn)大屏手機的文字顯示不全的情況。
- 開發(fā)為了能適配小屏幕哥倔，根據(jù)寬度算了一個比例系數(shù)秸架，實現(xiàn)頁面時所有標(biāo)注圖上定長高的值都乘以該系數(shù)來等比縮放，后來發(fā)現(xiàn)小屏幕的效果就是不對咆蒿。
其實东抹，當(dāng)設(shè)計師用小屏幕的規(guī)范去設(shè)計大屏幕時，設(shè)計稿已經(jīng)出問題了沃测。比如在小屏幕的時候缭黔，定義了最小字號為9號，9號字在PS上{750,1334}的設(shè)計圖起來還可以芽突，但在真機retina屏幕上看起來就很小试浙，視覺落差特別大董瞻。設(shè)計師一看效果不對寞蚌，就讓開發(fā)加大字號；字號變大后钠糊，小屏幕的字體就感覺特別大挟秤，然后讓開發(fā)分屏幕對待，小屏幕不變抄伍，大屏幕加大字號艘刚；開發(fā)拿著{750,1334}尺寸的px標(biāo)注圖，總感覺之前除以2后的寬高在小屏幕上顯示不對截珍，于是又用(屏幕寬度/320)搞了個比例系數(shù)攀甚，而且將錯就錯的在所有的寬高上乘以該系數(shù)箩朴。
然后在敏捷開發(fā)的團隊里，設(shè)計師和工程師都開始懷疑人生了秋度。設(shè)計師總感覺設(shè)計稿和真機效果差別很大炸庞，工程師總感覺實現(xiàn)的跟標(biāo)注圖不一致。最后只能通過海量的微調(diào)來達(dá)到看起來差不多的效果荚斯。
解鈴還須系鈴人——深入了解iPhone渲染機制
說到現(xiàn)在埠居，我們差不多明白問題出在哪里了。
首先是設(shè)計師的設(shè)計規(guī)范需要修訂了事期，之前用在小屏幕上的設(shè)計規(guī)范不能生搬硬套在大屏幕上滥壕，需要重新修訂設(shè)計規(guī)范，兼顧小屏和大屏兽泣。
然后是工程師需要更加深入的了解iPhone的渲染機制了绎橘，否則px和pt會搞得傻傻分不清。有朋友會說唠倦，px和pt怎么會搞不清楚呢金踪，1pt在iPhone6(包括iPhone6s)之前都是2px，在iPhone6 Plus和iPhone6s Plus上是3px牵敷。但是當(dāng)你做出來的效果總是跟設(shè)計師的標(biāo)注圖不一樣時胡岔，你是不是會懷疑自己實現(xiàn)錯了。當(dāng)你覺得設(shè)計師標(biāo)注有問題時枷餐，你又怎么說明緣由然后告訴設(shè)計師一個誤差較少的方案呢靶瘸？你要明白設(shè)計師現(xiàn)在以不再是單獨為iOS開發(fā)做設(shè)計了，還要兼顧Android和H5頁面毛肋。
所以怨咪，我們需要靜下來好好研究下iPhone現(xiàn)在是怎么渲染的，然后找到一個靠譜的方案讓設(shè)計師對標(biāo)注圖做調(diào)整润匙。
point(pt)和pixel(px)
在iOS開發(fā)中诗眨，point是抽象單位，它只在iOS系統(tǒng)給我們抽象出來的數(shù)字坐標(biāo)系中有意義孕讳，與pixel沒有直接的關(guān)系匠楚。之前我們常說1pt等于2px，1pt等于3px厂财，這些等式之所以成立是因為我們無意識中都給等式加了一個附加條件芋簿，那就是在某種機型下。所以之后的機型說不定就有1pt等于4px璃饱，1pt等于5px的情況与斤。
當(dāng)我們在數(shù)字坐標(biāo)系中繪制完界面后，iOS系統(tǒng)就開始在內(nèi)存中渲染適合當(dāng)前手機屏幕的頁面尺寸，這個時候撩穿，渲染的單位就是pixel了磷支。用基于點的圖形使用像素進(jìn)行渲染，這個過程叫做光柵化食寡。像素坐標(biāo)系是通過點坐標(biāo)系乘以一個比例因子來獲得的齐唆。比例因子越大，屏幕的像素密度越大冻河，現(xiàn)實效果就越好箍邮。而我們常說的1倍、2倍叨叙、3倍就是比例因子锭弊。
但是在iPhone6Plus中，屏幕的物理像素只有{1080,1920}擂错，而內(nèi)存渲染的像素卻是3倍的點坐標(biāo)系{1242,2208}味滞。為了正常顯示，iPhone6Plus在顯示的時候做了一個縮減像素采樣(downsampling)的操作∨パ剑現(xiàn)在我們明白iPhone6Plus的屏幕分辨率為什么不是3倍了剑鞍。
為了證明iPhone各種機型上渲染的像素是不同的，我們來比較下1個點寬度的線是怎么渲染的爽醋。下面是示意圖：
- 早期的iPhone沒有retina屏幕蚁署，比例因子是1。
- iPhone5是retina屏幕蚂四，比例因子是2光戈。
- iPhone6 Plus是高清的視網(wǎng)膜顯示屏，比例因子是3遂赠；渲染的圖片被后期縮放久妆，從2208X1242像素壓縮到1920X1080像素。
這個縮放比率是 1920 / 2208 = 1080 / 1242 = 20 / 23跷睦。這意味著iPhone原始渲染的過程中筷弦，每23個渲染像素必須映射到20個物理像素上。換句話說抑诸，圖片被縮放到了大約只有原始大小的87%烂琴。
下面，我們從宏觀的角度來看看不同的iPhone機型是怎么適配的哼鬓。請看下圖：
使用pt進(jìn)行相對布局標(biāo)注
搞清楚iPhone的渲染機制后监右，我們也知道了如何讓設(shè)計師調(diào)整標(biāo)注圖了。之前异希，設(shè)計師為了兼顧Android和H5頁面的效果圖，把效果圖大小調(diào)整為{750, 1334}；考慮到工作量称簿，設(shè)計師會在效果圖上直接出標(biāo)注扣癣，按照之前的約定默認(rèn)的單位就px。對于開發(fā)人員憨降，拿著{750, 1334}單位是px的標(biāo)注圖父虑，他的第一反應(yīng)是這是iPhone6的標(biāo)注，iPhone6 plus和小屏的標(biāo)注只能自己算了授药。下面我們拿左邊距15px做例子：
| 各種情況 | 換算的意圖 | 換算成pt |
|---|---|---|
| 設(shè)計師給的iPhone6標(biāo)注圖 | 直接除以iPhone6的比例因子2 | 7.5pt |
| 開發(fā)換算iPhone6 Plus的標(biāo)注 | 直接除以iPhone6plus的比例因子3 | 5pt |
| 開發(fā)換算小屏幕iPhone的標(biāo)注 | 感覺除以比例因子不太對按除以2算 | 7.5pt |
| 重新?lián)Q算iPhone6 Plus的標(biāo)注 | 通過寬度的比例來計算 | 7.5/(375/320)*(414/320) = 8.28 |
這么算下來士嚎，感覺pt總是算不對。問題出在不同手機屏幕上相等的視覺長度它們的像素是不同的悔叽，所以渲染15px的左邊距莱衩，不同手機上的視覺邊距都不一樣。如果想在不同手機屏幕上讓左邊距看起來都一樣娇澎，我們必須使用pt為單位笨蚁，原因我們在上面介紹iPhone渲染機制中已作了說明，這里不再贅述趟庄。
其實括细，設(shè)計師關(guān)注的點也就是標(biāo)注的內(nèi)容在不同手機屏幕上顯示的效果一樣，比如左邊距戚啥。對于特殊的適配情況奋单，設(shè)計師自然會給不同分辨率下的標(biāo)注。而之前的原因出在我們開發(fā)人員沒有向設(shè)計師解釋清楚不同屏幕上渲染相等的視覺長度猫十，像素是不一樣的辱匿，但渲染的point是一樣的。后來炫彩，我們換成了pt作單位匾七，絕大多數(shù)實現(xiàn)不準(zhǔn)確的問題都被解決了，對于定高定寬的情況江兢，標(biāo)注時也做了特殊說明昨忆，而且也都換成了相對布局的方式進(jìn)行標(biāo)注；最后杉允，拿一張我們最近的標(biāo)注圖做示例邑贴。
總結(jié)
終于寫完了，感覺自己文筆有限叔磷，語句多不通順拢驾，但你要明白一點，不同手機屏幕上渲染相等的視覺長度改基，pixel是不一樣的繁疤，但渲染的point是一樣的。希望這篇iOS標(biāo)注解惑能讓你了解pixel和point本質(zhì)的區(qū)別。最后歡迎大家積極回復(fù)留言稠腊，交流心得躁染。
