如何從視覺設計師的角度做競品分析？

12-19

網上大致搜索了一下，發現大多數都是從產品或者交互的角度在分析。
有些談到視覺方面的也是一筆帶過。
請問作為視覺該如何做一份詳細的競品分析？

本文已授權優設轉載於：魅族乾貨！如何從視覺設計師的角度做競品分析？

————————————————我是分割線————————————————

謝邀。

從視覺設計師的角度做一份詳細的競品分析的第一步是跳出自己職能範圍，首先不要只想著從視覺的角度去分析競品。

Jesse James Garrett在《用戶體驗要素》一書中歸納出：

視覺在整個產品設計的流程中處於靠後的位置，處於一個產品的最外層（表層）。如果只盯著表層的東西來分析，就無法得出競品是為什麼這麼去設計的，這樣的設計能解決什麼問題，自己的產品與競品的差異、差距也沒法系統的分析出來，所以分析所得到的結論也站不住腳。

所以想要系統的分析一個或多個同類競品，必須由戰略層（strategy）→範圍層（scope）→結構層（structure）→框架層（skeleton）→表現層（surface）來逐一分析。因為理解了最底層內容，才能由下至上逐一分析每一層之間的關係，最後得出為什麼表現層所呈現出來的結果——就是我們要的所謂——從視覺設計師的角度做一份詳細的競品分析。

戰略層——戰略不僅僅包括了經營者想從產品得到什麼，還包括了用戶想從產品得到什麼。
其中從經營者來講，我們需要去分析產品的定位，這種定位有哪些優勢，與其他同類的產品相比，有哪些獨特的、有差異化的競爭點。

在這個層面上，身為視覺設計師師可能很難去得出一個靠譜的結論，所以建議在做這部分的內容分析時候，多和產品經理溝通，看看他們是怎麼看待競品的定位。同時結合自己的觀察和平時的使用體驗，來得出自己的結論。

範圍層——戰略層確定產品各種特性和功能的最合適的組合方式，而這些特性和功能就構成了產品的範圍層（scope）。這些特性和功能其實就是這些產品的特色和亮點，形成產品的最根本的功能性的競爭力。

這個層面中，其實作為視覺設計師應該已經有很多自己的見解了。平時和產品經理合作的過程中，產品提的那些折磨我們的需求，其實都是圍繞著範圍層提出的功能（當然其中有很多不著調的）。我們就可以通過自己對這些功能的使用體驗來逐步分析競品是如何有之前得出的戰略層的結論來建立這些功能性的差異。同時如果兩者有差異，也可以根據這一層得出的結論來輔助修正戰略層的分析。（這部分最好是能有一些數據支撐自己的分析，比如競品與自己產品類似功能入口的點擊率數據，產品的日活等等，這些數據都可以找與自己對接的產品經理來拿到）

結構層與框架層——框架是範圍（功能）的具體表達方式。框架層確定了產品上交互元素的位置；而結構層則用來設計用戶如何到達某個頁面，並且在他們做完事情之後能去什麼地方。比如框架層定義了頁面中各個元素的排列方式，而結構層則確定哪些類別應該出現在那裡。

這兩個部分作為視覺設計師來講就更加清楚了，首先對於結構層其實就是整個產品大的結構——比如首頁、發現頁、個人頁中大的結構。不同的結構由不同範圍層的功能需求，及功能優先順序決定。而框架層具體指的就是解決一個交互問題所採用的具體交互解決方式，不同的框架和結構決定了整體產品操作使用中的差異化操作體驗。這一層對視覺的影響是最為重要的，在工作中我們會發現往往不同的結構排布都會影響頁面整體的風格（這裡不是指大的風格比如扁平或擬物的這個維度的風格，扁平內部也可以有非常豐富的差異）。

在分析這部分的時候用思維導圖可以很便捷的分析不同產品之間的差異點，有時候分析半天沒什麼頭緒，用導圖列出來後就一目了然。類似這種：

我用的是

（類似的還有很多，隨你喜歡）

但是話說回來其實設計設計師對於這些底層（相對來說）內容能分析的能力和深度有限，所以可能結論往往很難有很強的說服力（層級越底難度越大），但是這個也取決於你與工作同伴的協同與收集多種數據、處理分析多種數據的能力，準備的越充分，相對來說也越可信，價值也就越高。

上面提到的這些其實都不是我們視覺視覺師的職能範圍之內的東西，但是由深入淺的這些層級分析對視覺設計的影響卻又同時由淺及深。在每一個層面中過渡中，我們要分析的那些問題由抽象變得越來越具體。隨著層面的上升，環環相扣，我們要做的決策就一點一點地變得具體，並關係到越來越精細的細節。最後就到了最後的表現層——就是視覺設計師的具體工作職能。

在表現層（視覺設計）中要分析的內容詳細的又可分為：性格（DNA）→設計手法→色彩體系→布局結構（與交互有一定交叉）→細節優化（修正色彩、布局結構）。這個流程和平時在工作中設計一個全新的產品或者迭代一個大版本的設計流程很類似。

首先產品的性格會受到整體產品戰略層及範圍層的影響，就是說這個產品到底是想做一個什麼的性格，比如年輕，活力，高品質等等，這些都可以作為整個產品的性格要素（關鍵詞）。說句題外話，曾經做過一款上頭決定的關鍵詞是——年輕又不失穩重，內斂又不失活潑的產品，呵呵，吐血身亡。定這些詞的時候不能衝突矛盾啊！分析競品的性格特點也同樣如此，切記！

在分析競品性格的時候可以通過競品的品牌、logo設計；界面中控制項，圖標的顏色形狀甚至動效來分析。

在這個環節可以加入一些象限圖來輔助說明分析中不同產品之間的差異。比如這種：

例子中是我在工作分析競品色彩時用到的一個象限圖，在分析不同品牌氣質性格是同樣可以用到。

在設計手法上自然一目了然，扁平還是擬物，Material Design還是iOS風，又或者Metro風等等，這些大風格中的差異性作為一名合格的視覺設計師自然不用多說了。

由產品的性格延伸出來的色彩體系又可以細分出顏色的搭配方式，界面中用色比例，顏色的填充方式等等角度來分析競品顏色角度的使用。顏色的使用方式和手法不但可以佐證前面得出的設計中性格的分析結論，同時也會對後面分析布局結構與細節的分析產生影響。

接下來的布局結構需要考慮到的點包括，閱讀性、使用習慣、界面空間的展示效、字重（甚至字體的選擇）、行距，段間距等等角度來分析。（不同類型的產品差異很大，著重分析的點可能會有很大差別，面也很廣，建議根據具體情況，具體看競品的設計上哪些角度是值得分析的）。

分析到這個階段其實競品整體的設計風格已經基本分析的差不多了。上面說的比較概括，其實把這些點詳細展開可以分析很多內容。

最後是設計的細節。這部分可以找一些競品在設計中的一些有亮點的細節做著重分析，說明這樣的設計有什麼好處等等，具體情況具體分析。

最後也是最重要的是總結結論，分析了半天一定要得出一個有指導意義的結論才行，有的競品分析做了一大堆東西，分析完就完了，最後一頁光禿禿的寫個 Thank you! 毛結論都沒的出來，這種分析意義何在？

總結的時候主要是突出說明競品（們）相較於自家產品有哪些優勢，包括最開始的幾個層面以及視覺角度展開後的這些維度。競品又有哪些不足，同時最好嘗試去說明競品是什麼原因而產生了這些問題。我們怎麼樣吸收別人的優勢，盡量避免陷入他們的不足，一句話概括就是取其精華去其糟粕。最後再從設計的角度詳細講一下你準備如何突破。

以上。

同意樓上高山三土說的，首先視覺設計師做競品分析要跳出視覺設計師的職能範圍這個說法，再實名反對樓上man先生視覺設計師可以不太重視競品分析這個觀點。其實我個人認為，很多設計師是通過收集各種別人優秀案例還有國內大廠是怎麼做的的截圖，來做競品分析的。

我不是什麼特別牛逼的設計師，但是我會在設計一個項目前，先做競品分析。我沒有大型廠的工作經驗，不知道大廠團隊怎麼做競品分析，所以只能就自己的職業習慣來談一談。視覺設計師怎麼做競品分析？下面以「女性化妝品垂直海淘app」為栗子具體說明。

一，就是高山三土桑說的，跳出設計師的職能範圍。
具體可以參考他說的，我在實際工作中，是從框架層與結構層開始了解，為了方便理解，我找一張五要素再具象一點的圖片：

可以看到交互設計需要從結構層就開始參透，因為之前公司是沒有單獨的交互設計的，所以公司的交互擔當也是我，但是即使擺脫交互設計這個身份，視覺設計師依舊需要了解整個app的來龍去脈，頁面承接跳轉關係，每個頁面必須要承載的內容和可以依最終設計排版需求而進行取捨的內容。重要的是，當你跳出視覺設計師這個身份，你可以從全局觀來看待這個事情，然後怎麼再回歸到設計師這個身份，使設計具有全局性。通俗點講就是，大到視覺風格小到設計細節上，是貫穿全局的，比如同屬性的UI KIT, 在哪幾個頁面會用到相同的，可以綜合考慮來設計，使之在所有用到的頁面具備美觀性與易用性。

二，回歸視覺設計師的身份，認真的選擇競品做分析。

電商應用，千逃萬逃離不了淘寶本尊。淘寶少不了。再者，女性電商，蘑菇街，唯品會，聚美優品，小紅書。最後還有一些小眾電商，想去，fancy（大牌我把你歸為小眾我有罪，），instacart，口袋購物等等。
選擇好了具體的應用之後，當然，就是對產品進行視覺分析，產品主色調，配色，icon風格，相關插畫的風格都是主要的分析點。再細分到頁面，可以再分細，比如「商品列表」這個電商必備界面，有的電商是列表形勢，有的是瀑布流的形勢，有的是產品卡片的形勢。在形式相同的情況下，有的有＋購物車按鈕，有的沒有＋購物車按鈕。那麼你的應用需要怎麼做？有哪些必要元素，有哪些可優化顯示元素？列表的高度是多少，而圖片的顯示區域跟產品的核心顯示區域比例怎麼界定，這些等等問題，都是需要回歸到視覺設計師自己聰明的小腦袋裡需要思考的地方。

如果有更為明確的競品，可以就某一個單獨產品的歷史ui版本進行分析，比如小紅書有陣子把首頁feed由現在的feed改成一卡多圖形勢的，後來又改回來這種大卡的feed，他們為什麼這麼改也許你得而知，為什麼改回來，那90%是因為用戶不喜歡或者使用有問題，典型的因為用戶高喊「還我舊版」改回來的就是食色app的icon。像這種人家已經試過的錯，多跟蹤競品，你就可以減少很多試錯成本。

三，跳出「競品」去做分析。
在所有功能及交互需求的明確之後，通常會有兩種情況，一，拆分給好幾個設計師分開設計界面，二，苦逼哈哈全公司只有一個設計師，開始設計整套界面，anyway，整個artboard都是我大設計師的！就單一界面排版來說，我們可以跳出競品，也就是馬爸爸資本家的領域來談這個東西。
先從內容呈現上來說：比如產品詳情的排版，個人中心，乃至商品列表這樣電商核心的東西。比如你選定了你列表的形式是以瀑布流為展現模式，辣么，就不得不說到pinterest 和大花瓣這兩個非電商但是是瀑布流大戶的，他們的瀑布流設計有一定的參考價值，起碼在前期的大題框架下，你可以進行設計稿的搭建，避免走彎路，再根據自身應用需求進行調整。比如現在很多垂直電商產品圖是你自己拍的，那麼瀑布流pin的寬度，高度，你就需要調整，賣服裝的跟賣化妝品的，通俗上來說，賣服裝的pin會比賣化妝品的要長，畢竟賣服裝需要靠大長腿才有吸引力。

其次就是選擇設計風格相近的一些產品進行視覺分析，我這個應用主風格是走極簡風的，辣我可以參考的應用就是各種極簡的，比如airbnb，yahoo news digest，google inbox, anydo, 貓弄，單讀，都是我會參考的。這些都是全局性非常好的app。個人覺得。很多人包括我自己，在這一步的很多做法是，我需要設計（個人主頁）這個類型的頁面了，我去花瓣上採集各種類型的個人主頁，從某種程度上來說，這也算是一種競品分析。

最後再反對一下man先生
」視覺設計師很特殊，看過競品框架時候會默認認為產品框架"應該"是這個樣子的，以至於做出來的東西和競品差不多。「
這個觀點。請不要把你遇到的個別不思考的設計師，打翻一船擁有一顆腦袋靈光的比開過光還靈活的設計師們。對，我們視覺設計師就是這麼機智善辯，又天真無邪的。

哦啦啦啦啦啦～～～～

競品分析的目的是為了了解對手，好超越對手，但是！！！視覺設計師很特殊，看過競品框架時候會默認認為產品框架"應該"是這個樣子的，以至於做出來的東西和競品差不多。但在產品戰略上，做出和競品在視覺上完全不一樣的東西是很重要的。

初級，中級設計師不建議做競品分析，分析的越多越難跳出競品框架。
高級設計師可以做或可以不做競品分析，本身可以很好的控制不受競品影響，所以通常是看大量的競品，類品，並做到質量上的差異和突破。

結論：
除非你是在大公司，需要某些"形式"體現價值完成KPI啥啥的，視覺設計師可以不太重視競品分析。多看優秀類品，和其他優秀作品，做出實質的優秀設計更重要！

視覺設計應著重考慮的是站在自己公司（或產品）風格的角度上去橫向比較同類型產品的視覺效果。

對比整體視覺風格的定義，色彩體系，質感。
對主要界面視覺的細緻分析
對競品功能點的視覺分析
對每個競品的細節，設計之中的點睛之筆，進行分析

我認為，無論是產品經理或是交互設計，競品分析都離不開目標用戶群及其特徵，平台定位，背景分析。