APP的UI設計，有沒有辦法一套切圖適配所有解析度？包括IOS、Android

01-04

設計規範是根據屏幕尺寸定的，按比例布局就可以保證視覺效果，這樣有沒有某種工具或者做法可以實現一套多用？

有，而且很簡單

不切圖。拿原生控制項堆出一個app

人家辛辛苦苦制定出來的設計規範……

非要說有也可以。參考一些遊戲的做法

首先預設一個屏幕比例（比如16：9）

然後其他機器按照這個比例切黑邊後縮放即可。

如果不是因為錢的問題，最好兩個團隊分別開發。

世界上不是所有問題都有完美解決方案的。

當然，用矢量圖或者3x規格png就好。

1.png的方案

3x規格png實施起來會簡單很多，設計師可以以iPhone6s plus為設計稿，導出稿中相同大小的圖片，以6s為設計稿的話輸出圖片時寬高均乘以1.5。開發拿到切圖後，iOS對應放入3x，Andrpid對應放入xxhdpi，搞定。目前使用率來說3x（即3倍）就足夠了，其他倍數會從3x自動縮小獲得。

2.矢量圖方案

這個方案會複雜些。iOS矢量圖為pdf格式，大小以1x輸出就可以，這樣做可以方便開發人員導入和布局。Android可以用VectorDrawable或者svg轉png插件，需要的是svg格式矢量圖。用VectorDrawable的話，設計師最好用最簡單的方式製作svg，最好只用繪線和填色，蒙版、挖空、區域透明等等就不要用了。用svg轉png插件的話，對製作svg就沒有太多要求，但是這類插件會有一些坑，開發人員要去填坑，比如轉換後清晰度不夠的問題。

我給公司的方案就是設計師輸出一套1x規格pdf矢量圖，iOS可以直接套用，Android採用svg轉png插件，自己寫腳本將pdf批量轉換成svg，再由插件生成3x規格png，是的，Android最終還是用png。因為公司iOS項目先啟動，圖片都做好了，不可能再讓設計師為VectorDrawable一個圖片一個圖片的調整。

手機碼字，先佔兩個坑，後面再補上。

------------------------------------------------------

3. 解析度和倍數

市面上各個規格的解析度都有，Android的太多先不討論，iPhone 6s+是1080x1920，6s是750x1334，se是640x1136。差異這麼大難不成要一一適配？顯然不可能，幸好除了解析度外還有倍數的概念，比如2x（2倍）就是指設備的一個點等於2px，一般來說不同設備的一個點物理距離是接近的。我們來看看解析度除以倍數後的「點」解析度，那麼6s+是414x736，6s是375x667，se是320x480，從這個角度上看，其實幾個機型的「點」寬度變化不大，只是高度有所不同，只要布局得當完全可以做到一套設計稿通用大部分機型。

Android的情況也是類似，只是倍數更多，它用另一個名稱表示：mdpi（1倍）hdpi（1.5倍）xhdpi（2倍）xxhdpi（3倍）。

補充，6s和se是2x，6s+的倍數情況比較複雜，詳細請看：

iPhone 6 Plus的邏輯解析度為什麼是414x736？ - IOS app開發 android app開發

為什麼 iPhone 6 Plus 要將 3x 渲染的 2208x1242 解析度縮小到 1080p 屏幕上？ - iOS 開發

4. 良好的布局

一般來說，選用一款常用機型的解析度作為設計稿，剩下的便是布局的工作。

布局就像排版一樣，每一塊區域每一個控制項的擺放規則：往一邊靠還是居中，拉伸鋪滿，保持一定比例，還是固定大小。要把設計稿想像得能夠隨時變寬變窄變高變矮，當大小發生變化時，按照預定的布局規則設計稿會變得怎麼樣。布局沒有捷徑，就是多思考多練習。

給個例子，公司的設計稿是以5s為基準，解析度640x1136，倍數2x。

知道以哪個倍數為基準對適配很重要。比如說，有一次設計師不清楚怎麼描述一個九宮格頁面時，我讓他針對6s+、6s、4s再做一次調整，基準倍數是2x，6s+基準到2x的尺寸便是828x1472，方便同一個設計稿複製到不同解析度上，通過不同解析度的調整便能做出滿意的頁面布局。（在這裡你需要一套高效的標註工具）

* 當倍數不為1x，所有px表示的數值都應該能被倍數整除。以2x為例，輸出圖標大小就不能為45px x 45px，因為當輸出到1x和3x時就會出現小數，小數會被捨棄。正確做法是調整到44px或者46px。

5、為什麼不採用等比例縮放適配

為什麼不採用等比例縮放適配？說到底，更大的屏幕尺寸提供了更多內容展示的空間，等比例縮放沒能把發揮出大屏的優勢，同時也很難保證系統UI的一致性體驗。

現有的方法已經很好，何必到處找？

其實嚴格來說一套切圖是可以適配到所有頁面的，只是會顯示糟糕（svg 貌似是可以一套切圖通用）。但我猜你問的是否一套設計稿能否適配到兩個平台的所有手機屏幕，是基本可以的，這是我最近總結的如何一稿適配 iOS、Android - JPJP的文章 - 知乎專欄歡迎提意見～

部分情況下，矢量圖可以幫到你

一套iPhone5就可以適配安卓和蘋果

即使有也不應該存在吧。iOS和Android的設計規範越來越不一樣

作為一個安卓程序員，我只知道用9.png圖片可以一定程度上緩解這個問題。但是真正的要同時適配多種屏幕，需要的應該是代碼。

美工的PDF高清切換是按照iPhone5s的屏幕解析度來的，5s的屏幕解析度為16:9。720*1280 （xhdpi)和1080*1920(xxhdpi)的屏幕解析度也是16:9。故可以等比壓縮，也就是說一套5s的圖可以適配所有的16:9的屏幕。其他的屏幕比例就沒這麼幸運了，看你的需求了。