今天跟大家說的就是iOS版的切圖和標註。為什麼我們移動APP設計師完成設計稿之後，還要進行切圖和標註呢？ 有些牛逼的ios程式設計師可以自己切圖自己弄。呵呵

首先我們要明白：標註和切圖的作用是，ios開發會按照標註的尺寸，把切圖按照高保真UI圖的擺放方式做到介面上。這個是減少後期修改的規範，也算是移動設計切圖規範。

只有這樣，我們才能與iOS客戶端開發人員進行快速的產品迭代和優化。

必須瞭解：我們移動APP設計師需要交付給ios開發哪些檔案.

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

嚴格的來說，這3樣是必不可少的。

今天，25學堂還是跟大家來舉例說下 ios版的切圖。

 第一步：在你設計的高保真UI圖的基礎上溝通。

目前來說，絕大多數還是以640*1136px這個尺寸為基準來做設計稿的。

雖然iphone 6和iphone6 plus 橫空出世那麼久了。網上也有很多關於以這2個為設計的帖子和博文。這裡就不過多的羅嗦。

有興趣的朋友可以閱讀：

當設計稿完成之後，必須把高保真UI圖發給開發。高保真UI圖所起到的作用是，開發會參照其畫頁面和想一些可行性的互動設計。

這個過程，也許是你和開發達成好基友的最佳時間。

這個期間，你們可以達成一樣什麼的切圖和標註規範是很重要的。在這個關係的指導下，我們可以在同一套UI圖上做適用於兩個平臺的標註和切圖。減少自己的工作量，同時也讓開發瞭解設計的需求和想法。

 第二步：根據 高保真UI圖進行標註，標註完成之後可進行切圖。

平臺的區別要留意，例如iOS使用十進位制色值，Android使用16進位制，iOS可以繪製圓角和陰影，Android更傾向於用.9.png等。這些差異要在同一套標註中體現出來，讓兩端的開發各取所需。

舉例說明：比如下面這個APP列表ui效果圖。

第1步：根據你們溝通的結果，自我判斷。

可以大致的看下這個APP設計介面，哪些是必須切圖的，哪些是不需要的。

1、底部欄目的icon和背景：​

這個一般有2種切法：（有預設和選中之後的效果）

​

2、頂部欄目的背景切圖：

​

由於頂部導航欄的是多顏色的，所以只能切一整條給技術，商圈的圖示要單獨切出來。

文字是不需要切出來的。只需要切背景。640*88px。切圖的元素如下：

​

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

​​

​

4、主體欄目的切圖：

​

5、標註文字大小和行間距：

需要注意的：
A：我們標註的尺寸是畫素px，技術那邊的實際運用到技術中的是畫素的一半，即畫素的一半=技術的尺寸；例如：“分類”2個字，我標準的是36px，技術那邊的尺寸就是18px；
B：所有文字，行間距的標註的尺寸都是偶數；因為技術那邊都是根據我們的尺寸除以2；
C：顏色的標註有的技術要求16進位制，有的技術要求RGB，由於頁面的限制所以我只標註了16進位制的，按16進位制和RGB都標註的是最好的~​

進行到這裡。你應該把APP切圖方法學會了。如果還沒有，可以點選閱讀上面提到的各自切圖教程。或者加我們網站底部的APP設計群，來主動發問。