淺析APP設計：掌握市場截圖設計原則

其實，應用市場圖相關文章之前就有寫，一直沒有整合。最近在進行新版本設計，在新版本設計中，分析的競品與優秀應用的市場圖多達40餘款，從中發現問題並得到解決方案，一同記錄下來，分享給大家。

文章開始我們來說說應用市場圖的名稱，它即被叫作市場圖、應用市場圖，也有被稱為應用截圖、上架圖等。所以當大家聽到這幾個名詞時，就可以知道說的是什麼了。

一、平台規範

移動端應用市場無非就是安卓與iOS系統之間的區分。iOS 中 APP STORE的應用規範比較一致，適配便捷，而安卓的應用市場就比較多。

詳情請看本人整理的最新應用市場設計平台規範——《最新APP應用市場截圖尺寸》

＊需強調Google Play除了市場圖之外，另外還有一張Banner圖。

二、設計原則

應用市場存在的目的，是方便與驅使用戶下載應用的行為。那麼市場圖存在的意義，就是幫助用戶更好地了解產品屬性、產品定位和產品的功能。

那麼要設計出優秀的應用市場圖，需要了解以下七大設計原則：

1、首屏原則

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

作用：利用最短時間吸引用戶關注。

2、亮點原則（重點）

當用戶選擇進入應用的詳情頁時，必然是對應用產生了興趣，這時候用戶所關心的是能否獲取想要的信息，亮點原則是突出產品亮點，「能用兩個字說完的特性，就盡量不要寫兩句話」，用戶的時間很寶貴，尊重用戶時間的同時，也為產品自身創造了不錯的自我介紹時間。

作用：讓用戶捕捉重點，便於用戶了解產品核心功能特性，收穫有價值的信息。

3、簡潔原則

化繁為簡是設計大勢所趨，其重點是為了更加強調重點信息，摒棄冗雜的無價值信息，更加高效地引導用戶完成瀏覽、下載等操作。

如App上架標題，迭代的更新說明等。

（微信讀書）

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

4、對比原則

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

（Prisma：字與元素的對比）

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

5、統一原則

統一原則是UI設計中最常見，也是最基本的原則，這點不做詳解，試想下大閱兵如果大家穿著五顏六色，步伐雜亂無章，那畫面一定辣眼睛（題外話）。這裡的統一原則包括風格統一、樣式統一、字體統一等。

（得到）

作用：視覺上的統一，能增加易讀性，不易增強閱讀難度。

6、配色原則

色彩心理學對於人所產生的影響這裡就不做詳解，有興趣的朋友可以自行翻譯書籍，這裡推薦《色彩心理學》《設計色彩》《FPA性格色彩》等書籍，相信能對大家色彩搭配有所幫助。

（咕嚕咕嚕）

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

7、元素原則

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

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

三、設計樣式

這裡只講常見的6種樣式，不予評價優劣。

1、原生界面

——僅應用內截圖界面

（Dribbble）

2、截圖+說明

——應用內截圖配上相關的說明文案

（美顏相機）

3、截圖+手機框+說明（常用）

——戴上手機框，更貼近生活使用情景

（QQ音樂）

4、截圖+手機框+焦點/元素放大+說明（常用）

——利用元素或者界面焦點來強調視覺主題中心

（騰訊動漫）

5、跨屏界面

——跨屏界面能夠很好地吸引用戶的關注，近幾年比較火的設計，因為應用市場中一級導航展示的一般為前兩個頁面。

（貼吧）

6、截圖或元素的應用

——直接採用功能性元素或者界面截圖

總結

通過平台規範、設計原則與設計樣式，能夠更好地對應用市場圖有更好的理解。在設計應用截圖的時候，如果能先通過以上三點進行分析，那麼相信你也能設計出不錯的市場圖，不過設計樣式並不一定適用於所有應用，可酌情採納。

以上是鄙人仔細整理的分析文檔，希望分享能對大家有所幫助，出文不易，歡迎大家多多訂閱與支持。

作者：JaylonG 一位對產品有著濃厚興趣的UI/UX設計師。

本文由 @Jaylon 原創發佈於人人都是產品經理。未經許可，禁止轉載。