一篇文章搞定APP應(yīng)用市場圖設(shè)計(jì)-經(jīng)驗(yàn)總結(jié)

應(yīng)用市場圖對(duì)用戶的下載行為有著不小的影響，平臺(tái)多不熟悉的話難免會(huì)有些混亂，今天我們就來梳理一下應(yīng)用市場圖的設(shè)計(jì)過程吧~

 

 

下文從概念認(rèn)識(shí)，設(shè)計(jì)步驟和作圖規(guī)范三個(gè)方面，介紹了應(yīng)用市場圖設(shè)計(jì)的整個(gè)流程，希望通過本文能讓你對(duì)應(yīng)用市場圖有一個(gè)較為全面的了解。 

 

 

 

 

1.名稱

 

應(yīng)用市場圖是指產(chǎn)品在App Store或是安卓市場中的預(yù)覽圖，它又可以叫做應(yīng)用截圖、市場圖、APP預(yù)覽圖、市場預(yù)覽圖、上架圖等，不同團(tuán)隊(duì)可能有自己的習(xí)慣叫法，我們只需要知道這些都是相同意思就可以了。

 

 

 

 

2.作用

 

對(duì)用戶的作用：為用戶提供產(chǎn)品的預(yù)覽，讓用戶在下載前可以簡單了解產(chǎn)品的界面和功能。

 

對(duì)產(chǎn)品的作用：對(duì)產(chǎn)品來說應(yīng)用截圖可以宣傳產(chǎn)品的買點(diǎn)，展現(xiàn)功能，加大產(chǎn)品的曝光率，正面引導(dǎo)吸用戶注意力。

 

人是視覺動(dòng)物，精美的圖片可以吸引更多的目光，留下較好的第一印象，贏得更多好感。所以市場圖對(duì)用戶的下載行為有著不小的影響。iOS11 App Store的大改版后，應(yīng)用截圖由2張變?yōu)榱?張，視頻也從原來的1個(gè)增加為3個(gè)，產(chǎn)品可以展現(xiàn)更多內(nèi)容的同時(shí)，市場圖的設(shè)計(jì)也變得更加重要。

 

 

 

 

 

3.表現(xiàn)形式

 

市場圖支持靜態(tài)圖片和視頻兩種形式。靜態(tài)圖是必須提供的，視頻是可選項(xiàng)，可做可不做。視頻雖然展示直觀表現(xiàn)力強(qiáng)，但耗時(shí)也會(huì)多一些，具體我們需要根據(jù)項(xiàng)目的時(shí)間和內(nèi)容來評(píng)估。

 

 

 

 

·靜態(tài)圖片

必須項(xiàng)；格式：JPG、PNG；

數(shù)量：1-5張。

 

·視頻

非必須項(xiàng)；格式：mov、m4v、mp4。

數(shù)量：1-3個(gè)。

iOS的時(shí)長要求是最短15秒最長30秒，在這個(gè)區(qū)間取值，過長的視頻很少有用戶會(huì)看完。

內(nèi)容一般以功能操作為主，演示APP的核心功能和特色功能，片頭片尾加入品牌信息如logo、slogan等，加大產(chǎn)品品牌的曝光度。這里還需要注意一點(diǎn)，品牌宣傳的時(shí)間不宜過長，用戶的注意力非常寶貴，耐心也非常有限，最好開頭1-2秒要馬上進(jìn)入視頻正題功能演示的內(nèi)容。

 

靜態(tài)圖與視頻的尺寸每個(gè)平臺(tái)的具體要求不同，文章第三部分會(huì)有各平臺(tái)詳細(xì)的尺寸、格式、規(guī)范的介紹。

 

 

上面我們已經(jīng)介紹了市場圖的名稱、作用和表現(xiàn)形式，知道了它的重要性，下面就來看看市場圖的具體設(shè)計(jì)步驟吧。市場圖的設(shè)計(jì)可以分以下4步：

 

 

 

1.討論表現(xiàn)內(nèi)容，確定表現(xiàn)形式

首先，我們要知道市場圖需要表現(xiàn)什么，接到的需求里一般是已經(jīng)提供了文案與內(nèi)容。如果沒有就需要我們?nèi)ヅc產(chǎn)品、運(yùn)營的同事溝通討論已確定內(nèi)容，然后根據(jù)內(nèi)容和項(xiàng)目排期確定表現(xiàn)形式，是否需要做視頻。

市場圖的表現(xiàn)內(nèi)容可以分為功能向、內(nèi)容向、運(yùn)營向三個(gè)方面。

 

 

 

·功能向

展現(xiàn)產(chǎn)品的亮點(diǎn)、價(jià)值、核心功能或是本次更新改版的特性等，主要是讓用戶快速得到有價(jià)值的信息，了解產(chǎn)品的功能特性，區(qū)別于競品。一般工具型產(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閱讀的市場圖展示的就是當(dāng)前熱門書籍。

 

 

 

·運(yùn)營向

配合運(yùn)營需求展示產(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ì)樣式

市場圖的組成元素主要有界面截圖、文案、手機(jī)框、內(nèi)容元素和應(yīng)用組件。

 

 

 

 

元素組合成設(shè)計(jì)樣式有以下4種：

 

 

·界面截圖

這種形式直接使用APP的界面截圖，簡單粗暴不加任何設(shè)計(jì)，項(xiàng)目急時(shí)間緊的時(shí)候可以選擇這種形式，只需要上傳相應(yīng)平臺(tái)的截圖簡單快速，但從瀏覽者的角度來說，這種樣式就略顯平庸了，缺乏對(duì)用戶的引導(dǎo)，瀏覽的時(shí)候需要自己去發(fā)現(xiàn)界面中的功能特點(diǎn)等，吸引力相對(duì)小一些。

 

 

 

·截圖+文案

界面截圖和本頁的說明文案，文案讓頁面的功能特點(diǎn)更突出易于理解，同時(shí)頁面也可以保持較大的展示效果。需要注意iOS和Android系統(tǒng)的狀態(tài)欄要求，準(zhǔn)備不同系統(tǒng)的頁面。

 

 

 

·截圖+文案+手機(jī)框

在文案的基礎(chǔ)上再加入手機(jī)框讓截圖更接近真實(shí)的使用情景，更容易代入，但同時(shí)也需要注意不同平臺(tái)是否對(duì)手機(jī)框有要求，比如魅族的應(yīng)用商店就要求使用其指定的手機(jī)框。有個(gè)小竅門可以減少我們的工作量，如果平臺(tái)沒有特殊制定的手機(jī)框，我們可以使用自己畫的虛擬手機(jī)框，這樣就可以通用而不會(huì)涉及品牌問題了。

 

 

 

 

 

·截圖+文案+手機(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ī)框的問題都需要注意。

 

 

 

以上4種樣式各有利弊 ，具體還需要根據(jù)表現(xiàn)內(nèi)容和項(xiàng)目排期來選擇。時(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ì)樣式接下來就是考慮設(shè)計(jì)風(fēng)格了，下面就介紹幾種主流的風(fēng)格。

 

 

 

·商務(wù)風(fēng)

這種風(fēng)格使用率比較高，采用簡潔的設(shè)計(jì)主要突出應(yīng)用截圖，文案強(qiáng)調(diào)產(chǎn)品的重點(diǎn)信息，去除多余裝飾以保證圖片的易讀性，幫助用戶高效完成瀏覽、下載，其配色多選擇中性色搭配產(chǎn)品品牌色。用戶接受度高，不易出錯(cuò)，適合用戶群體跨度大的產(chǎn)品。

 

 

 

 

·插畫風(fēng)

從扁平化流行的開始，插畫在UI中的運(yùn)用也越來越多。插畫用有很強(qiáng)的視覺表現(xiàn)力，它的加入可以為較單調(diào)的頁面增色，輔助用戶理解。人類瀏覽的時(shí)候更容易被圖片吸引，圖片也能形成更多的記憶點(diǎn)，給用戶留下更深刻的印象。本身較為簡單的產(chǎn)品如果界面截圖缺乏吸引力的話，可以選擇加入插畫，增加視覺表現(xiàn)力區(qū)別于競品，吸引用戶。

 

 

 

 

·全彩風(fēng)

這種風(fēng)格每張圖選擇不一樣的色彩，通過豐富鮮艷的色彩來吸引用戶，影響人們的心情。

 

色彩對(duì)人類具有天然的吸引力，在原始社會(huì)人類祖先就會(huì)通過果實(shí)的顏色判斷其是否成熟，能否從中得到他們渴望的糖分。這份影響保留至今，色彩依然可以輕易喚起人們愉悅感，是影響人們情緒的重要元素，正是人們對(duì)顏色的喜愛形成了這種風(fēng)格。

 

 

 

 

·跨屏風(fēng)

跨屏風(fēng)是圖片內(nèi)容跨越兩張或多張圖，相當(dāng)于把兩張預(yù)覽圖的面積合成一張使用，這樣在瀏覽的時(shí)候無疑是加大了視覺沖擊力，更容易吸引用戶的注意力，不少產(chǎn)品都選擇了這種風(fēng)格。

 

 

 

·元素風(fēng)

在圖中加入頁面組件或是IP形象，打造亮點(diǎn)讓用戶的聚焦，關(guān)注元素內(nèi)容，第一時(shí)間注意到產(chǎn)品的特點(diǎn)。這種風(fēng)格比較靈活，豐富活潑視覺表現(xiàn)力強(qiáng)，IP形象的加入可以形成自己的品牌特色讓產(chǎn)品和競品區(qū)分出來。

 

 

 

4.靈活運(yùn)用

通過前面三個(gè)步驟，我們初步?jīng)Q定了表現(xiàn)內(nèi)容涉及樣式和整體風(fēng)格，心里應(yīng)該對(duì)市場圖的效果有了大致的想法，現(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é)也是為了我們在設(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)容主題更加契合。

 

 

 

所以我們在設(shè)計(jì)的時(shí)候應(yīng)該結(jié)合自己產(chǎn)品的風(fēng)格定位，將選擇的元素樣式、設(shè)計(jì)風(fēng)格組合創(chuàng)作，突破風(fēng)格的限制，大膽創(chuàng)新打造與產(chǎn)品氣質(zhì)更相符的頁面，創(chuàng)造更多更豐富的視覺效果。

 

 

劃重點(diǎn)

·應(yīng)用截圖、市場圖、APP預(yù)覽圖、市場預(yù)覽圖、上架圖等，有靜態(tài)圖片和視頻兩種表現(xiàn)形式。

·市場圖的表現(xiàn)內(nèi)容可以分為功能向、內(nèi)容向、運(yùn)營向三個(gè)方面。

·市場圖的組成元素主要有界面截圖、文案、手機(jī)框、內(nèi)容元素和應(yīng)用組件。

·對(duì)風(fēng)格的歸納總結(jié)讓我們在設(shè)計(jì)的時(shí)候，有一套較為實(shí)用的方法論可以參考，但最后的畫面效果還需要我們對(duì)齊靈活運(yùn)用，而不是被風(fēng)格形式所累，限定自己的思維。

 

 

三、作圖規(guī)范

通過之前的4個(gè)設(shè)計(jì)步驟，我們應(yīng)該有了市場圖最終的設(shè)計(jì)方案，接下來就應(yīng)該正式進(jìn)入設(shè)計(jì)作圖環(huán)節(jié)了。在這個(gè)環(huán)節(jié)中我們需要注意三點(diǎn)：各平臺(tái)尺寸的規(guī)范，文案規(guī)范和內(nèi)容規(guī)范，下面具體介紹一下：

 

 

1.尺寸規(guī)范

市場圖不同于頁面設(shè)計(jì)，頁面我們需要考慮的是iOS、Android兩大系統(tǒng)的區(qū)別。而應(yīng)用圖因?yàn)槭窃诓煌脚_(tái)市場使用，每個(gè)平臺(tái)都有自己的規(guī)范，所以幾乎每個(gè)平臺(tái)都需要有一套單獨(dú)的圖，不過近兩年安卓各平臺(tái)間的差異化逐漸縮小，可以通用的尺寸正在增加。

 

我一般是以iOS的尺寸規(guī)范作為基礎(chǔ)模板開始設(shè)計(jì)，設(shè)計(jì)完畢后，根據(jù)公司的主要投放的幾個(gè)市場，對(duì)比其他Android市場的尺寸，選取其中一個(gè)較為通用的尺寸進(jìn)行調(diào)整，根據(jù)規(guī)范逐步完善各個(gè)市場的用圖。

 

 

接下來我為大家梳理了幾個(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的尺寸，單張圖片不超過2M就可以 ，尺寸比較靈活。

 

 

 

 

 

百度手機(jī)助手

圖標(biāo)：1024*1024、PNG&JPG、圓角，要求無白邊且小于800K。

應(yīng)用截圖：尺寸480*800，需上傳不少于4張且內(nèi)容不重復(fù)的圖片，單張圖片不超過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、無白邊。

應(yīng)用截圖：建議尺寸480*800，需上傳4-5張且單張不超過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張且單張不超過1M以內(nèi)。

 

 

 

 

 

360手機(jī)助手

圖標(biāo)：512*512，PNG、圓角半徑弧度：70PX無白邊。

應(yīng)用截圖：尺寸不小于480*800，支持橫屏或豎屏，單張圖片不能超過3M，需要去除圖中的頂部通知欄。

 

 

 

 

 

魅族

圖標(biāo)：512*512、PNG、直角，小于1M。

應(yīng)用截圖：如下圖提供了四種尺寸以供選擇，系統(tǒng)頂部通知欄不能存在其他無關(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審核截圖中勿帶中國移動(dòng)等標(biāo)簽，會(huì)被視為廣告嫌疑，曾經(jīng)因?yàn)檫@個(gè)被拒)。安卓市場基本可以概括為兩種尺寸：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è)的公平競爭環(huán)境。禁止的絕對(duì)化用語應(yīng)僅限于作為表示程度的最高級(jí)形容詞或類似語句，“權(quán)威、最優(yōu)秀、最好、最大、領(lǐng)先、領(lǐng)導(dǎo)者、締造者、全國銷量冠軍、國家級(jí)產(chǎn)品、全網(wǎng)第一、銷量第一、排名第一……”這些極限詞的使用需要規(guī)避。

 

一般我們接到的文案應(yīng)該已經(jīng)排除違規(guī)的詞了，不過做頁面的時(shí)候還是需要我們留心檢查一下。如果不確定文案內(nèi)容是否可用的話，最好提前找法務(wù)部市場部的同事確認(rèn)，網(wǎng)絡(luò)上也有廣告法禁用詞的查詢工具，可以自己檢索查詢，以避免后期大批量的改圖增加工作量。

 

 

 

 

3.內(nèi)容規(guī)范

內(nèi)容規(guī)范是指圖上的內(nèi)容要與提交審核的app版本的功能內(nèi)容保持一致。我之前有一次由于公司策略調(diào)整，一個(gè)課程頁面由收費(fèi)變?yōu)槊赓M(fèi)，按鈕由購買變?yōu)榧尤?，這種情況如果在市場圖中涉及到該頁面，就需要連該圖片一起調(diào)整，不然審核的時(shí)候容易出問題，導(dǎo)致審核失敗不通過。

所以我們在作圖的時(shí)候要確認(rèn)檢查，所用頁面是否與當(dāng)前要提交審核的版本一致，特別是一些設(shè)計(jì)到購買、分享等功能的地方需要注意，避免因?yàn)閮?nèi)容不符而審核不通過耽誤項(xiàng)目進(jìn)度。

以上就是我在工作中對(duì)應(yī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)行縮放。

· 安卓市場基本可以概括為兩種尺寸：480*800和1080*1920，再針對(duì)各平臺(tái)特殊的手機(jī)外殼、狀態(tài)欄要求進(jìn)行微調(diào)。

· 需要檢查文案內(nèi)容，避免極限詞的使用。

· 需要檢查所用頁面內(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

中華人民共和國廣告法 http://t.cn/RA8POUQ

本文來源：https://www.ui.cn/detail/474297.html