淺析APP設(shè)計:掌握市場截圖設(shè)計原則

4 評論 17511 瀏覽 118 收藏 9 分鐘

其實,應(yīng)用市場圖相關(guān)文章之前就有寫,一直沒有整合。最近在進(jìn)行新版本設(shè)計,在新版本設(shè)計中,分析的競品與優(yōu)秀應(yīng)用的市場圖多達(dá)40余款,從中發(fā)現(xiàn)問題并得到解決方案,一同記錄下來,分享給大家。

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

一、平臺規(guī)范

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

詳情請看本人整理的最新應(yīng)用市場設(shè)計平臺規(guī)范——最新APP應(yīng)用市場截圖尺寸

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

二、設(shè)計原則

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

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

1、首屏原則

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

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

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

2、亮點原則(重點)

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

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

3、簡潔原則

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

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

(微信讀書)

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

4、對比原則

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

(Prisma:字與元素的對比)

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

5、統(tǒng)一原則

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

(得到)

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

6、配色原則

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

(咕嚕咕嚕)

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

7、元素原則

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

(微博)

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

三、設(shè)計樣式

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

1、原生界面

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

(Dribbble)

2、截圖+說明

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

(美顏相機)

3、截圖+手機框+說明(常用)

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

(QQ音樂)

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

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

(騰訊動漫)

5、跨屏界面

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

(貼吧)

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

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

(bilibili)

總結(jié)

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

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

 

作者:JaylonG 一位對產(chǎn)品有著濃厚興趣的UI/UX設(shè)計師。

本文由 @Jaylon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 受教!感謝

    來自浙江 回復(fù)
  2. 小白學(xué)習(xí)了,感謝樓主分享

    來自廣東 回復(fù)
  3. 你好,請問這篇文章能夠轉(zhuǎn)載到我的頭條號上嗎?謝謝。感覺這篇文章對PPT的首頁設(shè)計有啟發(fā)

    來自福建 回復(fù)
    1. 可以的,請注明文章出處與附上文章鏈接。 :mrgreen:

      來自臺灣 回復(fù)