今天跟大家說的就是iOS版的切圖和標(biāo)注。為什么我們移動(dòng)APP設(shè)計(jì)師完成設(shè)計(jì)稿之后，還要進(jìn)行切圖和標(biāo)注呢？ 有些牛逼的ios程序員可以自己切圖自己弄。呵呵

首先我們要明白：標(biāo)注和切圖的作用是，ios開發(fā)會(huì)按照標(biāo)注的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。這個(gè)是減少后期修改的規(guī)范，也算是移動(dòng)設(shè)計(jì)切圖規(guī)范。

只有這樣，我們才能與iOS客戶端開發(fā)人員進(jìn)行快速的產(chǎn)品迭代和優(yōu)化。

必須了解：我們移動(dòng)APP設(shè)計(jì)師需要交付給ios開發(fā)哪些文件.

iOS和Android開發(fā)需要的設(shè)計(jì)交付物至少要有：高保真UI圖，標(biāo)注，切圖。

嚴(yán)格的來說，這3樣是必不可少的。

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

?第一步：在你設(shè)計(jì)的高保真UI圖的基礎(chǔ)上溝通。

目前來說，絕大多數(shù)還是以640*1136px這個(gè)尺寸為基準(zhǔn)來做設(shè)計(jì)稿的。

雖然iphone 6和iphone6 plus 橫空出世那么久了。網(wǎng)上也有很多關(guān)于以這2個(gè)為設(shè)計(jì)的帖子和博文。這里就不過多的羅嗦。

有興趣的朋友可以閱讀：

1、APP切圖流程和APP切圖命名規(guī)范詳細(xì)完整版

2、在線自動(dòng)生成.9png圖的Android設(shè)計(jì)切圖工具推薦

3、最新iOS APP界面設(shè)計(jì)和APP切圖適配思路解析

4、APP界面設(shè)計(jì)切圖進(jìn)階教程|靜電設(shè)計(jì)干貨分享

5、APP設(shè)計(jì)和切圖基本知識(shí)點(diǎn)以及注意事項(xiàng)

當(dāng)設(shè)計(jì)稿完成之后，必須把高保真UI圖發(fā)給開發(fā)。高保真UI圖所起到的作用是，開發(fā)會(huì)參照其畫頁面和想一些可行性的交互設(shè)計(jì)。

這個(gè)過程，也許是你和開發(fā)達(dá)成好基友的最佳時(shí)間。

這個(gè)期間，你們可以達(dá)成一樣什么的切圖和標(biāo)注規(guī)范是很重要的。在這個(gè)關(guān)系的指導(dǎo)下，我們可以在同一套UI圖上做適用于兩個(gè)平臺(tái)的標(biāo)注和切圖。減少自己的工作量，同時(shí)也讓開發(fā)了解設(shè)計(jì)的需求和想法。

?第二步：根據(jù)?高保真UI圖進(jìn)行標(biāo)注，標(biāo)注完成之后可進(jìn)行切圖。

平臺(tái)的區(qū)別要留意，例如iOS使用十進(jìn)制色值，Android使用16進(jìn)制，iOS可以繪制圓角和陰影，Android更傾向于用.9.png等。這些差異要在同一套標(biāo)注中體現(xiàn)出來，讓兩端的開發(fā)各取所需。

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

第1步：根據(jù)你們溝通的結(jié)果，自我判斷。

可以大致的看下這個(gè)APP設(shè)計(jì)界面，哪些是必須切圖的，哪些是不需要的。

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

這個(gè)一般有2種切法：（有默認(rèn)和選中之后的效果）

?

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

?

由于頂部導(dǎo)航欄的是多顏色的，所以只能切一整條給技術(shù)，商圈的圖標(biāo)要單獨(dú)切出來。

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

?

3、二級(jí)標(biāo)題欄目的切圖：

??

?

4、主體欄目的切圖：

?

5、標(biāo)注文字大小和行間距：

需要注意的：

A：我們標(biāo)注的尺寸是像素px，技術(shù)那邊的實(shí)際運(yùn)用到技術(shù)中的是像素的一半，即像素的一半=技術(shù)的尺寸；例如：“分類”2個(gè)字，我標(biāo)準(zhǔn)的是36px，技術(shù)那邊的尺寸就是18px；

B：所有文字，行間距的標(biāo)注的尺寸都是偶數(shù)；因?yàn)榧夹g(shù)那邊都是根據(jù)我們的尺寸除以2；

C：顏色的標(biāo)注有的技術(shù)要求16進(jìn)制，有的技術(shù)要求RGB，由于頁面的限制所以我只標(biāo)注了16進(jìn)制的，按16進(jìn)制和RGB都標(biāo)注的是最好的~?

進(jìn)行到這里。你應(yīng)該把APP切圖方法學(xué)會(huì)了。如果還沒有，可以點(diǎn)擊閱讀上面提到的各自切圖教程。或者加我們網(wǎng)站底部的APP設(shè)計(jì)群，來主動(dòng)發(fā)問。

而且上面我們所講的是ios 5s的的尺寸設(shè)計(jì)的。如何去適配iphone6 ?和iphone6plus 可以參考《iPhone 6/6Plus UI界面設(shè)計(jì)和適配尺寸規(guī)范》和iPhone 6/6Plus APPui界面設(shè)計(jì)規(guī)范以及界面適配