年前最后一個(gè)工作日，完成這篇干貨～

這篇文章的目的是想從更深的原理層去找到一些設(shè)計(jì)規(guī)范的原因，比如為什么要選用@2x的750*1334做基礎(chǔ)設(shè)計(jì)稿？

開發(fā)拿到設(shè)計(jì)基礎(chǔ)稿是如何操作適配的？

基礎(chǔ)稿是如何做到一稿適配到iOS和android的？

px與pt之間的關(guān)系是怎么樣的？等等......

深挖這些設(shè)計(jì)背后的原理，有助于我們更好的開展設(shè)計(jì)，也方便我們與開發(fā)更好的溝通，最重要的，在了解來(lái)背后的原理后，在開發(fā)進(jìn)行中遇到問題的時(shí)候，我們也能很快的去融入?yún)⑴c問題的解決，也能培養(yǎng)鍛煉自己的邏輯思維，以及打開自己的設(shè)計(jì)眼界～

這篇文章想從以下目錄展開：

Px物理像素與Pt邏輯像素的理解以及倍圖之間的關(guān)系

iOS常用手機(jī)分辨率

同等倍率和不同倍率的適配原則

關(guān)于適配的案例說(shuō)明

iPhone X及以上的適配規(guī)則

iOS與android之間的適配方案

用于適配的標(biāo)注規(guī)范

切圖命名規(guī)范

1) Px物理像素與Pt邏輯像素的理解

Px (pixel)：物理像素

px是組成位圖圖像中的最小單位，不分大小，設(shè)計(jì)師常用單位～

像素是指由圖像的小方格組成的，這些小方塊都有一個(gè)明確的位置和被分配的色彩數(shù)值，小方塊的顏色和位置就決定了圖像所呈現(xiàn)出來(lái)的樣子～

可以將像素視為整個(gè)圖像中不可分割的單位/元素，因?yàn)橄袼匾呀?jīng)是最小單位；并且它是以一個(gè)單一顏色的小格存在～

我們看到的一張張圖像，都是由一定量的像素構(gòu)成，像素的多少?zèng)Q定了圖像在屏幕上所呈現(xiàn)的大小，像素的色彩拼接組合決定了圖像在屏幕上呈現(xiàn)什么內(nèi)容～

Pt (point)：邏輯像素

pt也被成為邏輯點(diǎn)，在移動(dòng)適配中被成為“邏輯像素”，是程序員用的一種計(jì)量單位～

pt是有固定大小的，一般用來(lái)測(cè)量設(shè)備的實(shí)際大小尺寸～

1pt=1/72英寸，1英寸=2.54厘米，那么，1pt=0.03527778厘米，可見1pt是有具體的大小值的～

所以，在72像素/英寸的顯示屏下，1pt=1px

邏輯像素大小=物理像素1倍圖尺寸大小

eg：兩款手機(jī)iPhone3G/S 和 iPhone4/4s，iPhone3G/S 是非Retina的1倍屏，分辨率為480*320px也就是該手機(jī)的物理像素，對(duì)應(yīng)的邏輯像素就是該手機(jī)的硬件設(shè)備的大小為480pt*320pt；

iPhone4/4s 是Retina的2倍屏，分辨率為960px*640px也就是該手機(jī)的物理像素，對(duì)應(yīng)的邏輯像素也是480pt*320pt；

Retina屏叫視網(wǎng)膜屏，也叫@2x屏。

如何理解兩款手機(jī)邏輯像素一樣，物理像素不同？

iPhone3G 和 iPhone4這兩款手機(jī)邏輯像素一樣表示硬件設(shè)備的測(cè)量尺寸一樣，物理像素不同說(shuō)明相同面積里像素塊的構(gòu)成數(shù)量不同，數(shù)量越多說(shuō)明色彩越豐富，呈現(xiàn)的圖像也就約清晰；

相同大小的設(shè)備屏幕中，iPhone4承載的像素?cái)?shù)量是iPhone3G的兩倍，相當(dāng)于iPhone3G放一個(gè)像素塊的空間位置在iPhone4中放兩個(gè)像素塊，iPhone4的像素密度更高～

同樣，1920px*1080px的PC端，與1920px*1080px的小米手機(jī)，二者的物理像素(設(shè)計(jì)大小)一樣，邏輯像素(測(cè)量大小)很明顯差異很大，說(shuō)明一樣多的像素內(nèi)容，在邏輯像素更小的設(shè)備上圖像顯示的會(huì)更清晰，像素密度更高～

所以可以這樣理解倍圖的關(guān)系：

1倍圖即設(shè)備的物理像素：邏輯像素=1：1

2倍圖即設(shè)備的物理像素：邏輯像素=2：1

3倍圖即設(shè)備的物理像素：邏輯像素=3：1

注意??：物理像素px不分大小！邏輯像素pt有固定大小！

Q：為什么像素px不分大小？

A：px是一個(gè)點(diǎn)，它不是自然界的長(zhǎng)度單位，誰(shuí)能說(shuō)出一個(gè)“點(diǎn)”有多長(zhǎng)多大么？可以畫的很小，也可以很大。如果點(diǎn)很小，那畫面就清晰，我們稱它為“分辨率高”，反之，就是“分辨率低”。所以，“像素”的大小是會(huì)“變”的，也稱為“相對(duì)長(zhǎng)度”。

px&em&pt之間的對(duì)比

px是像素單位，em是相對(duì)單位，pt是絕對(duì)單位～

px的優(yōu)點(diǎn)：可以在計(jì)算機(jī)屏幕上，能達(dá)到預(yù)期的效果，在打印機(jī)和其它的高分辨率設(shè)備上，它又能取得所希望的效果。

em的優(yōu)點(diǎn)：比較多，比如在一個(gè)頁(yè)面上，你給定了一個(gè)父元素的字體大小，這樣就可以通過調(diào)整一個(gè)元素來(lái)成比例的改變所有元素大小。它可以自由縮放，比如用來(lái)制作可伸縮的樣式表。

pt的優(yōu)點(diǎn)：是一種固定長(zhǎng)度的度量單位，是能夠使用測(cè)量設(shè)備測(cè)得的長(zhǎng)度

2)iOS常用手機(jī)分辨率

以下是常用手機(jī)邏輯分辨率、物理(設(shè)計(jì))分辨率等信息表～

可以觀察到6P、6sP、7P、8P的物理(設(shè)計(jì))分辨率為1242px*2208px，邏輯分辨率為414px*736px【并不是375pt*667pt的3倍】，所以其實(shí)我們把375pt的3倍圖適配在Plus手機(jī)系列上來(lái)看的話，可以說(shuō)Plus是偽3倍屏～

Plus放大模式的由來(lái)：

6Plus剛推出來(lái)的時(shí)為了方便快速適配，使用與iPhone6相同的邏輯像素尺寸，*3倍則為1125*2001與實(shí)際邏輯像素相差一些，在相同的屏幕尺寸下，放的更少的像素塊相對(duì)來(lái)說(shuō)就比較大的顯示，就被定義為“放大模式”。

2倍圖，iPhone5 ?640px*1136px(物理像素) @2x 320pt*568pt(邏輯像素)

2倍圖，iPhone6 750px*1334px(物理像素) @2x 375pt*667pt(邏輯像素)

3倍圖，iPhone6P 1242px*2208px(物理像素，設(shè)計(jì)的實(shí)際標(biāo)準(zhǔn)模式) @3x 414pt*736pt(邏輯像素)，但我們一般用375pt的@3x圖1125*2001(物理像素，適配在Plus手機(jī)上稱為放大版) 來(lái)適配在Plus手機(jī)上～

那么，設(shè)計(jì)師有規(guī)定的設(shè)計(jì)稿尺寸大小嗎？

清楚適配規(guī)則、方法，在設(shè)計(jì)的時(shí)候注意距離值，元素大小的設(shè)置，那么用1倍圖設(shè)計(jì)和2倍圖設(shè)計(jì)都是一樣的，根據(jù)個(gè)人習(xí)慣就好～

再加上開發(fā)查看設(shè)計(jì)的軟件工具可以根據(jù)需要切換單位，就更加靈活了～

需要注意兩點(diǎn)：

注意設(shè)計(jì)尺寸與導(dǎo)出尺寸的對(duì)應(yīng)

下圖以@2x圖為設(shè)計(jì)稿，導(dǎo)出切圖操作；導(dǎo)出后，檢查@2x的切圖尺寸是否與設(shè)計(jì)稿元素尺寸一致～

注意設(shè)計(jì)尺寸與上傳尺寸的對(duì)應(yīng)

下圖為上傳畫板到藍(lán)湖上的操作；上傳時(shí)，確認(rèn)好選擇的設(shè)計(jì)圖畫板尺寸，因?yàn)檫@個(gè)是標(biāo)注平臺(tái)識(shí)別并計(jì)算單位的依據(jù)～

3)同等倍率和不同倍率的適配原則

設(shè)計(jì)時(shí)需要考慮什么問題

既然是一稿適配，在設(shè)計(jì)的時(shí)候需要始終把兩點(diǎn)始終帶入，一是大屏&小屏如何顯示問題(移動(dòng)端適配/PC端響應(yīng)式)，二是不同終端平臺(tái)(iOS&Android、移動(dòng)端&PC端) 交互方式不同，分辨率差異會(huì)引起的設(shè)計(jì)差異；

如何能在不同終端設(shè)備較“舒適”的顯示，又不會(huì)有特別多的開發(fā)量？盡可能靈活設(shè)計(jì)、可延展性設(shè)計(jì)～

開發(fā)的視角

一張?jiān)O(shè)計(jì)頁(yè)面，開發(fā)可能會(huì)腦補(bǔ)它會(huì)在不同屏幕下的樣子，所以我們?cè)谠O(shè)計(jì)的時(shí)候也可以用這張?jiān)O(shè)備屏幕圖來(lái)作為輔助工具，來(lái)擺放設(shè)計(jì)內(nèi)容～

上圖中可觀察到，360pt*640pt是小米手機(jī)@3x 1080*1920的邏輯尺寸。對(duì)比iPhone8 375pt*667pt可以看出，這款小米手機(jī)比iPhone6要小一點(diǎn)(邏輯/測(cè)量尺寸)，但物理像素要高很多，像素密度更高，圖像清晰度也就更高～

iOS適配需要考慮兩種：相同倍率和不同倍率

相同倍率，不同大小；eg：iPhone5 640px*1136px @2x、iPhone6 750px*1334px @2x；

不同倍率，不同大小；eg：iPhone6 750*1334 @2x、iPhoneX：1125*2436 @3x

相同倍率適配原則

原則一：文字流(fluid)

比如：相同的文字內(nèi)容；在iPhone5和iPhone6下，左右兩邊距離屏幕的邊距相同，由于屏幕大小不一樣，在iPhone5下顯示4行，而iPhone6下顯示3行～

2. 原則二：彈性控件(flexible)

對(duì)比iPhone5和iPhone6的同一個(gè)頁(yè)面，整體內(nèi)容距離屏幕左右邊距不變，字號(hào)、圖標(biāo)大小、圖標(biāo)與文案之間的間距都保持一致，僅僅只放大了中間的距離～

3. 原則三：等比縮放

iPhone5和iPhone6的“瓷片區(qū)”圖片，整體內(nèi)容距離屏幕兩邊的邊距、圖片與圖片之間的距離在同倍率不同大小的手機(jī)上都是一樣的，對(duì)圖片的處理：同等比例縮放～

總結(jié)：

綜上所述，邊距(整體內(nèi)容距離屏幕兩邊的大小)、字體大小、控件、間距(元素之間)在同等倍率下是不變的！

可以這樣理解，同等倍率一位置像素密度相同，也就是說(shuō)除了手機(jī)硬件屏幕的大小不一樣，看到手機(jī)內(nèi)容的清晰度是一樣的；

那么在做適配的時(shí)候我們是不是可以考慮在多出的/少一些的測(cè)量大小上做文章呢？

當(dāng)遇到文字流的時(shí)候，文字的大小不變，手機(jī)屏幕兩邊距不變，改變的是顯示高度的不同(寬屏顯示的行數(shù)少些，窄屏顯示的行數(shù)多些)～

當(dāng)遇到控件的時(shí)候，控件大小與輔助文案大小均不變，改變的是控件與對(duì)端中間的距離；

當(dāng)遇到圖片的時(shí)候，兩側(cè)邊距和圖片之間的間距不變，改變的是圖片在不同屏幕下的等比縮放；

不同倍率適配原則

方法：將所有需要適配的@3x圖都統(tǒng)一換算為@2x圖(根據(jù)@2x圖的適配方法，相同倍率下修改中心的距離即可完成同倍率下的適配)，再將@2x乘以1.5即可適配到@3x下。

為什么將iPhone6/7/8作為設(shè)計(jì)稿尺寸？

下方橙色區(qū)分別是上方設(shè)計(jì)稿邏輯像素@2x圖的尺寸，可以發(fā)現(xiàn)750px*1334px的尺寸是居于中間的，所以用iPhone6的尺寸作為設(shè)計(jì)稿是合適的～

以2倍圖為基礎(chǔ)，因?yàn)?倍圖更方便做同倍率和不同倍率之間的適配～

4)關(guān)于適配的案例說(shuō)明

以下是UI效果圖設(shè)計(jì)稿，以及設(shè)計(jì)稿對(duì)應(yīng)的適配方案～

一般交付給開發(fā)UI效果圖的時(shí)候，會(huì)對(duì)適配進(jìn)行說(shuō)明，方式不限，只要能表述清楚就可以，個(gè)人比較喜歡采用以下這種方式～

同倍率適配：根據(jù)適配說(shuō)明稿，標(biāo)出的數(shù)值固定不變，寬度按一定的百分比計(jì)算方式～

比如：在@2x iPhone5上的適配，只有兩個(gè)懸浮窗的寬度和高度發(fā)生了改變，其他的(圖中箭頭所示)的元素大小，內(nèi)容邊距，都沒有變化。

不同倍率適配：找到@3x對(duì)應(yīng)的@2x設(shè)計(jì)稿，整體放大1.5倍，其他元素按一定的百分比計(jì)算～

比如：在@3x iPhoneXS上的適配，整體放大1.5倍，兩個(gè)懸浮框的寬度和高度按照百分比的方式計(jì)算，其他的元素以1.5倍的規(guī)律進(jìn)行換算～

5)iPhone X及以上的適配規(guī)則

iPhoneX的適配

首先得了解iPhoneX硬件設(shè)備的特征，也是與我們的設(shè)計(jì)有關(guān)聯(lián)的，iPhoneX & iPhoneXs(1125px*2436px) 系列是劉海屏手機(jī)，“劉海區(qū)”為44pt(@3x下，即為132px)，底部“home條”34pt(@3x下，即為102px)這兩個(gè)是固定的邏輯像素尺寸～

適配步驟：

將iPhoneX固定不變的兩個(gè)位置空出來(lái)，就是上面提到的，上方“狀態(tài)欄+劉海”44pt(132px)，下方“取代home鍵操作區(qū)域”34pt(102px);

將@2x 750*1334的設(shè)計(jì)稿整體乘以1.5，適配到iPhoneX的面板中，需要注意的是我們放大的設(shè)計(jì)稿中包含了狀態(tài)欄高度的部分，而在步驟1中我們已經(jīng)將狀態(tài)欄(包含在“劉海區(qū)”)空出來(lái)了，所以需要去掉40*1.5=60px的高度。

注意事項(xiàng)：

蘋果官方給了iPhoneX，距離兩邊屏幕邊距為34pt(102px)，原因是iPhoneX與iPhone其他手機(jī)還有個(gè)區(qū)別在于它是圓角的，當(dāng)iPhoneX橫屏幕(比如：游戲類、適配類app)時(shí)，圓角那塊是不能有內(nèi)容的，所以在4個(gè)邊角留出安全區(qū)域，采用的也是34pt的邊距。

iPhoneXR&XS Max的適配

iPhoneXR：414pt*896pt? ?@2x? ?828px*1792px

iPhoneXS Max：414pt*896pt? ?@3x? ?1242px*2688px

可以觀察到，iPhoneXR和iPhoneXS Max硬件手機(jī)尺寸大小一樣(擁有相同的邏輯像素)，物理(設(shè)計(jì))尺寸不同，iPhoneXS Max像素密度更高，畫面清晰度更高～

那么做他們的適配，只需要先將@2x的iPhoneXR適配稿完成，再通過x1.5的方式即可完成@3x?iPhoneXS Max的適配～

XR的適配步驟：

將“劉海區(qū)”、“home條”的位置提前空出來(lái)：“劉海區(qū)”44pt(@2x的XR即為88px)；“home條”44pt(@2x的XR即為68px)；

將750*1334的基礎(chǔ)稿復(fù)制到XR的畫板中，同倍率適配調(diào)整：

圖片等比放大；

左右邊距保持與750px的設(shè)計(jì)稿一致；

注意內(nèi)容中元素之間的上下、左右間距保持一致；

文字流的適配，擴(kuò)大文字域范圍；

分割線長(zhǎng)度的補(bǔ)充(左右邊距保持一致)；

... ...

XS Max的適配步驟：

新建1242*2688px的畫板；

將適配好的XR設(shè)計(jì)稿放大1.5倍，放在畫板中即可。

6)iOS與Android之間的適配方案

上述流程已完成iOS同倍率@2x與不同倍率@3x之間的適配；那么iOS與Android之間如何進(jìn)行適配的呢？

iOS與Android的適配步驟：

Android主流屏幕尺寸為：1080*1920px，@3x屏；

基于iOS 750*1334px的@2x圖的設(shè)計(jì)稿尺寸，乘以1.44，適配在1080*1920px的android的設(shè)計(jì)稿上。

主流適配流程圖：

注意事項(xiàng)：

pt可看作是@1x圖的尺寸，方便計(jì)算；

注意在機(jī)型為：iPhoneX/XS/XR、iPhoneXS Max下，“劉海區(qū)44pt”&“home條34pt”的計(jì)算。

7)用于適配的標(biāo)注規(guī)范

通過上述介紹我們知道，同倍率和不同倍率進(jìn)行適配時(shí)，圖片會(huì)進(jìn)行等比縮放，為圖片更好的被使用，開發(fā)則需要使用我們提供的@2x和@3x；

切圖素材在后臺(tái)數(shù)據(jù)庫(kù)，前段開發(fā)將這個(gè)素材的位置空出來(lái)，通過媒體查詢判斷用戶使用哪種設(shè)備類型，再向后臺(tái)服務(wù)器請(qǐng)求數(shù)據(jù)，獲取這個(gè)圖片素材，再在前端顯示圖片～

設(shè)計(jì)稿中其他元素可通過藍(lán)湖進(jìn)行開發(fā)查看～

適配標(biāo)注注意事項(xiàng)：

* 不能標(biāo)“死”，如果把每個(gè)元素的上下左右的每一個(gè)間距都給標(biāo)注來(lái)，只適合在某一種機(jī)型下，不能靈活的應(yīng)用在所有機(jī)型尺寸上～

正確做法有兩種：

間距自適應(yīng)型

在一定范圍下，比如：同倍率機(jī)型下，或無(wú)論什么機(jī)型都適用，將可以固定的間距標(biāo)出來(lái)，其他的間距自適應(yīng)；

素材適應(yīng)型

在一定范圍下，比如：同倍率機(jī)型下，或無(wú)論什么機(jī)型都適用，將可以固定的間距標(biāo)出來(lái)，其他的距離根據(jù)分辨率的寬度減去固定值后進(jìn)行均分的適應(yīng)方式；

結(jié)論：

標(biāo)注并不是給的越詳細(xì)越好

需要自適應(yīng)的地方不要進(jìn)行標(biāo)注

最重要的標(biāo)注完成后需要與開發(fā)工程師進(jìn)行溝通

tabbar開發(fā)小技巧：

底部tabbar，當(dāng)有4個(gè)tab時(shí)，發(fā)現(xiàn)750除以4=187.5，意味著不能等分，程序員常規(guī)操作是：

@2x設(shè)計(jì)稿下當(dāng)有4個(gè)tab時(shí)，左右兩側(cè)預(yù)留3px，將剩下的744px除以4=186px，每個(gè)tab被分?jǐn)偟?86px～

8)切圖命名規(guī)范

通用切圖命名格式：

組件_類別_功能_狀態(tài)@2x.png

例子🌰：tabbar_icon_home_default@2x.png(對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png)

命名格式中的【類別】list：

說(shuō)明：文章中有部分內(nèi)容來(lái)自孫大川老師的分享

總結(jié)

以上是生活随笔為你收集整理的android 1396x750设计图,移动端的适配|切图|标注的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。