記得剛做 UI 那會(huì)，根本不知道做完界面還需要適配，就以為把設(shè)計(jì)圖做好就行了，其他的事情跟自己沒有半點(diǎn)關(guān)系。慢慢的踩了坑之后，才知道還有適配這一說(shuō)。所以說(shuō)有些事情別人不告訴你，自己是很難意識(shí)到的，光靠踩坑得出經(jīng)驗(yàn)，終究成本太大，何不站在前人的肩膀上進(jìn)步呢。

目錄

一、當(dāng)前現(xiàn)狀二.錯(cuò)誤做法

三、為什么不能一稿適配兩端

四、掌握正確的適配規(guī)則

五、需要注意的點(diǎn)

六、設(shè)計(jì)稿尺寸

七、小技巧

八、總結(jié)

一、當(dāng)前現(xiàn)狀

UI 行業(yè)的火爆，各行各業(yè)的人都涌入進(jìn)來(lái)，很多之前沒有設(shè)計(jì)基礎(chǔ)的都轉(zhuǎn)行做了 UI 設(shè)計(jì)師，其中不乏只突擊學(xué)習(xí)幾個(gè)月的新手，在培訓(xùn)的時(shí)候?yàn)榱四茏寣W(xué)員真真切切的看到實(shí)際效果，大多都在練習(xí)畫圖標(biāo)、做界面。

而對(duì)于實(shí)際工作中才會(huì)用到的那些基本不講，這倒不是說(shuō)培訓(xùn)班講的不好，也沒有貶低培訓(xùn)班的意思，我自己也參加過。他們不講只不過是因?yàn)檫@些知識(shí)晦澀難懂，教了新手也很難理解，索性不講了。

這就讓很多新入行的設(shè)計(jì)師認(rèn)為做 UI 很簡(jiǎn)單，只需要把產(chǎn)品的原型填個(gè)色，把填色后的設(shè)計(jì)稿輸出就覺得萬(wàn)事大吉了。而對(duì)于適配知之甚少，甚至有些覺得跟自己沒半點(diǎn)關(guān)系，都是開發(fā)的事情。

二、錯(cuò)誤做法

正是由于部分設(shè)計(jì)師對(duì)適配了解不夠透徹，以至于在做實(shí)際項(xiàng)目的時(shí)候，需要把750的設(shè)計(jì)稿適配到640、720、1242的屏幕時(shí)，都選擇把設(shè)計(jì)稿直接等比拉伸至對(duì)應(yīng)的尺寸，然后再重新標(biāo)注。殊不知此方法不僅增加了幾倍工作量，還會(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的稿子開發(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ì)影響到開發(fā)布局，導(dǎo)致出現(xiàn)一系列誤差。

由圖可見，當(dāng)我們直接在拉伸的設(shè)計(jì)稿中標(biāo)注間距、icon 大小，在實(shí)際開發(fā)的時(shí)候 icon 的尺寸會(huì)比我們標(biāo)注的要小，相差15px。這個(gè)時(shí)候如果開發(fā)完全按照標(biāo)注稿來(lái)布局，這就會(huì)導(dǎo)致有 icon 的區(qū)域間距明顯和其他地方不一樣，相差太大,甚至?xí)霈F(xiàn) icon 變形的情況。

那既然直接拉伸設(shè)計(jì)稿的方法不可行，難道只能為每個(gè)屏幕尺寸都重新做一套設(shè)計(jì)么？

當(dāng)然不是，這樣的開發(fā)成本太大，而且也沒有必要，其實(shí)只要設(shè)計(jì)的時(shí)候多注意適配的問題，就能做到一稿適配所有。

三、為什么不能一稿適配所有

大多數(shù)人對(duì)于750適配到1242都表示能理解，但對(duì)于750到720就理解不了，持反對(duì)意見，覺得這兩個(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)變形

開發(fā)在做的時(shí)候都是用的2x、3x的切圖，每個(gè)屏幕尺寸用那套圖是根據(jù)倍率來(lái)選擇的，同一個(gè)倍率下的圖標(biāo)大小、間距、字號(hào)都是一樣的。

2. 圖片變形

圖片都是按照比例來(lái)的，只要標(biāo)注的時(shí)候只標(biāo)注比例，而不是把寬高都限制死，這個(gè)問題是可以避免的。

3. iOS 和 Android 平臺(tái)差異

有一些人總認(rèn)為兩個(gè)平臺(tái)存在差異性，比如：它們的導(dǎo)航欄、標(biāo)簽欄、時(shí)間欄不一樣大，怎么能適配呢？

其實(shí)頭部的導(dǎo)航欄、時(shí)間欄和底部的標(biāo)簽欄這些平臺(tái)的基礎(chǔ)控件，與界面內(nèi)的元素不在一個(gè) Z軸上，它們屬于界面最上層，界面的尺寸也不受它們的影響。

如下圖嗶哩嗶哩，Android 和 iOS 的基礎(chǔ)控件不一樣，但是并不會(huì)影響到導(dǎo)航欄下方的 Tab 篩選的高度。所以事實(shí)證明，適配跟平臺(tá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下面以蝦米音樂為例，分別對(duì)比640、720、750頁(yè)面上的元素大小，證實(shí)界面上的間距、文字大小、icon大小都是一樣的。

2. 適配三原則

在適配的時(shí)候通常會(huì)遵循三個(gè)適配原則：等比縮放、彈性控件、文字流自適應(yīng)。

（1）等比縮放

等比縮放指的是該元素的尺寸大小并不是固定的，是會(huì)跟隨著屏幕的大?。ㄒ话闶菍挾龋┳兓兓Ｈ缦聢D App Store 的搜索結(jié)果頁(yè)，單個(gè)預(yù)覽圖的比例是16:9，不管屏幕分辨率如何變化，圖片比例并不會(huì)發(fā)生變化。

標(biāo)注的時(shí)候，我們也只需要標(biāo)注好頁(yè)邊距、圖片比例、圖片之間的間距就好，開發(fā)就可以把適配規(guī)則寫成隨屏幕寬度變化而變化。

（2）彈性控件

彈性控件指的是元素尺寸不變，間距隨著屏幕的寬度自適應(yīng)，屏幕越寬，間距越大。

（3）文字流自適應(yīng)

一行文字的數(shù)量多少和屏幕寬度成正比，屏幕越寬，一行能顯示的文字?jǐn)?shù)量也就越多。

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í)際例子

說(shuō)了那么多，是時(shí)候來(lái)一個(gè)實(shí)際的例子了，適配其實(shí)總結(jié)起來(lái)就三個(gè)步驟，先換算至同一個(gè)倍率，再去調(diào)整界面元素，最后將調(diào)整好的界面按照倍率還原到最開始需要適配的尺寸。

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ì)涉及到小屏幕的適配問題，當(dāng)一個(gè)元素在750上顯示的效果很完美，到640上可能就放不下了。所以在做圖的時(shí)候，設(shè)計(jì)師是需要用動(dòng)態(tài)的眼光去考慮問題。那下面就來(lái)講述幾個(gè)最常出現(xiàn)的問題。

2. 彈窗

如下圖彈框的樣式，在設(shè)計(jì)尺寸750上顯示很完美，但是不做任何調(diào)整，直接適應(yīng)到640的屏幕上，就放不下了。所以這個(gè)時(shí)候，我們就需要定義一些適配規(guī)則，比如：小屏幕縮小字號(hào)，間距縮小或者說(shuō)是固定彈窗寬度等。

3. 文字截?cái)嗑嚯x

屏幕的大小會(huì)直接影響到每行顯示的字?jǐn)?shù)，當(dāng)一行字?jǐn)?shù)的右側(cè)有元素的時(shí)候，就涉及到文字和元素之間的安全截?cái)嗑嚯x。換句話說(shuō)，也就是文字最多能顯示的區(qū)域。

很多時(shí)候設(shè)計(jì)師在做設(shè)計(jì)稿的時(shí)候，沒有考慮到文字的極端情況，這就導(dǎo)致在小屏幕的時(shí)候，文字和元素產(chǎn)生重疊現(xiàn)象。比如：下圖的愛奇藝我的頁(yè)面，在750的界面上昵稱顯示的很完美，但是到640上就顯示不全，這就需要我們定義一下文字可顯示的區(qū)域，當(dāng)文字長(zhǎng)度超過這個(gè)區(qū)域的時(shí)候，文字省略，用“…”

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ù)不需要進(jìn)行適配。但總是有一些特殊的單屏頁(yè)面，比如：音樂播放頁(yè)面、空白頁(yè)面……需要在所有屏幕上顯示一樣多的內(nèi)容。

6. 空白頁(yè)面

類似下圖這種比較簡(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。

7. 音樂播放頁(yè)面

這個(gè)頁(yè)面相較于空白頁(yè)面來(lái)說(shuō)，復(fù)雜一些，但是原理是一樣的。把能夠按照基礎(chǔ)適配規(guī)則的地方固定下來(lái)，留一些自適應(yīng)的部分。比如：下圖網(wǎng)易音樂，同是2x下的界面，播放操作區(qū)域的高度都是一樣的，按照基礎(chǔ)適配規(guī)則來(lái)的，而光盤區(qū)域則是固定左右間距得出。

而需要根據(jù)屏幕高度自適應(yīng)的區(qū)域只有綠色矩形區(qū)域，其實(shí)有沒有發(fā)現(xiàn)把這個(gè)圖簡(jiǎn)化后，就和上面講的空白頁(yè)面的適配方法一樣了。不過需要注意的是自適應(yīng)的部分不要超過兩個(gè)，超過兩個(gè)之后，變數(shù)太大，不利于計(jì)算，也沒太大必要。

六、設(shè)計(jì)稿尺寸

至于設(shè)計(jì)稿尺寸，在我看來(lái)并沒有特別本質(zhì)的區(qū)別。從原理上來(lái)看，你可以用任何你想用的設(shè)計(jì)尺寸。只不過從適配的角度來(lái)說(shuō)，750（2x）、720（2x）、375（1x）這三個(gè)相對(duì)更合適些。

我自己之前用過750，也用過720，那時(shí)候就想不明白為什么還有人用1x做圖，現(xiàn)在市面上都沒1x的手機(jī)了，用1x做圖導(dǎo)出2x、3x 圖標(biāo)不都虛邊了么。但后來(lái)?yè)Q了一個(gè)新工作，同事都是用的375（1x）做圖，習(xí)慣了之后發(fā)現(xiàn)兩者并沒有太大的區(qū)別。

只是有些圖標(biāo)不是整數(shù)的時(shí)候，需要手動(dòng)導(dǎo)出2x、3x，但其實(shí)就算用750（2x）做圖怕圖標(biāo)虛邊，也還是要手動(dòng)導(dǎo)出3x的，所以都一樣。用1x的好處是，很多國(guó)外的資源都是用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è)問題，750和640的界面相差110px（2x下），我們只需要在750的界面上減去110，看是否能放的下，如果放的下，就表示在小屏幕上也能放下。

如果想要知道字?jǐn)?shù)是否能放的下，也可以通過計(jì)算的方式得出結(jié)論，用110px除以字號(hào)大小，就可以得出小屏幕的比設(shè)計(jì)稿少顯示幾個(gè)字。比如：字號(hào)是30px，在750的屏幕上能顯示30個(gè)字，那么在小屏幕上就只能顯示26個(gè)字了。

這樣可以快速知道當(dāng)前頁(yè)面的內(nèi)容在小屏幕上是否放置的下，而不用把元素放到小屏幕上看效果。

八、總結(jié)

最后來(lái)總結(jié)一下全文最重要的幾點(diǎn), 幫助大家加深印象:

1. 傳統(tǒng)的等比拉伸界面去適配的方法是錯(cuò)誤的，也是極其浪費(fèi)人力成本的，完全可以一稿適配所有；
2. 適配跟平臺(tái)無(wú)關(guān)，只跟倍率相關(guān)，750和720的尺寸從適配的角度來(lái)看，都是一樣的，只是界面尺寸相差了30px；
3. 適配三原則：等比縮放、彈性控件、文字流自適應(yīng)；
4. 適配不要標(biāo)死，要用動(dòng)態(tài)的眼光去看，做的時(shí)候需要考慮到極端情況，最常見的比如小屏幕適配問題…

PS：適配這個(gè)概念很特殊，它看起來(lái)很簡(jiǎn)單，簡(jiǎn)單到大多數(shù)人都覺得自己會(huì)了，不用再去研究了，但其實(shí)只懂了皮毛，并不清楚原理。

比如很多人都說(shuō)自己會(huì) PS ，但跟那些專業(yè)的比起來(lái)，你自己所認(rèn)為自己知道的不過冰山一角。所以我們要時(shí)刻保持一顆求知的心，不要總是固執(zhí)的堅(jiān)持己見，共勉哦。

作者：橙子的橙子，公眾號(hào)：海鹽社

本文由 @橙子的橙子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議