@Sophia的玲瓏閣?：《從0到1設(shè)計(jì)一款A(yù)PP》系列文章第四篇，今天說(shuō)說(shuō)APP的視覺(jué)規(guī)范整理完成之后，該如何針對(duì)現(xiàn)在完成度比較高的文件進(jìn)行整理、圖片資源的輸出、和開(kāi)發(fā)人員的項(xiàng)目對(duì)接。

往期回顧：

1. 《設(shè)計(jì)師怎樣從零開(kāi)始設(shè)計(jì)一款A(yù)PP？》
2. 《從零開(kāi)始設(shè)計(jì)一款A(yù)PP之如何做原型圖》
3. 《基礎(chǔ)小課堂！從零開(kāi)始教你做高保真原型圖+UI 設(shè)計(jì)規(guī)范》

文件整理

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

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

先說(shuō)文件夾吧，一個(gè)項(xiàng)目建立起來(lái)時(shí)，我會(huì)根據(jù)項(xiàng)目進(jìn)展的時(shí)間順序，將文件夾分為以上幾個(gè)大的分類(lèi)。

01 Wireframe即low-fi文件的地址

02 Visual Flow是Hi-fi地址

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

03 UI Kits是圖片資源輸出的地址（比如說(shuō)icon）

04 Documents并不是產(chǎn)品文檔，而是APP里面需要的一些文檔，比方說(shuō)《服務(wù)條款》等；

05 App icon即APP的icon在各個(gè)平臺(tái)上需要的尺寸圖和它的源文件，尺寸常備1024x1024px，512x512px，167x167px，152x152px，120x120px，80x80px，58x58px(可以參考相關(guān)iOS規(guī)范)；

06 Video Templates是有視頻文件的情況下放置視頻；

07 AppStoreScreenShot專(zhuān)門(mén)為screenshot進(jìn)行準(zhǔn)備的，因?yàn)榘沧科脚_(tái)實(shí)在太多了；

08 Lauch Card因?yàn)樵赨I層面上需要耗費(fèi)的時(shí)間比較多，一般在改版的時(shí)候放在比較靠后的需求，所以也可以單列出來(lái)。

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

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

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

圖片資源的輸出

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

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

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

和開(kāi)發(fā)的對(duì)接

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

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

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

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

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

作者簡(jiǎn)介：Sophia的玲瓏閣，一枚愛(ài)折騰，愛(ài)健身的交互設(shè)計(jì)妹紙。

職場(chǎng)設(shè)計(jì)技能，更多教程搶先看，請(qǐng)關(guān)注作者的微信公眾號(hào)：「Sophia的玲瓏閣」

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

1. 《新年自學(xué)計(jì)劃！寫(xiě)給UI設(shè)計(jì)新人的知識(shí)體系指南》
2. 《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
3. 《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com