如何知己知彼,做好視覺競(jìng)品分析?

2018-6-22    博博

如何知己知彼,做好視覺競(jìng)品分析?

美麗的UI 2018-02-05 18:08:13

競(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),比如誰能默寫出微信4個(gè)主導(dǎo)航里面的每個(gè)功能結(jié)構(gòu)?包括我自己都未必都背出來。

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

如何知己知彼,做好視覺競(jìng)品分析?

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

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

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

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

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

  • 構(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)單技法,頁面中分隔來做個(gè)分析,梳理出業(yè)內(nèi)通用技法特點(diǎn),定出設(shè)計(jì)決策依據(jù)。

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

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

2.頁面留白分隔

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

3.灰色透明蒙版分隔

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

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

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

如何知己知彼,做好視覺競(jìng)品分析?

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

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

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

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

  • 設(shè)計(jì)技法3:根據(jù)具有可表現(xiàn)的業(yè)務(wù),圖片個(gè)性化效果,可以增加漸變效果來凸顯業(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)品!

分享本文至:

日歷

鏈接

個(gè)人資料

存檔