ios安卓切圖

『壹』 iOS、Android 開發單位換算及 UI 切圖要求

在移動端 UI 設計中，經常會用到的單位有 4 種：px、pt、dp 和 sp，很多人分辨不清這幾種單位及其換算關系，以及 iOS 和 Android 的切圖要求，我在這里做下簡單的介紹，希望大家讀完後能有所收獲（如有錯誤，歡迎糾正）。

px 即 pixel，像素點，電子屏幕上組成圖像的最基本單位，在描述屏幕解析度時也會使用該單位。1px 表示一個像素，例如 iPhone 8 的尺寸為 750px × 1334px，表示在該手機屏幕上，水平方向每行有 750 個像素點，垂直方向每列有 1334 個像素點。

pt 即 point，有兩個含義：一是印刷行業常用單位，是一個標准長度單位，絕對大小，1pt = 1/72 英寸 = 0.35mm；二是 iOS 開發用的基本單位，當設計師以 1 倍尺寸進行設計 (375pt × 667pt) 並給出標注稿時，開發人員無需除以 2 便可直接使用。

dp 是安卓開發用的基準單位，在 dpi (屏幕像素密度，即每英寸包含的像素點) 為 160 的屏幕為上，1dp = 1px。為了簡單起見，Android 把屏幕密度分為了 5 種：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，下文會詳細介紹其換算關系。

在安卓系統里，sp 與 dp 類似，不同的是 sp 可以根據用戶的字體大小首選項進行縮放，而 dp 則不會。 盡量使用 dp 作為空間大小單位，sp 作為文字相關大小單位，例如：新聞類和簡訊類等大篇幅文本，推薦使用 sp 為單位。

在 iOS 開發中，不同機型的 iPhone 設備需要用到不同倍率的切圖，下表格為各 iPhone 機型顯示屏參數對比：

這里再簡單了解下兩個概念，ppi 和 dpi。

ppi (iOS)：即 pixel per inch，屏幕像素密度，表示每英寸所包含的像素點，該值越高，屏幕越細膩。
dpi (iOS) ：開發像素密度，表示每英寸所包含的開發像素點。

在 iOS 開發中，規定以 ppi = 163，dpi = 163 作為開發基準，

當 ppi = 163，dpi = 163 時，則 1pt = 1px；
當 ppi = 326，dpi = 163 時，則 1pt = 2px；
當 ppi = 401，dpi = 154 時，則 1pt = 2.6px ≈ 3px。
(為什麼 iPhone 8+/7+/6+ 的開發基準是154？可能要問問蘋果了...)

依此類推，得出換算公式一：

若有小數，四捨五入即可。

在 iOS 開發中，目前只需要 @2x 和 @3x 兩種切圖，所以導出 2 倍和 3 倍的 png 圖片即可。導出前注意檢查切圖是否存在半像素、毛邊等情況，保證對齊像素，這樣才能有效避免上線後頁面上的 icon 出現虛邊的問題，提高細節質量。

另外補充一點：從整體開發尺寸看，iPhone 8 是 375 × 667 pt (@2x)，而 iPhone X 是 375 × 812 pt (@3x)，同樣的寬度，一個用 @2x 圖，一個用 @3x 圖，iPhone X 表現出了更高的清晰度，如圖 2-1 所示。

在 Android 開發中，因為機型參差不齊，需要用屏幕密度來區分設計。

注意，這里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念，dpi (iOS) 是開發像素密度，而 dpi (Android) 即 dot per inch，表示屏幕像素密度 ，類似 iOS 開發里的 ppi。

Android 中，規定以 dpi = 160 為開發基準，

當 dpi = 160，基準dpi = 160，1dp = 1px；
當 dpi = 240，基準dpi = 160，1dp = 1.5px；
當 dpi = 320，基準dpi = 160，1dp = 2px。

依此類推，得出換算公式二：

在設計圖標時，對於 5 種主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 應按照 2:3:4:6:8 的比例進行縮放，如圖 3-1 所示。

例如，一個啟動圖標的尺寸為 48 × 48 dp，這表示在 mdpi 的屏幕上其實際尺寸應為 48 × 48 px；在 hdpi 的屏幕上其實際大小是 mdpi 的 1.5 倍 (72 × 72 px)；在 xhdpi 的屏幕上其實際大小是 mdpi 的 2 倍 (96 × 96 px)，依此類推。

在某些況行下，還需要提供一種特殊的切圖： 點九圖 (上圖所示)。點九圖是 Android 開發中用到的一種特殊格式的圖片，文件名以 「.9.png」 結尾。

這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。運用點九圖可以保證圖片在不模糊變形的前提下做到自適應，比如對話框背景圖片就會用到點九圖。

--
以上是全部內容，感謝你的閱讀！
End

『貳』 蘋果app與安卓app切圖有什麼區別

一.android版
在做android版本設計的時候，尺寸有很多種，這時我們要以一種尺寸為基準，那這個基準尺寸是480px*800px，設計圖完成之後就開始切圖了，我拿我之前設計的一張圖為例子講解下：

當看到上邊這張設計圖的時候，我們首先分析下應該給技術切哪些圖（為了避免以後少改動，建議切圖之前最好和技術先溝通下，怎麼切）；
1、底部欄目的icon和背景：
這個一般有2種切法：（有默認和選中之後的效果）

2、頂部欄目的背景切圖：
由於頂部導航欄的是漸變樣式，所以切圖只需要切一小條，技術來平鋪拉伸就可以~（PS：如果是花紋背景，就必須切整條了，因為花紋切一小條就會被拉伸了~）
3、標注文字大小和行間距：（以這張圖為例子，我標注好了，請看下圖）
需要注意的：
A：android主要有3種屏，即：
QVGA和WQVGA屏density=120;
HVGA屏density=160;
WVGA屏density=240;
B：apk的資源包中，
當屏幕density=240時使用hdpi標簽的資源
當屏幕density=160時使用mdpi標簽的資源
當屏幕density=120時使用ldpi標簽的資源；
C：我們標注的是PX，但是技術的演算法是DP，所以需要PX和DP進行轉化，PX和DP的轉化主要跟密度有關系，當密度density=160即（屏幕尺寸：320*480）時，1PX=1DP；當密度density=240即（屏幕尺寸：480*800）時，1PX=0.75DP；當屏幕的尺寸大於480*800的時候，密度都按照240計算即可；當密度density=120即（屏幕尺寸：240*320）時，這個現在幾乎沒有人用了，所以我也不知道轉化公式，如果您知道，可以留言告訴我啊~
注意：因為我們做的是基於480*800尺寸的，大家都知道android的尺寸太多了，要想適配現在流行的尺寸，比如：640*960；720*1280等，唯一的解決辦法就是圖標可以根據不同尺寸各做一套，也就是圖標需要做480、640和720共3套圖標，不過如果你們的產品的要求不嚴格，做一套就可以，只不過是在大於480尺寸的屏幕上有些圖標被拉大變虛而已~
二.ios版
在做ios版本設計的時候，尺寸有3種，分別是：320*480、640*960、640*1136；這時我們要以一種尺寸為基準，那這個基準尺寸是640px*960px，設計圖完成之後就開始切圖了，我拿我之前設計的一張圖為例子講解下：

當看到上邊這張設計圖的時候，我們首先分析下應該給技術切哪些圖（為了避免以後少改動，建議切圖之前最好和技術先溝通下，怎麼切）；
1、底部欄目的icon和背景：
這個一般有2種切法：（有默認和選中之後的效果）

2、頂部欄目的背景切圖：
由於頂部導航欄的是多顏色的，所以只能切一整條給技術，商圈的圖標要單獨切出來

3、二級標題欄目的切圖：

4、主體欄目的切圖：

5、標注文字大小和行間距：（以這張圖為例子，我標注好了，請看下圖）
需要注意的：
A：我們標注的尺寸是像素px，技術那邊的實際運用到技術中的是像素的一半，即像素的一半=技術的尺寸；例如：「分類」2個字，我標準的是36px，技術那邊的尺寸就是18px；
B：所有文字，行間距的標注的尺寸都是偶數；因為技術那邊都是根據我們的尺寸除以2；
C：顏色的標注有的技術要求16進制，有的技術要求RGB，由於頁面的限制所以我只標注了16進制的，按16進制和RGB都標注的是最好的~
注意：因為我們做的基於640*960尺寸的，ios共有3套尺寸，因為640*960和640*1136的寬度是不變的，所以圖標沒有變化重新切，只是行間距需要調整下；320*480尺寸的是640*960的一半，所以技術完全可以根據你標注的640的尺寸做就可以~
三.android和ios的轉化關系
1.因為ios的尺寸是640*960，android當密度等於120即（320*480）時，1PX=1DP，所以android和ios的標注像素之間的換算關：即ios像素尺寸*1/2=android dp尺寸；
2.如果你們的產品同時做android和ios，你只想標注一套尺寸的時候，就可以標注ios版的標注去計算即可。

『叄』 APP設設計規范尺寸、切圖詳解——IOS和Android

目前主流的是以iPhone 6為主，設計尺寸是750*1334px，4.7寸。

1、解析度以iPhone 6 設計為主：750*1334px

2、（字體 Helvetica/華文細黑，實際中運用黑體簡或者Hiti-sc 最接近系統中所帶字體）

3、工具欄height：88px    如搜索、選擇、刪除、回復等。

4、頂部標簽欄height：60px  位於狀態欄或者狀態欄下的文字/具有可切換功能的圖標

1、導航欄

所有的字型大小，在750*1334px的設計尺寸下都是偶數，便於程序員操作。

所有可觸發按鈕必須≥44*44

所有可觸發按鈕必須≥22*22

左右內容與邊距的間隔大概在20px

強調確定，填充有彩色。

例如：

搜索框右邊要有一個取消、或者輸入了之後有一個「x」

漸變和底紋效果和程序員商討

設計尺寸：720*1280px

狀態欄48px  導航欄96px  內容區1038px   標簽欄112px

『肆』 如何高效地輸出iOS和Android標注和切圖

現在有很多產品為了降低設計成本並保持多平台體驗的一致性，都以iOS為主做一套交互設計，應用於iOS和Android兩個平台。但是在標注與切圖的環節，如何高效的與開發對接，似乎並沒有什麼更高明的辦法。很多團隊的做法是先做一套iOS的UI+標注+切圖，再在iOS的基礎上縮放一套Android的UI+標注+切圖。事實上這樣的做法是低效，且無效的。為什麼且如何做呢？

首先本文大前提是，交互以iOS的設計為主導，應用於iOS和Android兩個平台。本文描述的方法更適用於人力資源較為匱乏的設計團隊。

對於設計環節。

我對iOS和Android使用同一套iOS的交互設計這種做法不置可否，畢竟好多人都已經這么幹了。而很多情況下，到底用一套交互還是兩套，這個問題是被設計部門的話語權、項目的周期、人力資源等多個因素影響的，並不是簡單的節操問題。所以這里不討論到底一套交互對不對，只討論這種情況下怎麼幹活。

那麼既然是同一套設計，如果僅僅是為了達到的交付物標准，輸出兩套幾乎完全一樣的iOS和Android的UI圖，這種事情略顯蛋疼。據我所知有一些設計團隊都在不明真相地這么干著。

來看設計環節的交付物。

iOS和Android開發需要的設計交付物至少要有：高保真UI圖，標注，切圖。

高保真UI圖所起到的作用是，開發會參照其畫頁面，僅僅是獲知頁面樣子的一個手段，並非什麼高精度的事情。僅僅基於這一條，設計師就沒有必要出iOS和Android兩套樣子一樣只是大小不同的圖的，對於開發來說，他們只需要看到頁面樣子即可。

標注和切圖的作用是，開發會按照標注的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。那麼問題來了，iOS的開發和Android開發所需要的標注和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標注和切圖呢？

眾所周知iOS設計的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如圖，他們的換算關系是，iOS像素尺寸的75%是Android的像素尺寸

我們會發現xhdpi模式和hdpi模式的換算比例也是75%。也就是說xhdpi模式下切圖尺寸跟iOS下是一樣的。所以iOS的切圖可以直接適用於Android的xhdpi模式。至於除hdpi和xhdpi之外的其他模式，如果需要適配，就需要單獨處理圖片了。

要注意的是切圖在縮放之後像素會糊在一起，很可能需要重新調整，還有各種虛邊情況，尤其是那些帶透明陰影的，都要重新調，但是這個工作量顯然要比重新調UI重新切，要小多了。

至此，我們設計一套適配iOS的高保真UI，基於該UI做一套適用於iOS和Android兩類開發人員的標注，再輸出一套可適用於iOS和 Android的xhdpi模式的切圖，再調整一套Android的hdpi模式切圖，基本上大部分工作就已經完成了。

資料來源：博客頻道