魅族干貨！如何從視覺設計師的角度做競品分析？

編者按：現在網上大多數競品分析都是從交互或產品的角度，那么作為視覺設計師，該如何做一份詳細的競品分析呢？今天魅族設計師@Matuo__Basyou?從實戰經驗出發，幫同學們搞定這個問題。

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

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

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

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

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

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

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

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

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

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

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

我用的是

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「有哪些看上去很高大上，實際很簡單的PS技巧？」

1. 《有哪些看上去很高大上，但實際很簡單的PS技巧？》
2. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（入門篇）》
3. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（酷炫火焰篇）》
4. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（人像篇）》
5. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（漸變色篇）》
6. 《有哪些看上去很高大上，但實際很簡單的PS技巧？（二次元篇）》

原文地址：zhihu

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com