APP視覺還原設(shè)計(jì)如何做上線準(zhǔn)備

之前已經(jīng)講了前4個(gè)部分，今天把視覺還原和上線準(zhǔn)備的章節(jié)也說完，趕緊來學(xué)習(xí)。

視覺還原篇

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

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

所以，就需要我們?cè)谶@個(gè)時(shí)候，去配合開發(fā)對(duì)UI進(jìn)行調(diào)整，來更加的接近我們做的效果圖了(簡(jiǎn)單了說，就是給開發(fā)挑毛病，指出和效果圖不一致的地方，是不是很開心哈)

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

設(shè)計(jì)師如何做視覺還原

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

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

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

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

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

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

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

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

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

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

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

3. 規(guī)范的切圖與精確的標(biāo)注

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

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

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

關(guān)于視覺還原篇就說到這里，U妹這里說的只是一種工作方法，好的工作方法才能自己事半功倍，在具體工作中也要靈活擁有，一定要多和開發(fā)溝通交流，良好的溝通才是解決問題的唯一方法。

上線準(zhǔn)備篇

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

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

1. iOS icon：

這是iOS開發(fā)工具Xcode提供的APP Icon (應(yīng)用圖標(biāo))的各項(xiàng)尺寸，咋一看是不是嚇一跳?開發(fā)是按照iOS的系統(tǒng)版本來設(shè)置的，但你是設(shè)計(jì)師，你是按照iPhone的版本來作圖的，所以其實(shí)沒有那么多，真實(shí)情況下，我的開發(fā)同事要求提供以下幾個(gè)尺寸：

因?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)可以自動(dòng)把圖片裁剪為圓角，所以提交圖標(biāo)的時(shí)候，你只需要提交正方形的PNG格式即可。

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

2. Android icon：

安卓的圖標(biāo)相對(duì)iOS來說較少，我們只需提供一下幾個(gè)尺寸就可以了，但是需要提高2套，圓角和直角各一套，因?yàn)橛械牡胤蕉紩?huì)用到。

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

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

啟動(dòng)頁(Launch Image)

這同樣也是iOS開發(fā)工具Xcode提供的LaunchImage(啟動(dòng)頁)的各項(xiàng)尺寸，我們需要提供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支持橫屏模式，你就需要做一張橫屏的啟動(dòng)頁。

注意：?jiǎn)?dòng)頁面一定要是PNG格式的，建議給開發(fā)之前講圖片全部壓縮一下。

商店頁(Launch Image)

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

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

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

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

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

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

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

480x854px、720x1280px

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

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

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

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

網(wǎng)頁題目：APP視覺還原設(shè)計(jì)如何做上線準(zhǔn)備
鏈接地址：http://www.bm7419.com/news18/169968.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣、網(wǎng)站營(yíng)銷、網(wǎng)頁設(shè)計(jì)公司、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)