系列|一款A(yù)PP設(shè)計(jì)的從0到1:上線準(zhǔn)備篇

4 評論 13763 瀏覽 97 收藏 9 分鐘

《一款A(yù)PP設(shè)計(jì)的從0到1》這是一篇系列文章干貨,上次U妹講的是關(guān)于視覺還原篇,今天是系列的最后一篇文章,U妹來說一下上線準(zhǔn)備篇。

這次U妹接著上次的茬,繼續(xù)之前先來看看整個目錄(滿滿的干貨)

U妹列了一個小小的目錄:

一、項(xiàng)目立項(xiàng)(點(diǎn)擊查看)

二、項(xiàng)目預(yù)估時(shí)間(點(diǎn)擊查看)

三、界面設(shè)計(jì)

四、切圖標(biāo)注

五、視覺還原

六、上線準(zhǔn)備

當(dāng)一款A(yù)PP開發(fā)完畢,測試通過,這時(shí)候就需要準(zhǔn)備提交正式上線了,但是在上線之前,我們設(shè)計(jì)師還需要配合,做一些上線前的工作,U妹帶你來看一看需要做哪些工作?

一、應(yīng)用圖標(biāo)(APP Icon)

1. iOS icon:

這是iOS開發(fā)工具Xcode提供的APP Icon (應(yīng)用圖標(biāo))的各項(xiàng)尺寸(這是U妹為了寫這篇文章專門找開發(fā)要的,U妹和開發(fā)的關(guān)系可是很不錯的),咋一看是不是嚇一跳?開發(fā)是按照iOS的系統(tǒng)版本來設(shè)置的,但你是設(shè)計(jì)師,你是按照iPhone的版本來作圖的,所以其實(shí)沒有那么多,真實(shí)情況下,我的開發(fā)同事要求提供以下幾個尺寸:

因?yàn)樾枰膱D標(biāo)非常多,不可能全部加進(jìn)去,只能選擇最好的尺寸,我的開發(fā)哥哥要求我提供以下圖標(biāo)尺寸:

1024×1024 ? ? ? ? ? ? ?Retina APP Icon for APP Store(高清屏的APP Store)

512×512 ? ? ? ? ? ? ? ? ?APP Icon for APP Store(普通屏幕的APP Store)

120×120 ? ? ? ? ? ? ? ? ?6以及以下的主屏幕尺寸

180×180 ? ? ? ? ? ? ? ? ?6 plus的主屏幕圖標(biāo)尺寸

58×58 ? ? ? ? ? ? ? ? ? ? ?Settings on devices with retina display

87×87 ? ? ? ? ? ? ? ? ? ? ?Settings on iPhone 6 Plus

80×80 ? ? ? ? ? ? ? ? ? ? ?Spotlight on devices with retina display

注意:這里需要注意一下,iOS系統(tǒng)可以自動把圖片裁剪為圓角,所以提交圖標(biāo)的時(shí)候,你只需要提交正方形的PNG格式即可。

我們來看看蘋果官方的APP icon規(guī)范:

2. Android icon:

安卓的圖標(biāo)相對iOS來說較少,我們只需提供一下幾個尺寸就可以了,但是需要提高2套,圓角和直角各一套,因?yàn)橛械牡胤蕉紩玫健?br />

512x512px

192x192px

144x144px

96x96px

72x72px

48x48px

因?yàn)榘沧坑泻芏嗟臋C(jī)型,不同屏幕密度的手機(jī)對應(yīng)的icon大小也是不同的,所以U妹這里沒法給你給出相應(yīng)的icon所被應(yīng)用的位置。

二、啟動頁(Launch Image)

這同樣也是iOS開發(fā)工具Xcode提供的LaunchImage(啟動頁)的各項(xiàng)尺寸,我們需要提供4種尺寸給的開發(fā)工程師:

640×960 px? ? ? ? ?iPhone 4/4s

640×1136 px? ? ? ?iPhone 5/5s/5c/SE

750×1334 px? ? ? ?iPhone 6/6S/7

1242×2208 px? ? ?iPhone 6 plus/6S plus/7 plus

2208×1242 px ? ? iPhone 6 plus/6S plus/7 plus的橫屏尺寸,如果我們的APP支持橫屏模式,你就需要做一張橫屏的啟動頁。

注意:啟動頁面一定要是PNG格式的,建議給開發(fā)之前講圖片全部壓縮一下。

三、商店頁(Launch Image)

這是蘋果官方上線提交頁面,在這里你需要上傳APP圖標(biāo),版本號和應(yīng)用描述等信息。

這里就是需要添加商店頁的地方,商店頁最多為5張,格式為png或jpg文件格式,并且還支持視頻格式

這是農(nóng)藥APP的商店宣傳頁:

下面其他商店頁尺寸的添加頁面,在最之前我們都要提供4套尺寸:

前不久,iOS開發(fā)哥哥告訴我,現(xiàn)在商店頁只需做一套尺寸:750x1334px,就ok了,為我們減少了很多的工作量

這是蘋果官方的商店頁規(guī)范:

安卓應(yīng)用市場有很多,但總體來來說相對比較一致,安卓的商店頁我們是需要提供2套尺寸的:

480x854px、 720x1280px

U妹再給大家回顧一下整個APP的開發(fā)流程:

一款完整的APP,經(jīng)過這樣的一個流程:項(xiàng)目立項(xiàng)啟動→設(shè)計(jì)產(chǎn)品原型→設(shè)計(jì)效果圖→進(jìn)入開發(fā)階段→開發(fā)成功后進(jìn)入測試階段→測試將問題反饋給開發(fā)人員進(jìn)行調(diào)試→多次測試確認(rèn)沒有bug→提交市場、正式上線。

當(dāng)要上線時(shí),我們還需做點(diǎn)必不可少的準(zhǔn)備:

設(shè)楠木案堂,三支靈香,紫砂香爐,于申時(shí)燃?xì)?,叩首三次,待三炷香燃盡,方可成功上線,此缺一不可,切記切記?。。?/strong>

關(guān)于《一款A(yù)PP設(shè)計(jì)的從0到1》的iOS系列就全部講完了,希望可以給你有很大的幫助;U妹這里說的只是一種工作方法,好的工作方法才能自己事半功倍,在具體工作中也要靈活擁有,一定要多和開發(fā)溝通交流,良好的溝通才是解決問題的唯一方法。

相關(guān)閱讀

系列|一款A(yù)PP設(shè)計(jì)的從0到1:項(xiàng)目立項(xiàng)篇

系列|一款A(yù)PP設(shè)計(jì)的從0到1:項(xiàng)目預(yù)估時(shí)間篇

系列|一款A(yù)PP設(shè)計(jì)的從0到1:界面設(shè)計(jì)篇

系列|一款A(yù)PP設(shè)計(jì)的從0到1:切圖標(biāo)注篇

系列|一款A(yù)PP設(shè)計(jì)的從0到1:視覺還原篇

 

作者:U妹,一個不要命的UI設(shè)計(jì)師,等你,來撩妹喲

來源:微信公眾號“UI妹兒”(ID:UIfaner)

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

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. U妹,你長的這么好看,還這么有才,我要和你生猴子

    來自廣東 回復(fù)
  2. 文案缺失:
    1.更新說明
    2.產(chǎn)品描述
    頁面缺失:
    1.引導(dǎo)頁(或者叫l(wèi)oading頁面)需要替換
    2.是否需要新增功能引導(dǎo)

    以上個人看法。 ??

    來自重慶 回復(fù)
  3. 撩。

    來自廣東 回復(fù)