戰略層、範圍層、結構層、框架層、表現層這五個層次出現在產品的不同流程中，但排列組合又組成了一個有機的互聯網產品。那麼本文基於5個層面分析，“借鑑”競品應該如何去做？

最近關於藝術作品抄襲的話題屢見不鮮，前有王思聰微博置頂半年掛大張偉抄襲DJ.ZEDD，後有陳老師、6叔就Madness原創品牌撕逼，陳老師一句Sadness抄襲引爆Ins。作者本着藝術作品一通百通的觀點，從互聯網產品設計的角度切入，討論一下關於作品抄襲這個事情（並不是告訴你怎麼抄，而是告訴你抄完了怎麼不被發現 :p ）。

Gai爺在有嘻哈第九期《凡人歌》唱道：

“一往無前虎山行，撥開雲霧見光明。夢裏花開牡丹亭，幻想成真歌舞昇平。”

細心+上點年紀聽歌多的觀衆可能聽出來這四句點睛之筆的意境很像《獻天緣》，而感受又像第一次聽到“滄海一聲笑，滔滔兩岸潮”那般觸動。這就是Gai高深的地方，他善於營造中國風的意境，而歌詞+Flow又契合整首歌的風格，你說他抄襲，百度一下又沒有任何相關歌詞。

從此就引出本篇文章的重點，關於藝術作品中的“借鑑”，創作者應該做到：學神，不學形。神，乃神態、精神。形，是外形、是表象。

言歸正傳，我們平時看到一本小說，會覺得故事梗概似曾相識，聽到一首歌，覺得旋律之前貌似聽過，看到一個電影，和國外某個電影劇情很雷同，這個時候就會出現很多不同的聲音對作品提出異議，尤其在眼下信息快速傳播的時代，一夜之間你就上了頭條，成爲了衆矢之的。

那麼如何定義產品設計中的抄襲呢？

設計師爲了獲取靈感，會去收集很多資料，有的時候就會出現“雷同”現象，比如：在某張海報中換了幾個字體，然後拿來主義得作爲自己的作品；比如：某APP產品的頁面元素、控件規則同業內老大軟件一模一樣……

無論是靈感撞車也好，還是借鑑也罷，評說的都不是自己，所以爲了避免出現“雷同”的現象，我們如何“抄”，才能“抄”的巧妙，做到所謂的“學神，不學形”呢？

這就是我接下來要闡述的：

以60年代緣起於法國，雅克·德里達提出的“解構主義”思想爲根據：任何事物的解釋更願意趨向於個體的、獨特的、和有所表達的、不從屬與以前的。

正是因爲解構與分解的存在，市場本身已經進行了細分，互聯網產品所謂的細分，可以反映到《用戶體驗要素》一書中所提，將產品分爲5個層次：戰略層、範圍層、結構層、框架層、表現層。

5個層次在產品的不同流程中，但排列組合又組成了一個有機的互聯網產品。基於5個層面的“借鑑”競品應該如何去做：

戰略層：通過嚴密的數據分析-以點代面

按照分析的目標中羅列的點，建立一個分析框架，並按照輕重緩急進行數據收集。與此同時，需要對數據是如何產生的，如何獲取這些數據進行相應的瞭解。

在工作中應用到的數據統計工具有：金牌令箭、顯微鏡、CNZZ統計等，通過這些統計工具可以方便的進行數據的收集，同時交互設計師也要與前端保持溝通，瞭解數據統計的方法，適時添加統計的維度，請前端同學幫忙埋統計代碼。

以上是人人都是產品經理中一篇文章寫到的，關於設計師如何進行數據分析。那麼，如何通過競品的數據分析從而得出結論應用到自己產品設計中去？

首先，明確數據分析目的，爲什麼要收集並分析這樣一份數據？只有你的目的明確了之後，才能對接下來你要收集哪些數據、如何收集有一 個整體的把握。只要這些點是一個個切實待解決的問題點，將其 羅列下來，一個一個的去收集數據。你分析的結果可能會改變整個項目，但有了數據的支撐，會讓項目或需求有一個全新的開始或細節的調整。

其次，在數據的基礎上得出的結論與競品比對，發現產品發展趨勢是否真正迎合當前用戶市場？

要注意不要只用手上僅有的資訊作判斷，如果手上的證據不足以完全反應實際狀況的時候，以數據分析結果作爲決策就很容易出錯，尤其是單看某一個數據維度時。所以此時要根據市場的實時變化、競品改版的趨勢等方式，從另一個側面分析數據的合理性。

交互設計師要超前思考，考慮產品經理可能從中提出的問題，並給出迴應，讓溝通高效且有意義。

範圍層+結構層：關於信息架構、產品範圍

設計師在設計一款互聯網產品的時候，絕不是簡單複製成功APP的架構。在信息產品方面，結構層是信息空間中內容元素的分佈，結構層確定各個將要呈現給用戶的選項的模式和順序，結構層將單頁面連接在一起，從而形成了系統。

拿APP舉例：框架層決定了你點擊頁面icon或按鈕後頁面跳轉到了哪一頁。通過增、刪、查、改、移動、個性化定製，將複雜的結構變的簡單化，也是提高用戶體驗的重要手段，例如QQ5.0的升級，通過漢堡導航及Tab標籤將功能整合，使得應用在感覺上苗條了很多。

那麼如何在競品複雜的信息架構、事件流中提取有用的信息，成了此要點中最重要的核心訴求。“取其精華、去其糟粕”的話誰都會說，應該如何去做？首先，確定產品核心功能與次要功能。在產品的核心功能點上採取一定的交互創新，這是必不可少的一項。但是核心體驗做好了只能是加分項，真正切中用戶痛點，幫助用戶解決眼前問題，搭建屬於自己的信息架構核心競爭力纔是重點。

什麼？你問我例子？那請大家跟我做一道找規律的題目：美圖秀秀-Photoshop，360瀏覽器-Chrome， x-x ？同行業同類型的產品尚有用戶細分程度如此之大的成功案例。以上列舉的產品無謂孰優孰劣，只是核心用戶不同，解決方案不同，呈現的整體架構也千差萬別。所以搭建屬於自己產品的核心競爭力纔是關鍵。

框架層+表現層：頁面排布元素的重設計

頁面元素的設計點包括：構圖、柵格系統、色彩等等。

（1）構圖和視覺柵格系統

構圖形式有佔據中心、對角線佈置、壓住四角、貼近邊緣（左邊緣、右邊緣、底邊緣、頂邊緣、左右邊緣、上下邊緣）、S型構圖、點狀化構圖、滿版式構圖等等多種構圖形式。這些版式的骨架都是我們可以去“借鑑”的對象。

構圖和網格是相輔相成的，如何把元素合理的佈局到畫面中，並且使版面達到平衡，這是設計師需要解決的問題，構圖形式有很多種，不要爲了何種構圖形式而糾結，

（2）色彩運用

筆者從學習設計開始就積累了許多關於色彩搭配的色相環，那些都是經過前人佐證的設計。而我們需要做的就是從現有的色彩設計中提取出重點顏色， 然後根據顏色的相似性提取最終需要的色系。

這裏有一點小Tips也是筆者從其他設計師個人博客中看到的：可以將大師們的油畫畫作或是有名的攝影作品的色彩進行提取，運用到個人設計當中，當然這個過程最終還是要爲產品服務，如果作品色彩風格與素材不符則不可行。

設計之前要對設計作品所要傳達的內容進行仔細的思考和分析，並不是任何圖片和油畫中的顏色都適合你所設計的作品，設計裏沒有任何理論是絕對的，要根據自己設計作品的調性去決定使用的色彩搭配。

（3）格式塔心理學的應用

交互設計中實際運用的最多的心理學理論之一，它主要包括三個部分：相似原則、接近原則和完形原則。將格式塔心理學三原則運用到競品的借鑑當中也是很重要的一點，格式塔心理學派反對行爲主義心理學的刺激—反應公式，主張研究直接經驗（即意識）和行爲，強調經驗和行爲的整體性。

這時就需要設計師們注意競品的“整體性”，由於經驗主義驅使，用戶直接反應是將相似頁面等同於用過的頁面，所以產品設計師在設計過程中運用這一思想，可以將設計成果搭建在“前人”之上，一定程度節約了用戶學習成本，何樂而不爲？

作者：Roy_ ，公衆號：交互設計Roy

本文由 @ Roy_ 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議