競品分析是設(shè)計師了解產(chǎn)品的一個重要途徑，通過對競品分析，設(shè)計師在了解競品的特點后，能夠更好地做出符合當(dāng)前產(chǎn)品的設(shè)計方案。

為什么要做競品分析？

經(jīng)常有設(shè)計師朋友問如何做競品分析，做分析最主要目標(biāo)是通過競品可以讓設(shè)計師了解產(chǎn)品的一個重要途徑，也就是常說的設(shè)計思維，通過對競爭對手產(chǎn)品檢測，多觀察了解對方的產(chǎn)品特點，然后在自己業(yè)務(wù)場景下提供符合當(dāng)前產(chǎn)品解決方案。

當(dāng)對競品了解足夠深的前提下，產(chǎn)出的設(shè)計方案自然而然會比自己想的正確可能性更大，因為你看的足夠多了，心中對各個業(yè)務(wù)模塊，視覺樣式能如數(shù)家珍，自然而然設(shè)計的正確性能提高，但是很多設(shè)計師做不到這一點，比如誰能默寫出微信4個主導(dǎo)航里面的每個功能結(jié)構(gòu)？包括我自己都未必都背出來。

所以需要做競品分析幫助我們了解產(chǎn)品功能，了解設(shè)計可能性，另外能隨時知己知彼，在設(shè)計時做出正確設(shè)計決策。

競品分析的維度？ 

競品分析有兩個緯度，一個是功能交互緯度，另一個視覺緯度。今天只講視覺維度，在APP中就是：色彩、UIkit、按鈕、圖文關(guān)系、表單、icon、導(dǎo)航、彈窗等，也可以理解為形、色、字、構(gòu)、質(zhì)去分析。

• 形：品牌符號、圖形 

• 色：顏色、對比色、品牌色、飽和度等

• 字：頁面中字體、不同字體感受是不一樣的

• 構(gòu)：結(jié)構(gòu)，界面在結(jié)構(gòu)是居中，還是偏左或偏右

• 質(zhì)：質(zhì)感，扁平、3D、擬物化等

以上是構(gòu)建設(shè)計的所有元素，任何設(shè)計都離不開這些，那么在看競品的時候同理也是圍繞這些點去分析?？梢苑治鰡蝹€APP，也可以橫向?qū)Ρ确治觥?

競品的選擇 

以電商為例，需要研究全球TOP如ebay、亞馬遜、韓國的SSG和R9CM、以及國內(nèi)垂直領(lǐng)域獨角獸，和一些設(shè)計優(yōu)秀的應(yīng)用，如Airbnb、Pinterest、Instagram等。

跨領(lǐng)域分析，比如想做圖文排版分析，那么除了競品外，還需要關(guān)注新聞領(lǐng)域的，比如Yahoo News、網(wǎng)易新聞等，這些APP的圖文板式是做的最好的，值得去學(xué)習(xí)。

下面我圍繞一個簡單技法，頁面中分隔來做個分析，梳理出業(yè)內(nèi)通用技法特點，定出設(shè)計決策依據(jù)。

1.灰色描邊強調(diào)分隔

白色或淺色商品圖四周添加1像素灰色描邊強調(diào)分隔

2.頁面留白分隔

足夠大的留白來強調(diào)圖片和圖片之間關(guān)系

3.灰色透明蒙版分隔

白色商品圖上疊加3-5%透明度黑色，形成圖片輪廓

4.結(jié)合設(shè)計趨勢

設(shè)計更輕量化，簡潔，利用留白來強調(diào)圖片和圖片之間關(guān)系

設(shè)計策略產(chǎn)出 

• 設(shè)計技法1：根據(jù)不同場景，在需要明確頁面風(fēng)格，達到頁面統(tǒng)一效果，在白色商品上增加灰色透明蒙版，形成頁面柵格對齊。

• 設(shè)計技法2：內(nèi)容左右留白的展示圖片相關(guān)處理：商品圖片疊加在底層背景。

▲ 上周邊留出2px邊框，解決白色背景的商品顯示問題

• 設(shè)計技法3：根據(jù)具有可表現(xiàn)的業(yè)務(wù)，圖片個性化效果，可以增加漸變效果來凸顯業(yè)務(wù)特殊性。

▲ 在原圖上增加一層彩色蒙版,樣式疊加為--線性光，增強圖片特殊場景個性化

通過分析我們可以得出新的設(shè)計規(guī)范，以及不同場景處理分隔的技法，可以根據(jù)場景去得出設(shè)計的確定性，讓你的設(shè)計更加科學(xué)。

除了分析技法，其實分析產(chǎn)品，分析交互，分析功能大同小異，重點是要掌握這種分析路徑，讓我們更加了解產(chǎn)品！