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

為什么要做競(jìng)品分析？

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

當(dāng)對(duì)競(jìng)品了解足夠深的前提下，產(chǎn)出的設(shè)計(jì)方案自然而然會(huì)比自己想的正確可能性更大，因?yàn)槟憧吹淖銐蚨嗔耍闹袑?duì)各個(gè)業(yè)務(wù)模塊，視覺樣式能如數(shù)家珍，自然而然設(shè)計(jì)的正確性能提高，但是很多設(shè)計(jì)師做不到這一點(diǎn)，比如誰(shuí)能默寫出微信4個(gè)主導(dǎo)航里面的每個(gè)功能結(jié)構(gòu)？包括我自己都未必都背出來(lái)。

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

競(jìng)品分析的維度？ 

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

• 形：品牌符號(hào)、圖形 

• 色：顏色、對(duì)比色、品牌色、飽和度等

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

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

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

以上是構(gòu)建設(shè)計(jì)的所有元素，任何設(shè)計(jì)都離不開這些，那么在看競(jìng)品的時(shí)候同理也是圍繞這些點(diǎn)去分析。可以分析單個(gè)APP，也可以橫向?qū)Ρ确治觥?

競(jìng)品的選擇 

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

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

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

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

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

2.頁(yè)面留白分隔

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

3.灰色透明蒙版分隔

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

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

設(shè)計(jì)更輕量化，簡(jiǎn)潔，利用留白來(lái)強(qiáng)調(diào)圖片和圖片之間關(guān)系

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

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

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

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

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

▲ 在原圖上增加一層彩色蒙版,樣式疊加為--線性光，增強(qiáng)圖片特殊場(chǎng)景個(gè)性化

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

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