一篇文章搞定APP應(yīng)用市場(chǎng)圖設(shè)計(jì)-經(jīng)驗(yàn)總結(jié)
- 來(lái)源:
- 焱小玖
- 時(shí)間:
- 2019-06-28 11:17:24
- 閱讀:
- 14738
應(yīng)用市場(chǎng)圖對(duì)用戶的下載行為有著不小的影響,平臺(tái)多不熟悉的話難免會(huì)有些混亂,今天我們就來(lái)梳理一下應(yīng)用市場(chǎng)圖的設(shè)計(jì)過(guò)程吧~
下文從概念認(rèn)識(shí),設(shè)計(jì)步驟和作圖規(guī)范三個(gè)方面,介紹了應(yīng)用市場(chǎng)圖設(shè)計(jì)的整個(gè)流程,希望通過(guò)本文能讓你對(duì)應(yīng)用市場(chǎng)圖有一個(gè)較為全面的了解。
1.名稱
應(yīng)用市場(chǎng)圖是指產(chǎn)品在App Store或是安卓市場(chǎng)中的預(yù)覽圖,它又可以叫做應(yīng)用截圖、市場(chǎng)圖、APP預(yù)覽圖、市場(chǎng)預(yù)覽圖、上架圖等,不同團(tuán)隊(duì)可能有自己的習(xí)慣叫法,我們只需要知道這些都是相同意思就可以了。
2.作用
對(duì)用戶的作用:為用戶提供產(chǎn)品的預(yù)覽,讓用戶在下載前可以簡(jiǎn)單了解產(chǎn)品的界面和功能。
對(duì)產(chǎn)品的作用:對(duì)產(chǎn)品來(lái)說(shuō)應(yīng)用截圖可以宣傳產(chǎn)品的買點(diǎn),展現(xiàn)功能,加大產(chǎn)品的曝光率,正面引導(dǎo)吸用戶注意力。
人是視覺動(dòng)物,精美的圖片可以吸引更多的目光,留下較好的第一印象,贏得更多好感。所以市場(chǎng)圖對(duì)用戶的下載行為有著不小的影響。iOS11 App Store的大改版后,應(yīng)用截圖由2張變?yōu)榱?張,視頻也從原來(lái)的1個(gè)增加為3個(gè),產(chǎn)品可以展現(xiàn)更多內(nèi)容的同時(shí),市場(chǎng)圖的設(shè)計(jì)也變得更加重要。
3.表現(xiàn)形式
市場(chǎng)圖支持靜態(tài)圖片和視頻兩種形式。靜態(tài)圖是必須提供的,視頻是可選項(xiàng),可做可不做。視頻雖然展示直觀表現(xiàn)力強(qiáng),但耗時(shí)也會(huì)多一些,具體我們需要根據(jù)項(xiàng)目的時(shí)間和內(nèi)容來(lái)評(píng)估。
·靜態(tài)圖片
必須項(xiàng);格式:JPG、PNG;
數(shù)量:1-5張。
·視頻
非必須項(xiàng);格式:mov、m4v、mp4。
數(shù)量:1-3個(gè)。
iOS的時(shí)長(zhǎng)要求是最短15秒最長(zhǎng)30秒,在這個(gè)區(qū)間取值,過(guò)長(zhǎng)的視頻很少有用戶會(huì)看完。
內(nèi)容一般以功能操作為主,演示APP的核心功能和特色功能,片頭片尾加入品牌信息如logo、slogan等,加大產(chǎn)品品牌的曝光度。這里還需要注意一點(diǎn),品牌宣傳的時(shí)間不宜過(guò)長(zhǎng),用戶的注意力非常寶貴,耐心也非常有限,最好開頭1-2秒要馬上進(jìn)入視頻正題功能演示的內(nèi)容。
靜態(tài)圖與視頻的尺寸每個(gè)平臺(tái)的具體要求不同,文章第三部分會(huì)有各平臺(tái)詳細(xì)的尺寸、格式、規(guī)范的介紹。
上面我們已經(jīng)介紹了市場(chǎng)圖的名稱、作用和表現(xiàn)形式,知道了它的重要性,下面就來(lái)看看市場(chǎng)圖的具體設(shè)計(jì)步驟吧。市場(chǎng)圖的設(shè)計(jì)可以分以下4步:
1.討論表現(xiàn)內(nèi)容,確定表現(xiàn)形式
首先,我們要知道市場(chǎng)圖需要表現(xiàn)什么,接到的需求里一般是已經(jīng)提供了文案與內(nèi)容。如果沒有就需要我們?nèi)ヅc產(chǎn)品、運(yùn)營(yíng)的同事溝通討論已確定內(nèi)容,然后根據(jù)內(nèi)容和項(xiàng)目排期確定表現(xiàn)形式,是否需要做視頻。
市場(chǎng)圖的表現(xiàn)內(nèi)容可以分為功能向、內(nèi)容向、運(yùn)營(yíng)向三個(gè)方面。
·功能向
展現(xiàn)產(chǎn)品的亮點(diǎn)、價(jià)值、核心功能或是本次更新改版的特性等,主要是讓用戶快速得到有價(jià)值的信息,了解產(chǎn)品的功能特性,區(qū)別于競(jìng)品。一般工具型產(chǎn)品都傾向于選擇這樣的內(nèi)容。如360相機(jī),5張圖分別展示了產(chǎn)品的5種功能。
·內(nèi)容向
展示產(chǎn)品的內(nèi)容,一般內(nèi)容平臺(tái)型產(chǎn)品如視頻、書籍、音頻類用的比較多,產(chǎn)品的內(nèi)容資源豐富,更新較快時(shí)效性較強(qiáng)、經(jīng)常結(jié)合當(dāng)下的熱點(diǎn)資源,以內(nèi)容吸引用戶。如下圖QQ閱讀的市場(chǎng)圖展示的就是當(dāng)前熱門書籍。
·運(yùn)營(yíng)向
配合運(yùn)營(yíng)需求展示產(chǎn)品內(nèi)的近期的促銷、專題活動(dòng)、賽事等,電商類大型活動(dòng)前一般會(huì)選擇此類內(nèi)容宣傳推廣以加大活動(dòng)的曝光率,如下圖唯品會(huì)的520活動(dòng)。
確定表現(xiàn)內(nèi)容和形式后,我們就可以進(jìn)入下一步——組成元素與設(shè)計(jì)樣式的選擇。
2.選擇組成元素與設(shè)計(jì)樣式
市場(chǎng)圖的組成元素主要有界面截圖、文案、手機(jī)框、內(nèi)容元素和應(yīng)用組件。
元素組合成設(shè)計(jì)樣式有以下4種:
·界面截圖
這種形式直接使用APP的界面截圖,簡(jiǎn)單粗暴不加任何設(shè)計(jì),項(xiàng)目急時(shí)間緊的時(shí)候可以選擇這種形式,只需要上傳相應(yīng)平臺(tái)的截圖簡(jiǎn)單快速,但從瀏覽者的角度來(lái)說(shuō),這種樣式就略顯平庸了,缺乏對(duì)用戶的引導(dǎo),瀏覽的時(shí)候需要自己去發(fā)現(xiàn)界面中的功能特點(diǎn)等,吸引力相對(duì)小一些。
·截圖+文案
界面截圖和本頁(yè)的說(shuō)明文案,文案讓頁(yè)面的功能特點(diǎn)更突出易于理解,同時(shí)頁(yè)面也可以保持較大的展示效果。需要注意iOS和Android系統(tǒng)的狀態(tài)欄要求,準(zhǔn)備不同系統(tǒng)的頁(yè)面。
·截圖+文案+手機(jī)框
在文案的基礎(chǔ)上再加入手機(jī)框讓截圖更接近真實(shí)的使用情景,更容易代入,但同時(shí)也需要注意不同平臺(tái)是否對(duì)手機(jī)框有要求,比如魅族的應(yīng)用商店就要求使用其指定的手機(jī)框。有個(gè)小竅門可以減少我們的工作量,如果平臺(tái)沒有特殊制定的手機(jī)框,我們可以使用自己畫的虛擬手機(jī)框,這樣就可以通用而不會(huì)涉及品牌問(wèn)題了。
·截圖+文案+手機(jī)框+內(nèi)容元素、應(yīng)用組件
這種樣式設(shè)計(jì)感較強(qiáng)有很大的發(fā)揮的空間,利用元素形成視覺中心,強(qiáng)調(diào)主題內(nèi)容,形式活潑變化豐富,可以形成強(qiáng)烈的視覺效果吸引用戶。但加入內(nèi)容元素后,界面截圖的展示相對(duì)會(huì)較小,同時(shí)設(shè)計(jì)成本較高。后面各平臺(tái)有些較特殊尺寸的圖,內(nèi)容元素可能會(huì)需要單獨(dú)調(diào)整,花費(fèi)時(shí)間較多,前面提到的狀態(tài)欄、手機(jī)框的問(wèn)題都需要注意。
以上4種樣式各有利弊 ,具體還需要根據(jù)表現(xiàn)內(nèi)容和項(xiàng)目排期來(lái)選擇。時(shí)間緊急的情況下可以選擇界面截圖,希望盡可能大的展現(xiàn)界面則可以選擇截圖+文案的樣式,時(shí)間充裕希望有強(qiáng)烈的視覺效果則可以選擇較為靈活的截圖+文案+手機(jī)框+內(nèi)容元素、應(yīng)用組件。選擇好設(shè)計(jì)樣式后,就可以進(jìn)入下一步設(shè)計(jì)風(fēng)格的選擇了。
3.選擇設(shè)計(jì)風(fēng)格
確定了表現(xiàn)內(nèi)容和形式,選擇了設(shè)計(jì)樣式接下來(lái)就是考慮設(shè)計(jì)風(fēng)格了,下面就介紹幾種主流的風(fēng)格。
·商務(wù)風(fēng)
這種風(fēng)格使用率比較高,采用簡(jiǎn)潔的設(shè)計(jì)主要突出應(yīng)用截圖,文案強(qiáng)調(diào)產(chǎn)品的重點(diǎn)信息,去除多余裝飾以保證圖片的易讀性,幫助用戶高效完成瀏覽、下載,其配色多選擇中性色搭配產(chǎn)品品牌色。用戶接受度高,不易出錯(cuò),適合用戶群體跨度大的產(chǎn)品。
·插畫風(fēng)
從扁平化流行的開始,插畫在UI中的運(yùn)用也越來(lái)越多。插畫用有很強(qiáng)的視覺表現(xiàn)力,它的加入可以為較單調(diào)的頁(yè)面增色,輔助用戶理解。人類瀏覽的時(shí)候更容易被圖片吸引,圖片也能形成更多的記憶點(diǎn),給用戶留下更深刻的印象。本身較為簡(jiǎn)單的產(chǎn)品如果界面截圖缺乏吸引力的話,可以選擇加入插畫,增加視覺表現(xiàn)力區(qū)別于競(jìng)品,吸引用戶。
·全彩風(fēng)
這種風(fēng)格每張圖選擇不一樣的色彩,通過(guò)豐富鮮艷的色彩來(lái)吸引用戶,影響人們的心情。
色彩對(duì)人類具有天然的吸引力,在原始社會(huì)人類祖先就會(huì)通過(guò)果實(shí)的顏色判斷其是否成熟,能否從中得到他們渴望的糖分。這份影響保留至今,色彩依然可以輕易喚起人們愉悅感,是影響人們情緒的重要元素,正是人們對(duì)顏色的喜愛形成了這種風(fēng)格。
·跨屏風(fēng)
跨屏風(fēng)是圖片內(nèi)容跨越兩張或多張圖,相當(dāng)于把兩張預(yù)覽圖的面積合成一張使用,這樣在瀏覽的時(shí)候無(wú)疑是加大了視覺沖擊力,更容易吸引用戶的注意力,不少產(chǎn)品都選擇了這種風(fēng)格。
·元素風(fēng)
在圖中加入頁(yè)面組件或是IP形象,打造亮點(diǎn)讓用戶的聚焦,關(guān)注元素內(nèi)容,第一時(shí)間注意到產(chǎn)品的特點(diǎn)。這種風(fēng)格比較靈活,豐富活潑視覺表現(xiàn)力強(qiáng),IP形象的加入可以形成自己的品牌特色讓產(chǎn)品和競(jìng)品區(qū)分出來(lái)。
4.靈活運(yùn)用
通過(guò)前面三個(gè)步驟,我們初步?jīng)Q定了表現(xiàn)內(nèi)容涉及樣式和整體風(fēng)格,心里應(yīng)該對(duì)市場(chǎng)圖的效果有了大致的想法,現(xiàn)在第四步需要我們靈活的運(yùn)用它們。
就像每個(gè)藝術(shù)流派的誕生,初始時(shí)身處其中的藝術(shù)家并沒有概念自己是什么流派的,只是單純的進(jìn)行藝術(shù)創(chuàng)作。流派更多的是后人為了可以更好的學(xué)習(xí)理解及區(qū)分,對(duì)其相同的藝術(shù)理念和手法進(jìn)行歸納總結(jié)后給出的定義,方便我們理解。
對(duì)風(fēng)格的歸納總結(jié)也是為了我們?cè)谠O(shè)計(jì)的時(shí)候,有一套較為實(shí)用的方法論可以參考,有抓手更好的使用它們。最后的畫面效果還需要我們的靈活運(yùn)用,而不是被風(fēng)格形式所累,限定自己的思維。
比如Mimo,同樣是截圖+文案+手機(jī)框的元素,但因?yàn)檎{(diào)整了手機(jī)的位置,上下穿插的變化讓畫面更加活潑。Firefox讓手機(jī)的連續(xù)跨屏結(jié)合背景的色彩漸變,使界面更加活力時(shí)尚。
喜馬拉雅利用人物元素結(jié)合不同背景顏色及材質(zhì)突出主題內(nèi)容,以及對(duì)不同定位的內(nèi)容采取的不同的設(shè)計(jì)風(fēng)格,讓設(shè)計(jì)風(fēng)格更加符合內(nèi)容主題更加契合。
所以我們?cè)谠O(shè)計(jì)的時(shí)候應(yīng)該結(jié)合自己產(chǎn)品的風(fēng)格定位,將選擇的元素樣式、設(shè)計(jì)風(fēng)格組合創(chuàng)作,突破風(fēng)格的限制,大膽創(chuàng)新打造與產(chǎn)品氣質(zhì)更相符的頁(yè)面,創(chuàng)造更多更豐富的視覺效果。
劃重點(diǎn)
·應(yīng)用截圖、市場(chǎng)圖、APP預(yù)覽圖、市場(chǎng)預(yù)覽圖、上架圖等,有靜態(tài)圖片和視頻兩種表現(xiàn)形式。
·市場(chǎng)圖的表現(xiàn)內(nèi)容可以分為功能向、內(nèi)容向、運(yùn)營(yíng)向三個(gè)方面。
·市場(chǎng)圖的組成元素主要有界面截圖、文案、手機(jī)框、內(nèi)容元素和應(yīng)用組件。
·對(duì)風(fēng)格的歸納總結(jié)讓我們?cè)谠O(shè)計(jì)的時(shí)候,有一套較為實(shí)用的方法論可以參考,但最后的畫面效果還需要我們對(duì)齊靈活運(yùn)用,而不是被風(fēng)格形式所累,限定自己的思維。
三、作圖規(guī)范
通過(guò)之前的4個(gè)設(shè)計(jì)步驟,我們應(yīng)該有了市場(chǎng)圖最終的設(shè)計(jì)方案,接下來(lái)就應(yīng)該正式進(jìn)入設(shè)計(jì)作圖環(huán)節(jié)了。在這個(gè)環(huán)節(jié)中我們需要注意三點(diǎn):各平臺(tái)尺寸的規(guī)范,文案規(guī)范和內(nèi)容規(guī)范,下面具體介紹一下:
1.尺寸規(guī)范
市場(chǎng)圖不同于頁(yè)面設(shè)計(jì),頁(yè)面我們需要考慮的是iOS、Android兩大系統(tǒng)的區(qū)別。而應(yīng)用圖因?yàn)槭窃诓煌脚_(tái)市場(chǎng)使用,每個(gè)平臺(tái)都有自己的規(guī)范,所以幾乎每個(gè)平臺(tái)都需要有一套單獨(dú)的圖,不過(guò)近兩年安卓各平臺(tái)間的差異化逐漸縮小,可以通用的尺寸正在增加。
我一般是以iOS的尺寸規(guī)范作為基礎(chǔ)模板開始設(shè)計(jì),設(shè)計(jì)完畢后,根據(jù)公司的主要投放的幾個(gè)市場(chǎng),對(duì)比其他Android市場(chǎng)的尺寸,選取其中一個(gè)較為通用的尺寸進(jìn)行調(diào)整,根據(jù)規(guī)范逐步完善各個(gè)市場(chǎng)的用圖。
接下來(lái)我為大家梳理了幾個(gè)主流平臺(tái)的規(guī)范。
App Store
圖標(biāo):1024*1024、PNG、直角。
應(yīng)用截圖&視頻:尺寸如下圖所示,1080*1920,750*1334,640*1136,這三個(gè)都是同比例的準(zhǔn)備一套圖再進(jìn)行縮放就可以,需要特殊處理的是iPhone X 886*1920以及iPhone 4 640*960兩個(gè)尺寸,而且注意iPhone X的狀態(tài)欄也需要是對(duì)應(yīng)的。
華為
圖標(biāo):216*216、PNG、直角。
應(yīng)用截圖&視頻:應(yīng)用截圖需最少上傳3張,官方建議尺寸為 450*800,但只要是9:16的尺寸,單張圖片不超過(guò)2M就可以 ,尺寸比較靈活。
百度手機(jī)助手
圖標(biāo):1024*1024、PNG&JPG、圓角,要求無(wú)白邊且小于800K。
應(yīng)用截圖:尺寸480*800,需上傳不少于4張且內(nèi)容不重復(fù)的圖片,單張圖片不超過(guò)2M 。需要注意頂部通知欄不可有圖標(biāo),截圖中也不能加入水印或其他logo標(biāo)志 。
小米
圖標(biāo):90*90、136*136、168*168、192*192、224*224,PNG,直角。
應(yīng)用截圖:需上傳至少 3 張圖片,尺寸可選720*1280 或 1080*1920,支持橫屏或豎屏。需要注意的是,要求使用小米手機(jī)外觀。
手機(jī)Psd素材地址:https://dev.mi.com/console/doc/detail?pId=948
安智
圖標(biāo):512*512,PNG、無(wú)白邊。
應(yīng)用截圖:建議尺寸480*800,需上傳4-5張且單張不超過(guò)1M以內(nèi)。
應(yīng)用寶
圖標(biāo):16*16 、50*50、64*64、75*75、100*100 20K以內(nèi),512*512 200K以內(nèi),PNG、直角。
應(yīng)用截圖:不小于320*480,建議尺寸480*800,需上傳2-5張且單張不超過(guò)1M以內(nèi)。
360手機(jī)助手
圖標(biāo):512*512,PNG、圓角半徑弧度:70PX無(wú)白邊。
應(yīng)用截圖:尺寸不小于480*800,支持橫屏或豎屏,單張圖片不能超過(guò)3M,需要去除圖中的頂部通知欄。
魅族
圖標(biāo):512*512、PNG、直角,小于1M。
應(yīng)用截圖:如下圖提供了四種尺寸以供選擇,系統(tǒng)頂部通知欄不能存在其他無(wú)關(guān)APP圖標(biāo),需要使用不帶品牌標(biāo)識(shí)的Android手機(jī)外觀或魅族PRO 7 PLUS。
手機(jī)素材地址:https://pan.baidu.com/s/1hud8DNI
三星
圖標(biāo):512*512、PNG、直角,小于1024K。
應(yīng)用截圖:最小 320 像素,最大 3840 像素,JPG/PNG 格式,圖片比例 2:1,至少需要4個(gè)圖片,最多可上傳8個(gè),需使用不帶品牌信息的手機(jī)。
搜狗手機(jī)助手
圖標(biāo):512*512、PNG、小于1M圓角透明圖標(biāo)。
應(yīng)用截圖:需上傳4-5張不小于480*800的截圖,縱向、橫向皆可,單張小于3M。
總結(jié)一下,iOS的尺寸其中iPhone X與iPhone 4需要單獨(dú)處理,其他機(jī)型都可以用同一套進(jìn)行縮放(PS:iOS審核截圖中勿帶中國(guó)移動(dòng)等標(biāo)簽,會(huì)被視為廣告嫌疑,曾經(jīng)因?yàn)檫@個(gè)被拒)。安卓市場(chǎng)基本可以概括為兩種尺寸:480*800和1080*1920,有這兩種尺寸再針對(duì)各平臺(tái)特殊的手機(jī)外殼、狀態(tài)欄要求微調(diào)就可以。(PS:各平臺(tái)的規(guī)范偶爾會(huì)有變動(dòng)更新,制作的時(shí)候要以官方公布的最新的為準(zhǔn)喲。)
2.文案規(guī)范
除了尺寸的規(guī)范,文案規(guī)范也需要注意。由于新的廣告法頒布,平臺(tái)會(huì)禁止開發(fā)者使用“違規(guī)”宣傳語(yǔ),以保障行業(yè)的公平競(jìng)爭(zhēng)環(huán)境。禁止的絕對(duì)化用語(yǔ)應(yīng)僅限于作為表示程度的最高級(jí)形容詞或類似語(yǔ)句,“權(quán)威、最優(yōu)秀、最好、最大、領(lǐng)先、領(lǐng)導(dǎo)者、締造者、全國(guó)銷量冠軍、國(guó)家級(jí)產(chǎn)品、全網(wǎng)第一、銷量第一、排名第一……”這些極限詞的使用需要規(guī)避。
一般我們接到的文案應(yīng)該已經(jīng)排除違規(guī)的詞了,不過(guò)做頁(yè)面的時(shí)候還是需要我們留心檢查一下。如果不確定文案內(nèi)容是否可用的話,最好提前找法務(wù)部市場(chǎng)部的同事確認(rèn),網(wǎng)絡(luò)上也有廣告法禁用詞的查詢工具,可以自己檢索查詢,以避免后期大批量的改圖增加工作量。
3.內(nèi)容規(guī)范
內(nèi)容規(guī)范是指圖上的內(nèi)容要與提交審核的app版本的功能內(nèi)容保持一致。我之前有一次由于公司策略調(diào)整,一個(gè)課程頁(yè)面由收費(fèi)變?yōu)槊赓M(fèi),按鈕由購(gòu)買變?yōu)榧尤耄@種情況如果在市場(chǎng)圖中涉及到該頁(yè)面,就需要連該圖片一起調(diào)整,不然審核的時(shí)候容易出問(wèn)題,導(dǎo)致審核失敗不通過(guò)。
所以我們?cè)谧鲌D的時(shí)候要確認(rèn)檢查,所用頁(yè)面是否與當(dāng)前要提交審核的版本一致,特別是一些設(shè)計(jì)到購(gòu)買、分享等功能的地方需要注意,避免因?yàn)閮?nèi)容不符而審核不通過(guò)耽誤項(xiàng)目進(jìn)度。
以上就是我在工作中對(duì)應(yīng)用市場(chǎng)圖設(shè)計(jì)積累的一些經(jīng)驗(yàn),平臺(tái)太多可能總結(jié)的不是非常全面,歡迎大家補(bǔ)充,留言交流~
劃重點(diǎn)
· iOS的尺寸其中iPhone X 886*1920以及iPhone 4 640*960需要單獨(dú)處理,其他機(jī)型都可以750*1334的尺寸進(jìn)行縮放。
· 安卓市場(chǎng)基本可以概括為兩種尺寸:480*800和1080*1920,再針對(duì)各平臺(tái)特殊的手機(jī)外殼、狀態(tài)欄要求進(jìn)行微調(diào)。
· 需要檢查文案內(nèi)容,避免極限詞的使用。
· 需要檢查所用頁(yè)面內(nèi)容是否與提交審核的版本一致。
參考
App Store connect 幫助 http://t.cn/EChYzCy
華為創(chuàng)建并管理應(yīng)用操作指南 http://t.cn/Ea6OWlK
小米文檔中心-應(yīng)用商店 http://t.cn/EKxGfEf
百度移動(dòng)開發(fā)平臺(tái)-應(yīng)用管理 http://t.cn/EChdYQf
魅族應(yīng)用審核規(guī)范 http://t.cn/EChgoY2
三星應(yīng)用商店上傳指南 http://t.cn/EChgkye
360移動(dòng)開發(fā)平臺(tái)-應(yīng)用提交 http://t.cn/ECheJjl
騰訊開發(fā)平臺(tái)-應(yīng)用管理 http://t.cn/EChDIbf
中華人民共和國(guó)廣告法 http://t.cn/RA8POUQ
本文來(lái)源:https://www.ui.cn/detail/474297.html