競品分析是設(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)格,達(dá)到頁面統(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)品!