2019-8-1 鶴鶴
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
1.競品分析的定義
從專業(yè)的角度來講，競品分析是通過系統(tǒng)的分析方法去全面了解市場上位于前列的競爭對手的產(chǎn)品，能夠讓設(shè)計師快速了解自家產(chǎn)品所處的位置，從而來針對性的改進(jìn)自身產(chǎn)品的一個方法。簡而言之，就是要站在巨人的肩膀上去思考，以競品分析的形式去學(xué)習(xí)其他優(yōu)秀的產(chǎn)品，從而解決自身產(chǎn)品所存在的問題。
2.為什么要去做競品分析
做一件事情之前一定要思考做這件事的價值和意義，只有你明白其重要和必要性，你才會知道該怎樣去做這件事情，而不是一提起競品分析就找一大堆專業(yè)框架和術(shù)語然后去填內(nèi)容，這樣雖然產(chǎn)出了很多，但是關(guān)鍵性的內(nèi)容點(diǎn)其實(shí)還是不清楚。
說直白點(diǎn)，你需要通過這篇競品分析去解決你工作或者創(chuàng)作中遇到的什么問題，帶著疑惑和目的去分析在我看來是更有效率的。因此特分為以下幾種情況：
因此我們要學(xué)會根據(jù)自己的不同需求，去制定不同的競品分析方案，讓分析的內(nèi)容更聚焦。作為UI設(shè)計師來講，通過競品分析為自己的設(shè)計方案提供科學(xué)的理論依據(jù)，為自己贏得話語權(quán)，能夠更好地科學(xué)產(chǎn)出內(nèi)容。
3. 如何尋找競品：
競品的選擇非常重要，如果找到錯誤的競品，那么你所分析的一切結(jié)論可能都引向了一個錯誤的方向。從而讓自己的努力都白費(fèi)。那么怎樣才能找到合適的競品呢？分為以下三類情況
A.核心服務(wù)與目標(biāo)用戶相同的產(chǎn)品（直接競品）：
這一點(diǎn)是廣大設(shè)計師都能想到的范疇，也稱為直接競品。即提供的核心服務(wù)、市場目標(biāo)方向、客戶群體等與我們的產(chǎn)品基本一致，產(chǎn)品功能和用戶需求相似度極高的產(chǎn)品 。往往是通過業(yè)務(wù)關(guān)鍵詞就能直接搜索到的競品，比如音樂類產(chǎn)品，那么直接在應(yīng)用商店，或者通過專業(yè)網(wǎng)站（易觀千帆等）搜索關(guān)鍵詞“音樂”即可搜索出排行前列的競品。
B.目標(biāo)人群不同，但功能模塊和服務(wù)接近的產(chǎn)品（間接競品）：
這類競品可以找起來并不那么直接，可以通過對應(yīng)功能去逆推擁有此功能的產(chǎn)品，并進(jìn)行相關(guān)搜索。
如果想不到，可以通過“人人都是產(chǎn)品經(jīng)理” “36氪“等關(guān)于產(chǎn)品資訊的網(wǎng)站進(jìn)行查詢，甚至可以通過百度指數(shù)來進(jìn)行發(fā)散思維，看一下跟你關(guān)鍵功能相接近的都有哪些。比如你研究外賣產(chǎn)品，除去餓了么和美團(tuán)等直接競品，你還可以在分析用戶下單和購買流程中，去分析淘寶和京東等購物產(chǎn)品，也能得到一定的幫助。
C.目標(biāo)人群和服務(wù)都不同，但交互或者視覺有可以參考的產(chǎn)品（關(guān)聯(lián)競品）：
這里所選擇的產(chǎn)品，定位和領(lǐng)域可以都完全不同，但是你要從這款產(chǎn)品中得到啟發(fā)，從而讓你的產(chǎn)品能夠擁有其他競品不同的特點(diǎn)或者功能模塊。有一個很典型也熟知的的案例，就是衛(wèi)龍辣條的設(shè)計案例，在衛(wèi)龍推出之前，可以說是沒人會想到辣條會和高端扯上關(guān)系，但是衛(wèi)龍就是借鑒與其領(lǐng)域完全不同的蘋果設(shè)計去做，從而在包裝上獨(dú)樹一幟，從而吸引人們注意取得成功。因此通過不同領(lǐng)域跨行業(yè)的產(chǎn)品有時候也可以找到不錯的思維方向。
4.如何進(jìn)行商業(yè)分析：
進(jìn)行商業(yè)分析，這里只提及到三個基本選項(xiàng)：商業(yè)背景、產(chǎn)品盈利模式以及用戶人群。通過這三個基本要素，你能對所研究的競品有一個大概的了解。當(dāng)然深入了解還需要其他平臺（官網(wǎng)網(wǎng)站、36Kr等)來查閱更多的相關(guān)性資料，下列是對QQ音樂商業(yè)背景的簡要分析。
5. 如何進(jìn)行交互分析：
我們在做交互分析時，我們需要進(jìn)行必要的兩點(diǎn)分析：用戶路徑和交互維度。
用戶路徑：指用戶從某個開始行為事件直到結(jié)束事件的行為路徑，即用戶在使用某個功能的完整流程稱之為用戶路徑。我們需要去觀察和體驗(yàn)在這一個完整路徑中涉及到的頁面、動效、視覺到底是怎樣的。就拿登錄頁來說，我們看看排行前列的競品是怎么做的。通過相應(yīng)的體驗(yàn)和對比分析，我們就可以找出這其中符合我們產(chǎn)品性質(zhì)的最優(yōu)解，從而提高我們的登錄注冊效率。
交互維度：交互維度和用戶路徑有所區(qū)別。這一層需要弄清楚產(chǎn)品的核心路徑，從而能夠更好的解析產(chǎn)品各個層面的邏輯關(guān)系，這就需要我們以用戶的角度去逐個體驗(yàn)，整體聯(lián)系，隨后記錄下來。使用過程中我們也要去觀察APP中的交互小細(xì)節(jié)，怎樣分享的，怎樣展示的，比如音樂軟件進(jìn)行截屏后和點(diǎn)擊喜歡按鈕后的反饋是怎樣的。
6. 如何進(jìn)行視覺設(shè)計：
在進(jìn)行視覺分析時，有一點(diǎn)需要注意，如果你需要詳細(xì)分析某一模塊，請用手機(jī)尺寸截圖后拿到設(shè)計軟件中進(jìn)行測量，不要光靠眼睛觀察，很多時候的小細(xì)節(jié)我們只有在手動測量后才能感受到，比如控件的尺寸大小，間距的大小，以及顏色的取值，都需要精準(zhǔn)測量后才能得出靠譜的結(jié)論。
怎樣進(jìn)行視覺分析呢，我比較推薦從一個app 視覺語言最基本的五個維度去分析，即“形色字構(gòu)質(zhì)”
最近以音樂APP進(jìn)行了一次競品分析，以QQ音樂APP來舉例進(jìn)行分析（當(dāng)然競品分析并不能只分析一個，而應(yīng)該根據(jù)你需要的功能找多個競品進(jìn)行對比分析，才能看到更多的維度，這里只拿一個舉例）：
6.1 圖形元素的分析
首先我們以形進(jìn)行分析，形即圖形元素，具體來講即LOGO和圖標(biāo)。LOGO的更新在2018年10月以后已完成更新。新版的主要圖標(biāo)整理歸納如下：
可以看到整體的圖標(biāo)色調(diào)更加清新，造型設(shè)計更加圓潤，未選中狀態(tài)的線形圖標(biāo)則采用4px的描邊，粗線形描邊讓整體界面風(fēng)格顯得更加穩(wěn)重的同時對用戶的干擾也較小。新版的圖標(biāo)界面讓界面保持穩(wěn)重的同時又富有活力。
6.2 色彩體系的分析
其次則是對色這一類別進(jìn)行分析，顏色其實(shí)是對于品牌調(diào)性有很大的影響，比如一想起QQ音樂就知道主色是綠，一想起網(wǎng)易云音樂就知道主色是紅，對用戶的記憶點(diǎn)更深刻。通過截屏測量進(jìn)行分析，得出整體的顏色如下（由于手機(jī)屏幕的色差原因，不可避免會有些許誤差）
從局部來看，分析顏色最重要的一點(diǎn)就是能夠弄清楚一個頁面中哪些元素用的是同一種顏色，觀察成熟的產(chǎn)品是怎樣用顏色（和字重）去區(qū)分層級關(guān)系的。
可以看到，用主色和三種輔色即可區(qū)分界面的整個層級關(guān)系，由此思考我們在制作自己的界面時也避免用太多的顏色，造成界面太過花哨。（顏色的具體色值可能有些許誤差，更重要的是看顏色層級關(guān)系）
6.3 字體體系的分析
接下來是字的分析，字即字體體系，可具體到字體和字號。設(shè)計中字體一般來講是蘋方，字號則根據(jù)設(shè)計師的定義來進(jìn)行相應(yīng)的規(guī)范。通過頁面的測量分析，可以拿到其具體的字號大小層級分析。（以下定義基于750的設(shè)計尺寸）
對于單個界面的分析，個人覺得要帶有思考的眼光去看待，比如在首頁中字號其實(shí)分配過多，像“更多”這種按鈕就不應(yīng)該再分一個字號，字號太多整體就顯得有一點(diǎn)點(diǎn)亂了。雖然大廠的設(shè)計能在一定程度上給予我們參考，但并不是說他的每一個設(shè)計都是正確的，我們要學(xué)會用審視的眼光去看待出現(xiàn)在身邊的設(shè)計。
6.4 界面構(gòu)成分析
界面構(gòu)成即界面的元素大小以及他們的布局，例如有時候我們不知道一個標(biāo)準(zhǔn)的搜索框的長寬具體多少才是合適的，這就需要我們?nèi)シ治銎渌墒斓纳虡I(yè)產(chǎn)品，通過測量來知道具體的數(shù)值，從而督促自己進(jìn)行正確的設(shè)計。這里選取了一個默認(rèn)的首頁進(jìn)行分析。
將一個頁面用右邊的形式進(jìn)行原型化，去掉干擾可以把結(jié)構(gòu)看得更清楚。間距之類的也可以通過軟件進(jìn)行測量。可以看到QQ9.0版本的去線化設(shè)計，利用大間距來區(qū)分各個模塊，去掉了其他的干擾元素，整體的界面模塊看起來非常整潔輕盈以及富有呼吸感。統(tǒng)一的圓角化設(shè)計也讓整體設(shè)計符合流行趨勢，顯得更活潑。
6.5 質(zhì)感與風(fēng)格分析
關(guān)于界面的質(zhì)感則是不同于扁平化的一個設(shè)計，即有的頁面在你看來細(xì)節(jié)會更豐富，層級會更深。界面質(zhì)感通過漸變，疊加，透明度等不同方式來呈現(xiàn)，比如在QQ音樂中的會員界面卡片，則體現(xiàn)了微質(zhì)感：
上方的會員卡片就加入了漸變和圖案疊加的方式來為卡片增加質(zhì)感，讓整個界面顯得更精致。當(dāng)然，疊加的圖案都是與內(nèi)容相關(guān)的，不能為了疊加而疊加。包括下方的權(quán)益圖標(biāo)，也采用了漸變的方式來讓整個圖標(biāo)顯得更精致和有質(zhì)感。我們再處理質(zhì)感的時候也可以用這種方式來進(jìn)行。
以上通過“形色字構(gòu)質(zhì)”來分析是屬于單個分析，相當(dāng)于去拆解一個成熟產(chǎn)品中的每一個細(xì)節(jié)點(diǎn)，從而去學(xué)習(xí)和吸收。我們還要學(xué)會進(jìn)行對比分析。把單獨(dú)某一個功能模塊拎出來，通過不同類型的對比從而歸納出這一類的設(shè)計方法和樣式，進(jìn)而總結(jié)相應(yīng)規(guī)律。
比如某一天你需要設(shè)計一個歌單列表，你此時就需要分析所有TOP排行的歌單列表，看看分別都有什么，從而總結(jié)歸納出結(jié)構(gòu)來，再進(jìn)行分類。
通過分析提煉，形成以下結(jié)論并進(jìn)行相應(yīng)的概念風(fēng)格展示設(shè)計：
這樣，我們最后制作出來的方案才能涵蓋比較全的解決方案，從而能夠更好的助力設(shè)計產(chǎn)出。上圖的產(chǎn)出可能稍顯簡陋，但只是做一個簡單的示例，真正的產(chǎn)出應(yīng)該更加有細(xì)節(jié)和落地，也要結(jié)合自己的工作需求做相應(yīng)調(diào)整。
7.關(guān)注競品的版本迭代和用戶評價：
關(guān)注版本更迭，閱讀競品版本更新的詳細(xì)說明，你可以從中得出版解決了什么問題，提升了哪些體驗(yàn)，添加了哪些功能，融合了什么流行的設(shè)計趨勢。產(chǎn)品迭代就是團(tuán)隊(duì)通過用戶需求對某個產(chǎn)品不斷完善的一個過程。迭代對于一個產(chǎn)品來說是至關(guān)重要的，一個產(chǎn)品如果不想被對手超越，就必須不斷的對版本進(jìn)行更新迭代。
除了關(guān)注具體的內(nèi)容，你還可以觀察版本更新的提示信息，例如夸克瀏覽器在每次更新時總會用富有趣味的文案來打動你，從而讓你更加情愿去更新，提升新版的使用率。
用戶評價則更不用說，產(chǎn)品的最終服務(wù)對象就是用戶，用戶評價的重要性自然不言而言。不過我們要客觀辯證地去看待用戶的評價，吸收好的建議，屏蔽無腦的意見，從而能夠正確地迭代版本。用戶評價的查看可以使用App Store或者用戶評價網(wǎng)站（https://appbot.co/）去查詢。
總結(jié)
以上的篇幅較長，看下來可能會有一些累，那么此篇文章提及到的點(diǎn)在這里回顧一次：
1.競品分析的定義-站在巨人的肩膀上去學(xué)習(xí)；
2.為什么做-基于自己的目的去進(jìn)行對應(yīng)的競品分析，分析的最終目的是解決自己在設(shè)計過程中遇到的問題；
3.競品分析分為三個層面：視覺分析、交互分析以及商業(yè)分析；
4.怎樣進(jìn)行商業(yè)分析（商業(yè)背景、盈利模式、用戶人群）；
5.怎樣進(jìn)行交互分析 （用戶路徑、核心路徑、交互細(xì)節(jié)）；
6.怎樣進(jìn)行視覺分析 （從“形色字構(gòu)質(zhì)”五個維度去分析以及如何對比分析應(yīng)用）；
7.競品的迭代和用戶評價的重要性。
自己有一個小習(xí)慣，看完每一篇文章，總會告訴自己一定要在腦海里回顧一遍，思考一下這一篇文章到底有什么觀點(diǎn)是自己之前沒有想到的，哪怕只有一點(diǎn)是沒觸及到的知識盲區(qū)，那么這篇文章之于自己就是有意義的。所以希望大家看完能有些許收獲那便是最好的了。
藍(lán)藍(lán)設(shè)計( m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://m.sdgs6788.com