寫競品分析時用戶體驗五要素看起來是一個不錯的套路，你可以一層一層往里面套，但實際使用起來才知道這有多困難，所以我建議：你可以從日常用的app入手去拆解，因為日常的app一定是你熟悉的、長時間且有效的幫助你解決問題的，你熟悉它的結(jié)構(gòu)甚至每一個按鈕的位置。

寫競品分析是每個PM的必經(jīng)之路，還記得在寫第一篇競品分析時候的手忙腳亂嗎？悲催的是迫于壓力你又不得不在有限的時間內(nèi)去完成。

在創(chuàng)業(yè)公司很多時候沒有人可以教你，你需要自己去摸索（所以第一份工作很重要?。?/p>

你必須去了解市場、分析上下游關(guān)系、挖掘用戶痛點、分析競品，優(yōu)化別人沒做好的、解決他們沒能幫用戶解決的問題，不然，用戶憑什么來用你的產(chǎn)品。

你真的準(zhǔn)備好寫競品分析了嗎？

寫競品分析時用戶體驗五要素看起來是一個不錯的套路，你可以一層一層往里面套，但實際使用起來才知道這有多困難，所以我建議：你可以從日常用的app入手去拆解，因為日常的app一定是你熟悉的、長時間且有效的幫助你解決問題的，你熟悉它的結(jié)構(gòu)甚至每一個按鈕的位置。

在正兒八經(jīng)的交一份競品分析給老板的之前不妨先練熟“套路”，這樣才能快、準(zhǔn)、狠地一招制敵，走上人生巔峰，迎娶高富帥！

從表現(xiàn)層到框架層再到結(jié)構(gòu)層

為什么是這樣的順序呢？

在我們拆解一個app的時候要站在用戶和PM兩個角度去思考問題，PM無疑是最了解自己產(chǎn)品的人，但是作為用戶，初次接觸到產(chǎn)品時最早感受到的是“表現(xiàn)層”，這也是相對比較容易分析的一層。

表現(xiàn)層

在“表現(xiàn)層”可以從兩點考慮：合理的感知設(shè)計和真看真感覺

1、合理的感知設(shè)計

人有五感：視覺、聽覺、觸覺、嗅覺、味覺

其中前三感的應(yīng)用在我們接觸到的產(chǎn)品中并不鮮見：顏色形狀的設(shè)計；信息的提示音；配對成功的震動（人家說的是王者榮耀才不是探探呢?。?#8230;而后兩感或許隨著科技發(fā)展，那些美食類的應(yīng)用在不久的將來能散發(fā)出糖醋排骨的酸甜也未嘗不是個很棒的體驗。

至于什么是“合理”，就是你并不會希望看到一個母嬰類產(chǎn)品中大量使用黑色系的配色。

2、真看真感覺

看什么？看美與丑；感覺什么？這玩意兒是不是“我”需要的

美與丑是初見時的第一感覺，即便你說我不是一個顏狗但是出于本能反應(yīng)也會有一個內(nèi)心的判斷，但是美、丑的判斷往往是因人而異的，只要感官設(shè)計合理其實不用太過糾結(jié)。就像當(dāng)初Instagram改版了icon也引起了不小的波動，無論是不是設(shè)計師，人們都在對從淡雅擬物轉(zhuǎn)變?yōu)榭犰疟馄降膇con進行了褒貶不一的評價。

但是在一個網(wǎng)頁或者是App中如果界面上出現(xiàn)了banner，那么用戶第一眼注意到的一定是它，因為它一般出現(xiàn)在最顯眼的位置而且面積較大讓人不得不注目，而在這么一個重要的位置到底要擺放怎樣的內(nèi)容呢？

• 站在用戶角度考慮，banner中的內(nèi)容是否對我的需求提供了幫助或者提供了我更好的建議？
• 從產(chǎn)品角度考慮，這些banner是否傳達了我所希望用戶看到的內(nèi)容？

對于這兩點考慮，下面這個栗子或許能更直觀一點：

某旅行網(wǎng)站banner：航空公司鉅惠－600元東南亞

• 用戶角度：正好打算看看五一有沒有特價機票出去玩一趟！
• 產(chǎn)品角度：深圳航空和我司有戰(zhàn)略合作，需要推特價機票，PM拍板把廣告放在這個位置上！

通過這一層的分析，我們或許能夠摸索到一些戰(zhàn)略層的內(nèi)容（其實這很難，當(dāng)你作為用戶認為這不合理或者對于“我”無用時你可以嘗試著從產(chǎn)品戰(zhàn)略的角度去看一看為什么它的PM選擇這樣去做。）

這一層更多的可以總結(jié)出一部分的用戶場景，并且鍛煉你的審美能力。

框架層

框架層是圍繞單一界面的設(shè)計，你需要分析的是它頁面布局是否合理，其中包括：界面設(shè)計、導(dǎo)航設(shè)計、信息設(shè)計，而這三點都離不開頁面的布局，在這一層就站在布局的角度去分享一些我的見解。

說回美與丑，有時候用戶會覺得一張界面不好看并不單單因為它的圖形設(shè)計和配色，甚至可以說大部分人對于圖形配色的好壞并沒有很專業(yè)的辨別能力，很多時候他們覺得不好看是因為布局的混亂而導(dǎo)致視覺上的不舒適。

移動端應(yīng)用，要么是幫助用戶節(jié)省時間，要么是幫助用戶消磨時間。

對于網(wǎng)絡(luò)購票的app自然是幫助用戶節(jié)省時間的，它首先解決了線下排隊的問題，節(jié)省了排隊時間與取票時間，那么在乘客進行網(wǎng)絡(luò)購票時這些應(yīng)用是怎樣為用戶提供良好的購票體驗的呢？

來看看這一組界面：

同樣是五月三日從上海出發(fā)往南京的高鐵（只考慮高鐵情況），但是高鐵管家在列表頁面的布局給到用戶的感覺卻比12306的要好，因為合理的頁面布局可以幫助用戶快速瀏覽信息并準(zhǔn)確的找到需要的信息。

在我們分析這兩張頁面是先來看一看用戶在購票時的考慮的要素，因為你可能不能購很快很全面的考慮到所有的情況，所以可以試著從自己的角度出發(fā)。

按照購票流程我一般會在前置頁面先選擇好起始站與出發(fā)日期篩選出車次信息，然后在列表頁完成具體的車次選擇操作，那么下面就是我在列表頁進行選擇時會考慮的因素，由上到下由強到弱：

1. 假設(shè)我的出行時間為工作日，那么除去公司到車站到時間，我可選的車次時間將在19:00-24:00
2. 根據(jù)自身情況，我一般選擇從“上海站”出發(fā)，抵達“南京南站”；而考慮到突發(fā)情況沒能沒能買到這條路線的車票，那么我的備選方案是從“上海虹橋站”出發(fā)，抵達“南京南站”的動車
3. 根據(jù)自己的經(jīng)濟實力我會選擇較為便宜的二等座，當(dāng)二等座售光時也可以買安靜舒適但價格稍高的一等座
4. 兩條路線的耗時分別為2小時11分鐘與2小時04分鐘，所以耗時可以忽略不計
5. 考慮經(jīng)停站的場景一般在春運時期，較為緊俏的線路車票銷磬時會選擇購買經(jīng)停站的車票，由于上海到南京的車次較多，經(jīng)停站也可以忽略不計

以上即為我在購買上海到南京高鐵票時考慮元素，那么遵循人類瀏覽習(xí)慣，一般是從上至下、從左至右的，而我們之所以要在列表之間進行選擇無非是時間、票價的對比，因為在前置的頁面早已將起始站選擇好

來看高鐵管家：

由上至下以第一列為例，我可以看到的元素是：

1. 車次及車次號
2. 出發(fā)時間
3. 到站時間

而其中時間被用藍色加粗放大的設(shè)計突出出來，讓我在由上至下快速瀏覽時能夠很清晰的對比出這些車次在“時間”上的的差別。

上圖是為了滿足不同用戶需求，底部三個與“時間”相關(guān)的篩選按鈕選中后將突出顯示對應(yīng)的時間字段方便用戶快速瀏覽，那么高鐵管家對于這三個功能的設(shè)置就分別對應(yīng)了三種不同的用戶場景。

由左至右以第一行為例，這一行內(nèi)的元素被有規(guī)則的排列出來，我可以清晰的找到并理解每一個詞語、時間、圖標(biāo)的含義。

在席位展示上，高鐵管家優(yōu)先選擇展示二等座余票與價格，對于我來說已經(jīng)能夠滿足我的需求，但對于其他需求的用戶，他們可能需要點擊進入下一張頁面才能看到其他席位的信息，而12306則是將車次的元素盡可能多的展現(xiàn)在了列表中，但是它的排列卻使人覺得頁面有些雜亂無章，摸不清重點。

對于我來說其中某些信息對我來說毫無意義，甚至影響我的瀏覽，那它是不是可以刪除呢？

我的答案是：它的信息設(shè)計方式可能有待調(diào)整，但是內(nèi)容并不僅僅為了你一個人展示，總有其他人需要它

用一種能“反映用戶的思路”和“支持他們的任務(wù)和目標(biāo)”的方式來展示和排列信息元素。

這就是為什么我們要去分析用戶場景，在以“我”為用戶的場景中或許不需要，但是對于其他用戶來說這些信息是必要的。

這樣的對比并不是為了去說哪個做的好哪個做的不好，而是在同類型產(chǎn)品分析與對比中幫你總結(jié)出更多的用戶場景，鍛煉你對與信息的展示、優(yōu)先級排列的技能。

需要注意的是，列表頁只是一個示例，我們做頁面設(shè)計時不光光是通過文字組合排列、顏色大小的變化突出去傳遞信息，banner的使用、圖標(biāo)的使用也是有效傳達信息的一種必要手段。

不要把頁面設(shè)計的責(zé)任全部推給設(shè)計師，你是產(chǎn)品經(jīng)理。

結(jié)構(gòu)層

結(jié)構(gòu)層與框架層常常被混淆不清，在框架層我們強調(diào)的是單一界面的布局，而在結(jié)構(gòu)層我們強調(diào)的更多界面間的聯(lián)接

這里我們提到“交互設(shè)計”與“信息結(jié)構(gòu)”，交互設(shè)計簡單來說就是我們的app在特定場景下的反應(yīng)方式，當(dāng)你的用戶輸錯密碼，系統(tǒng)彈出提示：

“啊哦～你的密碼出錯了喲～再輸入一遍試試吧，還有兩次機會哦～再輸錯就要等十分鐘咯～”

比如這樣賤兮兮反應(yīng)方式在二次元用戶中可能接受度較高，但是換一類用戶或者換一個場景就會略顯輕浮。

但是你應(yīng)該注意，首先它告訴你：你的密碼輸入錯誤了；接著引導(dǎo)你：你可以再試試輸入；然后預(yù)知你：你一共有三次輸入密碼的機會，現(xiàn)在剩下了兩次，如果三次全部用完那么你只能十分鐘后再嘗試。

話題又要說回來，用戶畫像和用戶場景很重要，你面對什么樣的用戶群體，處于什么樣的場景下，針對這些要怎么去設(shè)計出合理的反應(yīng)方式，要做出合理的判斷你需要多接觸一些應(yīng)用，看看別人是怎么處理的。

當(dāng)然頁面間的切換方式、彈窗的出現(xiàn)動效也很重要，但是別急，這是下一步要做的事。

接著，來說說信息架構(gòu)吧，理論不多說，直接上栗子~

1、層級結(jié)構(gòu)：自上而下由一個節(jié)點向下擴散出更多子節(jié)點，你可以在任意節(jié)點中上下或者橫向自由選擇。

示例為我?guī)蛣?chuàng)生活網(wǎng)絡(luò)回收公眾號在設(shè)計“選擇回收品”這一操作時選擇的信息結(jié)構(gòu)形式，在用戶角度，你可以在頂部橫向選擇7大回收品分類，在縱向從某個分類中向下篩選出更為細致的分類，減少頁面跳轉(zhuǎn)的頻次從而達到優(yōu)化用戶操作體驗的效果。

在企業(yè)角度，無論他們想要增加大的分類還是小的回收品，這一結(jié)構(gòu)都可以滿足，而且不用擔(dān)心改變用戶的操作習(xí)慣。

2、矩陣結(jié)構(gòu)：按照特定形式排列節(jié)點與子節(jié)點，你可以按照一個或多個節(jié)點來瀏覽你想要的內(nèi)容。

這里選擇了豆瓣來做示例，每個人對內(nèi)容的需求不一樣，這種形式可以滿足不同用戶的不同需求，而矩陣結(jié)構(gòu)的使用除了常見于資訊類應(yīng)用以外，在電商類應(yīng)用中也常常出現(xiàn)。

3、自然結(jié)構(gòu)：自然結(jié)構(gòu)不遵循任何的排列規(guī)則，在這樣的結(jié)構(gòu)下你可以看到任何你感興趣的和你可能會感興趣的內(nèi)容。

這里的示例是我在上一篇文章《關(guān)于引導(dǎo)頁的整理與分析》中提到的MONO，作為一個致力「抗擊無聊」的高質(zhì)量文化社區(qū)，里面的內(nèi)容多種多樣難以分類，既然我不知道你會被什么吸引，那么索性都給你看看好了。

工欲善其事必先利其器

不同的信息結(jié)構(gòu)適用于不同類型的應(yīng)用，這里三個信息結(jié)構(gòu)并不能涵蓋所有，當(dāng)你分解的app越來越多時你會發(fā)現(xiàn)更多的結(jié)構(gòu)，反之當(dāng)你要去創(chuàng)造一個應(yīng)用時在信息結(jié)構(gòu)的選擇上你將變的得心應(yīng)手。

第一部分的分享就到這里，雖然只有三個步驟，但把每一個層級分析完整并逐一總結(jié)出用戶畫像與場景卻是一件耗時耗力的事情，起初你會覺得很慢很亂，但漸漸的你會變的游刃有余。

這次分享就到這里，歡迎討論，若有不對之處也歡迎指正。

作者：密斯徐，一個在產(chǎn)品路上爬行的產(chǎn)品狗，筆芯～

本文由 @密斯徐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。