U姐有話要說

大多數(shù)時(shí)候，我們每天晚上都忙著畫圖、修改稿子，很少對(duì)工作中的一些問題和技巧進(jìn)行梳理、總結(jié)和思考。 善于總結(jié)和反省，可以達(dá)到事半功倍的效果。 明天U姐會(huì)和男同伴們分享她在設(shè)計(jì)上的一些經(jīng)驗(yàn)和方法。 本文匯集了以上6篇文章的精華，希望能給您帶來一些幫助。

目前業(yè)界對(duì)于iOS的設(shè)計(jì)規(guī)范也參差不齊。 很多還是6設(shè)備和ios9系統(tǒng)，最新的是7和iOS10（更新真快）。 我這里說的是最新的iOS界面設(shè)計(jì)規(guī)范（設(shè)計(jì)規(guī)范，我們上次看到過）

U姐列出了一個(gè)小目錄：

1、項(xiàng)目審批

2.預(yù)計(jì)項(xiàng)目時(shí)間

3. 界面設(shè)計(jì)

四、切割圖表示

5. 視覺恢復(fù)

6. 啟動(dòng)計(jì)劃

1. 項(xiàng)目審批

我是一名UI設(shè)計(jì)師，所以U姐這里說的就是從設(shè)計(jì)師的角度來討論一下，在從零開始創(chuàng)建APP的過程中，設(shè)計(jì)師應(yīng)該做什么。

如果你在一家團(tuán)隊(duì)比較完善的公司，當(dāng)項(xiàng)目立項(xiàng)時(shí)，所有相關(guān)人員（產(chǎn)品王、運(yùn)營貓、設(shè)計(jì)獅、程序員等）都會(huì)聚集在一起，召開產(chǎn)品發(fā)布會(huì)。 產(chǎn)品王會(huì)講解項(xiàng)目原型、市場監(jiān)督分析、市場需求、產(chǎn)品定位、盈利模式等具體功能模塊和跳轉(zhuǎn)邏輯，一起討論交流原型，改進(jìn)并建立不足，然后評(píng)估項(xiàng)目時(shí)間，然后就可以復(fù)工了

注意：在講解產(chǎn)品、演示原型時(shí)，一定要仔細(xì)聆聽，充分理解整個(gè)邏輯。 如果你有疑問或者不明白，一定要提出疑問并讓產(chǎn)品來解答，否則你的設(shè)計(jì)稿可能存在邏輯錯(cuò)誤。

這個(gè)時(shí)候我們就可以開始一個(gè)新的項(xiàng)目，并做好初步的計(jì)劃。

我個(gè)人建立項(xiàng)目的習(xí)慣是用“項(xiàng)目名稱+版本號(hào)”來命名文件夾，因?yàn)檫@些技巧很方便我管理和查找項(xiàng)目文件。 有些設(shè)計(jì)師可能會(huì)將所有文件放在一個(gè)文件夾中。 如果文件少一點(diǎn)就好了。 如果文件多了，那么你就會(huì)哭，甚至不知道它是哪個(gè)版本的文件。

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

這里是原文鏈接，暫時(shí)不支持收藏

此情此景，我只想唱一首詩：乙方虐我千遍，我待乙方如初戀，終有一天我會(huì)是乙方，虐遍天下設(shè)計(jì)院。

我個(gè)人的習(xí)慣是用“文件名+修改日期+修改次數(shù)”來命名。 比如“.10”是最終版本，4月12日產(chǎn)品說要在首頁添加通知，所以我的文件是“.12”，前后已經(jīng)改了3次，也就是“.12.3”一目了然，很容易找到要改的文件。

立項(xiàng)的時(shí)候，我只需要向開發(fā)的男伙伴解釋一下，他們自然就知道這個(gè)文件是最終版本。

在這里，U姐很嚴(yán)肅的提醒大家，不要把修改稿全部刪除，絕對(duì)不要?jiǎng)h除，絕對(duì)不要?jiǎng)h除（重要的事情已經(jīng)說了3遍了），每一次修改都是在文案的基礎(chǔ)上進(jìn)行的，因?yàn)槲覀兏牧撕芏喔遄又?，乙方可能?huì)說“第一版還好，還是回到第一版吧”（不要吐血，不要砸筆記本），所以請(qǐng)?jiān)谖陌干线M(jìn)行修改。

有人會(huì)說我有ctrl+Z，我不怕，姐姐你告訴你不要依賴ctrl+Z，如果你從來沒有改變過偏好，默認(rèn)歷史記錄只有20步，最大是200步，如果你設(shè)置了200步，就不怕PS卡死機(jī)那也是好事

還有一點(diǎn)需要補(bǔ)充的是，項(xiàng)目的版本控制也非常重要。 我使用的項(xiàng)目版本控制軟件是SVN，管理項(xiàng)目文件方便高效，并且可以與本地項(xiàng)目文件同步。 即使我的筆記本電腦掛了，或者安裝系統(tǒng)后誤將所有C盤降級(jí)，我也不用擔(dān)心。 我只需要同步更新SVN在線文件并返回即可。 關(guān)于SVN這里就不多說了。

2. 項(xiàng)目預(yù)計(jì)時(shí)間

目前，我們已經(jīng)收到了PRD文件和原型。 不用擔(dān)心打開PS圖紙，因?yàn)轫?xiàng)目的開發(fā)需要時(shí)間。 為了更高效地完成開發(fā)進(jìn)度，整個(gè)團(tuán)隊(duì)需要估算項(xiàng)目時(shí)間。 作為UI來說，很簡單，就是統(tǒng)計(jì)頁數(shù)，看看總共有多少頁，然后詳細(xì)估算一下……

U姐舉個(gè)栗子。 比如我收到的一個(gè)APP項(xiàng)目，總共有70頁左右。 （納尼！70頁，天哪，別驚訝，70頁對(duì)于一個(gè)APP來說根本不算多）

這時(shí)候，也許老板和產(chǎn)品會(huì)問你需要多長時(shí)間才能畫完圖，別急著回答，你需要先考慮所有的頁面，他們會(huì)沒完沒了地催你，因?yàn)樗麄兗庇谏暇€占領(lǐng)市場，他們恨不得你每天加班畫圖，然后上線； 不用擔(dān)心催你，讓他們?cè)趺创呔驮趺创撸ㄈ绻阆朐俅吣?，也可以說：催你麻痹，快點(diǎn)，你畫畫，開個(gè)玩笑而已，你要是敢，那你就真的NB了）

1. 識(shí)別重要頁面

什么是重要頁面？ 在現(xiàn)在看風(fēng)格的時(shí)代，面子是最重要的，首頁就是一個(gè)APP的臉面； 頁面布局中有許多主要部分共享相同的布局結(jié)構(gòu)，這也是一個(gè)重要的頁面。 以首頁為例，你可能需要花費(fèi)2天的時(shí)間才能完成。 一切都需要2天時(shí)間，因?yàn)槟氵€需要確定主色調(diào)、設(shè)計(jì)風(fēng)格、圖標(biāo)設(shè)計(jì)等，并保證質(zhì)量（如果有人認(rèn)為你慢，你就毀了他：如果你想快，那就提高質(zhì)量。如果有問題，你負(fù)責(zé)，啦啦啦~~）

我們都知道，魚和熊掌不可兼得。 我們既要速度快，又要高質(zhì)量。 不可能同時(shí)保證兩者，也很難平衡

然后選擇一個(gè)重要的頁面，估計(jì)一下時(shí)間，然后就這樣推送。 雖然首頁確定了，但是整個(gè)APP的設(shè)計(jì)風(fēng)格也基本確立了，做其他頁面就容易多了。

2. 過濾重復(fù)頁面

在一個(gè)APP中，雖然有很多頁面具有相似的部分結(jié)構(gòu)，所以70個(gè)頁面如果這樣過濾掉，可能只是一半，而30個(gè)頁面是不重復(fù)的。

插一句：在畫圖的過程中，你不能100%保證不會(huì)有其他任務(wù)，而且肯定會(huì)有一些額外的設(shè)計(jì)任務(wù)，所以不要把時(shí)間估計(jì)得恰到好處，除非你特別確定不會(huì)有額外的設(shè)計(jì)任務(wù)。

因此，剩下的30頁，按照我的速度，如果我允許足夠的時(shí)間（比實(shí)際預(yù)計(jì)時(shí)間多大約30%-50%），我需要大約2周的時(shí)間才能完成。

3. 總體預(yù)計(jì)時(shí)間

當(dāng)30個(gè)主要頁面的時(shí)間確定后，現(xiàn)在應(yīng)該包括其余重復(fù)頁面的時(shí)間。 剩下的40個(gè)相當(dāng)于批次。 一周內(nèi)就可以穩(wěn)定購買。 不要把時(shí)間估計(jì)得太短，因?yàn)槟悴恢览习蹇赡軙?huì)扔給你一些東西讓你去做，但你仍然非常急切地需要它。 最后只能哭泣

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

按照我預(yù)計(jì)的時(shí)間，在訂單不穩(wěn)定的情況下，也能應(yīng)對(duì)突發(fā)的設(shè)計(jì)任務(wù)，大約需要3周的時(shí)間才能完成。 這里U姐是沒有100%加班的預(yù)估時(shí)間。

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

一般來說，如果是比較小的特殊頁面設(shè)計(jì)，我一般估計(jì)3天，包括靈感、構(gòu)思、參考、設(shè)計(jì)、修改。

如果是網(wǎng)站，有五級(jí)頁面，大約5個(gè)頁面，需要5天左右； 詳細(xì)信息可以根據(jù)頁數(shù)等進(jìn)行估算。

3. 界面設(shè)計(jì)

我是一名UI設(shè)計(jì)師，所以U姐這里說的就是從設(shè)計(jì)師的角度來討論一下，在從零開始創(chuàng)建APP的過程中，設(shè)計(jì)師應(yīng)該做什么。

目前，行業(yè)內(nèi)APP界面設(shè)計(jì)規(guī)范水平也參差不齊。 很多還停留在6設(shè)備和ios9系統(tǒng)上，最新的是7和iOS10（更新真快）。 我這里說的是最新的iOS界面設(shè)計(jì)規(guī)范（設(shè)計(jì)規(guī)范，我們上次看到過）

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

古語云：工欲善其事，必先利其器。 好的工具可以讓我們的工作更有效率。 我們?cè)诮缑嬖O(shè)計(jì)中使用最多的是PS和AI。 如果你是Mac用戶，可以嘗試一下。 軟件版本其實(shí)是推薦的。 高版本，因?yàn)楣δ芨鼜?qiáng)大，繪圖速度會(huì)更快。

我個(gè)人是從8.0開始接觸ps，8.0-CS4-CS5-CS6-CC--，一直到最新的。 深深的感覺到新版本更加好用了。 您也可以根據(jù)個(gè)人習(xí)慣選擇適合自己的工具。

2、設(shè)計(jì)稿規(guī)格

在看設(shè)計(jì)稿的規(guī)格之前，我們先來了解一下APP界面設(shè)計(jì)的構(gòu)成

界面由：布局層、圖形布局層和圖標(biāo)層組成。

在6發(fā)布之前，所有設(shè)計(jì)稿都是用px制作的。 自6發(fā)布以來，所有設(shè)計(jì)稿規(guī)范均使用px作為設(shè)計(jì)稿規(guī)范。

U姐再給大家展示一下，目前為止的所有規(guī)格（不用考慮1-3代）：

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

手機(jī)型號(hào)

4/4S

5/5C/5S

6/6S/7

6P/6SS/7P

幀率

像素

像素

像素

像素

放大

@2X

@2X

@2X

@3X

邏輯幀率

點(diǎn)

化學(xué)規(guī)格

像素

像素

像素

像素

屏幕密度

深度PI

163

163

163

154

接口規(guī)格：

設(shè)備

幀率

質(zhì)子泵抑制劑

狀態(tài)欄高度

導(dǎo)航欄高度

標(biāo)簽欄高度

6P/6SP/7P

像素

60像素

132像素

146像素

6/6S/7

像素

40像素

88像素

98像素

5/5C/5S

像素

40像素

88像素

98像素

4/4S

像素

40像素

88像素

98像素

1/2/3代

像素

20像素

44像素

49像素

以其作為設(shè)計(jì)稿標(biāo)準(zhǔn)規(guī)范的原因：

1、從中間規(guī)格向下和向上適配時(shí)，接口調(diào)節(jié)范圍最小，適配最方便。

2、大屏?xí)r代，仍然采用小規(guī)格作為設(shè)計(jì)規(guī)格，這會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。

3、版本設(shè)計(jì)時(shí)，只需進(jìn)行極少的設(shè)計(jì)調(diào)整，即可提高設(shè)計(jì)效率。

所以請(qǐng)來制作設(shè)計(jì)稿

在文檔中建立參考線是一個(gè)好習(xí)慣。 我希望你也能養(yǎng)成這個(gè)習(xí)慣。 設(shè)置和關(guān)閉都很容易。 我習(xí)慣將左右距離設(shè)置為24px。 我和國外很多app對(duì)比了一下。 結(jié)論是24px比較合理。

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

這里U姐就為大家跳過iPad的設(shè)計(jì)規(guī)格：

設(shè)備

碼率

質(zhì)子泵抑制劑

狀態(tài)欄高度

導(dǎo)航欄高度

標(biāo)簽欄高度

iPad3-4-5-6-Air-Air2-mini2

像素

40像素

88像素

98像素

iPad1-2

像素

20像素

44像素

49像素

小型平板電腦

像素

20像素

44像素

49像素

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

圖標(biāo)規(guī)格：

設(shè)備

應(yīng)用商店

主屏幕

搜索

標(biāo)簽欄

工具欄和導(dǎo)航欄

6P/6SP/7P

6/6S/7

5/5C/5S

4/4S

1/2/3代

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

設(shè)計(jì)規(guī)格：可采用黃金比例設(shè)計(jì)

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

我們來看看字體的歷史演變

iOS9：中文字體為Neue

iOS9：英文字體改為Holly Black

↓↓↓

iOS10：中文字體為San

iOS10：英文字體為

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

底部操作欄文字大小 34-38px

標(biāo)題文字大小 28-34px

正文文字大小 26-30px

輔助文字大小 20-24 像素

標(biāo)簽欄文字大小 20px

文字大小只是一個(gè)范圍，要根據(jù)設(shè)計(jì)的視覺效果來確定，不要死記硬背，但記住字體大小應(yīng)該是奇數(shù)。

4. 剪圖說明

切片工具和標(biāo)記工具

1、切削工具：

一款PS插件，剪切圖片非常方便，但是不支持紅色免安裝版PS，而且對(duì)PS版本要求比較高，而且還沒有針對(duì)CS6進(jìn)行維護(hù)和更新。 建議安裝官方完整版PSCC及以上版本。 最新版本是3.2.0版本。

要安裝該軟件包并使用教程，請(qǐng)單擊此處：

官方地址：

PS也是一款對(duì)PS進(jìn)行切割、打標(biāo)的插件，也被稱為利器； 我用過，感覺還不錯(cuò)，而且切割打標(biāo)的體驗(yàn)還是不高，PS的其他輔助功能還是很不錯(cuò)的，比如參考線輔助、圓角大小、磁鐵功能等。

2. 標(biāo)注工具：

（Pixel Chef）是一款用于切割圖形的設(shè)計(jì)工具軟件。 從2.0.0版本開始，支持手動(dòng)智能識(shí)別PSD文件的文字、顏色、距離。

優(yōu)點(diǎn)是打標(biāo)和切割兩種設(shè)計(jì)完成后集成在一個(gè)軟件中標(biāo)你妹 sketch，并且支持Mac和Mac雙平臺(tái)。 標(biāo)注功能包括：支持寬度、顏色、面積、文字標(biāo)注； 從2.0.0版本開始，整體效率大幅提升，值得推薦人工智能識(shí)別打標(biāo)。

請(qǐng)點(diǎn)擊此處安裝包并使用教程：

，并且來自同一家公司，您可以手動(dòng)估算規(guī)格、距離、文字大小、陰影、描邊圓角、線條高度等信息，并根據(jù)您的需求進(jìn)行標(biāo)記。 大大節(jié)省了您的標(biāo)記時(shí)間，大大提高了設(shè)計(jì)效率。 （U姐還是用它來標(biāo)記一下）

不過它并不是免費(fèi)的，而是一個(gè)收費(fèi)軟件，需要60元。

也是一款高效的設(shè)計(jì)稿標(biāo)記工具。 支持Win/Mac，可以免費(fèi)使用基本功能。 免費(fèi)版的體驗(yàn)并不令人滿意。 雖然是免費(fèi)的，但如果需要中間功能，則需要支付60元。

上述工具各有優(yōu)點(diǎn)和缺點(diǎn)。 選擇主要看個(gè)人習(xí)慣。 選擇易于使用的一款。

3. 頁面標(biāo)記

標(biāo)簽非常重要。 開發(fā)姐姐能否完美還原設(shè)計(jì)稿很大程度上取決于我們的標(biāo)注； 不會(huì)標(biāo)記的一定要和開發(fā)姐姐交流！

溝通是解決問題特別有效的方法！

這里我就粗略的說一下我的標(biāo)注習(xí)慣。 沒有必要對(duì)每個(gè)療效圖進(jìn)行標(biāo)注，只要你標(biāo)注的頁面能夠保證每個(gè)頁面的開發(fā)能夠順利進(jìn)行即可。

以我標(biāo)記的頁面為例：

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

① 文字：字體大小、字體顏色

② 布局控件屬性：控制寬高、背景色、透明度、描邊、圓角大小

③ 列表：列表高度、列表顏色、列表內(nèi)容的上下寬度

④ ：控件之間的距離、左右行距

⑤ 段落文字：字體大小、字體顏色、行距

⑥所有屬性：比如導(dǎo)航欄的文字大小和顏色、左右行距、默認(rèn)寬度等，可以提前和開發(fā)姐姐約定好，不需要注明。

所有頁面標(biāo)記的匯總為：標(biāo)記文本、標(biāo)記寬度、標(biāo)記大小、標(biāo)記區(qū)域

注：表示顏色格式是使用16的補(bǔ)碼（如：#），還是RGB（255,0,0）？ 你需要和開發(fā)姐商量一下，開放他的開發(fā)習(xí)慣，一般使用16補(bǔ)色值。

4、剪切接口

我還是以圖片為例：（有圖有真相）

.png→1-3代手機(jī)（已考慮）

@2x.png→/4S/5/5S/6/6S/7對(duì)應(yīng)規(guī)格，這就是我們一般所說的2x圖像

@3x.png→/6SP/7P使用的規(guī)格，這是3倍圖

可以簡單理解為多重關(guān)系。 如果用（6/6S/7）規(guī)格做設(shè)計(jì)稿，那么切塊的輸出是@2x，縮小2倍是@1x，擴(kuò)大1.5倍是@3x。

我總結(jié)了一些切圖時(shí)經(jīng)常遇到的問題：

A. 哪些資源需要削減，哪些資源不需要削減？

① 只要是難以用代碼實(shí)現(xiàn)和表達(dá)的，就需要截圖

②如果你實(shí)在不知道要不要剪圖，多和開發(fā)者溝通，他會(huì)告訴你需要剪什么圖片

B. 我需要切割多少套？ （這里我只以iOS為標(biāo)準(zhǔn)，我會(huì)在上一期講）

①理論上我們需要裁剪3組圖片才能更好的適配。

②實(shí)際工作中，iOS只需要剪切兩組圖片，即：@2x和@3x

C. 剪切后的圖片如何命名，不知道怎么命名怎么辦？

我之前寫過一篇關(guān)于界面摳圖命名規(guī)范的文章，請(qǐng)戳：

注意：剪圖時(shí)有幾點(diǎn)需要注意：

①剪切圖片輸出格式必須為24位png、8位png、jpg格式。

②同一個(gè)模塊中，剪切圖片的大小要一致

③剪切圖像的輸出尺寸必須保持為奇數(shù)

④為了減小包的大小標(biāo)你妹 sketch，所有切好的圖片在沖印前都要盡可能的壓縮（包越小，你老板越高興，不然我就給你多發(fā)年終獎(jiǎng)）

我還寫過一篇關(guān)于圖像壓縮的文章，如果你還不了解，請(qǐng)點(diǎn)擊下面：

這就是切割和標(biāo)簽的全部內(nèi)容。 如果您在工作中不知道如何切割或標(biāo)記，請(qǐng)多與開發(fā)人員溝通。 良好的溝通是解決問題的唯一途徑。 不要獨(dú)自思考； 如果您有疑問和疑問也可以給U留言。 上一期見！

5. 視覺恢復(fù)

一個(gè)完整的APP會(huì)經(jīng)歷這樣的流程：立項(xiàng)→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)療效圖→進(jìn)入開發(fā)階段→開發(fā)成功后進(jìn)入測試階段→測試并將問題反饋給開發(fā)者調(diào)試→多次測試確認(rèn)沒有Bug→提交市場并正式上線。

我們都知道，無論設(shè)計(jì)師的規(guī)格稿多么準(zhǔn)確，開發(fā)出來的產(chǎn)品都會(huì)存在一定程度的偏差。 專業(yè)來說就是視覺效果的還原程度。 視覺還原度越高、越接近設(shè)計(jì)稿，APP越精細(xì)； 否則，情況會(huì)更糟。

所以這個(gè)時(shí)候我們就需要配合開發(fā)調(diào)整UI，從而更加接近我們做的療效圖（簡單來說，就是給開發(fā)挑毛病，強(qiáng)調(diào)和療效圖不符的地方，很高興嗎？）

1px的差別，我也想摘下來（像素眼就是這樣做出來的）

1、設(shè)計(jì)師如何進(jìn)行視覺還原？

A.設(shè)計(jì)視覺調(diào)整文件

如果團(tuán)隊(duì)規(guī)模較大，建議設(shè)計(jì)一篇視覺調(diào)整文章，這樣會(huì)提高整體的開發(fā)進(jìn)度和效率。 由于團(tuán)隊(duì)人數(shù)較多，不可能你搬到iOS開發(fā)姐姐那里說需要調(diào)整一次，然后再告訴她一次。 你有時(shí)間，但別人可能沒有時(shí)間，所以設(shè)計(jì)視覺調(diào)整優(yōu)化文檔是很有必要的。

視覺調(diào)整優(yōu)化文檔應(yīng)該一目了然。 需要注明與療效圖的差異在哪里，應(yīng)該改什么，是iOS調(diào)整、調(diào)整還是h5調(diào)整等。輸出為png或jpg格式，最好是PDF格式，開發(fā)看起來方便。 比如寫了顏色值，開發(fā)可以直接復(fù)制

B. 帶上你的板凳，根據(jù)過去的開發(fā)情況調(diào)整UI

這些技術(shù)非常適合 3-4 人的小團(tuán)隊(duì)。 親自上陣，口授問題，效率比較高。 您需要準(zhǔn)備好您的療效圖和開發(fā)后的原型。 有對(duì)比就會(huì)有傷害（有圖有真相，差異必須通過開發(fā)來改變）

2、如何實(shí)現(xiàn)療效圖的高度還原？

A. 標(biāo)準(zhǔn)可視化界面設(shè)計(jì)

需要根據(jù)各平臺(tái)的UI設(shè)計(jì)規(guī)范來規(guī)范設(shè)計(jì)界面，并利用設(shè)計(jì)規(guī)范來理解開發(fā)，這是增強(qiáng)視覺還原的基本前提

B.可視化UI控件的規(guī)范輸出

大多數(shù)情況下，為了趕上項(xiàng)目進(jìn)度，都是先接口，后發(fā)布設(shè)計(jì)規(guī)范，所以需要盡可能保持接口設(shè)計(jì)和規(guī)范同時(shí)進(jìn)行。

根據(jù)u姐目前的項(xiàng)目經(jīng)驗(yàn)，可以先輸出基本的控制元素規(guī)范，包括（顏色、文本、圖標(biāo)、遮罩、投影、按鈕、輸入框，或者一些控件）。 規(guī)范是一項(xiàng)龐大而復(fù)雜的工作，需要耐心； 流程注重每一個(gè)細(xì)節(jié)的準(zhǔn)確性和合理性。

C. 切割規(guī)范，打標(biāo)準(zhǔn)確

我們的切割和標(biāo)注是否規(guī)范、準(zhǔn)確，直接影響視覺效果的還原程度，所以切割和標(biāo)注一定要仔細(xì)，這樣更有利于提高還原度

D. 多元與發(fā)展溝通

U姐還是說了一句話：溝通是解決問題最有效的方法，所以要多和開發(fā)姐接觸、溝通。 如果條件允許，請(qǐng)坐開發(fā)； 遇到問題及時(shí)面對(duì)面協(xié)商解決，達(dá)成共識(shí)，修改、定型、解決。

6. 線上計(jì)劃

當(dāng)一個(gè)APP開發(fā)完成并通過測試后，就需要計(jì)劃提交，很快就會(huì)上線。 在上線之前，我們的設(shè)計(jì)師也需要配合，做一些上線前的工作。 U姐帶你看看需要做什么工作？

1.應(yīng)用程序圖標(biāo)（）

A、iOS 圖標(biāo)：

這些是iOS開發(fā)工具Xcode提供的（應(yīng)用程序圖標(biāo)）的規(guī)范（這是U姐專門請(qǐng)開發(fā)者寫這篇文章的，而且U姐和開發(fā)的關(guān)系很好），乍一看是不是嚇了一跳？ 開發(fā)是根據(jù)iOS系統(tǒng)的版本來設(shè)定的，但是你是設(shè)計(jì)師，你是根據(jù)iOS的版本來畫的，所以雖然沒有那么多，但實(shí)際上我的開發(fā)同學(xué)要求的是以下規(guī)格：

因?yàn)樾枰膱D標(biāo)太多了，不可能全部添加，所以只能選擇最好的規(guī)格。 開發(fā)姐姐讓我提供以下圖標(biāo)規(guī)格：

（高清屏）

（普通屏幕的）

6及以下主屏規(guī)格

6plus 的主屏幕圖標(biāo)規(guī)范

58x58搭配

80x80 上

注意：這里需要注意的是，iOS系統(tǒng)可以手動(dòng)將圖片裁剪成圓角，所以在提交圖標(biāo)時(shí)，只需要提交正圓的PNG格式即可。

我們來看看蘋果官方的規(guī)范

B、圖標(biāo)：

的圖標(biāo)比 iOS 少。 我們只需要提供幾個(gè)規(guī)格，還需要添加2套，一套是圓角的，一套是直角的，因?yàn)橛行┑胤綍?huì)用到。

由于的機(jī)型較多，不同屏幕密度的手機(jī)對(duì)應(yīng)的圖標(biāo)大小也不同，所以U姐無法給你對(duì)應(yīng)圖標(biāo)應(yīng)用的位置。

2. 啟動(dòng)頁面（圖片）

這些也是iOS開發(fā)工具Xcode（啟動(dòng)頁）提供的各種規(guī)范。 我們需要向開發(fā)工程師提供4個(gè)規(guī)格：

4/4秒

5/5s/5c/SE

6/6S/7

6plus//7plus

6plus//7plus橫向規(guī)格，如果我們的APP支持橫向模式，則需要?jiǎng)?chuàng)建橫向啟動(dòng)頁面。

注意：啟動(dòng)頁必須為 PNG 格式。 建議在沖印前對(duì)所有圖片進(jìn)行壓縮。

3. 商店頁面（圖片）

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

這是您需要添加商店頁面的地方。 商店頁面最多可以有5個(gè)png或jpg格式，還支持視頻格式

這是化肥APP的店鋪推廣頁面：

對(duì)于下面其他商店頁面規(guī)格的添加頁面，我們一開始就必須提供4組規(guī)格：

前不久，iOS開發(fā)老爺爺告訴我，現(xiàn)在商店頁面只需要制定一套規(guī)范： ，就可以了，為我們減少了很多工作量

這是蘋果官方商店頁面規(guī)范：

應(yīng)用市場有很多，但總體比較一致。 我們需要為商店頁面提供兩套規(guī)范：

,

U姐給大家回顧一下整個(gè)APP開發(fā)流程：

一個(gè)完整的APP會(huì)經(jīng)歷這樣的流程：立項(xiàng)→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)療效圖→進(jìn)入開發(fā)階段→開發(fā)成功后進(jìn)入測試階段→測試并將問題反饋給開發(fā)者調(diào)試→多次測試確認(rèn)沒有Bug→提交市場并正式上線。

當(dāng)上線時(shí)，我們還需要制定一些基本計(jì)劃：

設(shè)烏木案堂一間，香三炷，紫砂香爐一盞。 午時(shí)，氣，拜三遍。 三炷香燒完后，就可以成功上線了。 這是必不可少的，所以不要忘記它！ ！ ！

以上就是《從0到1的APP設(shè)計(jì)》iOS系列的全部內(nèi)容，希望對(duì)您有很大的幫助； U姐在這里講的是一種工作方式，好的工作方式可以事半功倍，而且在具體工作中也要靈活運(yùn)用。 一定要多和開發(fā)者溝通。 良好的溝通是解決問題的唯一途徑。 如果還有疑問也可以給U姐留言。

U姐已經(jīng)把所有字體、插件等都打包好了。

如有侵權(quán)請(qǐng)聯(lián)系刪除！