來(lái)源：海鹽設(shè)，已獲授權(quán) | 部分文字來(lái)自互聯(lián)網(wǎng)
當(dāng)年學(xué)習(xí)UI的時(shí)候，懵懵懂懂學(xué)完了，以為所用的界面就用一套視覺(jué)稿就可以了，熟不知我們的界面還要適配到不同的屏幕不同的設(shè)備平臺(tái)上面~以及開(kāi)發(fā)能否完全按照我們的設(shè)計(jì)稿做出來(lái)，這很大一部分取決我們的標(biāo)注和切圖，那么切圖上期已經(jīng)說(shuō)過(guò)了這里就不累贅了，今天主要圍繞適配和標(biāo)注這兩個(gè)話題展開(kāi)~
適 配
一、當(dāng)前現(xiàn)狀
近幾年UI 行業(yè)異?；鸨餍懈鳂I(yè)的人都涌入進(jìn)來(lái)，很多之前沒(méi)有設(shè)計(jì)基礎(chǔ)的都轉(zhuǎn)行做了 UI設(shè)計(jì)師，同時(shí)也帶動(dòng)了培訓(xùn)班的興起，可能在培訓(xùn)的時(shí)候老師為了能讓學(xué)員真真切切的看到實(shí)際效果，大多都在練習(xí)畫(huà)圖標(biāo)、做界面，而對(duì)于實(shí)際工作中情況簡(jiǎn)單講下，這里沒(méi)有說(shuō)UI培訓(xùn)班講的不好，也沒(méi)有貶低培訓(xùn)班的意思，因?yàn)樾袠I(yè)內(nèi)很多大佬也是參加培訓(xùn)出來(lái)的！從而導(dǎo)致很多新入行的設(shè)計(jì)師認(rèn)為做 UI 很簡(jiǎn)單就那么一回事，只需要把產(chǎn)品的原型填個(gè)色，把填色后的設(shè)計(jì)稿輸出就覺(jué)得萬(wàn)事大吉了。而對(duì)于適配知之甚少，甚至有些覺(jué)得跟自己沒(méi)半點(diǎn)關(guān)系，都是開(kāi)發(fā)的事情。
二、錯(cuò)誤做法
因?yàn)椴糠衷O(shè)計(jì)師對(duì)適配了解不夠透徹，以至于在做實(shí)際項(xiàng)目的時(shí)候，需要把750的設(shè)計(jì)稿適配到640、720、1242的屏幕時(shí)，都會(huì)選擇把設(shè)計(jì)稿直接等比放大或縮小到對(duì)應(yīng)的尺寸，然后再重新標(biāo)注，殊不知這個(gè)方法不僅增加了幾倍工作量，還會(huì)導(dǎo)致最終的效果不如人意，花了功夫還不出效果，說(shuō)的就是這種事了。
下面以 QQ 首頁(yè)為例，左圖是750的設(shè)計(jì)稿（臨摹的）直接拉伸至1242的，右圖是實(shí)際線上1242的界面。
相信大家也看出差別了，750直接拉伸后的界面元素整體都比實(shí)際線上1242的大。
之所以說(shuō)這樣的方法是錯(cuò)的，有兩個(gè)原因，一個(gè)是按照此方法，750和1242所顯示的內(nèi)容是一樣多的，但實(shí)際上1242的屏幕要比750的長(zhǎng)一些，顯示的內(nèi)容更多一些才對(duì)，如下圖京東金融。
另一個(gè)原因就跟數(shù)學(xué)有關(guān)了，750的頁(yè)面要到1242的大小，需要放大1.65倍，但實(shí)際上750是2x倍率下的界面，1242是3x倍率下的界面，他們的比例是1:1.5，而不是1:1.65。
也就是說(shuō)由750直接拉升到1242的稿子開(kāi)發(fā)實(shí)現(xiàn)的時(shí)候會(huì)出現(xiàn)這樣的情況，icon 是1.5倍的大小（ icon 實(shí)現(xiàn)的時(shí)候用的是3x切圖文件）文字大小、間距、圖片卻是1.65倍的大小，標(biāo)注稿也是按照1.65倍的來(lái)標(biāo)注的，這樣就會(huì)影響到開(kāi)發(fā)布局，導(dǎo)致出現(xiàn)一系列誤差。
由圖可見(jiàn)，當(dāng)我們直接在拉伸的設(shè)計(jì)稿中標(biāo)注間距、icon大小，在實(shí)際開(kāi)發(fā)的時(shí)候 icon 的尺寸會(huì)比我們標(biāo)注的要小，相差15px，這個(gè)時(shí)候如果開(kāi)發(fā)完全按照標(biāo)注稿來(lái)布局，這就會(huì)導(dǎo)致有 icon 的區(qū)域間距明顯和其他地方不一樣，相差太大，甚至?xí)霈F(xiàn) icon變形的情況。
那既然直接拉伸設(shè)計(jì)稿的方法不可行，難道只能為每個(gè)屏幕尺寸都重新做一套設(shè)計(jì)么？當(dāng)然不是，這樣的開(kāi)發(fā)成本太大，而且也沒(méi)有必要，其實(shí)只要設(shè)計(jì)的時(shí)候多注意適配的問(wèn)題，就能做到一稿適配所有。
三、為什么不能一稿適配所有
大多數(shù)人對(duì)于750適配到1242都表示能理解，但對(duì)于750到720就理解不了，持反對(duì)意見(jiàn)，覺(jué)得這兩個(gè)屬于 iOS 和 Android 兩個(gè)不同的端，標(biāo)簽欄和導(dǎo)航欄高度都不一樣，不單獨(dú)輸出設(shè)計(jì)稿的話，圖標(biāo)圖片會(huì)變形、間距會(huì)太窄……
那下面來(lái)解釋一下以往大家的路子都是正面說(shuō)一稿為什么能適配所有，今天我們走個(gè)不一樣的路子，一稿為什么不能適配所有呢？下面針對(duì)大家存在疑惑的幾個(gè)點(diǎn)來(lái)做詳細(xì)解釋。
1. 圖標(biāo)變形
開(kāi)發(fā)在做的時(shí)候都是用的2x、3x的切圖，每個(gè)屏幕尺寸用哪套圖是根據(jù)倍率來(lái)選擇的，同一個(gè)倍率下的圖標(biāo)大小、間距、字號(hào)都是一樣的。
2. 圖片變形
圖片都是按照比例來(lái)的，只要標(biāo)注的時(shí)候只標(biāo)注比例，而不是把寬高都限制死，這個(gè)問(wèn)題是可以避免的。
3. iOS 和 Android 平臺(tái)差異
有一些人總認(rèn)為兩個(gè)平臺(tái)存在差異性，比如它們的導(dǎo)航欄、標(biāo)簽欄、狀態(tài)欄不一樣大，怎么能適配呢？其實(shí)頭部的導(dǎo)航欄、狀態(tài)欄和底部的標(biāo)簽欄這些平臺(tái)的基礎(chǔ)控件，與界面內(nèi)的元素不在一個(gè) Z軸上，它們屬于界面最上層，界面的尺寸也不受它們的影響。
如下圖嗶哩嗶哩，Android 和 iOS 的基礎(chǔ)控件不一樣，但是并不會(huì)影響到導(dǎo)航欄下方的 Tab 篩選的大小以及它的位置高度。所以事實(shí)證明，適配跟平臺(tái)并沒(méi)有太大的關(guān)系。
四、掌握正確的適配規(guī)則
1. 倍率相同
適配需要在同一倍率下，既然要做比較的話，當(dāng)然要在同一水平線上，總不能讓一個(gè)姚明跟林丹去比羽毛球吧。
知道手機(jī)的屏幕分辨率和倍率之后，就可以算出在其他倍率下，屏幕分辨率是多少。比如 iPhone 6的尺寸是750*1334（2x下），乘以1.5之后就可以算出3x下的大小。
同理可得其他手機(jī)的屏幕分辨率在不同的倍率下的大小，紅框處表示正常的分辨率大小。
適配只跟倍率相關(guān)，同一倍率下，界面上的間距、文字大小、icon大小是一樣的，不同的只是屏幕顯示內(nèi)容的寬度和高度不同。
所以說(shuō)在2x倍率下：750=640=828=720；
同理在3x倍率下：960=1125=1242=1080。
下面以蝦米音樂(lè)為例，分別對(duì)比640、720、750頁(yè)面上的元素大小，證實(shí)界面上的間距、文字大小、icon大小都是一樣的。
2. 適配三原則
在適配的時(shí)候通常會(huì)遵循三個(gè)適配原則：
等比縮放、彈性控件、文字流自適應(yīng)。
等比縮放
等比縮放指的是該元素的尺寸大小并不是固定的，是會(huì)跟隨著屏幕的大小（一般是寬度）變化而變化。如下圖 App Store 的搜索結(jié)果頁(yè)，單個(gè)預(yù)覽圖的比例是16:9，不管屏幕分辨率如何變化，圖片比例并不會(huì)發(fā)生變化。
標(biāo)注的時(shí)候，我們也只需要標(biāo)注好頁(yè)邊距、圖片比例、圖片之間的間距就好，開(kāi)發(fā)就可以把適配規(guī)則寫(xiě)成隨屏幕寬度變化而變化。
彈性控件
彈性控件指的是元素尺寸不變，間距隨著屏幕的寬度自適應(yīng)，屏幕越寬，間距越大。
文字流自適應(yīng)
一行文字的數(shù)量多少和屏幕寬度成正比，屏幕越寬，一行能顯示的文字?jǐn)?shù)量也就越多。所以我們?cè)陂_(kāi)始設(shè)計(jì)時(shí)候就應(yīng)該以文本框形式去做，有助我們后期做適配！
3. 適配跟平臺(tái)基礎(chǔ)控件無(wú)關(guān)
其實(shí)并不是界面的所有元素都需要進(jìn)行適配的，我們只需要適配中間那一塊區(qū)域即可。
而上下導(dǎo)航的高度不固定，每個(gè)平臺(tái)的高度不一樣。比如 iOS 的導(dǎo)航欄是88px，Android 有112px、104px ……但是不管高度如何，我們只需要做到讓元素垂直居中即可。
4. 實(shí)際例子
逼逼那么多，是時(shí)候表演真正的技術(shù)了，適配其實(shí)總結(jié)起來(lái)就三個(gè)步驟，先換算至同一個(gè)倍率，再去調(diào)整界面元素，最后將調(diào)整好的界面按照倍率還原到最開(kāi)始需要適配的尺寸。
750如何適配至1242
首先適配需要在同一個(gè)倍率下，750*1334是2x 下的，1242*2208是3x 下的，根據(jù)倍率換算1242 的2x 大小是828*1472。
所以要想將750*1334適配至1242*2208，就需要先把750適配是828*1472，然后再將調(diào)整好的界面×1.5 到1242*2208。
其他的比如750如何適配至720、640，原理是一樣的，他們的倍率是一樣的，就省了頭尾的那兩步，只需要根據(jù)適配三原則調(diào)整界面元素即可。
五、需要注意的點(diǎn)
1. 小屏幕適配
我們的設(shè)計(jì)尺寸基本都是用750的居多，這就會(huì)涉及到小屏幕的適配問(wèn)題，當(dāng)一個(gè)元素在750上顯示的效果很完美，到640上可能就放不下了。所以在做圖的時(shí)候，設(shè)計(jì)師是需要用動(dòng)態(tài)的眼光去考慮問(wèn)題。那下面就來(lái)講述幾個(gè)最常出現(xiàn)的問(wèn)題。
2. 彈窗
例如下圖彈框的樣式，在750px設(shè)計(jì)尺寸上顯示完美，如果不做調(diào)整直接適配到640的屏幕上，就放不下了兩邊會(huì)被裁剪掉，為了避免這個(gè)問(wèn)題我們就需要定義一些適配規(guī)則，比如小屏幕縮小字號(hào)、間距縮小等等。
3. 文字截?cái)嗑嚯x
我們要知道所使用的屏幕的大小也會(huì)直接影響到每行顯示的字?jǐn)?shù)的，當(dāng)一行字?jǐn)?shù)的右側(cè)有圖標(biāo)元素的時(shí)候，就涉及到文字和圖標(biāo)元素之間的安全截?cái)嗑嚯x。換句話說(shuō)，也就是文字最多能顯示的區(qū)域。很多時(shí)候設(shè)計(jì)師在做設(shè)計(jì)稿的時(shí)候，沒(méi)有考慮到文字的極端情況，這就導(dǎo)致在小屏幕的時(shí)候，文字和元素產(chǎn)生重疊現(xiàn)象。從而影響用戶(hù)體驗(yàn)！
比如下圖的愛(ài)奇藝我的頁(yè)面，在750的界面上昵稱(chēng)顯示的很完美，但是到640上就顯示不全，這就需要我們定義一下文字可顯示的區(qū)域，當(dāng)文字長(zhǎng)度超過(guò)這個(gè)區(qū)域的時(shí)候，文字省略，用「…」代替，要保證他和圖標(biāo)元素之間的安全距離！
4. 平臺(tái)差異
iOS 和Android 兩端的系統(tǒng)級(jí)別的控件樣式不同，所以我們可以為兩端單獨(dú)做幾個(gè)樣式，這個(gè)成本不大，效果卻很好。比如 iOS 平臺(tái)的搜索框是矩形，而 Android 搜索是下劃線。
5. 單屏頁(yè)面
大部分我們做的界面適配都是考慮屏幕寬度居多，高度只會(huì)影響到一屏幕顯示內(nèi)容的多少，屏幕高顯示的內(nèi)容就長(zhǎng)一點(diǎn)。對(duì)于瀑布流布局來(lái)說(shuō)，高度不需要進(jìn)行適配。但總是有一些特殊的單屏頁(yè)面，比如：音樂(lè)播放頁(yè)面、空白頁(yè)面……需要在所有屏幕上顯示一樣多的內(nèi)容。
空白頁(yè)面
類(lèi)似下圖這種比較簡(jiǎn)單的頁(yè)面，如果固定上方間距，那么在大屏幕上就會(huì)顯得內(nèi)容偏上，這個(gè)時(shí)候要想讓所有屏幕顯示的內(nèi)容都一樣，我們可以將上方和下方的空白區(qū)設(shè)置一個(gè)比例，這樣不管在什么屏幕上，內(nèi)容相較于整個(gè)屏幕來(lái)說(shuō)，位置都是一樣的。
具體計(jì)算方法：
屏幕高度減去上下導(dǎo)航，再減去圖片內(nèi)容區(qū)域的高度，剩下的區(qū)域按照比例來(lái)分配。上方占3/7，下方占4/7。
音樂(lè)播放頁(yè)面
這個(gè)頁(yè)面相較于空白頁(yè)面來(lái)說(shuō)，復(fù)雜一些，但是原理是一樣的。把能夠按照基礎(chǔ)適配規(guī)則的地方固定下來(lái)，留一些自適應(yīng)的部分。比如下圖網(wǎng)易音樂(lè)，同是2x下的界面，播放操作區(qū)域的高度都是一樣的，按照基礎(chǔ)適配規(guī)則來(lái)的，而光盤(pán)區(qū)域則是固定左右間距得出。
而需要根據(jù)屏幕高度自適應(yīng)的區(qū)域只有綠色矩形區(qū)域，其實(shí)有沒(méi)有發(fā)現(xiàn)把這個(gè)圖簡(jiǎn)化后，就和上面講的空白頁(yè)面的適配方法一樣了。不過(guò)需要注意的是自適應(yīng)的部分不要超過(guò)兩個(gè)，超過(guò)兩個(gè)之后，變數(shù)太大，不利于計(jì)算，也沒(méi)太大必要。
六、設(shè)計(jì)稿尺寸
至于設(shè)計(jì)稿尺寸，在我看來(lái)并沒(méi)有特別本質(zhì)的區(qū)別。從原理上來(lái)看，你可以用任何你想用的設(shè)計(jì)尺寸。
只不過(guò)從適配的角度來(lái)說(shuō)：
750（2x）
720（2x）
375（1x）
這三個(gè)相對(duì)更合適些。
我自己之前用過(guò)750，也用過(guò)720，當(dāng)時(shí)就想不明白為什么還有人用1x做圖，現(xiàn)在市面上都沒(méi)1x的手機(jī)了，用1x做圖導(dǎo)出2x、3x 圖標(biāo)不都虛邊了么。但后來(lái)?yè)Q了一個(gè)新工作，同事都是用的375（1x）做圖，習(xí)慣了之后發(fā)現(xiàn)兩者并沒(méi)有太大的區(qū)別。
只是有些圖標(biāo)不是整數(shù)的時(shí)候，需要手動(dòng)導(dǎo)出2x、3x，但其實(shí)就算用750（2x）做圖怕圖標(biāo)虛邊，也還是要手動(dòng)導(dǎo)出3x的，所以都一樣。用1x的好處是，很多國(guó)外的UI界面PSD資源都是用1x做的，就可以直接用了。
需要注意的是，當(dāng)在1x下做分割線的時(shí)候，需要改成0.5px，這樣導(dǎo)出2x圖后才會(huì)是1px。建議分割線用內(nèi)陰影做，而不要直接用0.5px的線。
七、小技巧
當(dāng)我們做圖的時(shí)候，想要快速知道當(dāng)前頁(yè)面的元素在小屏幕上是否放的下？那總不能每次都把當(dāng)前頁(yè)面拖動(dòng)到小屏幕上看看實(shí)際效果吧。這樣成本也太大，其實(shí)有一個(gè)非常簡(jiǎn)便的方法就可以解決這個(gè)問(wèn)題。
750和640的界面相差110px（2x下），我們只需要在PS里面將750的界面上減去110，看是否能放的下，如果放的下，就表示在小屏幕上也能放下。
如果想要知道字?jǐn)?shù)是否能放的下，也可以通過(guò)計(jì)算的方式得出結(jié)論，用110px除以字號(hào)大小，就可以得出小屏幕的比設(shè)計(jì)稿少顯示幾個(gè)字。比如字號(hào)是30px，在750的屏幕上能顯示30個(gè)字，那么在小屏幕上就只能顯示26個(gè)字了。
八、新款XR-XS-XSM適配
1.設(shè)計(jì)如何進(jìn)行適配？該使用幾倍圖？
大家最關(guān)心的應(yīng)該就是如何進(jìn)行新機(jī)型的適配了，目前在我們?cè)O(shè)計(jì)界面時(shí)，最主流的方式是基于iPhone7（分辨率750*1334）來(lái)進(jìn)行設(shè)計(jì)，以@2x為基準(zhǔn)做設(shè)計(jì)稿，然后提供@2x、@3x的切圖給到開(kāi)發(fā)人員。
手機(jī)適配采用幾倍圖與PPI有關(guān)系，也就是像素密度，所以我們可以理解為什么iPhone4、5、6之間分辨率和屏幕尺寸不一樣，但是同樣采用@2x二倍圖的原因，是因?yàn)樗鼈冇型瑯拥腜PI（326ppi）；
△ PPI的計(jì)算公式
新發(fā)布的5.8英寸的iPhoneXS（458ppi），分辨率為1125*2436px，與iPhoneX（三倍圖）的數(shù)據(jù)是一致的，所以我們可以得出iPhoneXS也是使用的三倍圖@3x。
6.5英寸的iPhoneXS Max（458ppi），分辨率為1242*2688px，而iPhone8 Plus（三倍圖，401ppi），分辨率為1242*2208px，iPhoneXS Max比iPhone8 Plus的PPI僅多了50多，跟iPhoneX（三倍圖）的PPI一致，可以推論出iPhoneXs Max使用的同樣是三倍圖@3x。
從頁(yè)面寬高比例來(lái)看：
iPhoneXS Max寬度1242/3=414pt，iPhone8 Plus寬度1242/3=414pt，兩者的寬度一致（大家看到寬度一致的時(shí)候是不是松了口氣呢？哈哈）
iPhoneXS Max高度2688/3=896pt，iPhone8 Plus高度2208/3=736pt
iPhoneXS Max比iPhone8 Plus長(zhǎng)一截，多了160pt。
我們發(fā)現(xiàn)，iPhoneXS Max的適配，有些像去年設(shè)計(jì)師適配iPhoneX的套路（認(rèn)真臉）。
最后我們來(lái)看6.1英寸的iPhoneXR（326ppi），分辨率為828*1792px，可以看到iPhoneXR與蘋(píng)果二倍圖的PPI（326ppi）一致，可以推論出iPhoneXR使用的是二倍圖@2x。
從頁(yè)面寬高比例來(lái)看：
iPhoneXR寬度828/2=414pt，iPhoneXS Max寬度1242/3=414pt；
iPhoneXR高度1792/2=896pt，iPhoneXS Max高度2688/3=896pt；
我們神奇地發(fā)現(xiàn)，iPhoneXR與iPhoneXS Max寬高比是一致的！這意味著iOS開(kāi)發(fā)者做完iPhoneXS Max的適配后，直接進(jìn)行等比例縮放2/3就可以得到iPhoneXR了，不用重新進(jìn)行修改布局（也可以先做iPhoneXR的適配，再等比例縮放到iPhone XS Max）。
我們來(lái)做一個(gè)小結(jié)：
iPhoneXS、iPhoneXS Max使用的是三倍圖@3x；
iPhoneXR使用的是二倍圖@2x。
給大家整理了當(dāng)前iOS適配所用到的切圖及對(duì)應(yīng)機(jī)型，便于大家記憶，是不是很貼心呢？
二、新尺寸對(duì)設(shè)計(jì)布局的影響
新發(fā)布的iPhoneXS、XS Max、XR都采用了全面屏設(shè)計(jì)，因此我們必須保證布局填滿(mǎn)屏幕，并且考慮到交互操作，要留出安全區(qū)域，才不會(huì)被圓角、劉海影響使用，布局的左右邊距可根據(jù)產(chǎn)品自定義，這些點(diǎn)與iPhoneX是相同的。
上面提到過(guò)，iPhoneXS與iPhoneX尺寸大小完全一致，所以頁(yè)面布局也是一樣的。我們只需要懂得怎樣適配到iPhoneXS Max以及iPhoneXR的布局就可以了（兩者的的邏輯像素是一致的，均為414*896pt，區(qū)別在于一個(gè)是@3x，一個(gè)是@2x）。
方式有多個(gè)，接下來(lái)主要介紹兩種：
方法一
如果我們?cè)谠O(shè)計(jì)的時(shí)候以iPhone7（375*667pt）為基準(zhǔn)做設(shè)計(jì)稿，先得到iPhoneXR；由于都是@2x，首先需要將畫(huà)板寬度拉寬為414pt，高度拉高為896pt（與我們做iPhone5到iPhone6的寬高變化處理是一樣的道理），狀態(tài)欄由20pt變高為44pt，在底部加上主頁(yè)指示器（Home Indicator）高度為34pt，導(dǎo)航欄以及標(biāo)簽欄高度不變。我們發(fā)現(xiàn)iPhoneXR內(nèi)容呈現(xiàn)的比iPhone8要多一些。
有了iPhoneXR后，直接等比例放大1.5倍就可以得到iPhoneXS Max。
方法二
如果我們?cè)谠O(shè)計(jì)的時(shí)候以iPhoneX（375*812pt）為基準(zhǔn)做設(shè)計(jì)稿，先得到iPhoneXS Max：由于都是@3x，首先需要將畫(huà)板寬度拉寬為414pt，高度拉高為896pt（與方法一同理），狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、主頁(yè)指示器的高度均不用更改。有了iPhoneXS Max后，直接等比例縮小2/3就可以得到iPhoneXR，很簡(jiǎn)單～。
九、適配總結(jié)
最后來(lái)總結(jié)一下全文最重要的幾點(diǎn)，幫助大家加深印象。傳統(tǒng)的等比拉伸界面去適配的方法是錯(cuò)誤的，也是極其浪費(fèi)人力成本的，完全可以一稿適配所有； 適配跟平臺(tái)無(wú)關(guān)，只跟倍率相關(guān)，750和720的尺寸從適配的角度來(lái)看，都是一樣的，只是界面尺寸相差了30px；
適配三原則：等比縮放、彈性控件、文字流自適應(yīng)； 適配不要標(biāo)死，要用動(dòng)態(tài)的眼光去看，做的時(shí)候需要考慮到極端情況，最常見(jiàn)的比如小屏幕適配問(wèn)題……
適配這個(gè)概念很特殊，它看起來(lái)很簡(jiǎn)單，簡(jiǎn)單到大多數(shù)人都覺(jué)得自己會(huì)了，不用再去研究了，但其實(shí)只懂了皮毛，并不清楚原理。比如很多人都說(shuō)自己會(huì) PS ，但跟那些專(zhuān)業(yè)的比起來(lái)，你自己所認(rèn)為自己知道的不過(guò)冰山一角。所以我們要時(shí)刻保持一顆求知的心，不要總是固執(zhí)的堅(jiān)持己見(jiàn)，共勉。
標(biāo) 注
如何提高程序?qū)缑娴倪€原程度,一直是個(gè)讓設(shè)計(jì)師頭疼的問(wèn)題，除了面對(duì)面之外，很多時(shí)候的溝通方式則是使用標(biāo)注進(jìn)行的；那么，如何提供一個(gè)清晰明了的標(biāo)注也成為了每個(gè)設(shè)計(jì)師應(yīng)具備的技能。
一、標(biāo)注工具：
1.PxCook：
PxCook在Windows上標(biāo)注還比較可以的，雖然它還附帶切圖功能，但是比較雞肋，不推薦用它切圖。
下載鏈接：
https://pan.baidu/s/1tdzrc9IYRJEiRo_C2YY7aw
2.Parker
Parker是基于PS擴(kuò)展功能里面的一個(gè)小插件，能夠自動(dòng)計(jì)算尺寸、距離、文字大小、陰影等信息，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時(shí)間，大幅度提升設(shè)計(jì)效率，唯一就是會(huì)收費(fèi)60RMB/終身。
下載鏈接：
https://pan.baidu/s/18Yt_wYHrkFFJT_JhSUbkLg
3.Assistor PS
也是一款PS的切圖標(biāo)注插件，也被譽(yù)為神器；我使用了下，感覺(jué)相當(dāng)不錯(cuò)，就是標(biāo)注還沒(méi)太適應(yīng)。
下載鏈接:
https://pan.baidu/s/1JTjvmiJ4ryIgsPzdMtWL0g
4.馬克鰻
馬克鰻的功能非常簡(jiǎn)單，可以標(biāo)注長(zhǎng)寬、坐標(biāo)、顏色喝文字標(biāo)記；作為一個(gè)老款標(biāo)注軟件并沒(méi)有什么特別值得介紹的。
下載鏈接:
http://getmarkman/
5.「標(biāo)你妹啊」自動(dòng)標(biāo)注
國(guó)產(chǎn)標(biāo)注在線神器。只需要登錄網(wǎng)站后，上傳設(shè)計(jì)稿可直接生成標(biāo)注網(wǎng)址，發(fā)給程序員就可以啦。同樣提供代碼參考和自動(dòng)標(biāo)注間距尺寸等功能。
在線鏈接：
http://biaonimeia/login
二、標(biāo)注什么？
標(biāo)注最怕遺漏，新手尤其需要一遍一遍的檢查，根據(jù)下面6條來(lái)標(biāo)就不會(huì)遺漏了
1.標(biāo)文字
文字需要標(biāo)出字號(hào)大小和顏色，這里需要注意的是，IOS的字號(hào)是以PT為單位（這個(gè)PT不是PS里面那個(gè)默認(rèn)的點(diǎn)，因?yàn)閐pi不同請(qǐng)使用PX為單位設(shè)計(jì)）Android的字號(hào)是以SP為單位，換算方法為2PX=1PT=1SP(以上公式基于Android設(shè)計(jì)稿為720*1280），記住字號(hào)一定是偶數(shù)?。。?/p>
2.標(biāo)顏色
所有你想得到的顏色都要標(biāo)，用HEX顏色（就是前面井號(hào)后面6個(gè)數(shù)字那種）和RGB兩種，除非你跟程序猿已有那種默契純白純黑系統(tǒng)默認(rèn)之外，除了切圖之外，全部都要標(biāo)！啰嗦一句顏色不要亂用，看看規(guī)范里面的顏色，最好用6位色值比較規(guī)律的，程序猿純手打一個(gè)多累啊你說(shuō)是不是
3.標(biāo)結(jié)構(gòu)
每一個(gè)元素，包括文字，圖標(biāo)，色塊，各種框各種線，都需要標(biāo)注出它的長(zhǎng)寬、與旁邊元素的左右上下間距、與屏幕邊緣的距離（居中的話可以不標(biāo)）
如果你需要的觸摸范圍比實(shí)際尺寸大，或者對(duì)齊方式并不能一眼洞穿，需要告訴程序員以什么尺寸來(lái)居中的情況。請(qǐng)用蒙版的樣式框出來(lái)并告知程序員應(yīng)該做多大的觸摸范圍，請(qǐng)一定記住，全部用偶數(shù)偶數(shù)偶數(shù)??！三遍！
4.標(biāo)狀態(tài)
如果一個(gè)設(shè)計(jì)稿有多種不同的狀態(tài)，需要分別標(biāo)注出來(lái)，比如這里的閱讀器有日間模式和夜間模式，兩種模式又分為normal和pressed的狀態(tài)，就會(huì)有4種不同的顏色，要清晰的讓程序員知道你考慮到的每一種情況下的顏色~
5.標(biāo)交互效果
一些需要說(shuō)明的交互效果，能用文字描述的就用文字描述，不能的最好附以動(dòng)畫(huà)或者聲情并茂的語(yǔ)言溝通。
6.特殊交代
在規(guī)范里規(guī)定好的按鈕樣式直接寫(xiě)上代號(hào)即可，一方面方便了程序員不需要多次定義類(lèi)似的按鈕，更重要的是統(tǒng)一的視覺(jué)規(guī)范的遵守。
三、適配總結(jié)
所有的頁(yè)面標(biāo)注總結(jié)起來(lái)就是：標(biāo)文字，標(biāo)圖片，標(biāo)間距，標(biāo)區(qū)域
好了就到這里了下期干貨再見(jiàn)，現(xiàn)在下班
！
系列文章閱讀
UI設(shè)計(jì)進(jìn)階干貨 - 首頁(yè)
UI設(shè)計(jì)進(jìn)階干貨-注冊(cè)登錄
UI設(shè)計(jì)進(jìn)階干貨-引導(dǎo)頁(yè)
UI設(shè)計(jì)進(jìn)階干貨-閃屏
UI設(shè)計(jì)進(jìn)階干貨-重陽(yáng)節(jié)閃屏賞析
UI設(shè)計(jì)進(jìn)階干貨-列表頁(yè)
UI設(shè)計(jì)進(jìn)階干貨 - 切圖&命名
相關(guān)文章
我要進(jìn)群
想要辭職的第896天
iOS設(shè)計(jì)尺寸規(guī)范
Android設(shè)計(jì)尺寸規(guī)范
小程序設(shè)計(jì)規(guī)范
Web UI 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范
平面設(shè)計(jì)基礎(chǔ)常識(shí)匯總
全鏈路UI設(shè)計(jì)師了解一下
令人驚嘆的網(wǎng)頁(yè)設(shè)計(jì)長(zhǎng)什么樣？
超贊的27個(gè)高質(zhì)量免費(fèi)圖片網(wǎng)站
3小時(shí)內(nèi)創(chuàng)下150萬(wàn)流量的H5都長(zhǎng)什么樣？
成體系！UI自學(xué)教程大禮包全新上線
120G頂級(jí)C4D教程強(qiáng)勢(shì)來(lái)襲
你和大神之間只差一份高級(jí)進(jìn)階教程
100集國(guó)際頂尖AE視頻教程強(qiáng)勢(shì)來(lái)襲
100G頂尖游戲原畫(huà)視頻教程限時(shí)免費(fèi)領(lǐng)取！
iPhone X 人機(jī)交互指南及其設(shè)計(jì)細(xì)節(jié)
一款A(yù)PP從設(shè)計(jì)到切圖標(biāo)注適配全記錄
2018年網(wǎng)頁(yè)設(shè)計(jì)的19個(gè)趨勢(shì)！
WUI | 極簡(jiǎn)網(wǎng)頁(yè)界面設(shè)計(jì)
2018現(xiàn)役最全的14種平面設(shè)計(jì)風(fēng)格
10個(gè)讓人上癮的設(shè)計(jì)神器1
讓人上癮的設(shè)計(jì)神器2之大氣星球
H5十大云端神器“仙”界有名
無(wú)需代碼！9個(gè)最強(qiáng)設(shè)計(jì)師作品集制作神器
明明我比他厲害為什么我收到offer比他少一半？
萬(wàn)字干貨！這可能是最全面的交互基礎(chǔ)知識(shí)總結(jié)
近兩萬(wàn)字的干貨！最全面的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全攻略
關(guān)鍵詞回復(fù)：
軟件下載 、UI學(xué)習(xí) 、面試技巧、Banner，樣機(jī)下載
LOGO、C4D教程，名片，包裝，字體下載
設(shè)計(jì)規(guī)范，創(chuàng)意合成，作品集模板
(可見(jiàn)相對(duì)應(yīng)知識(shí)文章）
