@Sophia的玲瓏閣?：《從0到1設計一款APP》系列文章第四篇，今天說說APP的視覺規范整理完成之后，該如何針對現在完成度比較高的文件進行整理、圖片資源的輸出、和開發人員的項目對接。

往期回顧：

1. 《設計師怎樣從零開始設計一款APP？》
2. 《從零開始設計一款APP之如何做原型圖》
3. 《基礎小課堂！從零開始教你做高保真原型圖+UI 設計規范》

文件整理

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

文件的整理分為文件夾和最終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的玲瓏閣，一枚愛折騰，愛健身的交互設計妹紙。

職場設計技能，更多教程搶先看，請關注作者的微信公眾號：「Sophia的玲瓏閣」

「想自學UI ，建議閱讀這3篇精華文章」

1. 《新年自學計劃！寫給UI設計新人的知識體系指南》
2. 《超實用新手指南！零基礎如何自學UI設計？》
3. 《交互設計師修煉指南！教你從零開始成為優秀交互設計師》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com