很多時(shí)候，我們都忙碌在每天的擼圖和改稿中，很少的去整理歸納結(jié)和思考工作的一些問(wèn)題和方法，善于總結(jié)反思才能達(dá)到事半功倍的效果。今天U妹在這里將自己在設(shè)計(jì)中的一些經(jīng)驗(yàn)和技巧分享給小伙伴們，這篇文章集合了前面的6篇精華，希望可以給你一定的幫助。

目前在行業(yè)里，關(guān)于iOS的設(shè)計(jì)規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說(shuō)的是最新的iOS 界面設(shè)計(jì)規(guī)范（Android設(shè)計(jì)規(guī)范，我們下次見(jiàn)）

U妹列了一個(gè)小小的目錄：

一、項(xiàng)目立項(xiàng)

二、項(xiàng)目預(yù)估時(shí)間

三、界面設(shè)計(jì)

四、切圖標(biāo)注

五、視覺(jué)還原

六、上線(xiàn)準(zhǔn)備

一、項(xiàng)目立項(xiàng)篇

我是一名UI設(shè)計(jì)師，所以U妹這里說(shuō)的都是從設(shè)計(jì)師的角度去闡述一款A(yù)PP從無(wú)到有的一個(gè)過(guò)程中，設(shè)計(jì)師應(yīng)該干的事。

如果你所在的是一個(gè)團(tuán)隊(duì)健全的公司，在項(xiàng)目立項(xiàng)時(shí)，會(huì)把所有相關(guān)人員（產(chǎn)品汪、運(yùn)營(yíng)喵、設(shè)計(jì)獅、程序猿等）聚在一起開(kāi)產(chǎn)品會(huì)議，產(chǎn)品汪會(huì)講解項(xiàng)目原型、市場(chǎng)調(diào)研分析、市場(chǎng)需求、產(chǎn)品定位、盈利模式等具體的功能模塊和跳轉(zhuǎn)邏輯，一起討論交流原型，不足之處進(jìn)行改進(jìn)完善，然后評(píng)估項(xiàng)目時(shí)間，就可以開(kāi)工了。

注意：在產(chǎn)品講解和演示原型時(shí)，你一定要認(rèn)真聽(tīng)，并且要完全理解整個(gè)邏輯，你有疑惑或者不理解的地方，一定要提出疑問(wèn)，讓產(chǎn)品解答，不然你的設(shè)計(jì)稿可能會(huì)出現(xiàn)邏輯錯(cuò)誤等。

這個(gè)時(shí)候我們就可以新建項(xiàng)目了，做前期準(zhǔn)備了

我個(gè)人的立項(xiàng)建檔習(xí)慣是以“項(xiàng)目名稱(chēng)+版本號(hào)”來(lái)命名文件夾，因?yàn)檫@種方法很方便我管理和查找項(xiàng)目文件。有的設(shè)計(jì)師可能是把所有文件放在一個(gè)文件夾里，如果文件較少還行，當(dāng)文件較多時(shí)，那你要哭了，你都不知道哪個(gè)是哪個(gè)版本的文件了。

反復(fù)改稿對(duì)于設(shè)計(jì)師來(lái)說(shuō)，那是家常便飯啦，當(dāng)一個(gè)頁(yè)面反復(fù)改稿很多次時(shí)（也包括3天2頭就改這種），很多設(shè)計(jì)師的源文件應(yīng)該是這樣的：

初稿、初稿1、初稿2……審定稿、審定稿1……修改稿、修改稿1……最終稿、最終稿1……當(dāng)我看我這樣的源文件時(shí)，我想我會(huì)吐血，因?yàn)樘缓脜^(qū)分，哪個(gè)是上一版，哪個(gè)早一些（在此時(shí)你也看到了設(shè)計(jì)師的真的是很辛苦的，前幾天就又有以為設(shè)計(jì)師加班做題，去了天堂，愿天堂沒(méi)有PS，詳情請(qǐng)戳這里查看）

此情此景我只想吟詩(shī)一首：甲方虐我千百遍，我待甲方如初戀，有朝一日做甲方，虐遍天下設(shè)計(jì)院。?

我個(gè)人的習(xí)慣是以“文件名+改稿日期+改稿次數(shù)”來(lái)命名，舉個(gè)栗子，比如“首頁(yè)_4.10”是最終版，但是4月12日，產(chǎn)品說(shuō)首頁(yè)要再加一個(gè)通知，那我的文件就是“首頁(yè)_4.12”，但是前后又改了3次，那就是“首頁(yè)_4.12.3”一目了然，很容查找要修改的文件。

立項(xiàng)時(shí)我只需要給開(kāi)發(fā)的小伙伴說(shuō)明一下，他們自然會(huì)知道哪個(gè)文件是最終版的。

這里U妹很認(rèn)真的提醒一下各位小伙伴們，所有的修改稿都別刪掉，千萬(wàn)別刪，千千萬(wàn)萬(wàn)別刪掉（重要的事說(shuō)了3遍），每一次的修改都在副本本基礎(chǔ)上修改，因?yàn)楫?dāng)我們改了好多稿后，甲方可能會(huì)說(shuō)“還是第一版好看，回到第一版吧”（不要吐血或砸電腦），所以請(qǐng)千千萬(wàn)萬(wàn)在副本上進(jìn)行修改。

有人會(huì)說(shuō)我有ctrl+Z，我不怕，u妹告訴你千萬(wàn)別指望ctrl+Z，如果你從沒(méi)修改過(guò)首選項(xiàng)，默認(rèn)的歷史記錄只有20步，最大是200步，如果你設(shè)置了200步，不怕PS卡奔潰那也是闊以的

額外再插一句，對(duì)于項(xiàng)目的版本控制也是很重要的，我用的項(xiàng)目版本軟件控制是SVN，管理項(xiàng)目文件方便高效，可以和本地項(xiàng)目文件同步，就算我的電腦掛，或裝系統(tǒng)手誤把所有磁盤(pán)格式化了，我也不用擔(dān)心，我只要同步更新SVN線(xiàn)上文件就都回來(lái)了，關(guān)于SVN這里就不多說(shuō)了。

二、項(xiàng)目預(yù)估時(shí)間篇

此時(shí)此刻，我們已經(jīng)拿到了PRD文檔和原型，先別著急去打開(kāi)PS畫(huà)圖，因?yàn)橐粋€(gè)項(xiàng)目的開(kāi)發(fā)是需要時(shí)間的，為了更高效的完成開(kāi)發(fā)進(jìn)度，整個(gè)團(tuán)隊(duì)都需要預(yù)估項(xiàng)目時(shí)間，作為UI，很簡(jiǎn)單，那就是數(shù)頁(yè)面，看總共有多少個(gè)頁(yè)面，再詳細(xì)預(yù)估……

U妹舉個(gè)栗子，比如接到一個(gè)APP項(xiàng)目，所有頁(yè)面總共有70個(gè)左右，（納尼！70個(gè)頁(yè)面，我的天啦，不要驚訝，70個(gè)頁(yè)面對(duì)于一個(gè)APP來(lái)說(shuō)，一點(diǎn)也不多）

這時(shí)候可能boss和產(chǎn)品會(huì)問(wèn)你多久圖能出完，先別著急答復(fù)，你需要先審視所有頁(yè)面，他們會(huì)沒(méi)完沒(méi)了的催你，因?yàn)樗麄冎鄙暇€(xiàn)，搶占市場(chǎng)，恨不得讓你天天加班作圖，然后搞上線(xiàn)；催你不要管，讓他們盡情催去吧（再催你的話(huà)，你也可以說(shuō)：催你麻痹，你快，你來(lái)畫(huà)，純屬玩笑，如果你敢，那你真NB）

1、確定重要頁(yè)面

何為重要頁(yè)面？在如今看顏值的時(shí)代，臉就是最重要的，首頁(yè)就是一款A(yù)PP的臉；還有很多頁(yè)面布局主體部分共用相同布局結(jié)構(gòu)，這也是重要頁(yè)面。拿首頁(yè)來(lái)說(shuō)，你可能需要花2天時(shí)間來(lái)完成，之所有要用2天，是因?yàn)槟氵€要確定主色、設(shè)計(jì)風(fēng)格、icon設(shè)計(jì)等等，還有就是保證質(zhì)量（如果誰(shuí)嫌你慢，你就折磨懟他：想要快行啊，那就降低質(zhì)量唄，出了問(wèn)題，你負(fù)責(zé)啊，啦啦啦~~）

我們都知道魚(yú)和熊掌不可兼得，既想要快速度，還想要高質(zhì)量，這2者是不可能同時(shí)保證的，也很難去平衡的

然后再挑選一個(gè)重要頁(yè)面，預(yù)估用時(shí)，然后以此類(lèi)推，其實(shí)首頁(yè)確定好后，整個(gè)APP的設(shè)計(jì)風(fēng)格就基本已經(jīng)確立，其他的頁(yè)面做起來(lái)也就容易多了。

2、篩選重復(fù)頁(yè)面

一款A(yù)PP里，其實(shí)有好多頁(yè)面都是局部結(jié)構(gòu)類(lèi)似的，所以70個(gè)頁(yè)面，這樣篩選下來(lái)，估計(jì)也就只有一半，30個(gè)頁(yè)面是不重復(fù)的。

插一句：你在做圖的過(guò)程中，不可能100%保證不會(huì)有其他任務(wù)，肯定會(huì)有一些額外的設(shè)計(jì)任務(wù)，所以，不要把時(shí)間估的剛剛好，除非你非常確定不會(huì)有額外的設(shè)計(jì)任務(wù)。

所以，就這剩余的30個(gè)頁(yè)面，按照我的速度，再留出充足的時(shí)間的話(huà)（在實(shí)際預(yù)估時(shí)間上多30%—50%左右），我大概需要2周時(shí)間完成。

3、整體預(yù)估時(shí)間

當(dāng)確定了30個(gè)主要頁(yè)面的時(shí)間，現(xiàn)在就要把其余的重復(fù)頁(yè)面時(shí)間算進(jìn)來(lái)，剩余的這40個(gè)就相當(dāng)于批量的，一周時(shí)間穩(wěn)穩(wěn)購(gòu)了，千萬(wàn)不要把時(shí)間估的太緊，因?yàn)槟阃耆恢纀oss可能會(huì)在你不經(jīng)意丟給你一個(gè)東西讓你做，而且還是要的很著急的那種，最后哭的只能是你自己了。

審視原型→統(tǒng)計(jì)篩選頁(yè)面→重要頁(yè)面設(shè)計(jì)（30個(gè)）→次頁(yè)面設(shè)計(jì)（40個(gè)）→審稿+改稿→定稿

按照自己的預(yù)估時(shí)間，有序不穩(wěn)，且能夠應(yīng)對(duì)突發(fā)設(shè)計(jì)任務(wù)的情況下，差不多3周時(shí)間完成，這里U妹是在100%不加班的預(yù)估時(shí)間。

4、網(wǎng)頁(yè)設(shè)計(jì)預(yù)估時(shí)間

一般而言，如果是比較大型的專(zhuān)題頁(yè)面設(shè)計(jì)，我一般會(huì)預(yù)估3天時(shí)間，包括從靈感、構(gòu)思、參考、設(shè)計(jì)、修改。

如果是網(wǎng)站，并且有三級(jí)頁(yè)面，大致5個(gè)頁(yè)面左右，大致需要5天時(shí)間；具體可根據(jù)頁(yè)面的多少，依次類(lèi)推進(jìn)行預(yù)估。

三、界面設(shè)計(jì)篇

這里說(shuō)的都是從設(shè)計(jì)師的角度去闡述一款A(yù)PP從無(wú)到有的一個(gè)過(guò)程中，設(shè)計(jì)師應(yīng)該干的事。

目前在行業(yè)里，關(guān)于A(yíng)PP界面設(shè)計(jì)規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說(shuō)的是最新的iOS 界面設(shè)計(jì)規(guī)范（Android設(shè)計(jì)規(guī)范，我們下次見(jiàn)）

1、關(guān)于設(shè)計(jì)工具

俗話(huà)說(shuō)：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計(jì)我們用的最多的就是PS和AI了，如果你是Mac用戶(hù)，可以嘗試一下sketch，軟件的版本當(dāng)然是推薦高版本，因?yàn)楣δ芨鼜?qiáng)大，作圖的速度也就更快。

我個(gè)人剛接觸ps是從8.0開(kāi)始，8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015，一直到現(xiàn)在的最新的CC 2017，深刻體會(huì)，新的版本更好用。也可以根據(jù)個(gè)人習(xí)慣，選擇自己順手的工具就好。

2、設(shè)計(jì)稿尺寸

在看設(shè)計(jì)稿尺寸之前，我們先來(lái)了解一下APP界面設(shè)計(jì)構(gòu)成

界面構(gòu)成由：布局層、圖文排版層和圖標(biāo)層。

在iPhone 6還沒(méi)出的時(shí)候，都是用640×1136 px來(lái)做設(shè)計(jì)稿的，自從6的發(fā)布，所有的設(shè)計(jì)稿尺寸以750×1334 px來(lái)做設(shè)計(jì)稿尺寸

U妹再帶大家來(lái)看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：

iPhone界面設(shè)計(jì)規(guī)范：

iPhone 界面尺寸：

以750x1334px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由：

1. 從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小，最方便適配。
2. 大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。
3. 設(shè)計(jì)安卓版本時(shí)只需做最小的設(shè)計(jì)調(diào)整，提升設(shè)計(jì)效率。

所以做設(shè)計(jì)稿事請(qǐng)以750x1334px來(lái)做設(shè)計(jì)稿

在文檔建立參考線(xiàn)是一個(gè)很好的習(xí)慣，我希望大家也可以養(yǎng)成這個(gè)習(xí)慣，上下很容易設(shè)置，左右我習(xí)慣設(shè)置24 px的距離，我通過(guò)對(duì)國(guó)內(nèi)外很多APP就行了對(duì)比，總結(jié)是24 px更合理，這個(gè)是我的個(gè)人習(xí)慣，所以也不要當(dāng)做是明文規(guī)則，你設(shè)置為30 px，也是可以的。

然后就可以開(kāi)始你的設(shè)計(jì)了

這里U妹再給大家略過(guò)一下iPad的設(shè)計(jì)規(guī)范：

3、圖標(biāo)設(shè)計(jì)規(guī)范

iPhone 圖標(biāo)尺寸：

圖標(biāo)設(shè)計(jì)請(qǐng)用柵格化系統(tǒng)進(jìn)行設(shè)計(jì)

設(shè)計(jì)尺寸：1024x1024px，竟可能的采用黃金比例設(shè)計(jì)

4、關(guān)于設(shè)計(jì)字體

先來(lái)看一下字體的歷史演變過(guò)程

iOS 9：英文字體為Helvetica Neue

iOS 9：中文字體由為冬青黑

↓↓↓

• iOS 10：英文字體為San Francisco
• iOS 10：中文字體為蘋(píng)方

關(guān)于字體大小的問(wèn)題：

• 頂部操作欄文字大小：34-38px
• 標(biāo)題文字大?。?8-34px
• 正文文字大?。?6-30px
• 輔助性文字大小：0-24px
• Tab bar文字大?。?0px

文字大小只是一個(gè)范圍，這要根據(jù)設(shè)計(jì)的視覺(jué)效果來(lái)決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。

四、切圖標(biāo)注篇

1、切圖工具

Cutterman，一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對(duì)PS版本要求比較高，針對(duì)CS 6的已經(jīng)不維護(hù)更新了。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本。

Assistor PS?也是一款PS的切圖標(biāo)注插件，也被譽(yù)為神器；我使用了下，感還可以，但是切圖和標(biāo)注上體驗(yàn)還是不高，但是Assistor PS的其他輔助功能還是很不錯(cuò)的，比如參考線(xiàn)輔助，圓角大小，磁鐵功能。

2、標(biāo)注工具

PxCook（像素大廚），是一款切圖標(biāo)注設(shè)計(jì)工具軟件。自2.0.0版本開(kāi)始，支持PSD文件的文字，顏色，距離自動(dòng)智能識(shí)別。

優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng)設(shè)計(jì)完稿后集成在一個(gè)軟件內(nèi)完成，支持Windows和Mac雙平臺(tái)。標(biāo)注功能包括：支持長(zhǎng)度，顏色，區(qū)域，文字注釋?zhuān)粡?.0.0版本開(kāi)始，整體效率有了很大的提高，值得推薦的是自動(dòng)智能識(shí)別標(biāo)注。

Parker，和cutterman是同一家的，Parker能夠自動(dòng)計(jì)算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時(shí)間，大幅度提升設(shè)計(jì)效率。（U妹現(xiàn)在一直用Parker進(jìn)行標(biāo)注）

但是，parker并不是免費(fèi)的，而是一款付費(fèi)軟件，需要60RMB。

Mark Man，也是一款高效的設(shè)計(jì)稿標(biāo)注工具，支持 Win / Mac, 可免費(fèi)使用基礎(chǔ)功能，免費(fèi)版的在體驗(yàn)上也是差強(qiáng)人意，畢竟是免費(fèi)的，如果需要高級(jí)功能也是需要付費(fèi)的60RMB。

以上工具各有優(yōu)點(diǎn)和缺點(diǎn)，在選擇上主要還是看個(gè)人的習(xí)慣，哪個(gè)用著順手就選擇哪個(gè)。

3、頁(yè)面標(biāo)注

標(biāo)注是非常重要的，開(kāi)發(fā)哥哥能不能完美的的還原設(shè)計(jì)稿，很大一部分取決于我們的標(biāo)注；如果不清楚你該怎么標(biāo)，一定要和開(kāi)發(fā)哥哥溝通！

溝通是非常有效解決問(wèn)題的途徑！

在這里我大致的說(shuō)一下我的標(biāo)注習(xí)慣，不需要將每一張效果圖都進(jìn)行標(biāo)注，你標(biāo)注的頁(yè)面能保證開(kāi)發(fā)能把每個(gè)頁(yè)面都能順利進(jìn)行就可以了。

我拿我標(biāo)注過(guò)的頁(yè)面做個(gè)示例：

我們從上面的標(biāo)注圖可以看出，需要標(biāo)注的內(nèi)容有：

1. 文字：字體大小、字體顏色
2. 布局控件屬性：控件寬高、背景色、透明度、描邊、圓角大小
3. 列表：列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距
4. 間距：控件之間的距離、左右邊距
5. 段落文字：字體大小、字體顏色、行距
6. 全部屬性：如導(dǎo)航欄文字大小、顏色，左右邊距，默認(rèn)間距等，你可以提前跟開(kāi)發(fā)哥哥說(shuō)好，不用標(biāo)注。

所有的頁(yè)面標(biāo)注總結(jié)起來(lái)就是：標(biāo)文字，標(biāo)間距，標(biāo)大小，標(biāo)區(qū)域

注：標(biāo)注顏色格式是使用16進(jìn)制（如：#FF0000），還是RGB（255,0,0）？你需要和開(kāi)發(fā)哥哥商量一下，開(kāi)他的開(kāi)發(fā)習(xí)慣，一般采用16進(jìn)制色值就好了。

4、界面切圖

我還是拿圖舉例來(lái)說(shuō)明：（有圖有真相哈）

• icon_alipay.png→iPhone 1-3代的手機(jī)(已經(jīng)不考慮了)
• icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對(duì)應(yīng)尺寸，這就是我們通常所說(shuō)的2倍圖
• icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖

可以簡(jiǎn)單的理解為倍數(shù)關(guān)系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設(shè)計(jì)稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴(kuò)大1.5倍就是@3x了。

我總結(jié)了一些切圖中常常遇到的問(wèn)題：

（1）到底哪些資源需要切圖，哪些不需要切圖？

• 只要是無(wú)法用代碼來(lái)實(shí)現(xiàn)和表達(dá)出來(lái)的，就需要切圖
• 如果實(shí)在不清楚要不要切圖，多和開(kāi)發(fā)溝通，他會(huì)告訴你哪些是需要你切圖的

（2）切圖需要切幾套？（這里我只以iOS作為標(biāo)準(zhǔn)，安卓下期再說(shuō)）

• 理論上，我們需要切3套圖，是為了更好的適配。
• 在實(shí)際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x

（3）切圖該怎么命名，不會(huì)命名怎么辦？

切圖是需要注意幾點(diǎn)：

1. 切圖輸出格式必須為png24位、png8位、jpg格3種格式
2. 同一模塊內(nèi)，切圖大小應(yīng)保持一致
3. 切圖輸出大小必須保持為偶數(shù)
4. 為了減小包的大小，所有切圖盡量壓縮后在給開(kāi)發(fā)（包越小，你的boss越高興，說(shuō)不好會(huì)給你多發(fā)點(diǎn)年終獎(jiǎng)哈）

關(guān)于切圖和標(biāo)注就說(shuō)到這里了，如果在工作中，不清楚該怎么切怎么標(biāo)的時(shí)候，多和開(kāi)發(fā)溝通交流，良好的溝通才是解決問(wèn)題的唯一方法，切記不要一個(gè)人在那瞎琢磨；有疑問(wèn)和問(wèn)題題也可給U妹留言，我們下期再見(jiàn)！

五、視覺(jué)還原篇

一款完整的APP，經(jīng)過(guò)這樣的一個(gè)流程：項(xiàng)目立項(xiàng)啟動(dòng)→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)效果圖→進(jìn)入開(kāi)發(fā)階段→開(kāi)發(fā)成功后進(jìn)入測(cè)試階段→測(cè)試將問(wèn)題反饋給開(kāi)發(fā)人員進(jìn)行調(diào)試→多次測(cè)試確認(rèn)沒(méi)有bug→提交市場(chǎng)、正式上線(xiàn)。

我們都知道，無(wú)論設(shè)計(jì)師的標(biāo)注稿多精確，開(kāi)發(fā)出來(lái)的產(chǎn)品，多多少少都會(huì)有誤差，專(zhuān)業(yè)來(lái)說(shuō)就是視覺(jué)效果落地還原度，視覺(jué)還原度越高，與設(shè)計(jì)稿越接近，APP就越精細(xì)；反之，就越差。

所以，就需要我們?cè)谶@個(gè)時(shí)候，去配合開(kāi)發(fā)對(duì)UI進(jìn)行調(diào)整，來(lái)更加的接近我們做的效果圖了（簡(jiǎn)單了說(shuō)，就是給開(kāi)發(fā)挑毛病，指出和效果圖不一致的地方，是不是很開(kāi)心哈）

差1px，我也要挑出來(lái)（像素眼就是這樣煉成的）

1、設(shè)計(jì)師如何做視覺(jué)還原？

（1）設(shè)計(jì)視覺(jué)調(diào)整文檔

團(tuán)隊(duì)較大，建議設(shè)計(jì)一份視覺(jué)調(diào)整文章，這樣對(duì)整個(gè)開(kāi)發(fā)進(jìn)度和效率都是比較高的，因?yàn)閳F(tuán)隊(duì)人數(shù)多，你不可能跑到iOS開(kāi)發(fā)哥哥那里說(shuō)一次要調(diào)整的地方，然后再去跟Android哥哥再說(shuō)一次，你有時(shí)間，人家不一定有時(shí)間，所以設(shè)計(jì)視覺(jué)調(diào)整優(yōu)化文檔是很有必要的。

視覺(jué)調(diào)整優(yōu)化文檔，要一目了然，需要注明和效果圖不一樣的地方是哪里，應(yīng)該改成什么樣，是iOS調(diào)整、Android調(diào)整還是h5調(diào)整等，輸出為png和jpg圖片格式，最好輸出為PDF格式，開(kāi)發(fā)看起來(lái)也方便，比如你寫(xiě)了一個(gè)顏色值，開(kāi)發(fā)就可以直接復(fù)制了。

（2）帶上你的板凳，過(guò)去和開(kāi)發(fā)一起調(diào)UI

這種方法很適合3-4人的小團(tuán)隊(duì)，親自上陣，口述問(wèn)題，效率也是比較高的，你需要備好你的效果圖和開(kāi)發(fā)后的雛形，有對(duì)比才有傷害（有圖有真相，不一樣的地方就得讓開(kāi)發(fā)改）

2、如何讓效果圖高還原度落地？

（1）規(guī)范的視覺(jué)界面設(shè)計(jì)

必須按照各平臺(tái)的UI設(shè)計(jì)規(guī)范去規(guī)范的設(shè)計(jì)界面，用設(shè)計(jì)規(guī)范去知道開(kāi)發(fā)，才是提高視覺(jué)還原的的基本前提

（2）視覺(jué)UI控件的規(guī)范輸出

在絕大多數(shù)的情況下，為了趕項(xiàng)目進(jìn)度，都是界面先行，設(shè)計(jì)規(guī)范后出，所以要竟可能的保持界面設(shè)計(jì)和規(guī)范是同步進(jìn)行。

以u(píng)妹目前的項(xiàng)目經(jīng)驗(yàn)，可以先輸出基礎(chǔ)控件元素規(guī)范，包括（顏色、文字、圖標(biāo)、蒙板、投影、按鈕、輸入框、或個(gè)別控件），規(guī)范是一個(gè)龐大而繁瑣，極需耐心的工作；過(guò)程中注重每一個(gè)細(xì)節(jié)的精準(zhǔn)與合理性。

（3）規(guī)范的切圖與精確的標(biāo)注

我們的切圖和標(biāo)注，是否規(guī)范和精確，直接影響視覺(jué)效果的還原度，所以切圖和標(biāo)注一定要做的細(xì)致，這樣更加有利于提升還原度

（4）多和開(kāi)發(fā)溝通交流

U妹一直說(shuō)的一句話(huà)：溝通是解決問(wèn)題的最有效方法，所以多和開(kāi)發(fā)哥哥接觸溝通交流，如果有條件允許的話(huà)，請(qǐng)與開(kāi)發(fā)坐一起；遇到問(wèn)題及時(shí)面對(duì)面協(xié)商解決、達(dá)成共識(shí)、修改、敲定、解決。

六、上線(xiàn)準(zhǔn)備篇

當(dāng)一款A(yù)PP開(kāi)發(fā)完畢，測(cè)試通過(guò)，這時(shí)候就需要準(zhǔn)備提交正式上線(xiàn)了，但是在上線(xiàn)之前，我們?cè)O(shè)計(jì)師還需要配合，做一些上線(xiàn)前的工作，U妹帶你來(lái)看一看需要做哪些工作？

1、應(yīng)用圖標(biāo)（APP Icon）

（1） iOS icon

這是iOS開(kāi)發(fā)工具Xcode提供的APP Icon (應(yīng)用圖標(biāo))的各項(xiàng)尺寸（這是U妹為了寫(xiě)這篇文章專(zhuān)門(mén)找開(kāi)發(fā)要的，U妹和開(kāi)發(fā)的關(guān)系可是很不錯(cuò)的），咋一看是不是嚇一跳？開(kāi)發(fā)是按照iOS的系統(tǒng)版本來(lái)設(shè)置的，但你是設(shè)計(jì)師，你是按照iPhone的版本來(lái)作圖的，所以其實(shí)沒(méi)有那么多，真實(shí)情況下，我的開(kāi)發(fā)同事要求提供以下幾個(gè)尺寸：

因?yàn)樾枰膱D標(biāo)非常多，不可能全部加進(jìn)去，只能選擇最好的尺寸，我的開(kāi)發(fā)哥哥要求我提供以下圖標(biāo)尺寸：

1024×1024?????????????????Retina APP Icon for APP Store(高清屏的APP Store)

512×512?????????????????????APP Icon for APP Store（普通屏幕的APP Store）

120×120? ? ? ? ? ? ? ? ? ? 6以及以下的主屏幕尺寸

180×180?????????????????????6 plus的主屏幕圖標(biāo)尺寸

58×58?????????????????????????Settings on devices with retina display

87×87?????????????????????????Settings on iPhone 6 Plus

80×80?????????????????????????Spotlight on devices with retina display

注意：這里需要注意一下，iOS系統(tǒng)可以自動(dòng)把圖片裁剪為圓角，所以提交圖標(biāo)的時(shí)候，你只需要提交正方形的PNG格式即可。

我們來(lái)看看蘋(píng)果官方的APP icon規(guī)范：

（2）Android icon

安卓的圖標(biāo)相對(duì)iOS來(lái)說(shuō)較少，我們只需提供一下幾個(gè)尺寸就可以了，但是需要提高2套，圓角和直角各一套，因?yàn)橛械牡胤蕉紩?huì)用到。

• 512x512px
• 192x192px
• 144x144px
• 96x96px
• 72x72px
• 48x48px

因?yàn)榘沧坑泻芏嗟臋C(jī)型，不同屏幕密度的手機(jī)對(duì)應(yīng)的icon大小也是不同的，所以U妹這里沒(méi)法給你給出相應(yīng)的icon所被應(yīng)用的位置。

2、啟動(dòng)頁(yè)（Launch Image）

這同樣也是iOS開(kāi)發(fā)工具Xcode提供的LaunchImage(啟動(dòng)頁(yè))的各項(xiàng)尺寸，我們需要提供4種尺寸給的開(kāi)發(fā)工程師：

640x960px?? ? ? ? ? ? ? ? ? iPhone 4/4s

640x1136px?????????????????iPhone 5/5s/5c/SE

750x1334px?????????????????iPhone 6/6S/7

1242x2208px? ? ? ? ? ? ? ?iPhone 6 plus/6S plus/7 plus

2208x1242px? ? ? ? ? ? ? ?iPhone 6 plus/6S plus/7 plus的橫屏尺寸，如果我們的APP支持橫屏模式，你就需要做一張橫屏的啟動(dòng)頁(yè)。

注意：?jiǎn)?dòng)頁(yè)面一定要是PNG格式的，建議給開(kāi)發(fā)之前講圖片全部壓縮一下。

3、商店頁(yè)（Launch Image）

這是蘋(píng)果官方上線(xiàn)提交頁(yè)面，在這里你需要上傳APP圖標(biāo)，版本號(hào)和應(yīng)用描述等信息。

這里就是需要添加商店頁(yè)的地方，商店頁(yè)最多為5張，格式為png或jpg文件格式，并且還支持視頻格式

這是“農(nóng)藥”APP的商店宣傳頁(yè)：

下面其他商店頁(yè)尺寸的添加頁(yè)面，在最之前我們都要提供4套尺寸：

前不久，iOS開(kāi)發(fā)哥哥告訴我，現(xiàn)在商店頁(yè)只需做一套尺寸：750x1334px，就ok了，為我們減少了很多的工作量

這是蘋(píng)果官方的商店頁(yè)規(guī)范：

安卓應(yīng)用市場(chǎng)有很多，但總體來(lái)來(lái)說(shuō)相對(duì)比較一致，安卓的商店頁(yè)我們是需要提供2套尺寸的：

• 480x854px
• 720x1280px

U妹再給大家回顧一下整個(gè)APP的開(kāi)發(fā)流程：

一款完整的APP，經(jīng)過(guò)這樣的一個(gè)流程：項(xiàng)目立項(xiàng)啟動(dòng)→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)效果圖→進(jìn)入開(kāi)發(fā)階段→開(kāi)發(fā)成功后進(jìn)入測(cè)試階段→測(cè)試將問(wèn)題反饋給開(kāi)發(fā)人員進(jìn)行調(diào)試→多次測(cè)試確認(rèn)沒(méi)有bug→提交市場(chǎng)、正式上線(xiàn)。

當(dāng)要上線(xiàn)時(shí)，我們還需做點(diǎn)必不可少的準(zhǔn)備：

設(shè)楠木案堂，三支靈香，紫砂香爐，于申時(shí)燃起，叩首三次，待三炷香燃盡，方可成功上線(xiàn)，此缺一不可，切記切記?。。?/strong>