各大應(yīng)用市場圖的UI設(shè)計(jì)規(guī)則

一. 平臺規(guī)范

移動端應(yīng)用市場無非就是安卓與iOS系統(tǒng)之間的區(qū)分。iOS 中 APP STORE的應(yīng)用規(guī)范比較一致，適配便捷，而安卓的應(yīng)用市場就比較多。

需強(qiáng)調(diào)Google Play除了市場圖之外，另外還有一張Banner圖。

 

二. 設(shè)計(jì)原則

應(yīng)用市場存在的目的，是方便與驅(qū)使用戶下載應(yīng)用的行為。那么市場圖存在的意義，就是幫助用戶更好的了解產(chǎn)品屬性、產(chǎn)品定位和產(chǎn)品的功能。

那么要設(shè)計(jì)出優(yōu)秀的應(yīng)用市場圖，需要了解以下七大設(shè)計(jì)原則。
 

1. 首屏原則

在選擇應(yīng)用時，進(jìn)入應(yīng)用市場映入眼簾的必定是首屏圖片。，在同行業(yè)競品競爭激烈，同質(zhì)化嚴(yán)重的現(xiàn)今，對于用戶來說，怎么樣在幾百上千款應(yīng)用中挑出喜歡的，必然是要有所不同，甚至讓人耳目一新。除了利用更加出彩的設(shè)計(jì)作為首屏，還可以使用宣傳視頻作為首屏。

△ 以視頻為首屏的百度、抖音

作用：利用最短時間吸引用戶關(guān)注。
 

2. 亮點(diǎn)原則（重點(diǎn)）

當(dāng)用戶選擇進(jìn)入應(yīng)用的詳情頁時，必然是對應(yīng)用產(chǎn)生了興趣，這時候用戶所關(guān)心的是能否獲取想要的信息，亮點(diǎn)原則是突出產(chǎn)品亮點(diǎn)?！改苡脙蓚€字說完的特性，就盡量不要寫兩句話」，用戶的時間很寶貴，尊重用戶時間的同時，也為產(chǎn)品自身創(chuàng)造了不錯的自我介紹時間。

作用：讓用戶捕捉重點(diǎn)，便于用戶了解產(chǎn)品核心功能特性，收獲有價值的信息。
 

3. 簡潔原則

化繁為簡是設(shè)計(jì)大勢所趨，其重點(diǎn)是為了更加強(qiáng)調(diào)重點(diǎn)信息，摒棄冗雜的無價值信息，更加高效地引導(dǎo)用戶完成瀏覽、下載等操作。

如App上架標(biāo)題，迭代的更新說明等。

△ 微信讀書

作用：增加內(nèi)容信息的易讀性與可讀性，不易使用戶視覺疲勞。
 

4. 對比原則

對比是設(shè)計(jì)的基本原則之一，是區(qū)分類似與不同的基本方法。文字與截圖的對比，背景與元素的對比，正如展示時是重界面展示，還是重文案說明的區(qū)分，推薦可以去看看格式塔心理美學(xué)設(shè)計(jì)。

△ Prisma：字與元素的對比

作用：對比和等同是視覺展示的重要部分，是用戶明確信息展示的重要方式。
 

5. 統(tǒng)一原則

統(tǒng)一原則是UI設(shè)計(jì)中最常見，也是最基本的原則，這點(diǎn)不做詳解。試想下大閱兵，如果大家穿著五顏六色，步伐雜亂無章，那畫面一定辣眼睛。這里的統(tǒng)一原則包括風(fēng)格統(tǒng)一、樣式統(tǒng)一、字體統(tǒng)一等。

△ 得到

作用：視覺上的統(tǒng)一，能增加易讀性，不易增強(qiáng)閱讀難度。
 

6. 配色原則

色彩心理學(xué)對于人所產(chǎn)生的影響這里就不做詳解，有興趣的朋友可以自行翻閱書籍，這里推薦《色彩心理學(xué)》、《設(shè)計(jì)色彩》、《FPA性格色彩》等書籍，相信能對大家色彩搭配有所幫助。

△ 咕嚕咕嚕

作用：通過色彩抓住用戶心理活動，滿足用戶心理需求。
 

7. 元素原則

擅長利用元素豐富畫面的設(shè)計(jì)師必定是個好設(shè)計(jì)，或者是個老司機(jī)。元素對于界面的影響是如虎添翼，并不是說不添加元素就是差的設(shè)計(jì)，只是某些模塊利用元素來進(jìn)行用戶視覺聚焦，能夠達(dá)到不錯的效果。

△ 微博

作用：元素能夠豐富畫面，讓畫面更加活潑。

 

三. 設(shè)計(jì)樣式

這里只講常見的6種樣式，不予評價優(yōu)劣。
 

1. 原生界面

原生界面——僅應(yīng)用內(nèi)截圖界面。

△ Dribbble
 

2. 截圖+說明

截圖+說明——應(yīng)用內(nèi)截圖配上相關(guān)的說明文案。

△ 美顏相機(jī)
 

3. 截圖+手機(jī)框+說明（常用）

截圖+手機(jī)框+說明——戴上手機(jī)框，更貼近生活使用情景。

△ QQ音樂
 

4. 截圖+手機(jī)框+焦點(diǎn)/元素放大+說明（常用）

截圖+手機(jī)框+焦點(diǎn)/元素放大+說明——利用元素或者界面焦點(diǎn)來強(qiáng)調(diào)視覺主題中心。

△ 騰訊動漫
 

5. 跨屏界面

跨屏界面——跨屏界面能夠很好的吸引用戶的關(guān)注。近幾年比較火的設(shè)計(jì)，因?yàn)閼?yīng)用市場中一級導(dǎo)航展示的一般為前兩個頁面。

△ 貼吧
 

6. 截圖或元素的應(yīng)用

截圖或元素的應(yīng)用——直接采用功能性元素或者界面截圖。

△ bilibili

 

總結(jié)

通過平臺規(guī)范、設(shè)計(jì)原則與設(shè)計(jì)樣式，能夠?qū)?yīng)用市場圖有更好的理解。在設(shè)計(jì)應(yīng)用截圖的時候，如果能先通過以上三點(diǎn)進(jìn)行分析，那么相信你也能設(shè)計(jì)出不錯的市場圖，不過設(shè)計(jì)樣式并不一定適用于所有應(yīng)用，可酌情采納。