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

今天說說APP的視覺規(guī)范整理完成之后，接下來，設(shè)計師的主要任務(wù)吧。視覺規(guī)范整理之后，咱們要針對現(xiàn)在完成度比較高的文件進(jìn)行整理、圖片資源的輸出、和開發(fā)人員的項目對接。

文件整理

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

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

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

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

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

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

整體文件夾的架構(gòu)如下圖

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

Sketch文件一般按照頁面進(jìn)行功能模塊的分類進(jìn)行整理，symbol是統(tǒng)一以上page所有控件的地方，如下圖

圖片資源的輸出

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

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

另外一個就是圖片要注意壓縮。因為現(xiàn)在一個APP的安裝包很容易就到了幾十兆的體積。對于用戶來說當(dāng)然是希望安裝包越小越好，一是節(jié)約下載時間（可能也有流量），二是解壓后所占手機(jī)內(nèi)存更小。所以作為設(shè)計師也要配合工程師進(jìn)行這方面工作的優(yōu)化。將圖片進(jìn)行壓縮，樓主一般采用軟件ImageOptim或者在線網(wǎng)戰(zhàn)TinyPNG（適合圖片透明區(qū)域比較多的情況）。

和開發(fā)的對接

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

設(shè)計師不能松一口氣，這個時候開發(fā)童鞋可能會提各方面的疑問和意見，當(dāng)然產(chǎn)品到了這個階段大方向是不會改變了，設(shè)計師可能在最后hi-fi的基礎(chǔ)上補充一些細(xì)節(jié)內(nèi)容。大會過后，產(chǎn)品就會進(jìn)入開發(fā)階段。這個時候設(shè)計師也不能完全松一口氣，因為會有開發(fā)人員隨時來問你一些Corner Case（也就是邊緣情況）的考慮。

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

當(dāng)然在對接的過程中也會有很多細(xì)節(jié)，比方說現(xiàn)在樓主接收到的挑戰(zhàn)，將統(tǒng)一產(chǎn)品線的三個APP全部統(tǒng)一到一個Sketch文件標(biāo)注出其中的相同點和不同點，方便開發(fā)和QA童鞋進(jìn)行翻閱等等問題，針對這些細(xì)節(jié)，樓主再一點點更新。

總結(jié)，在Hi-fi和視覺規(guī)范整理完成后之后，設(shè)計師的任務(wù)還沒有百分百完成，估計也只完成了60%，也千萬不能松口氣，知道等到APP真正產(chǎn)出的那一瞬間才是暫時階段性完成一個任務(wù)的時期。設(shè)計師除了要負(fù)責(zé)好設(shè)計自己的方案之外，還需要跟蹤設(shè)計方案落實到位的過程。當(dāng)然那一時刻的成就感不亞于自己得了一個什么獎?wù)?，不信試試看?/p>

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

相關(guān)閱讀

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（一）——概述》

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（二）——立項》

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（三）——Low-fi輸出》

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（四）——Hi-fi輸出（上篇）》

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（四）——Hi-fi輸出（下篇）》

《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（五）——UI規(guī)范整理》