前段時間有新人小伙伴問我應(yīng)用市場圖是什么，接到市場圖的需求應(yīng)該怎么做。市場圖雖然不屬于平常的頁面設(shè)計，但由于涉及頁面內(nèi)容也需要UI設(shè)計師的支持，不少公司也是直接由UI來完成市場圖設(shè)計的。

由于涉及眾多的平臺，第一次做的小伙伴難免會有些混亂，那么今天我們就來梳理一下應(yīng)用市場圖的設(shè)計過程吧~

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

概念認(rèn)識

1.名稱

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

2.作用

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

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

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

3.表現(xiàn)形式

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

· 靜態(tài)圖片

必須項；格式：JPG、PNG；

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

· 視頻

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

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

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

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

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

設(shè)計步驟

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

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

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

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

· 功能向

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

· 內(nèi)容向

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

· 運營向

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

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

2.選擇組成元素與設(shè)計樣式

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

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

· 界面截圖

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

· 截圖+文案

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

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

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

· 截圖+文案+手機(jī)框+內(nèi)容元素、應(yīng)用組件

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

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

3.選擇設(shè)計風(fēng)格

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

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

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

· 插畫風(fēng)

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

· 全彩風(fēng)

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

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

· 跨屏風(fēng)

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

· 元素風(fēng)

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

4.靈活運用

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

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

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

比如Mimo，同樣是截圖+文案+手機(jī)框的元素，但因為調(diào)整了手機(jī)的位置，上下穿插的變化讓畫面更加活潑。

Firefox讓手機(jī)的連續(xù)跨屏結(jié)合背景的色彩漸變，使界面更加活力時尚。

喜馬拉雅利用人物元素結(jié)合不同背景顏色及材質(zhì)突出主題內(nèi)容，以及對不同定位的內(nèi)容采取的不同的設(shè)計風(fēng)格，讓設(shè)計風(fēng)格更加符合內(nèi)容主題更加契合。

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

劃重點

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

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

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

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

作者：焱小玖

公眾號：海鹽社