今天接著上一次沒分享完的內(nèi)容繼續(xù)向后推進(jìn)，也就是移動(dòng)端的其它適配場(chǎng)景的講解。

一、不同像素密度的適配方式

屏幕規(guī)格除了前面提到的大小規(guī)格外，還有個(gè)非常重要且基礎(chǔ)的概念 —— 像素密度。

常規(guī)情況下，分辨率指的是屏幕的像素組成數(shù)量，比如分辨率 1920*1080，指的是屏幕的長(zhǎng)寬分別包含 1920 和 1080 個(gè)像素點(diǎn)。但一個(gè) 5 寸的屏幕可以使用這個(gè)分辨率，一個(gè) 24 寸的屏幕也可以使用這個(gè)分辨率，這就衍生除了像素密度這個(gè)屬性，即單位面積內(nèi)包含像素點(diǎn)的數(shù)量。

在相同分辨率下，屏幕越小，像素密度越大畫面清晰度越高，屏幕越大，則像素密度越小畫面清晰度越低。

這個(gè)參數(shù)之所以重要，是因?yàn)椴煌謾C(jī)屏幕之間的規(guī)格差異巨大，在屏幕都差不多的情況下，有的還在用 720P，有的已經(jīng)用 4K 了，比如下面的示例。

從這些示例中，可以直觀的發(fā)現(xiàn)屏幕分辨率之間的差異巨大，也意味著不同屏幕規(guī)格之間的屏幕密度差異也很大。

這就延伸到另一個(gè)問題，我們?cè)谲浖飫?chuàng)建的畫布和真實(shí)屏幕分辨率參數(shù)怎么完全不一樣？原因就是畫布分辨率和顯示器分辨率是兩碼事，畫布分辨率可以理解成是邏輯分辨率，而屏幕分辨率是物理分辨率。

畫布分辨率即在 UI 設(shè)計(jì)軟件里的一個(gè)基礎(chǔ)畫布屬性值，它是矢量數(shù)值，即通過數(shù)學(xué)方式記錄和渲染的一種數(shù)據(jù)。所以它是沒有單位的，換個(gè)角度講也可以是任意單位，因?yàn)槭噶靠梢詿o損放大和縮小。

但物理分辨率不一樣，物理分辨率是屏幕的物理屬性，在屏幕生產(chǎn)后就被固定，不管你讓屏幕顯示什么內(nèi)容給你，它最終都以這個(gè)物理分辨率呈現(xiàn)出來。

邏輯分辨率和物理分辨率兩者并不對(duì)等，所以中間有個(gè)渲染的過程，即把矢量畫布渲染成屏幕圖像的過程（光柵化），在渲染過程中會(huì)對(duì)原有的分辨率進(jìn)行換算，以滿足屏幕顯示的需要。

這個(gè)渲染過程主要由系統(tǒng)主導(dǎo)，我們無需深究背后的計(jì)算機(jī)圖形原理。只需要知道在渲染過程中，邏輯分辨率要轉(zhuǎn)化成屏幕分辨率，通常是按整數(shù)倍率放大的。比如以原來的 2 倍、3 倍、4 倍放大，簡(jiǎn)寫也就是 2x、3x、4x。

這個(gè)放大的倍率通常是由像素密度決定的，而放大倍率的計(jì)算公式為 —— 屏幕密度 / 160，即屏幕密度大約是160的幾倍，則放大幾倍。比如 iPhoneSE 密度是326 所以是 2x，iPhone15 密度則是460，所以用 3x，以此類推。

計(jì)算公式知道個(gè)大概就行，實(shí)際項(xiàng)目不需要我們自己去做計(jì)算，移動(dòng)端系統(tǒng)會(huì)自動(dòng)根據(jù)設(shè)備的類型進(jìn)行換算和渲染。

我們只需按著原有畫布尺寸設(shè)計(jì)即可，但是交付過程就會(huì)受到倍率的影響，因?yàn)樵O(shè)計(jì)稿中不是所有設(shè)計(jì)元素都是 —— 矢量的，還有相當(dāng)一部分是位圖。比如目前越來越平面化、運(yùn)營(yíng)化的界面設(shè)計(jì)，有相當(dāng)多的元素?zé)o法用 UI 軟件設(shè)計(jì)，它們只能以位圖的形式置入畫布中。

所以這類設(shè)計(jì)元素的置入和切圖就要考慮適配的問題，常規(guī)圖標(biāo)切圖使用位圖格式就要使用 1x、2x、3x 不同倍率的 PNG，但是非圖標(biāo)類素材的導(dǎo)出往往不需要這么麻煩，只需要導(dǎo)出一個(gè) 2x 的即可。

3x、4x 或更大的切圖，雖然能保證清晰度，在高分辨率下獲得更好的效果，但文件的占用空間也被成倍放大，這會(huì)導(dǎo)致兩種后果，一個(gè)是作為軟件內(nèi)容安裝包體積大增，另一個(gè)是作為下載數(shù)據(jù)則下載時(shí)間會(huì)大增，而它們帶來的清晰度加成并不明顯，無法彌補(bǔ)造成的損失。

而導(dǎo)入到設(shè)計(jì)畫布內(nèi)的位圖，不管放大還是縮小質(zhì)量是一致的，導(dǎo)出它們可以縮小但是沒辦法導(dǎo)出成更大的圖片（畫質(zhì)損失），要一開始就按切圖的要求導(dǎo)入位圖進(jìn)設(shè)計(jì)畫布中。

所以假設(shè)你在畫布中要放置的一個(gè) 200*200 的插畫形象，那么再 PS 中創(chuàng)建創(chuàng)建畫布就不能小于 400*400（2x），才能保證最終的切圖可用性。

再拓展開，在我們使用 PS 進(jìn)行復(fù)雜頁面設(shè)計(jì)，或者干脆是設(shè)計(jì) H5 時(shí)，使用的分辨率也是 2x 的倍率，因?yàn)閷?dǎo)出 2x 的切圖就夠用，也不用創(chuàng)建一個(gè)過大的畫布，導(dǎo)致設(shè)計(jì)過程操作非常的卡頓和不流程。

二、安卓和蘋果的適配做法

做移動(dòng)端項(xiàng)目，多數(shù)情況下是要適配蘋果和安卓?jī)商紫到y(tǒng)的。但是，兩套系統(tǒng)各自設(shè)計(jì)各自開發(fā)，顯然是不能接受的，因?yàn)樽銎饋硖闊╅_發(fā)和維護(hù)成本過高。

所以行業(yè)普遍的做法，是先以一套系統(tǒng)為標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)，再適配到另一套系統(tǒng)中去。當(dāng)然，主流的設(shè)計(jì)是以 iOS 作為標(biāo)準(zhǔn)開展的，這里有多方面因素的影響，感興趣的同學(xué)可以自己去查查相關(guān)的歷史。

雖然 iOS 和 AndROId 官方設(shè)計(jì)規(guī)范和樣式有很大差異，但一定要記得那是 "官方設(shè)計(jì)規(guī)范"，而國(guó)內(nèi)手機(jī)廠商有自己的 OS 和設(shè)計(jì)語言，和安卓官方的做法是高度脫節(jié)的。

同時(shí)，國(guó)內(nèi)系統(tǒng)的設(shè)計(jì)高度靠攏 iOS 的設(shè)計(jì)，有很大一部分原因也是為了兼容跨系統(tǒng)適配，讓開發(fā)者可以更輕松、高效地適配安卓端。

所以，在常規(guī)項(xiàng)目設(shè)計(jì)中，我們以 iOS 界面為準(zhǔn)即可，無需單獨(dú)提供整套的安卓端設(shè)計(jì)，安卓前端工程師會(huì)自己根據(jù)當(dāng)前的設(shè)計(jì)開發(fā)和適配。而安卓設(shè)備畫布和蘋果畫布大小不一，同樣適用于前面所說的頁面元素適配邏輯。

雖然多數(shù)頁面可以直接遷移，但總是有特殊情況，畢竟安卓系統(tǒng)和 iOS 系統(tǒng)還是有不少差異，會(huì)直接影響產(chǎn)品需求或樣式。比如安卓的權(quán)限請(qǐng)求窗口、桌面組件設(shè)置、系統(tǒng)相關(guān)設(shè)置等，都是在 iOS 端設(shè)計(jì)沒有的界面。

所以 iOS 端適配安卓端的設(shè)計(jì)，就要?jiǎng)?chuàng)建一個(gè)新的文件，將安卓端不同或者特有的頁面單獨(dú)設(shè)計(jì)出來。在設(shè)計(jì)時(shí)，使用的畫布可以使用傳統(tǒng)的 360*720，也可以使用安卓官方應(yīng)用的 412*892，然后置入安卓的頭部狀態(tài)欄和底部指示器示意。

三、手機(jī)端和平板的適配規(guī)范

除了跨系統(tǒng)外，移動(dòng)端應(yīng)用面對(duì)的另一個(gè)挑戰(zhàn)就是適配平板。

首先要了解一個(gè)基礎(chǔ)知識(shí)，即平板雖然本質(zhì)上和手機(jī)是同一個(gè)系統(tǒng)，但開發(fā)者可以針對(duì)平板開發(fā)一個(gè)獨(dú)立的應(yīng)用，這種應(yīng)用會(huì)加上一個(gè) HD 的后綴。比如網(wǎng)易云音樂，有手機(jī)端也有平板端，這是兩個(gè)不同的應(yīng)用，所以開發(fā) HD 版本的應(yīng)用不叫平板適配。

平板適配指的是將一個(gè)手機(jī)應(yīng)用直接適配到平板上的做法，可以在平板中完整展開、顯示、使用。與之相對(duì)的沒有適配的應(yīng)用，在平板端則只會(huì)以手機(jī)端的界面展示，比例和平板不一致。

平板適配的基本做法，和手機(jī)適配基本一致，即對(duì)元素的對(duì)齊、縮放、響應(yīng)方式進(jìn)行制定，以應(yīng)對(duì)畫布放大后的要求。所以有了相關(guān)知識(shí)，再看下面的案例，就應(yīng)該輕易分辨出手機(jī)應(yīng)用適配到平板中的邏輯。

如果只有這些內(nèi)容，那么平板適配就不需要單獨(dú)做解釋，問題在于平板還包含其它的顯示特征，在設(shè)計(jì)過程都需要考慮是否需要支持它們，以 iPad 端舉例，包括：

1. 橫/豎屏切換
2. 分屏瀏覽
3. 懸浮窗口

手機(jī)多為豎屏使用，一個(gè)正常的 APP 不用考慮橫屏模式也沒關(guān)系，但是平板橫屏豎屏的使用比例都不容忽視，我們往往要考慮是否要在平板中支持橫屏模式。

雖然橫屏理論上就是讓畫布變得更寬高度變得更窄的讓界面進(jìn)行適配，但是這種比例的變更往往會(huì)導(dǎo)致界面的可視區(qū)域變得非常小且不合理，比如下面案例。所以很多應(yīng)用干脆在平板端禁止了橫屏模式，只允許豎屏使用（也可以反過來）。

第二個(gè)就是分屏瀏覽，iPad 包含多種分屏模式，橫屏模式支持 APP 以屏幕 2/3、1/2、1/3 的窗口顯示，豎屏模式則支持以 2/3、1/3 的窗口進(jìn)行顯示。

這里就和上一個(gè)問題相關(guān)聯(lián)，如果不支持橫豎屏切換的話，那么往往就不會(huì)支持分屏模式，而要支持分辨率模式的話，元素的適配邏輯沒變，理論上支持平板的適配都可以比較輕松的支持這些分辨的顯示。

但一些特殊的頁面，如只有一兩個(gè)按鈕但是全屏顯示，或是復(fù)雜的表格、數(shù)據(jù)展示頁面，就要提前考慮不同方向和比例的適配結(jié)果，如果效果不佳且難以做出優(yōu)化，那么同樣建議放棄針對(duì)專業(yè)比例的使用，不允許應(yīng)用進(jìn)入分屏模式。

最后的懸浮窗口即使用一個(gè)更細(xì)的窗口懸浮在系統(tǒng)界面內(nèi)，界面適配的邏輯和分屏差異不大，只要支持 1/3 比例顯示的話，就基本可以支持分屏的模式。

在實(shí)際項(xiàng)目中，要兼顧以上所有模式的顯示是非常困難的，但它們還不是最大的難題。平板端適配最大的難題是平板的交互和手機(jī)不同，手機(jī)往往可以單手握持并使用拇指觸控，而平板的使用則會(huì)大量應(yīng)用食指。

這導(dǎo)致平板的主要操作熱區(qū)和手機(jī)有很大差異，直接套用手機(jī)布局和交互在平板上操作就會(huì)顯得各種別扭。并且平板的適配不像網(wǎng)頁響應(yīng)式包含了斷點(diǎn)的應(yīng)用，且 CSS 樣式更輕量、靈活，可以在一套代碼內(nèi)切換多種布局形式，所以這種交互的差異就成為平板適配中難以逾越的鴻溝。

也正是如此，平板適配往往只是開發(fā)團(tuán)隊(duì)"偷懶"的做法，雖然知道體驗(yàn)不好，但不會(huì)投入更多的人力成本去開發(fā)一個(gè)新 APP，先做適配能用就行。

所以，平板適配只是一個(gè)兼容平板端的妥協(xié)產(chǎn)物，設(shè)計(jì)師優(yōu)先考慮的是在一個(gè)方向內(nèi)能正常顯示，無需去覆蓋所有的平板的應(yīng)用場(chǎng)景即可。

結(jié)尾

時(shí)間關(guān)系寫不完，還有最后一部分怎么進(jìn)行適配的標(biāo)注，會(huì)在下周再更新。

酸梅干超人