一款APP設(shè)計的從0到1之:iOS篇(精華版)

5 評論 46367 瀏覽 516 收藏 36 分鐘

很多時候,我們都忙碌在每天的擼圖和改稿中,很少的去整理歸納結(jié)和思考工作的一些問題和方法,善于總結(jié)反思才能達到事半功倍的效果。今天U妹在這里將自己在設(shè)計中的一些經(jīng)驗和技巧分享給小伙伴們,這篇文章集合了前面的6篇精華,希望可以給你一定的幫助。

目前在行業(yè)里,關(guān)于iOS的設(shè)計規(guī)范也是層次不齊,很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上,而現(xiàn)在最新的是iphone 7和iOS 10了(更新?lián)Q代真的很快),我這里說的是最新的iOS 界面設(shè)計規(guī)范(Android設(shè)計規(guī)范,我們下次見)

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

一、項目立項

二、項目預估時間

三、界面設(shè)計

四、切圖標注

五、視覺還原

六、上線準備

一、項目立項篇

我是一名UI設(shè)計師,所以U妹這里說的都是從設(shè)計師的角度去闡述一款APP從無到有的一個過程中,設(shè)計師應該干的事。

如果你所在的是一個團隊健全的公司,在項目立項時,會把所有相關(guān)人員(產(chǎn)品汪、運營喵、設(shè)計獅、程序猿等)聚在一起開產(chǎn)品會議,產(chǎn)品汪會講解項目原型、市場調(diào)研分析、市場需求、產(chǎn)品定位、盈利模式等具體的功能模塊和跳轉(zhuǎn)邏輯,一起討論交流原型,不足之處進行改進完善,然后評估項目時間,就可以開工了。

aef259a815b8a801211d25636bd3.jpg

注意:在產(chǎn)品講解和演示原型時,你一定要認真聽,并且要完全理解整個邏輯,你有疑惑或者不理解的地方,一定要提出疑問,讓產(chǎn)品解答,不然你的設(shè)計稿可能會出現(xiàn)邏輯錯誤等。

這個時候我們就可以新建項目了,做前期準備了

811959a817c4a801211d25b37143.jpg

我個人的立項建檔習慣是以“項目名稱+版本號”來命名文件夾,因為這種方法很方便我管理和查找項目文件。有的設(shè)計師可能是把所有文件放在一個文件夾里,如果文件較少還行,當文件較多時,那你要哭了,你都不知道哪個是哪個版本的文件了。

反復改稿對于設(shè)計師來說,那是家常便飯啦,當一個頁面反復改稿很多次時(也包括3天2頭就改這種),很多設(shè)計師的源文件應該是這樣的:

c18459a815cda8012028a9d03ba5.jpg

初稿、初稿1、初稿2……審定稿、審定稿1……修改稿、修改稿1……最終稿、最終稿1……當我看我這樣的源文件時,我想我會吐血,因為太不好區(qū)分,哪個是上一版,哪個早一些(在此時你也看到了設(shè)計師的真的是很辛苦的,前幾天就又有以為設(shè)計師加班做題,去了天堂,愿天堂沒有PS,詳情請戳這里查看)

fcff59a81118a801211d2524ee01.jpg

此情此景我只想吟詩一首:甲方虐我千百遍,我待甲方如初戀,有朝一日做甲方,虐遍天下設(shè)計院。?

478959a81124a8012028a9e2d858.jpg

我個人的習慣是以“文件名+改稿日期+改稿次數(shù)”來命名,舉個栗子,比如“首頁_4.10”是最終版,但是4月12日,產(chǎn)品說首頁要再加一個通知,那我的文件就是“首頁_4.12”,但是前后又改了3次,那就是“首頁_4.12.3”一目了然,很容查找要修改的文件。

862759a815dca801211d25f21c3b.jpg

立項時我只需要給開發(fā)的小伙伴說明一下,他們自然會知道哪個文件是最終版的。

這里U妹很認真的提醒一下各位小伙伴們,所有的修改稿都別刪掉,千萬別刪,千千萬萬別刪掉(重要的事說了3遍),每一次的修改都在副本本基礎(chǔ)上修改,因為當我們改了好多稿后,甲方可能會說“還是第一版好看,回到第一版吧”(不要吐血或砸電腦),所以請千千萬萬在副本上進行修改。

87df59a8113da8012028a91ac82a.jpg

有人會說我有ctrl+Z,我不怕,u妹告訴你千萬別指望ctrl+Z,如果你從沒修改過首選項,默認的歷史記錄只有20步,最大是200步,如果你設(shè)置了200步,不怕PS卡奔潰那也是闊以的

額外再插一句,對于項目的版本控制也是很重要的,我用的項目版本軟件控制是SVN,管理項目文件方便高效,可以和本地項目文件同步,就算我的電腦掛,或裝系統(tǒng)手誤把所有磁盤格式化了,我也不用擔心,我只要同步更新SVN線上文件就都回來了,關(guān)于SVN這里就不多說了。
674a59a8114ea801211d2586e39d.jpg

二、項目預估時間篇

此時此刻,我們已經(jīng)拿到了PRD文檔和原型,先別著急去打開PS畫圖,因為一個項目的開發(fā)是需要時間的,為了更高效的完成開發(fā)進度,整個團隊都需要預估項目時間,作為UI,很簡單,那就是數(shù)頁面,看總共有多少個頁面,再詳細預估……

U妹舉個栗子,比如接到一個APP項目,所有頁面總共有70個左右,(納尼!70個頁面,我的天啦,不要驚訝,70個頁面對于一個APP來說,一點也不多)

這時候可能boss和產(chǎn)品會問你多久圖能出完,先別著急答復,你需要先審視所有頁面,他們會沒完沒了的催你,因為他們著急上線,搶占市場,恨不得讓你天天加班作圖,然后搞上線;催你不要管,讓他們盡情催去吧(再催你的話,你也可以說:催你麻痹,你快,你來畫,純屬玩笑,如果你敢,那你真NB)

1、確定重要頁面

何為重要頁面?在如今看顏值的時代,臉就是最重要的,首頁就是一款APP的臉;還有很多頁面布局主體部分共用相同布局結(jié)構(gòu),這也是重要頁面。拿首頁來說,你可能需要花2天時間來完成,之所有要用2天,是因為你還要確定主色、設(shè)計風格、icon設(shè)計等等,還有就是保證質(zhì)量(如果誰嫌你慢,你就折磨懟他:想要快行啊,那就降低質(zhì)量唄,出了問題,你負責啊,啦啦啦~~)

4fc359a81185a8012028a97dd39b.jpg

我們都知道魚和熊掌不可兼得,既想要快速度,還想要高質(zhì)量,這2者是不可能同時保證的,也很難去平衡的

然后再挑選一個重要頁面,預估用時,然后以此類推,其實首頁確定好后,整個APP的設(shè)計風格就基本已經(jīng)確立,其他的頁面做起來也就容易多了。

2、篩選重復頁面

一款APP里,其實有好多頁面都是局部結(jié)構(gòu)類似的,所以70個頁面,這樣篩選下來,估計也就只有一半,30個頁面是不重復的。

插一句:你在做圖的過程中,不可能100%保證不會有其他任務,肯定會有一些額外的設(shè)計任務,所以,不要把時間估的剛剛好,除非你非常確定不會有額外的設(shè)計任務。

所以,就這剩余的30個頁面,按照我的速度,再留出充足的時間的話(在實際預估時間上多30%—50%左右),我大概需要2周時間完成。

3、整體預估時間

當確定了30個主要頁面的時間,現(xiàn)在就要把其余的重復頁面時間算進來,剩余的這40個就相當于批量的,一周時間穩(wěn)穩(wěn)購了,千萬不要把時間估的太緊,因為你完全不知道boss可能會在你不經(jīng)意丟給你一個東西讓你做,而且還是要的很著急的那種,最后哭的只能是你自己了。

審視原型→統(tǒng)計篩選頁面→重要頁面設(shè)計(30個)→次頁面設(shè)計(40個)→審稿+改稿→定稿

按照自己的預估時間,有序不穩(wěn),且能夠應對突發(fā)設(shè)計任務的情況下,差不多3周時間完成,這里U妹是在100%不加班的預估時間。

4、網(wǎng)頁設(shè)計預估時間

一般而言,如果是比較大型的專題頁面設(shè)計,我一般會預估3天時間,包括從靈感、構(gòu)思、參考、設(shè)計、修改。

如果是網(wǎng)站,并且有三級頁面,大致5個頁面左右,大致需要5天時間;具體可根據(jù)頁面的多少,依次類推進行預估。

三、界面設(shè)計篇

這里說的都是從設(shè)計師的角度去闡述一款APP從無到有的一個過程中,設(shè)計師應該干的事。

目前在行業(yè)里,關(guān)于APP界面設(shè)計規(guī)范也是層次不齊,很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上,而現(xiàn)在最新的是iphone 7和iOS 10了(更新?lián)Q代真的很快),我這里說的是最新的iOS 界面設(shè)計規(guī)范(Android設(shè)計規(guī)范,我們下次見)

1、關(guān)于設(shè)計工具

俗話說:工欲善其事必先利其器,好的工具可以讓我們的工作效率更高,做界面設(shè)計我們用的最多的就是PS和AI了,如果你是Mac用戶,可以嘗試一下sketch,軟件的版本當然是推薦高版本,因為功能更強大,作圖的速度也就更快。

我個人剛接觸ps是從8.0開始,8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015,一直到現(xiàn)在的最新的CC 2017,深刻體會,新的版本更好用。也可以根據(jù)個人習慣,選擇自己順手的工具就好。

2、設(shè)計稿尺寸

在看設(shè)計稿尺寸之前,我們先來了解一下APP界面設(shè)計構(gòu)成

141359a81610a8012028a9a91c6d.jpg

界面構(gòu)成由:布局層、圖文排版層和圖標層。

在iPhone 6還沒出的時候,都是用640×1136 px來做設(shè)計稿的,自從6的發(fā)布,所有的設(shè)計稿尺寸以750×1334 px來做設(shè)計稿尺寸

113059a811d3a8012028a987480d.jpg

U妹再帶大家來看看,到目前為止所有iPhone的尺寸(1-3代就不用考慮了):

iPhone界面設(shè)計規(guī)范:

9ce659a81b51a801211d2582af02.jpg

iPhone 界面尺寸:

2fbe59a81b68a8012028a90a7e20.jpg

01d959a81624a8012028a93f9f13.jpg

以750x1334px作為設(shè)計稿標準尺寸的原由:

  1. 從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小,最方便適配。
  2. 大屏幕時代依然以小尺寸作為設(shè)計尺寸,會限制設(shè)計師的設(shè)計視角。
  3. 設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整,提升設(shè)計效率。

所以做設(shè)計稿事請以750x1334px來做設(shè)計稿

5fb559a81d32a8012028a90416bc.jpg

b94459a81ba3a8012028a9311281.jpg

d19f59a81b8ea801211d254fb259.jpg

在文檔建立參考線是一個很好的習慣,我希望大家也可以養(yǎng)成這個習慣,上下很容易設(shè)置,左右我習慣設(shè)置24 px的距離,我通過對國內(nèi)外很多APP就行了對比,總結(jié)是24 px更合理,這個是我的個人習慣,所以也不要當做是明文規(guī)則,你設(shè)置為30 px,也是可以的。

15c459a81bb7a801211d2515e4a7.jpg

然后就可以開始你的設(shè)計了

這里U妹再給大家略過一下iPad的設(shè)計規(guī)范:

57bb59a81be1a801211d25dff900.jpg

9b0859a81273a8012028a9dff0e2.jpg

3、圖標設(shè)計規(guī)范

iPhone 圖標尺寸:

d89e59a81647a8012028a97679f7.jpg

b3de59a8165aa801211d25ae1481.jpg

圖標設(shè)計請用柵格化系統(tǒng)進行設(shè)計

設(shè)計尺寸:1024x1024px,竟可能的采用黃金比例設(shè)計

624659a8166ba801211d25a67e2b.jpg

4、關(guān)于設(shè)計字體

先來看一下字體的歷史演變過程

iOS 9:英文字體為Helvetica Neue

iOS 9:中文字體由為冬青黑

↓↓↓

  • iOS 10:英文字體為San Francisco
  • iOS 10:中文字體為蘋方

b61959a812a9a801211d25a5eae0.jpg

關(guān)于字體大小的問題:

  • 頂部操作欄文字大小:34-38px
  • 標題文字大?。?8-34px
  • 正文文字大?。?6-30px
  • 輔助性文字大小:0-24px
  • Tab bar文字大?。?0px

文字大小只是一個范圍,這要根據(jù)設(shè)計的視覺效果來決定,不要死記硬背,但是切記,字體大小要用偶數(shù)。

四、切圖標注篇

1、切圖工具

Cutterman,一款PS的插件,切圖非常方便,但不支持綠色免安裝版本PS,而且對PS版本要求比較高,針對CS 6的已經(jīng)不維護更新了。推薦安裝官方完整版PS CC及以上版本,目前cutterman最新版為3.2.0版本。

04f059a812c0a801211d25a97e5d.jpg

Assistor PS?也是一款PS的切圖標注插件,也被譽為神器;我使用了下,感還可以,但是切圖和標注上體驗還是不高,但是Assistor PS的其他輔助功能還是很不錯的,比如參考線輔助,圓角大小,磁鐵功能。

35f259a81cdba801211d25af3496.jpg

2、標注工具

PxCook(像素大廚),是一款切圖標注設(shè)計工具軟件。自2.0.0版本開始,支持PSD文件的文字,顏色,距離自動智能識別。

優(yōu)點在于將標注、切圖這兩項設(shè)計完稿后集成在一個軟件內(nèi)完成,支持Windows和Mac雙平臺。標注功能包括:支持長度,顏色,區(qū)域,文字注釋;從2.0.0版本開始,整體效率有了很大的提高,值得推薦的是自動智能識別標注。

621959a812d8a8012028a9ef1280.jpg

Parker,和cutterman是同一家的,Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息,并按照你的需要進行標注, 它極大節(jié)省你標注的時間,大幅度提升設(shè)計效率。(U妹現(xiàn)在一直用Parker進行標注)

但是,parker并不是免費的,而是一款付費軟件,需要60RMB。

212259a812e6a801211d25432917.jpg

Mark Man,也是一款高效的設(shè)計稿標注工具,支持 Win / Mac, 可免費使用基礎(chǔ)功能,免費版的在體驗上也是差強人意,畢竟是免費的,如果需要高級功能也是需要付費的60RMB。

19c259a812efa8012028a9f6fadc.jpg

以上工具各有優(yōu)點和缺點,在選擇上主要還是看個人的習慣,哪個用著順手就選擇哪個。

3、頁面標注

標注是非常重要的,開發(fā)哥哥能不能完美的的還原設(shè)計稿,很大一部分取決于我們的標注;如果不清楚你該怎么標,一定要和開發(fā)哥哥溝通!

溝通是非常有效解決問題的途徑!

在這里我大致的說一下我的標注習慣,不需要將每一張效果圖都進行標注,你標注的頁面能保證開發(fā)能把每個頁面都能順利進行就可以了。

我拿我標注過的頁面做個示例:

66fe59a81695a801211d25e6469c.jpg

我們從上面的標注圖可以看出,需要標注的內(nèi)容有:

  1. 文字:字體大小、字體顏色
  2. 布局控件屬性:控件寬高、背景色、透明度、描邊、圓角大小
  3. 列表:列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距
  4. 間距:控件之間的距離、左右邊距
  5. 段落文字:字體大小、字體顏色、行距
  6. 全部屬性:如導航欄文字大小、顏色,左右邊距,默認間距等,你可以提前跟開發(fā)哥哥說好,不用標注。

所有的頁面標注總結(jié)起來就是:標文字,標間距,標大小,標區(qū)域

注:標注顏色格式是使用16進制(如:#FF0000),還是RGB(255,0,0)?你需要和開發(fā)哥哥商量一下,開他的開發(fā)習慣,一般采用16進制色值就好了。

4、界面切圖

我還是拿圖舉例來說明:(有圖有真相哈)

4efe59a81312a8012028a93b179a.jpg

  • icon_alipay.png→iPhone 1-3代的手機(已經(jīng)不考慮了)
  • icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應尺寸,這就是我們通常所說的2倍圖
  • icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,這就是3倍圖

可以簡單的理解為倍數(shù)關(guān)系,如果你使用750x1334px(iPhone 6/6S/7)尺寸做設(shè)計稿,那么切片輸出就是@2x,縮小2倍就是@1x,擴大1.5倍就是@3x了。

我總結(jié)了一些切圖中常常遇到的問題:

(1)到底哪些資源需要切圖,哪些不需要切圖?

  • 只要是無法用代碼來實現(xiàn)和表達出來的,就需要切圖
  • 如果實在不清楚要不要切圖,多和開發(fā)溝通,他會告訴你哪些是需要你切圖的

(2)切圖需要切幾套?(這里我只以iOS作為標準,安卓下期再說)

  • 理論上,我們需要切3套圖,是為了更好的適配。
  • 在實際工作中,iOS只需要切2套圖就可以,分別為:@2x和@3x

5f4859a81327a8012028a9a3b424.jpg

(3)切圖該怎么命名,不會命名怎么辦?

切圖是需要注意幾點:

  1. 切圖輸出格式必須為png24位、png8位、jpg格3種格式
  2. 同一模塊內(nèi),切圖大小應保持一致
  3. 切圖輸出大小必須保持為偶數(shù)
  4. 為了減小包的大小,所有切圖盡量壓縮后在給開發(fā)(包越小,你的boss越高興,說不好會給你多發(fā)點年終獎哈)

關(guān)于切圖和標注就說到這里了,如果在工作中,不清楚該怎么切怎么標的時候,多和開發(fā)溝通交流,良好的溝通才是解決問題的唯一方法,切記不要一個人在那瞎琢磨;有疑問和問題題也可給U妹留言,我們下期再見!

五、視覺還原篇

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

我們都知道,無論設(shè)計師的標注稿多精確,開發(fā)出來的產(chǎn)品,多多少少都會有誤差,專業(yè)來說就是視覺效果落地還原度,視覺還原度越高,與設(shè)計稿越接近,APP就越精細;反之,就越差。

所以,就需要我們在這個時候,去配合開發(fā)對UI進行調(diào)整,來更加的接近我們做的效果圖了(簡單了說,就是給開發(fā)挑毛病,指出和效果圖不一致的地方,是不是很開心哈)

差1px,我也要挑出來(像素眼就是這樣煉成的)

1、設(shè)計師如何做視覺還原?

(1)設(shè)計視覺調(diào)整文檔

團隊較大,建議設(shè)計一份視覺調(diào)整文章,這樣對整個開發(fā)進度和效率都是比較高的,因為團隊人數(shù)多,你不可能跑到iOS開發(fā)哥哥那里說一次要調(diào)整的地方,然后再去跟Android哥哥再說一次,你有時間,人家不一定有時間,所以設(shè)計視覺調(diào)整優(yōu)化文檔是很有必要的。

8c2559a816c9a8012028a9ef38c3.jpg

視覺調(diào)整優(yōu)化文檔,要一目了然,需要注明和效果圖不一樣的地方是哪里,應該改成什么樣,是iOS調(diào)整、Android調(diào)整還是h5調(diào)整等,輸出為png和jpg圖片格式,最好輸出為PDF格式,開發(fā)看起來也方便,比如你寫了一個顏色值,開發(fā)就可以直接復制了。

ce9d59a816d5a801211d251d35d1.jpg

(2)帶上你的板凳,過去和開發(fā)一起調(diào)UI

這種方法很適合3-4人的小團隊,親自上陣,口述問題,效率也是比較高的,你需要備好你的效果圖和開發(fā)后的雛形,有對比才有傷害(有圖有真相,不一樣的地方就得讓開發(fā)改)

2、如何讓效果圖高還原度落地?

(1)規(guī)范的視覺界面設(shè)計

必須按照各平臺的UI設(shè)計規(guī)范去規(guī)范的設(shè)計界面,用設(shè)計規(guī)范去知道開發(fā),才是提高視覺還原的的基本前提

fa1959a816e3a8012028a9170878.jpg

(2)視覺UI控件的規(guī)范輸出

在絕大多數(shù)的情況下,為了趕項目進度,都是界面先行,設(shè)計規(guī)范后出,所以要竟可能的保持界面設(shè)計和規(guī)范是同步進行。

ecb659a81395a801211d25bc31a7.jpg

以u妹目前的項目經(jīng)驗,可以先輸出基礎(chǔ)控件元素規(guī)范,包括(顏色、文字、圖標、蒙板、投影、按鈕、輸入框、或個別控件),規(guī)范是一個龐大而繁瑣,極需耐心的工作;過程中注重每一個細節(jié)的精準與合理性。

(3)規(guī)范的切圖與精確的標注

我們的切圖和標注,是否規(guī)范和精確,直接影響視覺效果的還原度,所以切圖和標注一定要做的細致,這樣更加有利于提升還原度

1c0759a813a0a8012028a9afc07e.jpg

(4)多和開發(fā)溝通交流

U妹一直說的一句話:溝通是解決問題的最有效方法,所以多和開發(fā)哥哥接觸溝通交流,如果有條件允許的話,請與開發(fā)坐一起;遇到問題及時面對面協(xié)商解決、達成共識、修改、敲定、解決。

六、上線準備篇

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

1、應用圖標(APP Icon)

(1) iOS icon

78db59a8170aa801211d2537e69a.jpg

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

525b59a81743a8012028a95d6e6a.jpg

因為需要的圖標非常多,不可能全部加進去,只能選擇最好的尺寸,我的開發(fā)哥哥要求我提供以下圖標尺寸:

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的主屏幕圖標尺寸

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)可以自動把圖片裁剪為圓角,所以提交圖標的時候,你只需要提交正方形的PNG格式即可。

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

8f5159a813dba8012028a9e79ba1.jpg

(2)Android icon

安卓的圖標相對iOS來說較少,我們只需提供一下幾個尺寸就可以了,但是需要提高2套,圓角和直角各一套,因為有的地方都會用到。

51c559a8183da801211d256893e8.jpg

  • 512x512px
  • 192x192px
  • 144x144px
  • 96x96px
  • 72x72px
  • 48x48px

因為安卓有很多的機型,不同屏幕密度的手機對應的icon大小也是不同的,所以U妹這里沒法給你給出相應的icon所被應用的位置。

2、啟動頁(Launch Image)

614a59a81758a801211d254805cd.jpg

837859a813f6a801211d25008676.jpg

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

640x960px?? ? ? ? ? ? ? ? ? iPhone 4/4s

640x1136px?????????????????iPhone 5/5s/5c/SE

750x1334px?????????????????iPhone 6/6S/7

1242x2208px? ? ? ? ? ? ? ?iPhone 6 plus/6S plus/7 plus

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

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

3、商店頁(Launch Image)

7d0c59a81772a8012028a9be974f.jpg

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

18d659a81785a8012028a9584434.jpg

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

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

985259a81799a8012028a9509732.jpg

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

72ac59a81462a8012028a9dfc72e.jpg

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

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

7ce059a81485a801211d2580a480.jpg

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

  • 480x854px
  • 720x1280px

765d59a8148fa801211d2580ad38.jpg

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

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

當要上線時,我們還需做點必不可少的準備:

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

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

 

作者:U妹,一個不要命的UI設(shè)計師,等你,來撩妹喲。微信公眾號:UI妹兒(ID:UIfaner)

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

題圖由作者提供

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很實操的設(shè)計課,雖不懂設(shè)計 但工作中感受到設(shè)計們都是這種工作流程。get了 謝謝樓主分享。

    來自廣東 回復
  2. 別人家的設(shè)計師,太為我們開發(fā)考慮了

    來自云南 回復
  3. 超級贊??

    回復
  4. 很好很強大

    回復
  5. 太好了,對產(chǎn)品經(jīng)理也很有用,感謝??

    回復