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

為什么要做競品分析？

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

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

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

競品分析的維度？ 

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

• 形：品牌符號、圖形 

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

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

• 構：結構，界面在結構是居中，還是偏左或偏右

• 質：質感，扁平、3D、擬物化等

以上是構建設計的所有元素，任何設計都離不開這些，那么在看競品的時候同理也是圍繞這些點去分析?？梢苑治鰡蝹€APP，也可以橫向對比分析。

競品的選擇 

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

跨領域分析，比如想做圖文排版分析，那么除了競品外，還需要關注新聞領域的，比如Yahoo News、網易新聞等，這些APP的圖文板式是做的最好的，值得去學習。

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

1.灰色描邊強調分隔

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

2.頁面留白分隔

足夠大的留白來強調圖片和圖片之間關系

3.灰色透明蒙版分隔

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

4.結合設計趨勢

設計更輕量化，簡潔，利用留白來強調圖片和圖片之間關系

設計策略產出 

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

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

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

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

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

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

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