創業公司設計師怎樣從0到1設計一款APP——整理和交接工作

系列文章第六篇，收到許多讀者的反饋，大多數是正面的，一部分讀者給樓主提意見，想讓樓主再寫細緻一點。這也在樓主的計劃之中，先是概述整個設計的過程，接著針對過程中遇到的每一個小點進行細緻地扣，從整體到局部，從概述到細節，從表象到本質。一方面是讓讀者有更多的收穫，另一方面是整理自己的思維，逼著自己將事情做到極致，而不是差不多的程度。所以，小夥伴們耐心等待一下樓主的更文~

今天說說APP的視覺規範整理完成之後，接下來，設計師的主要任務吧。視覺規範整理之後，咱們要針對現在完成度比較高的文件進行整理、圖片資源的輸出、和開發人員的項目對接。

文件整理

整理的目的一方面是為了讓自己和團隊查找文件更加方便；二是讓自己的思維更有邏輯性，工作更加高效；三是樓主有屬於設計師的強迫症（開個玩笑，可以忽略）~

文件的整理分為文件夾和最終Sketch文件的整理。

先說文件夾吧，一個項目建立起來時，樓主會根據項目進展的時間順序，將文件夾分為以上幾個大的分類。

• 01 Wireframe即low-fi文件的地址
• 02 Visual Flow是Hi-fi地址

01與02裡面的分類又有相似的地方，可根據版本再進行一次分類，不需要迭代的可以單獨使用一個文件夾，如下圖。

• 03 UI Kits是圖片資源輸出的地址（比如說icon）
• 04 Documents並不是產品文檔，而是APP裡面需要的一些文檔，比方說《服務條款》等；
• 05 App icon即APP的icon在各個平台上需要的尺寸圖和它的源文件，尺寸常備1024x1024px，512x512px，167x167px，152x152px，120x120px，80x80px，58x58px(可以參考相關iOS規範)；
• 06 Video Templates是有視頻文件的情況下放置視頻；
• 07 AppStoreScreenShot專門為screenshot進行準備的，因為安卓平台實在太多了；
• 08 Lauch Card因為在UI層面上需要耗費的時間比較多，一般在改版的時候放在比較靠後的需求，所以也可以單列出來。

整體文件夾的架構如下圖

大家可以看到，規律就是每個大分類的階段性的文件都放在該版本裡面需要標註版本號，除了更新頻率比較低的或者說不同版本需要共用一個文件夾的地方不會區分版本號，如03和05。

Sketch文件一般按照頁面進行功能模塊的分類進行整理，symbol是統一以上page所有控制項的地方，如下圖

圖片資源的輸出

圖片資源的輸出主要有幾類，一是icon類，二是圖片類。icon的大小一個APP裡面尺寸是固定的幾個大小，一般是以PNG的形式輸出。

因為在hi-fi作圖的時候一般採用二倍的圖，即750x1334px的大小進行icon的繪製，所以只要icon或者圖片的尺寸數在設計的時候不是單數，那麼放到像iPhone 7 Plus這樣三倍的屏幕上也是沒問題的。輸出的時候開發一般2倍和3倍的圖都需要。

另外一個就是圖片要注意壓縮。因為現在一個APP的安裝包很容易就到了幾十兆的體積。對於用戶來說當然是希望安裝包越小越好，一是節約下載時間（可能也有流量），二是解壓后所佔手機內存更小。所以作為設計師也要配合工程師進行這方面工作的優化。將圖片進行壓縮，樓主一般採用軟體ImageOptim或者在線網戰TinyPNG（適合圖片透明區域比較多的情況）。

和開發的對接

在hi-fi文件定下來之後，需要跟開發童鞋集體過一遍。這個時候首先要召開一下集體的會議，參會人員包括PM、設計師、開發童鞋、TPM，Boss可能也會參加。

設計師不能鬆一口氣，這個時候開發童鞋可能會提各方面的疑問和意見，當然產品到了這個階段大方向是不會改變了，設計師可能在最後hi-fi的基礎上補充一些細節內容。大會過後，產品就會進入開發階段。這個時候設計師也不能完全鬆一口氣，因為會有開發人員隨時來問你一些Corner Case（也就是邊緣情況）的考慮。

開發人員一邊開發，QA（測試工程師）將完成後的代碼進行測試，兩者同時進行，設計師此時的精力除了要放在這個版本功能的完善之外（還包括實現效果的核對），可能要和PM（產品經理）進行下一個版本討論的問題了。這樣的工作一輪一輪不斷地進行。

當然在對接的過程中也會有很多細節，比方說現在樓主接收到的挑戰，將統一產品線的三個APP全部統一到一個Sketch文件標註出其中的相同點和不同點，方便開發和QA童鞋進行翻閱等等問題，針對這些細節，樓主再一點點更新。

總結，在Hi-fi和視覺規範整理完成後之後，設計師的任務還沒有百分百完成，估計也只完成了60%，也千萬不能鬆口氣，知道等到APP真正產出的那一瞬間才是暫時階段性完成一個任務的時期。設計師除了要負責好設計自己的方案之外，還需要跟蹤設計方案落實到位的過程。當然那一時刻的成就感不亞於自己得了一個什麼獎章，不信試試看！

Sophia的tips：事情不分大小，每個階段都有它自己的使命！