如何從視覺設(shè)計(jì)師的角度做競(jìng)品分析?
從視覺設(shè)計(jì)師的角度做一份詳細(xì)的競(jìng)品分析的第一步是跳出自己職能范圍,首先不要只想著從視覺的角度去分析競(jìng)品。
Jesse James Garrett在《用戶體驗(yàn)要素》一書中歸納出:
視覺在整個(gè)產(chǎn)品設(shè)計(jì)的流程中處于靠后的位置,處于一個(gè)產(chǎn)品的最外層(表層)。如果只盯著表層的東西來(lái)分析,就無(wú)法得出競(jìng)品是為什么這么去設(shè)計(jì)的,這樣的設(shè)計(jì)能解決什么問題,自己的產(chǎn)品與競(jìng)品的差異、差距也沒法系統(tǒng)的分析出來(lái),所以分析所得到的結(jié)論也站不住腳。
所以想要系統(tǒng)的分析一個(gè)或多個(gè)同類競(jìng)品,必須由戰(zhàn)略層(strategy)→范圍層(scope)→結(jié)構(gòu)層(structure)→框架層 (skeleton)→表現(xiàn)層(surface)來(lái)逐一分析。因?yàn)槔斫饬俗畹讓觾?nèi)容,才能右下至上逐一分析每一層之間的關(guān)系,最后得出為什么表現(xiàn)層所呈現(xiàn) 出來(lái)的結(jié)果——就是我們要的所謂——從視覺設(shè)計(jì)師的角度做一份詳細(xì)的競(jìng)品分析。
戰(zhàn)略層——戰(zhàn)略不僅僅包括了經(jīng)營(yíng)者想從產(chǎn)品得到什么,還包括了用戶想從產(chǎn)品得到什么。
其中從經(jīng)營(yíng)者來(lái)講,我們需要去分析產(chǎn)品的定位,這種定位有哪些優(yōu)勢(shì),與其他同類的產(chǎn)品相比,有哪些獨(dú)特的、有差異化的競(jìng)爭(zhēng)點(diǎn)。
在這個(gè)層面上,身為視覺設(shè)計(jì)師師可能很難去得出一個(gè)靠譜的結(jié)論,所以建議在做這部分的內(nèi)容分析時(shí)候,多和產(chǎn)品經(jīng)理溝通,看看他們是怎么看待競(jìng)品的定位。同時(shí)結(jié)合自己的觀察和平時(shí)的使用體驗(yàn),來(lái)得出自己的結(jié)論。
范圍層——戰(zhàn)略層確定產(chǎn)品各種特性和功能的最合適的組合方式,而這些特性和功能就構(gòu)成了產(chǎn)品的范圍層(scope)。這些特性和功能其實(shí)就是這些產(chǎn)品的特色和亮點(diǎn),形成產(chǎn)品的最根本的功能性的競(jìng)爭(zhēng)力。
這個(gè)層面中,其實(shí)作為視覺設(shè)計(jì)師 應(yīng)該已經(jīng)有很多自己的見解了。平時(shí)和產(chǎn)品經(jīng)理合作的過程中,產(chǎn)品提的那些折磨我們的需求,其實(shí)都是圍繞著范圍層提出的功能(當(dāng)然其中有很多不著調(diào)的)。我 們就可以通過自己對(duì)這些功能的使用體驗(yàn)來(lái)逐步分析競(jìng)品是如何有之前得出的戰(zhàn)略層的結(jié)論來(lái)建立這些功能性的差異。同時(shí)如果兩者有差異,也可以根據(jù)這一層得出 的結(jié)論來(lái)輔助修正戰(zhàn)略層的分析。(這部分最好是能有一些數(shù)據(jù)支撐自己的分析,比如競(jìng)品與自己產(chǎn)品類似功能入口的點(diǎn)擊率數(shù)據(jù),產(chǎn)品的日活等等,這些數(shù)據(jù)都可 以找與自己對(duì)接的產(chǎn)品經(jīng)理來(lái)拿到)
結(jié)構(gòu)層與框架層——框架是范圍(功能)的具體表達(dá)方式??蚣軐哟_定了產(chǎn)品上交互元素的位置;而結(jié)構(gòu)層則用來(lái)設(shè)計(jì)用戶如何到達(dá)某個(gè)頁(yè)面,并且在他們做完事情之后能去什么地方。比如框架層定義了頁(yè)面中各個(gè)元素的排列方式,而結(jié)構(gòu)層則確定哪些類別應(yīng)該出現(xiàn)在那里。
這兩個(gè)部分作為視覺設(shè)計(jì)師來(lái)講就更加清楚了,首先對(duì)于結(jié)構(gòu)層其實(shí)就是整個(gè)產(chǎn)品大的結(jié)構(gòu)——比如首頁(yè)、發(fā)現(xiàn)頁(yè)、個(gè)人頁(yè)中大的結(jié)構(gòu)。不同的結(jié)構(gòu)由不同范 圍層的功能需求,及功能優(yōu)先級(jí)決定。而框架層具體指的就是解決一個(gè)交互問題所采用的具體交互解決方式,不同的框架和結(jié)構(gòu)決定了整體產(chǎn)品操作使用中的差異化 操作體驗(yàn)。這一層對(duì)視覺的影響是最為重要的,在工作中我們會(huì)發(fā)現(xiàn)往往不同的結(jié)構(gòu)排布都會(huì)影響頁(yè)面整體的風(fēng)格(這里不是指大的風(fēng)格比如扁平或擬物的這個(gè)維度 的風(fēng)格,扁平內(nèi)部也可以有非常豐富的差異)。
在分析這部分的時(shí)候用思維導(dǎo)圖可以很便捷的分析不同產(chǎn)品之間的差異點(diǎn),有時(shí)候分析半天沒什么頭緒,用導(dǎo)圖列出來(lái)后就一目了然。類似這種:
我用的是
(類似的還有很多,隨你喜歡)
但是話說(shuō)回來(lái)其實(shí)設(shè)計(jì)設(shè)計(jì)師對(duì)于這些底層(相對(duì)來(lái)說(shuō))內(nèi)容能分析的能力和深度有限,所以可能結(jié)論往往很難有很強(qiáng)的說(shuō)服力(層級(jí)越底難度越大),但是這個(gè)也取決于你與工作同伴的協(xié)同與收集多種數(shù)據(jù)、處理分析多種數(shù)據(jù)的能力,準(zhǔn)備的越充分,相對(duì)來(lái)說(shuō)也越可信,價(jià)值也就越高。
上面提到的這些其實(shí)都不是我們視覺視覺師的職能范圍之內(nèi)的東西,但是由深入淺的這些層級(jí)分析對(duì)視覺設(shè)計(jì)的影響卻又同時(shí)由淺及深。在每一個(gè)層面中過渡 中,我們要分析的那些問題由抽象變得越來(lái)越具體。隨著層面的上升,環(huán)環(huán)相扣,我們要做的決策就一點(diǎn)一點(diǎn)地變得具體,并關(guān)系到越來(lái)越精細(xì)的細(xì)節(jié)。最后就到了 最后的表現(xiàn)層——就是視覺設(shè)計(jì)師的具體工作職能。
在表現(xiàn)層(視覺設(shè)計(jì))中要分析的內(nèi)容詳細(xì)的又可分為:性格(DNA)→設(shè)計(jì)手法→色彩體系→布局結(jié)構(gòu)(與交互有一定交叉)→細(xì)節(jié)優(yōu)化(修正色彩、布局結(jié)構(gòu))。這個(gè)流程和平時(shí)在工作中設(shè)計(jì)一個(gè)全新的產(chǎn)品或者迭代一個(gè)大版本的設(shè)計(jì)流程很類似。
首先產(chǎn)品的性格會(huì)受到整體產(chǎn)品戰(zhàn)略層及范圍層的影響,就是說(shuō)這個(gè)產(chǎn)品到底是想做一個(gè)什么的性格,比如年輕,活力,高品質(zhì)等等,這些都可以作為整個(gè)產(chǎn) 品的性格要素(關(guān)鍵詞)。說(shuō)句題外話,曾經(jīng)做過一款上頭決定的關(guān)鍵詞是——年輕又不失穩(wěn)重,內(nèi)斂又不失活潑的產(chǎn)品,呵呵,吐血身亡。定這些詞的時(shí)候不能沖 突矛盾啊!分析競(jìng)品的性格特點(diǎn)也同樣如此,切記!
在分析競(jìng)品性格的時(shí)候可以通過競(jìng)品的品牌、logo設(shè)計(jì);界面中控件,圖標(biāo)的顏色形狀甚至動(dòng)效來(lái)分析。
在這個(gè)環(huán)節(jié)可以加入一些象限圖來(lái)輔助說(shuō)明分析中不同產(chǎn)品之間的差異。比如這種:
例子中是我在工作分析競(jìng)品色彩時(shí)用到的一個(gè)象限圖,在分析不同品牌氣質(zhì)性格是同樣可以用到。
在設(shè)計(jì)手法上自然一目了然,扁平還是擬物,Material Design還是iOS風(fēng),又或者M(jìn)etro風(fēng)等等,這些大風(fēng)格中的差異性作為一名合格的視覺設(shè)計(jì)師自然不用多說(shuō)了。
由產(chǎn)品的性格延伸出來(lái)的色彩體系又可以細(xì)分出顏色的搭配方式,界面中用色比例,顏色的填充方式等等角度來(lái)分析競(jìng)品顏色角度的使用。顏色的使用方式和手法不但可以佐證前面得出的設(shè)計(jì)中性格的分析結(jié)論,同時(shí)也會(huì)對(duì)后面分析布局結(jié)構(gòu)與細(xì)節(jié)的分析產(chǎn)生影響。
接下來(lái)的布局結(jié)構(gòu)需要考慮到的點(diǎn)包括,閱讀性、使用習(xí)慣、界面空間的展示效、字重(甚至字體的選擇)、行距,段間距等等角度來(lái)分析。(不同類型的產(chǎn)品差異很大,著重分析的點(diǎn)可能會(huì)有很大差別,面也很廣,建議根據(jù)具體情況,具體看競(jìng)品的設(shè)計(jì)上哪些角度是值得分析的)。
分析到這個(gè)階段其實(shí)競(jìng)品整體的設(shè)計(jì)風(fēng)格已經(jīng)基本分析的差不多了。上面說(shuō)的比較概括,其實(shí)把這些點(diǎn)詳細(xì)展開可以分析很多內(nèi)容。
最后是設(shè)計(jì)的細(xì)節(jié)。這部分可以找一些競(jìng)品在設(shè)計(jì)中的一些有亮點(diǎn)的細(xì)節(jié)做著重分析,說(shuō)明這樣的設(shè)計(jì)有什么好處等等,具體情況具體分析。
最后也是最重要的是總結(jié)結(jié)論,分析了半天一定要得出一個(gè)有指導(dǎo)意義的結(jié)論才行,有的競(jìng)品分析做了一大堆東西,分析完就完了,最后一頁(yè)光禿禿的寫個(gè) Thank you! 毛結(jié)論都沒的出來(lái),這種分析意義何在?
總結(jié)的時(shí)候主要是突出說(shuō)明競(jìng)品(們)相較于自家產(chǎn)品有哪些優(yōu)勢(shì),包括最開始的幾個(gè)層面以及視覺角度展開后的這些維度。競(jìng)品又有哪些不足,同時(shí)最好嘗 試去說(shuō)明競(jìng)品是什么原因而產(chǎn)生了這些問題。我們?cè)趺礃游談e人的優(yōu)勢(shì),盡量避免陷入他們的不足,一句話概括就是取其精華去其糟粕。最后再?gòu)脑O(shè)計(jì)的角度詳細(xì) 講一下你準(zhǔn)備如何突破。
原文地址:zhihu
作者:高山垚
? 用戶體驗(yàn)5大要素,讓設(shè)計(jì)不再?gòu)慕缑骈_始思考。而是從產(chǎn)品的定義開始思考。