一篇文章搞定APP應用市場圖設計-經驗總結

應用市場圖對用戶的下載行為有著不小的影響，平臺多不熟悉的話難免會有些混亂，今天我們就來梳理一下應用市場圖的設計過程吧~

 

 

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

 

 

 

 

1.名稱

 

應用市場圖是指產品在App Store或是安卓市場中的預覽圖，它又可以叫做應用截圖、市場圖、APP預覽圖、市場預覽圖、上架圖等，不同團隊可能有自己的習慣叫法，我們只需要知道這些都是相同意思就可以了。

 

 

 

 

2.作用

 

對用戶的作用：為用戶提供產品的預覽，讓用戶在下載前可以簡單了解產品的界面和功能。

 

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

 

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

 

 

 

 

 

3.表現(xiàn)形式

 

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

 

 

 

 

·靜態(tài)圖片

必須項；格式：JPG、PNG；

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

 

·視頻

非必須項；格式：mov、m4v、mp4。

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

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

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

 

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

 

 

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

 

 

 

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

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

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

 

 

 

·功能向

展現(xiàn)產品的亮點、價值、核心功能或是本次更新改版的特性等，主要是讓用戶快速得到有價值的信息，了解產品的功能特性，區(qū)別于競品。一般工具型產品都傾向于選擇這樣的內容。如360相機，5張圖分別展示了產品的5種功能。

 

 

 

·內容向

展示產品的內容，一般內容平臺型產品如視頻、書籍、音頻類用的比較多，產品的內容資源豐富，更新較快時效性較強、經常結合當下的熱點資源，以內容吸引用戶。如下圖QQ閱讀的市場圖展示的就是當前熱門書籍。

 

 

 

·運營向

配合運營需求展示產品內的近期的促銷、專題活動、賽事等，電商類大型活動前一般會選擇此類內容宣傳推廣以加大活動的曝光率，如下圖唯品會的520活動。

 

 

 

確定表現(xiàn)內容和形式后，我們就可以進入下一步——組成元素與設計樣式的選擇。

 

 

 

 

2.選擇組成元素與設計樣式

市場圖的組成元素主要有界面截圖、文案、手機框、內容元素和應用組件。

 

 

 

 

元素組合成設計樣式有以下4種：

 

 

·界面截圖

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

 

 

 

·截圖+文案

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

 

 

 

·截圖+文案+手機框

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

 

 

 

 

 

·截圖+文案+手機框+內容元素、應用組件

這種樣式設計感較強有很大的發(fā)揮的空間，利用元素形成視覺中心，強調主題內容，形式活潑變化豐富，可以形成強烈的視覺效果吸引用戶。但加入內容元素后，界面截圖的展示相對會較小，同時設計成本較高。后面各平臺有些較特殊尺寸的圖，內容元素可能會需要單獨調整，花費時間較多，前面提到的狀態(tài)欄、手機框的問題都需要注意。

 

 

 

以上4種樣式各有利弊 ，具體還需要根據表現(xiàn)內容和項目排期來選擇。時間緊急的情況下可以選擇界面截圖，希望盡可能大的展現(xiàn)界面則可以選擇截圖+文案的樣式，時間充裕希望有強烈的視覺效果則可以選擇較為靈活的截圖+文案+手機框+內容元素、應用組件。選擇好設計樣式后，就可以進入下一步設計風格的選擇了。

 

 

 

 

3.選擇設計風格

確定了表現(xiàn)內容和形式，選擇了設計樣式接下來就是考慮設計風格了，下面就介紹幾種主流的風格。

 

 

 

·商務風

這種風格使用率比較高，采用簡潔的設計主要突出應用截圖，文案強調產品的重點信息，去除多余裝飾以保證圖片的易讀性，幫助用戶高效完成瀏覽、下載，其配色多選擇中性色搭配產品品牌色。用戶接受度高，不易出錯，適合用戶群體跨度大的產品。

 

 

 

 

·插畫風

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

 

 

 

 

·全彩風

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

 

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

 

 

 

 

·跨屏風

跨屏風是圖片內容跨越兩張或多張圖，相當于把兩張預覽圖的面積合成一張使用，這樣在瀏覽的時候無疑是加大了視覺沖擊力，更容易吸引用戶的注意力，不少產品都選擇了這種風格。

 

 

 

·元素風

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

 

 

 

4.靈活運用

通過前面三個步驟，我們初步決定了表現(xiàn)內容涉及樣式和整體風格，心里應該對市場圖的效果有了大致的想法，現(xiàn)在第四步需要我們靈活的運用它們。

 

就像每個藝術流派的誕生，初始時身處其中的藝術家并沒有概念自己是什么流派的，只是單純的進行藝術創(chuàng)作。流派更多的是后人為了可以更好的學習理解及區(qū)分，對其相同的藝術理念和手法進行歸納總結后給出的定義，方便我們理解。

 

 

 

對風格的歸納總結也是為了我們在設計的時候，有一套較為實用的方法論可以參考，有抓手更好的使用它們。最后的畫面效果還需要我們的靈活運用，而不是被風格形式所累，限定自己的思維。

 

比如Mimo，同樣是截圖+文案+手機框的元素，但因為調整了手機的位置，上下穿插的變化讓畫面更加活潑。Firefox讓手機的連續(xù)跨屏結合背景的色彩漸變，使界面更加活力時尚。

 

 

 

喜馬拉雅利用人物元素結合不同背景顏色及材質突出主題內容，以及對不同定位的內容采取的不同的設計風格，讓設計風格更加符合內容主題更加契合。

 

 

 

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

 

 

劃重點

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

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

·市場圖的組成元素主要有界面截圖、文案、手機框、內容元素和應用組件。

·對風格的歸納總結讓我們在設計的時候，有一套較為實用的方法論可以參考，但最后的畫面效果還需要我們對齊靈活運用，而不是被風格形式所累，限定自己的思維。

 

 

三、作圖規(guī)范

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

 

 

1.尺寸規(guī)范

市場圖不同于頁面設計，頁面我們需要考慮的是iOS、Android兩大系統(tǒng)的區(qū)別。而應用圖因為是在不同平臺市場使用，每個平臺都有自己的規(guī)范，所以幾乎每個平臺都需要有一套單獨的圖，不過近兩年安卓各平臺間的差異化逐漸縮小，可以通用的尺寸正在增加。

 

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

 

 

接下來我為大家梳理了幾個主流平臺的規(guī)范。

 

 

 

App Store

圖標：1024*1024、PNG、直角。

應用截圖&視頻：尺寸如下圖所示，1080*1920，750*1334，640*1136，這三個都是同比例的準備一套圖再進行縮放就可以，需要特殊處理的是iPhone X 886*1920以及iPhone 4 640*960兩個尺寸，而且注意iPhone X的狀態(tài)欄也需要是對應的。

 

 

 

 

 

華為

圖標：216*216、PNG、直角。

應用截圖&視頻：應用截圖需最少上傳3張，官方建議尺寸為 450*800，但只要是9:16的尺寸，單張圖片不超過2M就可以 ，尺寸比較靈活。

 

 

 

 

 

百度手機助手

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

應用截圖：尺寸480*800，需上傳不少于4張且內容不重復的圖片，單張圖片不超過2M 。需要注意頂部通知欄不可有圖標，截圖中也不能加入水印或其他logo標志 。

 

 

 

 

 

小米

圖標：90*90、136*136、168*168、192*192、224*224，PNG，直角。

應用截圖：需上傳至少 3 張圖片，尺寸可選720*1280 或 1080*1920，支持橫屏或豎屏。需要注意的是，要求使用小米手機外觀。

手機Psd素材地址：https://dev.mi.com/console/doc/detail?pId=948

 

 

 

 

 

安智

圖標：512*512，PNG、無白邊。

應用截圖：建議尺寸480*800，需上傳4-5張且單張不超過1M以內。

 

 

 

 

 

應用寶

圖標：16*16 、50*50、64*64、75*75、100*100  20K以內，512*512  200K以內，PNG、直角。

應用截圖：不小于320*480，建議尺寸480*800，需上傳2-5張且單張不超過1M以內。

 

 

 

 

 

360手機助手

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

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

 

 

 

 

 

魅族

圖標：512*512、PNG、直角，小于1M。

應用截圖：如下圖提供了四種尺寸以供選擇，系統(tǒng)頂部通知欄不能存在其他無關APP圖標，需要使用不帶品牌標識的Android手機外觀或魅族PRO 7 PLUS。

手機素材地址：https://pan.baidu.com/s/1hud8DNI

 

 

 

 

 

三星

圖標：512*512、PNG、直角，小于1024K。

應用截圖：最小 320 像素，最大 3840 像素，JPG/PNG 格式，圖片比例 2:1，至少需要4個圖片，最多可上傳8個，需使用不帶品牌信息的手機。

 

 

 

 

 

搜狗手機助手

圖標：512*512、PNG、小于1M圓角透明圖標。

應用截圖：需上傳4-5張不小于480*800的截圖，縱向、橫向皆可，單張小于3M。

 

 

 

 

總結一下，iOS的尺寸其中iPhone X與iPhone 4需要單獨處理，其他機型都可以用同一套進行縮放(PS:iOS審核截圖中勿帶中國移動等標簽，會被視為廣告嫌疑，曾經因為這個被拒)。安卓市場基本可以概括為兩種尺寸：480*800和1080*1920，有這兩種尺寸再針對各平臺特殊的手機外殼、狀態(tài)欄要求微調就可以。（PS：各平臺的規(guī)范偶爾會有變動更新，制作的時候要以官方公布的最新的為準喲。）

 

 

 

2.文案規(guī)范

 

除了尺寸的規(guī)范，文案規(guī)范也需要注意。由于新的廣告法頒布，平臺會禁止開發(fā)者使用“違規(guī)”宣傳語，以保障行業(yè)的公平競爭環(huán)境。禁止的絕對化用語應僅限于作為表示程度的最高級形容詞或類似語句，“權威、最優(yōu)秀、最好、最大、領先、領導者、締造者、全國銷量冠軍、國家級產品、全網第一、銷量第一、排名第一……”這些極限詞的使用需要規(guī)避。

 

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

 

 

 

 

3.內容規(guī)范

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

所以我們在作圖的時候要確認檢查，所用頁面是否與當前要提交審核的版本一致，特別是一些設計到購買、分享等功能的地方需要注意，避免因為內容不符而審核不通過耽誤項目進度。

以上就是我在工作中對應用市場圖設計積累的一些經驗，平臺太多可能總結的不是非常全面，歡迎大家補充，留言交流~

 

 

劃重點

 

· iOS的尺寸其中iPhone X 886*1920以及iPhone 4 640*960需要單獨處理，其他機型都可以750*1334的尺寸進行縮放。

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

· 需要檢查文案內容，避免極限詞的使用。

· 需要檢查所用頁面內容是否與提交審核的版本一致。

 

 

 

參考

 

App Store connect 幫助 http://t.cn/EChYzCy

華為創(chuàng)建并管理應用操作指南 http://t.cn/Ea6OWlK

小米文檔中心-應用商店 http://t.cn/EKxGfEf

百度移動開發(fā)平臺-應用管理 http://t.cn/EChdYQf

魅族應用審核規(guī)范 http://t.cn/EChgoY2

三星應用商店上傳指南 http://t.cn/EChgkye

360移動開發(fā)平臺-應用提交 http://t.cn/ECheJjl

騰訊開發(fā)平臺-應用管理 http://t.cn/EChDIbf

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

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