一款APP設計的從0到1之：iOS篇（精華版）

05-19

來自專欄 UI、UE設計那些事兒

很多時候，我們都忙碌在每天的擼圖和改稿中，很少的去整理歸納結和思考工作的一些問題和方法，善於總結反思才能達到事半功倍的效果。今天U妹在這裡將自己在設計中的一些經驗和技巧分享給小夥伴們，這篇文章集合了前面的6篇精華，希望可以給你一定的幫助。

目前在行業里，關於iOS的設計規範也是層次不齊，很多都還停留在6的設備和ios 9的系統之上，而現在最新的是iphone 7和iOS 10了（更新換代真的很快），我這裡說的是最新的iOS 界面設計規範（Android設計規範，我們下次見）

U妹列了一個小小的目錄：

一、項目立項

二、項目預估時間

三、界面設計

四、切圖標註

五、視覺還原

六、上線準備

一、項目立項篇

我是一名UI設計師，所以U妹這裡說的都是從設計師的角度去闡述一款APP從無到有的一個過程中，設計師應該乾的事。

如果你所在的是一個團隊健全的公司，在項目立項時，會把所有相關人員（產品汪、運營喵、設計獅、程序猿等）聚在一起開產品會議，產品汪會講解項目原型、市場調研分析、市場需求、產品定位、盈利模式等具體的功能模塊和跳轉邏輯，一起討論交流原型，不足之處進行改進完善，然後評估項目時間，就可以開工了。

注意：在產品講解和演示原型時，你一定要認真聽，並且要完全理解整個邏輯，你有疑惑或者不理解的地方，一定要提出疑問，讓產品解答，不然你的設計稿可能會出現邏輯錯誤等。

這個時候我們就可以新建項目了，做前期準備了

我個人的立項建檔習慣是以「項目名稱+版本號」來命名文件夾，因為這種方法很方便我管理和查找項目文件。有的設計師可能是把所有文件放在一個文件夾里，如果文件較少還行，當文件較多時，那你要哭了，你都不知道哪個是哪個版本的文件了。

反覆改稿對於設計師來說，那是家常便飯啦，當一個頁面反覆改稿很多次時（也包括3天2頭就改這種），很多設計師的源文件應該是這樣的：

初稿、初稿1、初稿2…審定稿、審定稿1…修改稿、修改稿1…最終稿、最終稿1……，等等一系列，當我看我這樣的源文件時，我想我會吐血，因為太不好區分，哪個是上一版，哪個早一些（在此時你也看到了設計師的真的是很辛苦的，前幾天就又有以為設計師加班做題，去了天堂，願天堂沒有PS，詳情請戳這裡查看）

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

我個人的習慣是以「文件名+改稿日期+改稿次數」來命名，舉個栗子，比如「首頁_4.10」是最終版，但是4月12日，產品說首頁要再加一個通知，那我的文件就是「首頁_4.12」，但是前後又改了3次，那就是「首頁_4.12.3」一目了然，很容查找要修改的文件。

立項時我只需要給開發的小夥伴說明一下，他們自然會知道哪個文件是最終版的。

這裡U妹很認真的提醒一下各位小夥伴們，所有的修改稿都別刪掉，千萬別刪，千千萬萬別刪掉（重要的事說了3遍），每一次的修改都在副本本基礎上修改，因為當我們改了好多稿後，甲方可能會說「還是第一版好看，回到第一版吧」（不要吐血或砸電腦），所以請千千萬萬在副本上進行修改。

有人會說我有ctrl+Z，我不怕，u妹告訴你千萬別指望ctrl+Z，如果你從沒修改過首選項，默認的歷史記錄只有20步，最大是200步，如果你設置了200步，不怕PS卡奔潰那也是闊以的

額外再插一句，對於項目的版本控制也是很重要的，我用的項目版本軟體控制是SVN，管理項目文件方便高效，可以和本地項目文件同步，就算我的電腦掛，或裝系統手誤把所有磁碟格式化了，我也不用擔心，我只要同步更新SVN線上文件就都回來了，關於SVN這裡就不多說了。

二、項目預估時間篇

此時此刻，我們已經拿到了PRD文檔和原型，先別著急去打開PS畫圖，因為一個項目的開發是需要時間的，為了更高效的完成開發進度，整個團隊都需要預估項目時間，作為UI，很簡單，那就是數頁面，看總共有多少個頁面，再詳細預估……

U妹舉個栗子，比如接到一個APP項目，所有頁面總共有70個左右，（納尼！70個頁面，我的天啦，不要驚訝，70個頁面對於一個APP來說，一點也不多）

這時候可能boss和產品會問你多久圖能出完，先別著急答覆，你需要先審視所有頁面，他們會沒完沒了的催你，因為他們著急上線，搶佔市場，恨不得讓你天天加班作圖，然後搞上線；催你不要管，讓他們盡情催去吧（再催你的話，你也可以說：催你麻痹，你快，你來畫，純屬玩笑，如果你敢，那你真NB）

1、確定重要頁面

何為重要頁面？在如今看顏值的時代，臉就是最重要的，首頁就是一款APP的臉；還有很多頁面布局主體部分共用相同布局結構，這也是重要頁面。拿首頁來說，你可能需要花2天時間來完成，之所有要用2天，是因為你還要確定主色、設計風格、icon設計等等，還有就是保證質量（如果誰嫌你慢，你就折磨懟他：想要快行啊，那就降低質量唄，出了問題，你負責啊，啦啦啦~~）

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

然後再挑選一個重要頁面，預估用時，然後以此類推，其實首頁確定好後，整個APP的設計風格就基本已經確立，其他的頁面做起來也就容易多了。

2、篩選重複頁面

一款APP里，其實有好多頁面都是局部結構類似的，所以70個頁面，這樣篩選下來，估計也就只有一半，30個頁面是不重複的。

插一句：你在做圖的過程中，不可能100%保證不會有其他任務，肯定會有一些額外的設計任務，所以，不要把時間估的剛剛好，除非你非常確定不會有額外的設計任務。

所以，就這剩餘的30個頁面，按照我的速度，再留出充足的時間的話（在實際預估時間上多30%—50%左右），我大概需要2周時間完成。

3、整體預估時間

當確定了30個主要頁面的時間，現在就要把其餘的重複頁面時間算進來，剩餘的這40個就相當於批量的，一周時間穩穩購了，千萬不要把時間估的太緊，因為你完全不知道boss可能會在你不經意丟給你一個東西讓你做，而且還是要的很著急的那種，最後哭的只能是你自己了。

審視原型→統計篩選頁面→重要頁面設計（30個）→次頁面設計（40個）→審稿+改稿→定稿

按照自己的預估時間，有序不穩，且能夠應對突發設計任務的情況下，差不多3周時間完成，這裡U妹是在100%不加班的預估時間。

4、網頁設計預估時間

一般而言，如果是比較大型的專題頁面設計，我一般會預估3天時間，包括從靈感、構思、參考、設計、修改。

如果是網站，並且有三級頁面，大致5個頁面左右，大致需要5天時間；具體可根據頁面的多少，依次類推進行預估。

三、界面設計篇

我是一名UI設計師，所以U妹這裡說的都是從設計師的角度去闡述一款APP從無到有的一個過程中，設計師應該乾的事。

目前在行業里，關於APP界面設計規範也是層次不齊，很多都還停留在6的設備和ios 9的系統之上，而現在最新的是iphone 7和iOS 10了（更新換代真的很快），我這裡說的是最新的iOS 界面設計規範（Android設計規範，我們下次見）

1、關於設計工具

俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟體的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。

我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據個人習慣，選擇自己順手的工具就好。

2、設計稿尺寸

在看設計稿尺寸之前，我們先來了解一下APP界面設計構成

界面構成由：布局層、圖文排版層和圖標層。

在iPhone 6還沒出的時候，都是用640x1136 px來做設計稿的，自從6的發布，所有的設計稿尺寸以750x1334 px來做設計稿尺寸

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

iPhone界面設計規範：

iPhone 界面尺寸：

以750x1334px作為設計稿標準尺寸的原由：

1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。

2. 大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。

3. 設計安卓版本時只需做最小的設計調整，提升設計效率。

所以做設計稿事請以750x1334px來做設計稿

在文檔建立參考線是一個很好的習慣，我希望大家也可以養成這個習慣，上下很容易設置，左右我習慣設置24 px的距離，我通過對國內外很多APP就行了對比，總結是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規則，你設置為30 px，也是可以的。

然後就可以開始你的設計了

這裡U妹再給大家略過一下iPad的設計規範：

3、圖標設計規範

iPhone 圖標尺寸：

圖標設計請用柵格化系統進行設計

設計尺寸：1024x1024px，竟可能的採用黃金比例設計

4、關於設計字體

先來看一下字體的歷史演變過程

iOS 9：英文字體為Helvetica Neue

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

↓↓↓

iOS 10：英文字體為San Francisco

iOS 10：中文字體為蘋方

關於字體大小的問題：

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

標題文字大小 28-34px

正文文字大小 26-30px

輔助性文字大小 20-24px

Tab bar文字大小 20px

文字大小只是一個範圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數。

四、切圖標註篇

切圖工具和標註工具

1、切圖工具：

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

Cutterman安裝包和使用教程，請戳這裡：《cutterman切圖教程（設計師必備）》

Cutterman官方地址：http://www.cutterman.cn/

Assistor PS 也是一款PS的切圖標註插件，也被譽為神器；我使用了下，感還可以，但是切圖和標註上體驗還是不高，但是Assistor PS的其他輔助功能還是很不錯的，比如參考線輔助，圓角大小，磁鐵功能。

2、標註工具：

PxCook（像素大廚），是一款切圖標註設計工具軟體。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動智能識別。

優點在於將標註、切圖這兩項設計完稿後集成在一個軟體內完成，支持Windows和Mac雙平台。標註功能包括：支持長度，顏色，區域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動智能識別標註。

PxCook安裝包和使用教程請戳這裡：《PxCook標註教程（設計師必備）》

Parker，和cutterman是同一家的，Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，並按照你的需要進行標註, 它極大節省你標註的時間，大幅度提升設計效率。（U妹現在一直用Parker進行標註）

但是，parker並不是免費的，而是一款付費軟體，需要60RMB。

Mark Man，也是一款高效的設計稿標註工具，支持 Win / Mac, 可免費使用基礎功能，免費版的在體驗上也是差強人意，畢竟是免費的，如果需要高級功能也是需要付費的60RMB。

以上工具各有優點和缺點，在選擇上主要還是看個人的習慣，哪個用著順手就選擇哪個。

3、頁面標註

標註是非常重要的，開發哥哥能不能完美的的還原設計稿，很大一部分取決於我們的標註；如果不清楚你該怎麼標，一定要和開發哥哥溝通！

溝通是非常有效解決問題的途徑！

在這裡我大致的說一下我的標註習慣，不需要將每一張效果圖都進行標註，你標註的頁面能保證開發能把每個頁面都能順利進行就可以了。

我拿我標註過的頁面做個示例：

我們從上面的標註圖可以看出，需要標註的內容有：

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

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

③ 列表：列表高度、列表顏色、列表內內容上下間距

④ 間距：控制項之間的距離、左右邊距

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

⑥ 全部屬性：如導航欄文字大小、顏色，左右邊距，默認間距等，你可以提前跟開發哥哥說好，不用標註。

所有的頁面標註總結起來就是：標文字，標間距，標大小，標區域

註：標註顏色格式是使用16進位（如：#FF0000），還是RGB（255,0,0）？你需要和開發哥哥商量一下，開他的開發習慣，一般採用16進位色值就好了。

4、界面切圖

我還是拿圖舉例來說明：（有圖有真相哈）

icon_alipay.png→iPhone 1-3代的手機(已經不考慮了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應尺寸，這就是我們通常所說的2倍圖

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖

可以簡單的理解為倍數關係，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設計稿，那麼切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。

我總結了一些切圖中常常遇到的問題：

A、到底哪些資源需要切圖，哪些不需要切圖？

① 只要是無法用代碼來實現和表達出來的，就需要切圖

② 如果實在不清楚要不要切圖，多和開發溝通，他會告訴你哪些是需要你切圖的

B、切圖需要切幾套？（這裡我只以iOS作為標準，安卓下期再說）

① 理論上，我們需要切3套圖，是為了更好的適配。

② 在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x

C、切圖該怎麼命名，不會命名怎麼辦？

之前我專門寫了一篇關於界面切圖命名規範的文章，請戳進去：

《UI設計師必須要知道的界面切圖命名規範（升級版）》

注意：切圖是需要注意幾點：

① 切圖輸出格式必須為png24位、png8位、jpg格3種格式

② 同一模塊內，切圖大小應保持一致

③ 切圖輸出大小必須保持為偶數

④ 為了減小包的大小，所有切圖盡量壓縮後在給開發（包越小，你的boss越高興，說不好會給你多發點年終獎哈）

關於圖片壓縮的文章我也寫過了，你還不知道，請戳下面：

《圖片壓縮不求人，3個親測實用高效的圖片壓縮神器》

關於切圖和標註就說到這裡了，如果在工作中，不清楚該怎麼切怎麼標的時候，多和開發溝通交流，良好的溝通才是解決問題的唯一方法，切記不要一個人在那瞎琢磨；有疑問和問題題也可給U妹留言，我們下期再見！

五、視覺還原篇

一款完整的APP，經過這樣的一個流程：項目立項啟動→設計產品原型→設計效果圖→進入開發階段→開發成功後進入測試階段→測試將問題反饋給開發人員進行調試→多次測試確認沒有bug→提交市場、正式上線。

我們都知道，無論設計師的標註稿多精確，開發出來的產品，多多少少都會有誤差，專業來說就是視覺效果落地還原度，視覺還原度越高，與設計稿越接近，APP就越精細；反之，就越差。

所以，就需要我們在這個時候，去配合開發對UI進行調整，來更加的接近我們做的效果圖了（簡單了說，就是給開發挑毛病，指出和效果圖不一致的地方，是不是很開心哈）

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

1、設計師如何做視覺還原？

A. 設計視覺調整文檔

團隊較大，建議設計一份視覺調整文章，這樣對整個開發進度和效率都是比較高的，因為團隊人數多，你不可能跑到iOS開發哥哥那裡說一次要調整的地方，然後再去跟Android哥哥再說一次，你有時間，人家不一定有時間，所以設計視覺調整優化文檔是很有必要的。

視覺調整優化文檔，要一目了然，需要註明和效果圖不一樣的地方是哪裡，應該改成什麼樣，是iOS調整、Android調整還是h5調整等，輸出為png和jpg圖片格式，最好輸出為PDF格式，開發看起來也方便，比如你寫了一個顏色值，開發就可以直接複製了。

B. 帶上你的板凳，過去和開發一起調UI

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

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

A、規範的視覺界面設計

必須按照各平台的UI設計規範去規範的設計界面，用設計規範去知道開發，才是提高視覺還原的的基本前提

B、視覺UI控制項的規範輸出

在絕大多數的情況下，為了趕項目進度，都是界面先行，設計規範後出，所以要竟可能的保持界面設計和規範是同步進行。

以u妹目前的項目經驗，可以先輸出基礎控制項元素規範，包括（顏色、文字、圖標、蒙板、投影、按鈕、輸入框、或個別控制項），規範是一個龐大而繁瑣，極需耐心的工作；過程中注重每一個細節的精準與合理性。

C、規範的切圖與精確的標註

我們的切圖和標註，是否規範和精確，直接影響視覺效果的還原度，所以切圖和標註一定要做的細緻，這樣更加有利於提升還原度

D、多和開發溝通交流

U妹一直說的一句話：溝通是解決問題的最有效方法，所以多和開發哥哥接觸溝通交流，如果有條件允許的話，請與開發坐一起；遇到問題及時面對面協商解決、達成共識、修改、敲定、解決。

六、上線準備篇

當一款APP開發完畢，測試通過，這時候就需要準備提交正式上線了，但是在上線之前，我們設計師還需要配合，做一些上線前的工作，U妹帶你來看一看需要做哪些工作？

1、應用圖標（APP Icon）

A. iOS icon：

這是iOS開發工具Xcode提供的APP Icon (應用圖標)的各項尺寸（這是U妹為了寫這篇文章專門找開發要的，U妹和開發的關係可是很不錯的），咋一看是不是嚇一跳？開發是按照iOS的系統版本來設置的，但你是設計師，你是按照iPhone的版本來作圖的，所以其實沒有那麼多，真實情況下，我的開發同事要求提供以下幾個尺寸：