創(chuàng)業(yè)公司設(shè)計(jì)師怎樣從0到1設(shè)計(jì)一款A(yù)PP(六)——整理和交接工作

0 評(píng)論 10340 瀏覽 81 收藏 9 分鐘

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

 

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

文件整理

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

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

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

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

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

 

  • 03 UI Kits是圖片資源輸出的地址(比如說icon)
  • 04 Documents并不是產(chǎn)品文檔,而是APP里面需要的一些文檔,比方說《服務(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專門為screenshot進(jìn)行準(zhǔn)備的,因?yàn)榘沧科脚_(tái)實(shí)在太多了;
  • 08 Lauch Card因?yàn)樵赨I層面上需要耗費(fèi)的時(shí)間比較多,一般在改版的時(shí)候放在比較靠后的需求,所以也可以單列出來。

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

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

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

圖片資源的輸出

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

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

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

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

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

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

開發(fā)人員一邊開發(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è)版本討論的問題了。這樣的工作一輪一輪不斷地進(jìn)行。

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

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

Sophia的tips:事情不分大小,每個(gè)階段都有它自己的使命!

相關(guān)閱讀

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

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

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

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

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

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

專欄作家

作者:Sophiallg,人人都是產(chǎn)品經(jīng)理專欄作家,微信公眾號(hào):Sophia的玲瓏閣。

本文由 @Sophiallg 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

祝給予贊賞的伙伴,2017年發(fā)大財(cái)!
更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!