「文章的內(nèi)容會更偏實際工作產(chǎn)出，并非將競品分析的定義平鋪展示，耐心讀完，你一定會有收獲?！?
關(guān)于競品分析，一直有小伙伴想讓我出一篇文章。因為我看過大量的 B 端產(chǎn)品，很多同學(xué)就會好奇，怎樣能系統(tǒng)的進行競品分析？好吧，壓箱底的內(nèi)容也拿出來了，今天就來和大家說說競品分析，以及我們作為設(shè)計師，究竟應(yīng)該如何使用競品分析。
我相信大多數(shù)設(shè)計師都有體會過被銷售奪命連環(huán) call 的經(jīng)歷，很多時候我們就是想要白嫖別人的“身子”，但是又不敢明說，只能夠通過花言巧語來騙取別人的使用賬號。難，因為很多產(chǎn)品并不會直接給你使用賬號，其實銷售也是為你們考慮，即使給了你賬號，你也沒法完整體驗整個流程，索性就不給你看，因此大多數(shù)情況下銷售會給你演示，這可能就是試用當中最難的第一個地方。
在 B 端，鑒定你是否是行內(nèi)人的最好辦法，便是在溝通的時候給你講很多專業(yè)術(shù)語，因為術(shù)語就如同我們設(shè)計師日常溝通的一個辦法。比如：“這里我用到了卡片分類將整個信息去做規(guī)整”、“那里在 Figma 里主要用 Components 去解決頁面重復(fù)的問題”
這些內(nèi)容其他行業(yè)的人肯定也聽不懂，因此術(shù)語多也是我們非常頭疼的地方。最近也在嘗試整理不同行業(yè)的 B 端產(chǎn)品分析，也算是幫助同學(xué)們在陌生的領(lǐng)域當中能夠快速熟悉。
很多同學(xué)的競品分析，都主要集中在鼠標的操作上。便是不停地點點點，在整個頁面你會發(fā)現(xiàn)點擊過后沒有任何目的，試用過后也不會有什么結(jié)果。因此久而久之，很多設(shè)計師只會去看這個產(chǎn)品的頁面風格，然后根據(jù)說這個頁面非常丑陋就罵罵咧咧的離開，所以也導(dǎo)致大家的積極性下降。
關(guān)于競品分析，其實很多人還是會使用 C 端產(chǎn)品的分析邏輯，但這對于 B 端產(chǎn)品來說，競品分析很容易就會誤導(dǎo)設(shè)計師，讓大家朝著不太正確的方向發(fā)展。
比如以這個內(nèi)容為例，我們可以看到雖然其標題寫的是某某產(chǎn)品的競品分析，但是其實則的內(nèi)容就是一篇較為完整的產(chǎn)品體驗報告，主要就是講解了產(chǎn)品對應(yīng)的功能，遠遠稱之不上為競品分析（嚴格上來說應(yīng)該是設(shè)計的競品分析）
所以我認為 B 端競品分析對于設(shè)計師來說需要具備一下幾個特點：
因為站在前人的肩膀上，我們能夠快速產(chǎn)出對應(yīng)的設(shè)計方案，因此競品分析最好是有明確的需求目的。比如我要去做一個 導(dǎo)航菜單的設(shè)計，那就要去考慮在整個導(dǎo)航菜單當中，它不同的設(shè)計方法，以及在各個產(chǎn)品當中它們是如何選擇的，只有了解了這些內(nèi)容后，才能夠幫助我們?nèi)ソ鉀Q設(shè)計當中的問題。
而競品，在其中主要就是引導(dǎo)作用，讓我們可以思考這款產(chǎn)品背后的具體邏輯，了解它是如何 how to do。
了解行業(yè)趨勢是非常重要的一個內(nèi)容，雖然都是在說 B 端，但是我們可以通過競品分析了解到行業(yè)的大體動向，能夠幫助我們?nèi)プ鼍唧w的分析。
比如我們可以看到很多 B 端產(chǎn)品的動向，像是 Jira、Ant Design、飛書，它們都在降低視覺層級，凸顯內(nèi)容層級，這些動向的總結(jié)并不是我隨便去看文章，而是通過整體的分析了解到的。
（這個觀點也在 Ant Design 5.0 的更新當中得到了驗證）
其實這就需要你不停的跟進多款產(chǎn)品，了解他們目前的產(chǎn)品發(fā)展方向。雖然有很多人會認為這不是應(yīng)該產(chǎn)品做的事嗎？為什么設(shè)計師要去做？但是去跟進他們的動向，其實就是了解他們之前在設(shè)計這些模塊的時候翻了哪些錯，后續(xù)是如何調(diào)整的。比如我們以飛書的改動為例，我追蹤飛書管理后臺的更新有大概 4 年，通過這樣的堅持，我們能夠看到的是飛書它經(jīng)過一個又一個版本的迭代，優(yōu)化了很多內(nèi)容，才到如今的設(shè)計，并且隨著內(nèi)容數(shù)據(jù)的增多，可以發(fā)現(xiàn)它是在如何發(fā)生變化。
并且發(fā)現(xiàn)這個界面設(shè)計風格的改版是未來的趨勢，早在一年前就已經(jīng)預(yù)言，記得也在課程上講過，這個風格未來一定是需求（不信問一問 第三期課程的同學(xué)應(yīng)該知道）所以這便是了解行業(yè)趨勢最快的一個途徑，而我們要做的是持續(xù)跟進，多去進行內(nèi)容的查看。
回顧飛書管理后臺的更新，了解一個B端產(chǎn)品的發(fā)展歷程
大家一定接到過很多從 0-1 的功能模塊，在這個時候我們其實是對于它的交互內(nèi)容理解較為簡單。而使用競品分析就能夠幫助我們?nèi)チ私庑枨笈c這些功能模塊，他們究竟是如何做設(shè)計的，思路有哪些？這些都能夠提供給我們進行幫助。
比如我之前負責過一個階段推進器的需求，當時對于階段推進器這四個詞非常陌生。感覺從未接觸過，心中想的應(yīng)該是 火箭？飛機的推進？
產(chǎn)品經(jīng)理給到我的需求是這樣的：
我頓時就犯了難，這時候雖然不了解，但是我通過強大的圖庫+賬號，快速找到與之對應(yīng)的功能模塊。
然后深度體驗產(chǎn)品的交互細節(jié)，并給出了合理的方案，這樣競品分析就能夠幫助我對于未知需求、未知領(lǐng)域的探索。
我們在做競品分析的時候，需要考慮的是交互體驗層面的競品分析，而非產(chǎn)品框架層面的競品分析。很多時候產(chǎn)品層面的競品分析我們不需要掌握，因為它過于宏觀，很多內(nèi)容并不是我們作為設(shè)計師應(yīng)該關(guān)心的，因此我們在做競品分析時不應(yīng)該盲目的大，而是克制更為聚焦的小，希望做到的是從微觀再到宏觀。
舉一個例子，下方三個指標圖，如果你要去做競品分析，你會如何做？
首先關(guān)于三個指標圖我們發(fā)現(xiàn)，它們的設(shè)計內(nèi)容并不相同。
1.為數(shù)據(jù)展示指標圖，你會發(fā)現(xiàn)在整個指標圖當中包含有同比、環(huán)比、對應(yīng)的時間 以及 數(shù)據(jù)的詳情，給人的感覺數(shù)據(jù)非常專業(yè)。
2.以數(shù)據(jù)占比為主，明顯是想表達你的使用情況。你可以想想，會出現(xiàn)在哪個頁面當中？
3.一個非常簡單的指標圖，但是在個數(shù)這個字段極為特殊，應(yīng)該是想呈現(xiàn)對應(yīng)的數(shù)據(jù)變化。
關(guān)于競品分析，我們必須得先了解不同競品之間的種類與關(guān)系，這樣才能方便我們快速尋找競品。
直接競品，顧名思義就是去分析產(chǎn)品的直接競爭對手，因為直接競爭對手都會有較為完整的解決方案，如果第一次去做某些功能的時候，我們可以快速分析直接競品去快速了解它的思路。當然我們通常對直接競品還需要將他的產(chǎn)品進行各個階段的進行留檔，以及競品迭代分析，這個我們就留著第三章來說。
關(guān)于直接競品，有一個非常簡單的方法，就是在我們書簽分類當中，在一個分類下的一定就是直接競品。所以直接競品我們更關(guān)注的是產(chǎn)品類型幾乎相同~
間接競品通常是與產(chǎn)品沒那么相關(guān)，但是會有很多功能模塊是相通的。因為很多時候，我們很難找到非常相似的 直接競品，或者這些競品當中的設(shè)計不太滿足，這時候我們就要去考慮去分析間接競品。
比如在上圖的客戶管理模塊，微盟里的客戶管理與紛享銷客里的客戶管理就會完全不同，雖然他們都是客戶管理，但是在設(shè)計上完全不同。前者主打簡單，我們在借鑒的時候就要更深入思考；后者為核心板塊，就要體驗他為核心板塊做了什么內(nèi)容。所以間接競品我們更關(guān)注的是產(chǎn)品功能模塊幾乎相同，但是他們的設(shè)計目的可能會存在不同的差異，因此將其進行分析。
交互競品主要針對產(chǎn)品無論的類型還是功能模塊上，都好不搭嘎，但是設(shè)計上有一些交集的地方，我們可以去學(xué)習(xí)他們的交互解決方案。比如我們需要去處理的是一個復(fù)雜的篩選模塊，同行業(yè)里幾乎沒有類似的做法，那我們就可以借鑒很多有類似功能的產(chǎn)品，比如 ONES 的篩選邏輯、紛享銷客的高級篩選、TAPD 的篩選彈窗，這些本身都是毫不相干的產(chǎn)品，但是他們在交互模式上可以借鑒，通過這樣就能夠幫助我們在交互層面上去解決問題，而交互競品更看重的是你平時對這個產(chǎn)品的了解程度。
了解了常見的競品的劃分過后，我們尋找到了競品應(yīng)該如何分析？
作為一個成熟的 B 端設(shè)計師，我們競品分析的方法并不是將傳統(tǒng)式教條主義那樣，按照 第一步、第二步、第三步 的方式，按照某一個方法去局限自己的思路。比如常見分析的方法有：功能拆解法、矩陣分析法、功能對比法、評分比較法、競品畫布、PEST 分析法（后面會講到這些內(nèi)容應(yīng)該如何使用）
因為我們在實際工作當中，如果按照上面你的方式分析，很容易就變成一個填空題，而因此缺少了對于整個產(chǎn)品的細致思考。所以我們?nèi)《氖橇硪粋€非常重要的觀點：「通過現(xiàn)象看本質(zhì)」
這個方法聽上去有些抽象，但是我們還是來看看它究竟應(yīng)該如何使用。
比如你接到了一個設(shè)計需求，現(xiàn)在需要設(shè)計一個篩選組件。而擺在你面前的便是兩個完全不同的篩選組件類型，這時候你應(yīng)該怎么辦呢？
但是這些傳統(tǒng)的教條類的分析會讓大家感覺在處理頁面的時候非常束手無策，因為他們在分析時，通常都是非常宏觀的分析，比如產(chǎn)品大方向、產(chǎn)品的未來規(guī)劃，沒人會去關(guān)注你個臭設(shè)計的。其實我們再去對競品分析時，主要專注兩部分的分析：
我們 就以剛才講到的篩選為例，首先從外在表現(xiàn)來看，發(fā)現(xiàn)左側(cè)的篩選并不重要，因為它需要點擊篩選圖標后才能呼出篩選，執(zhí)行對應(yīng)的篩選操作而對應(yīng)的右側(cè)篩選顯得非常重要，因為它的所有篩選項都是常駐在頂部，我們想要篩選就可以直接到對應(yīng)的字段進行操作。
現(xiàn)在其實我們就在分析表象，就是這兩個設(shè)計之間的差別在哪，緊接著我們在揣摩一下交互，當兩個篩選點擊過后，發(fā)現(xiàn)：左側(cè)的篩選針對的是通用的字段，因為我需要點擊添加篩選條件，點擊想要篩選的字段，才能夠執(zhí)行篩選的操作。右側(cè)的篩選針對的是固定的字段，因為字段都是在頁面當中常駐，并且沒有對應(yīng)的添加篩選的入口。這是從設(shè)計師在這個方案當中傳達出來的信息，緊接著分析一下，為什么這個設(shè)計師要這么設(shè)計。按照課程當中的話來說，就是這個設(shè)計師也不是傻子，它為什么要這么做？原因在哪？這時候我們就要通過外在的表象分析其內(nèi)在的邏輯。
內(nèi)在邏輯是將外在的表象通過設(shè)計實現(xiàn)在內(nèi)在的產(chǎn)品邏輯當中，在邏輯當中會涉及到很多內(nèi)容，我們做設(shè)計時所寫的交互說明很多時候就源自于此。
同樣是上面的篩選，那為什么會這樣設(shè)計，其中的原因又是什么？我們剛才講到了篩選一個為通用篩選字段，一個為固定篩選字段，那為什么會存在這種情況，其實是因為在左側(cè)，整個系統(tǒng)的字段是不可控的，用戶可以去自定義字段，也就是添加自己想用的字段來進行展示；而右側(cè)字段可控，主要就是所有的字段都在整個系統(tǒng)當中，我們沒有辦法去隨意的添加刪除。
而為什么會產(chǎn)生這樣的原因呢？其實是因為 aPaaS 平臺上，整個系統(tǒng)都是自定義字段，因此只能夠?qū)⒑Y選做到一個入口里，通過入口來執(zhí)行篩選的操作。而 SaaS 平臺，特別是行業(yè)屬性型產(chǎn)品，所有的業(yè)務(wù)都是固定寫死的，因此你會發(fā)現(xiàn)我們不允許系統(tǒng)進行隨意的更改，也就導(dǎo)致了我每個頁面具體要呈現(xiàn)什么內(nèi)容完全由我們自己說了算，也就導(dǎo)致股常駐固定篩選。
我們作為設(shè)計師，其實不應(yīng)該只分析其外在的表象，而更應(yīng)該在乎的是其內(nèi)在的邏輯。剛才我們是從前往后去推導(dǎo)設(shè)計的邏輯，那我們想想，能不能從后往前去做分析，當然是肯定的。
比如在之前回答一個同學(xué)的問題時，我們就能夠通過競品分析了解到設(shè)計思路。
問題如下：
“我們?nèi)プ鲆粋€ HRM 系統(tǒng)的面試點評的優(yōu)化，因為在系統(tǒng)當中經(jīng)常會有面試評價的問題，就是使用系統(tǒng)的面試官經(jīng)常出現(xiàn)忘記填寫面試評價、面試評價錯亂的情況，我們應(yīng)該如何優(yōu)化？”
3.舉個例子
比如在之前回答一個同學(xué)的問題時，我們就能夠通過競品分析了解到設(shè)計思路。問題如下：
“我們?nèi)プ鲆粋€ HRM 系統(tǒng)的面試點評的優(yōu)化，因為在系統(tǒng)當中經(jīng)常會有面試評價的問題，就是使用系統(tǒng)的面試官經(jīng)常出現(xiàn)忘記填寫面試評價、面試評價錯亂的情況，我們應(yīng)該如何優(yōu)化？”
首先我從沒做過 HRM 系統(tǒng)，因此不太了解這個產(chǎn)品的具體特性，所以在回答這個問題時，我們只能夠通過競品分析的方式，去獲取一些設(shè)計優(yōu)化的方式。
在分析問題之前，必須先了解我們目前已經(jīng)掌握的內(nèi)容。
產(chǎn)品：針對人事系統(tǒng)管理的招聘模塊
階段：已經(jīng)面試人員的面試評價
問題：面試評價未填寫，錯亂的問題
針對上面的內(nèi)容，我們還能夠進行相應(yīng)的提問：
具體的角色有哪些？解決的問題究竟是什么？究竟是什么樣的面試評價錯亂/未填寫？
通過系統(tǒng)當中已知的內(nèi)容，我們逐步明確以下幾個內(nèi)容
產(chǎn)品：人力招聘系統(tǒng)
角色：面試官、HR、應(yīng)聘者
功能：面試評價
痛點：大部分面試官忘記面試評價，導(dǎo)致面試評價錯誤、混亂，無法對應(yīng)
場景：線下面試，線上面試
其實我們剛才的內(nèi)容，都是前期的問題分析，我們在做任何設(shè)計時都應(yīng)該這么做，而后就是競品的分析，首先去搜集競品，去尋找直接競品、間接競品、交互競品。
直接競品：因為 HRM 行業(yè)本身要求比較嚴格，所以在選擇時，我們選擇了釘釘上能夠直接試用的 易招聘
間接競品：最近使用 CCtalk 上課的頻率較高，所以使用 CCtalk 的課程評價
交互競品：在點餐的時候發(fā)現(xiàn)可以評價商品，因此選擇美團外賣分析其點評評價
當然在這些競品當中，沒有嚴格的要求。最主要的就是你一定要熟悉它。
而我們在分析時，就要了解一款產(chǎn)品的表象和它的邏輯
易招聘
在易招聘里，我們進入到人才信息過后，就能夠快速預(yù)覽人員的所有內(nèi)容，包含簡歷、登記表、測評、面試記錄、Offer 等，其中在面試記錄里，我們就能夠查看這個員工的所有面試設(shè)計記錄。
因為我沒有接觸過 HRM 系統(tǒng)，通過易招聘這樣的直接競品，讓我對 HRM 行業(yè)的產(chǎn)品有一個基礎(chǔ)的認識，通過了解面試評價的基本內(nèi)容。
然后將競品的內(nèi)容按照外表+邏輯進行整理。
外表：
- 發(fā)現(xiàn)易招聘里依然容易出現(xiàn)面試評價錯亂等問題，他們通過 一鍵催所有評價+一鍵催評價 解決
- 試用 一鍵催評功能，設(shè)計邏輯是當點擊過后，我們會在 釘釘 收到 Ding 一下的加急消息，提示你需要閱讀。（這個與平臺深度綁定，如果是 飛書、企業(yè)微信 提示方式又會有所不同）
- 面試評價較為簡單，選擇對應(yīng)狀態(tài)，在下方寫下評論即可。
由于對于評價這個功能也不太了解，因此我們又體驗了其他的評價功能的產(chǎn)品，希望有所啟發(fā)。
CCtalk
因為 CCtalk 平常使用頻率較高，所以評價想到的就是課程評價究竟有哪些邏輯。老規(guī)矩我們先看外表：
- 提供快速評價的入口，我們可以點擊五角星來實現(xiàn)評價的快速點評
- 提供默認標簽，我們可以選擇老師常見的面試評價標簽
- 直播課程結(jié)束后，會有彈窗提示。面試結(jié)束后可以主動彈窗進行提示。
在理解內(nèi)核，理解內(nèi)核我是通過一次一次的測試，得到了 CCTalk 他會包含以下規(guī)則：
- 課程必須結(jié)束后才可評價，也就是正在直播的課程，不能直接評價。也就是評價不能與課程同時進行。
- 課程查看時間必須超過 10min 才可評價。也就是點評之前，必須要判定用戶是否有評價資格。
因為經(jīng)常點外賣，因此也會想到美團外賣的點餐評價，也就將其呈現(xiàn)出來了。
外表：
會有彈窗提示，是否進行評價
評價可以有標簽進行快速選擇
對于騎手的評價會有滿意于不滿意兩種狀態(tài)
內(nèi)在邏輯：
當騎手完成送貨后，可以對訂單進行評價
提前點送達，會收到系統(tǒng)的默認提示
不同的滿意狀態(tài)，對應(yīng)呈現(xiàn)的默認標簽也會不同
我們分析了多個產(chǎn)品的設(shè)計邏輯過后，面對上述的問題，我們得到以下的設(shè)計思路：
- 面試評價的難度 降低無用的表單信息，將重要內(nèi)容凸顯 美團外賣
- 面試評價的快速提醒 HR 一鍵提醒功能 易招聘
- 面試流程的卡點 取消不必要的必填，并且在內(nèi)容上有快捷方式 美團外賣
- 面試過后的反饋 快速提示面試評價 CCtalk
- 面試的最佳實踐 能不能將面試與面試點評放在一起，提醒面試官可以一邊面試一邊評價 CCtalk
- 面試是否能夠提供面試題庫 規(guī)范面試官的提問方式，幫助面試官進行規(guī)范化的考量 CCtalk
通過競品的外在表象和內(nèi)在邏輯進行分析，進而在產(chǎn)出方案時，我們能夠更為清晰的處理工作的需求。而上面的思路，我們只需要將需求結(jié)合，產(chǎn)出設(shè)計頁面即可。那對應(yīng)的方案這里就不做呈現(xiàn)，畢竟競品分析我么你主要分析的也是思路。
首先關(guān)于競品分析的方法，我們的目的主要是為了呈現(xiàn)自己的思路。比如剛才我們已經(jīng)完成的思路的拆解，進而就需要通過方法將自己的思路進行理論化的包裝，給到其他人，這樣就能夠保證在評審當中“你的思路是正確的”
功能拆解法是針對系統(tǒng)或軟件的功能分解，可以采用不同的方法進行拆分。
我們常用的方式是按照菜單導(dǎo)航進行拆解，即將不同功能按照其在菜單中的位置進行分解。同時還可以根據(jù)使用流程來進行功能拆分，即將整個系統(tǒng)或軟件按照用戶使用時的流程進行分解。
功能拆解法能快速幫我們?nèi)コ尸F(xiàn)產(chǎn)品的具體架構(gòu)，了解競爭對手的功能情況。
矩陣分析法可以通過將不同競品的關(guān)鍵指標以矩陣的形式呈現(xiàn)，從而幫助設(shè)計師更好地分析和比較不同競品之間的特點和優(yōu)劣勢，去尋找產(chǎn)品方向上的機會點。
矩陣分析法主要通過制作矩陣坐標軸，將不同競品的特點和關(guān)鍵指標對比，從而分析它們在不同方面的優(yōu)劣勢。在制作矩陣表格時，通常將各個競品的關(guān)鍵指標列在表格的橫向和縱向兩個方向，從而形成一個以競品名稱為標題的矩陣表格。
例如，我在分析垂直業(yè)務(wù)型產(chǎn)品與行業(yè)屬性型產(chǎn)品時，就會將很多關(guān)鍵指標進行對比：產(chǎn)品市場占比、產(chǎn)品的設(shè)計難度、業(yè)務(wù)復(fù)雜度，同時在這些競品當中，我們選擇了兩個指標進行分析「設(shè)計難度、業(yè)務(wù)復(fù)雜程度」通過對比和分析不同競品在這些指標上的位置得分情況，設(shè)計師可以更好地了解各個競品之間的優(yōu)劣勢，從而更好地制定設(shè)計策略和優(yōu)化產(chǎn)品設(shè)計。
總之，競品分析的矩陣分析法可以幫助設(shè)計師更好地了解市場競爭環(huán)境，分析不同競品之間的優(yōu)劣勢，為設(shè)計和優(yōu)化產(chǎn)品提供參考和啟示。
功能對比法是一種通過比較和分析不同競品的功能來了解其特點和優(yōu)劣勢的競品分析方法。該方法主要通過比較不同競品在功能上的差異和優(yōu)劣勢，幫助設(shè)計師更好地了解市場上類似產(chǎn)品的功能特點，并從中獲取設(shè)計靈感和啟示。
功能對比法在 B 端產(chǎn)品當中，我們主要分析一些影響產(chǎn)品體驗的核心功能。比如產(chǎn)品的自定義能力、是否有新功能的交互引導(dǎo)、產(chǎn)品有問題時的幫助體驗如何，這些我們都能夠通過功能對比的方法進行快速的了解，快速讓自己的產(chǎn)品在行業(yè)當中取得一定的優(yōu)勢。
競品分析是指對與自己產(chǎn)品或服務(wù)相似的競爭對手進行調(diào)查、分析和比較，以了解市場競爭狀況，為企業(yè)制定市場策略提供依據(jù)。在競品分析中，評分比較法是一種常用的方法。
評分比較法是指按照一定標準對不同競爭對手的產(chǎn)品體驗進行評分，再將得分進行比較，以確定各競爭對手的優(yōu)劣勢和差距，進而明確產(chǎn)品的具體定位。
評分比較法的優(yōu)點在于可以直觀地展示競爭對手之間的差距，幫助企業(yè)更清晰地了解自身在市場中的位置和優(yōu)劣勢，進而制定更科學(xué)的競爭策略。但評分比較法也存在一些局限性，例如評分標準的選擇可能不夠客觀，評分者的主觀性可能會影響評分結(jié)果等。
商業(yè)畫布的目的是幫助企業(yè)了解自己所處的市場競爭環(huán)境，以及競爭對手的優(yōu)劣勢和策略。因為他是偏業(yè)務(wù)層面的分析，通常由以下幾個部分組成：
商業(yè)畫布可以幫助企業(yè)了解自身在市場中的定位和優(yōu)劣勢，以及與競爭對手之間的差距和機會。通過對競爭對手的分析和比較，企業(yè)可以更好地制定市場策略，提高市場競爭力。
而這些方法的使用，主要目的是為了呈現(xiàn)你的思路，通過方法論的方式進行包裝，進而能夠讓沒有體驗過的人快速了解，方便他們理解你的方案思路。
競品分析最簡單莫過于借鑒別人的設(shè)計思維，因為我們在剛接觸到一個需求的時候通常都會非常的茫然。而現(xiàn)如今的界面設(shè)計很少有行業(yè)里面完全新的功能，大多數(shù)的界面模式已經(jīng)被行業(yè)當中驗證使用，所以先不要嘗試去創(chuàng)建一個新的交互需求，先試著尋找一下有沒有較為成熟的交互邏輯。
比如我們現(xiàn)在接到一個需求，要去做一個頁面的代碼配置信息，手里拿到的就只有一些簡單的產(chǎn)品截圖。
那這個時候我們就需要考慮與之類似的交互到底會有哪些？
想來想去過后你會發(fā)現(xiàn)，我們似乎可以從 VScode + Figma 等頁面布局當中去獲取靈感，進而在繪制這些頁面的時候會更為完整。
并且思路借鑒，并不意味著我們需要去 copy 別人的完整方案，很多時候要去分析的是它的方案真實適不適合我們的產(chǎn)品。
畢竟產(chǎn)品當中就會存在很多特殊的場景，場景不同你的思考的點就會存在差異。
再舉個例子：比如我們在課程上講到了三個風格非常類似的 指標圖，當你看得到這三個完全相同的組件時，其實會覺得他們只是存在風格上的差異：一個數(shù)據(jù)凸顯、一個展示進度、一個展示指標
但是深入去分析了解，才知道它們除了風格上的差異之外，其實還會存在使用場景的不同。
左上圖是數(shù)據(jù)凸顯：因為是一個 BI 產(chǎn)品，在產(chǎn)品當中主要呈現(xiàn)的是關(guān)于這個字段詳細的數(shù)據(jù)記錄。所以在數(shù)據(jù)呈現(xiàn)的時候較為詳細和準確。
右上圖展示進度：同樣是一個指標圖，它呈現(xiàn)的內(nèi)容更多是一個進度展示。究其原因，發(fā)現(xiàn)它被用于企業(yè)管理頁面，以便我們可以通過進度了解資源的具體用量。
左下圖展示指標：這個指標圖有點特殊。在鼠標懸停時，我們發(fā)現(xiàn)該圖表可以點擊。這意味著該指標圖可進行下鉆操作，以快速查看相關(guān)聯(lián)的數(shù)據(jù)情況。
因為競品分析并不是一個短期分析完了就結(jié)束的過程，如果處理一個需求，針對一個功能，我們都需要持續(xù)的對產(chǎn)品進行動態(tài)的跟蹤。就像我跟進了 飛書 3-4 年，一步一步看到它的變化、產(chǎn)品也在不斷地發(fā)展，因此你的分析也應(yīng)該是持續(xù)跟進的。
我們作為設(shè)計師，更應(yīng)該對產(chǎn)品持續(xù)進行關(guān)注，比如創(chuàng)建對應(yīng)的產(chǎn)品版本庫，將這些競品持續(xù)關(guān)注，不斷地總結(jié)，這樣你才能擁有自己的護城河。。
回顧飛書管理后臺的更新，了解一個B端產(chǎn)品的發(fā)展歷程
關(guān)于如何尋找競品，我其實之前有給大家講過，正好趁著這些內(nèi)容更新，又給大家科普一波~
在競品的尋找上，其實我們主要有幾種尋找的渠道：
我們可以通過搜索引擎檢索到大量的同類型產(chǎn)品，使用搜索引擎我們只需要明確想要尋找哪個領(lǐng)域或產(chǎn)品的競爭對手，然后根據(jù)該領(lǐng)域或產(chǎn)品的特點，選擇適當?shù)年P(guān)鍵詞，通常會有兩種方式，產(chǎn)品類型以及產(chǎn)品名稱。
我們以尋找 CRM 行業(yè)的產(chǎn)品為例，就可以在搜索引擎當中得到兩類關(guān)鍵名稱：
產(chǎn)品類：紛享銷客、銷售易、銷幫幫 ...
行業(yè)類：CRM、客戶關(guān)系管理系統(tǒng)、企業(yè)客戶管理 ...
當然在搜索引擎上的選擇，國內(nèi)肯定就是 百度、搜狗、Bing 等平臺；如果是國外，則主要是 Google。
在國內(nèi)的應(yīng)用，主要講究的是生態(tài)，因此我們尋找競品還可以通過競品的 ISV 快速獲取。
目前國內(nèi)的企業(yè)應(yīng)用平臺主要有三個：釘釘、企業(yè)微信、飛書
無論是什么產(chǎn)品，我們都能夠通過這三個平臺進行快速的尋找。
比如我們想要尋找財稅相關(guān)的產(chǎn)品，那我能夠通過 釘釘、企業(yè)微信、飛書找到非常多與之相關(guān)的產(chǎn)品。并且這樣的一些平臺能夠提供 試用 15 天的功能，代表著我們可以直接體驗多款同類型產(chǎn)品。
Youthce.com
如果是咱們賬號的老讀者都知道，我自己有一個個人網(wǎng)站，雖然年久失修，但是里面仍然總結(jié)了市面上較為常見的 B 端產(chǎn)品，其中就包含 200+ 各個行業(yè)的競品。
因此肯定還是要先安利自己的網(wǎng)站，最后說一句，個人網(wǎng)站肯定更新、肯定更新~
36 企服點評
這是 36 氪出品的企業(yè)服務(wù)點評網(wǎng)站，很多國內(nèi)的 B 端產(chǎn)品都會在這個網(wǎng)站上出現(xiàn)，雖然做得一般，但也是國內(nèi)最好的網(wǎng)站了（攤攤手）
網(wǎng)站感覺恰飯的產(chǎn)品都點多，很多不知名的產(chǎn)品排行都比較靠前~
找 SaaS
也是類似的企業(yè)軟件的匯總平臺，內(nèi)容雖然很多，但是它的排序規(guī)則并不是很認可。
比如人才招聘領(lǐng)域，排在前面的產(chǎn)品我一個都不認識，這個排序規(guī)則就值得大家細品細品，這算是大家找軟件的一個補充吧。
SaaS 點評網(wǎng)
類似的企業(yè)服務(wù)社區(qū)，我們能夠快速的進行產(chǎn)品分析。
G2
可以把它理解為是國外軟件的大眾點評，我們可以在該網(wǎng)站上查看和撰寫軟件和服務(wù)的評價，并對其進行打分、發(fā)布評論和分享經(jīng)驗。這些評價基于用戶的真實體驗，具有很高的可信度和參考價值。
也可以在這上面找到國外產(chǎn)品的流行趨勢，并且每年 G2 都會頒布 「Best Software for 2023」來展示在過去一年，不同領(lǐng)域當中那些產(chǎn)品做得非常優(yōu)秀。
Capterra
Capterra 是一個在線的軟件和服務(wù)目錄網(wǎng)站，目的是在幫助企業(yè)尋找和比較各種軟件和服務(wù)產(chǎn)品。與 G2 比較類似，不過使用它通常會采取一些關(guān)鍵詞來去尋找。
Crozdesk
企業(yè)軟件搜索，不過會有很多國外的行業(yè)報告提供給我們，免費下載~
競品截圖是我們設(shè)計師最主要的靈感來源。
CE青年花瓣
我在我的花瓣中總結(jié)了50個B端產(chǎn)品，并為每個產(chǎn)品提供了詳細的截圖。我還提供了相應(yīng)的標簽來對這些截圖進行細致的管理。已經(jīng)有很多設(shè)計師向我反饋他們會打開這個花瓣網(wǎng)站，每天都去獲取相應(yīng)的靈感。當然，也會有一些機構(gòu)和媒體拿著這些截圖，進行對外的售賣，并且價格不菲。
所有資源都已經(jīng)免費提供給大家了。大家可以好好利用這些資源，幫助自己提升設(shè)計能力。
SaaS UI
SaaS UI 是國外截圖分享的一個平臺，里面按照產(chǎn)品為單位，搜集了大量的產(chǎn)品截圖。同時對于沒有的產(chǎn)品你還可以提交請求，等待一段時間就能更新到你想要的產(chǎn)品截圖。
Webframe
在 Webframe 里面，我們能夠通過左側(cè)的導(dǎo)航，快速對于產(chǎn)品進行分類。
與 SaaS UI 不同，它的分類按照產(chǎn)品的整體結(jié)構(gòu)展開的，比如：官網(wǎng)、價格頁、登錄頁、編輯、彈窗、搜索 等等...
這種方式在我們?nèi)狈`感的時候能夠快速通過導(dǎo)航，找到自己想要的截圖內(nèi)容，既能夠進行橫向?qū)Ρ龋瑫r也能夠?qū)ふ业皆摦a(chǎn)品的全部截圖。
SaaS Landing Page
這是一個專注于 B 端官網(wǎng)設(shè)計的網(wǎng)站，所有的官網(wǎng)都通過小編的精心篩選，質(zhì)量上肯定有所保障。同時還匯總了網(wǎng)站的 字體、顏色、技術(shù)棧，能夠讓我們快速掌握該網(wǎng)站的設(shè)計風格。
我們提到的所有資源都放在我的微信工號里?；貜?fù) “頁簽”，即可獲取。
關(guān)于競品分析，其實就是通過研究別人的產(chǎn)品來了解自己的產(chǎn)品可能會遇到的問題。你可以通過不同的競品分析方式呈現(xiàn)你的競品分析結(jié)果。因為我們作為設(shè)施設(shè)計師考慮的不是產(chǎn)品層面上的各種關(guān)系，而是設(shè)計層面上的交互邏輯。
盲目的分析只會讓你越陷越深，達不到我們最初的目標。
希望這篇文章能夠?qū)δ阌兴鶈l(fā)，這也是我在實際工作中運用競品分析的關(guān)鍵思路。
作者：CE青年來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
B端項目一般用到的顏色會很豐富，再帶上數(shù)據(jù)可視化場景，那需要的顏色需求就會更多。像Ant design色彩體系包含12個主色以及衍生色：
Material design色彩體系包含16個主色以及衍生色:
那這種即能滿足多種不同場景的同時色彩搭配在一起又很協(xié)調(diào)的色彩體系，是如何科學(xué)搭建的呢？
從各大廠的色彩規(guī)范中，可以總結(jié)將色彩劃分為4種類型：
主色（品牌色）
常用于主按鈕、文字高亮、重要信息高亮等場景～
中性色
常用于文字、圖標、卡片背景色、分割線、邊框之類的～用于處理頁面信息主次關(guān)系，助力閱讀體驗～
功能色（語義色）
功能色代表了明確的信息以及狀態(tài)（比如成功一般用綠色，出錯失敗一般用紅色，提醒一般用橙色/黃色，鏈接一般用藍色～）
擴展色
常用于更多顏色需求場景，比如Dashboard頁面的圖表（數(shù)據(jù)可視化）、插畫配圖等
通常會制定8色板、12色板、16色板。比如Ant design的色彩系統(tǒng)是制定了12個色板，Atlassian design是制定了8個基礎(chǔ)色板（可以衍生16或者24色板），Material design色彩體系是制定了16個色板～
在創(chuàng)建之前，我們先了解一下HCT / HSL / HSB 色彩空間
這些色彩空間的區(qū)別，想要了解的可以到網(wǎng)上查找一些專業(yè)知識～我們這里只針對項目中使用哪一種色彩空間能夠為設(shè)計師調(diào)色帶來便捷性出發(fā)。
H-色相/色調(diào)
是色彩的基本屬性，就是平常所說的顏色名稱(如紅色、黃色)等，取值在0—360度之間（黑色與白色無色相）；
S-表示飽和度/純度
顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色；
B/L-表示明度
顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。
Ant design設(shè)計團隊使用的是HSB顏色模型進行設(shè)計，認為設(shè)計師在調(diào)整顏色時更容易對顏色有明確的心里期望，并促進團隊溝通。
HCT是Google研制的色彩空間～
H-Hue色相
取值在0-360之間；
C-Chroma色度
可以理解為色彩濃度，取值在0-100之間，數(shù)值越大，顏色濃度越濃；
T-Tone光度
也就是亮度，取值在0-100之間，數(shù)值越大，顏色越亮。
*個人認為無論采用哪一種色彩空間，只要真正能夠幫助到我們運用在項目中，都是可以滴
品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一，常用于主按鈕、文字高亮、重要信息高亮等場景～
確定產(chǎn)品主色的思路有以下幾種：
了解業(yè)務(wù)屬性
屬于哪一個行業(yè)、產(chǎn)品的定位是什么、目標受眾群體，想給用戶傳達怎樣的視覺感覺；
競品分析
了解同業(yè)務(wù)屬性的產(chǎn)品一般用的哪些顏色，從而獲得靈感；
滿足WCAG2.0標準
文本的視覺呈現(xiàn)以及文本圖像至少要有1:4.5的對比度，以確保所有的文字內(nèi)容清晰易讀，對比度足夠。工具網(wǎng)址：Color review https://color.review
從B端領(lǐng)域里面一些國內(nèi)國外大廠的設(shè)計規(guī)范中，我分別將主色在亮暗模式背景下進行可讀性測試，學(xué)習(xí)到以下內(nèi)容：
1. 亮暗模式下可以選取不同顏色做為主色，但亮暗模式的兩個主色是在同一個色板的衍生色上；比如國內(nèi)的TDesign，國外的Shopify\Atlassian\Salesforce色值不同；一般情況下會選用一樣的主色在亮暗模式下；
2. Shopify\Atlassian\Microsoft無論在白色背景還是黑色背景上，都滿足WCAG2.0的標準。剩下的要么在白色背景上不滿足，要么在黑色背景上不滿足。（當然這些都只是作為難捏不準主色時的一個參考，并不是規(guī)則～）
我負責的一款海外產(chǎn)品，主要是對服務(wù)器、數(shù)據(jù)庫監(jiān)控分析的工具，客戶選定的主色是藍色系，他們很喜歡datadog這個產(chǎn)品，我發(fā)現(xiàn)該產(chǎn)品的主色在HSB模式下，S色彩濃度高 B明度值76視覺上偏灰，加上客戶產(chǎn)品的logo主色H值是偏紫色調(diào)，所以最終確定在亮模式下用#0756D5為主色（亮暗模式的選擇，我打算采用Shopify\Atlassian\Salesforce的方法，暗模式下用主色的衍生色～）
功能色可以用于特定功能、狀態(tài)反饋、應(yīng)用圖標、dashboard數(shù)據(jù)表盤等場景，最常用到的反饋的成功、失敗、警告狀態(tài)～
結(jié)合參看其他優(yōu)秀的文章，加上我自己的一些實踐思考，方法匯總?cè)缦拢?
1.以主色色相為基礎(chǔ)，差值15°，圍繞360°色環(huán)取24色～另外大家都知道相差15°的顏色為鄰近色，那我們提取出來的任何兩個相鄰的顏色都是鄰近色，我們拆分出來的色彩是比較和諧的~
以我負責的海外項目為例～
2.根據(jù)自身產(chǎn)品系統(tǒng)的復(fù)雜度，在24色板上去掉接近的顏色，篩選出一定說的顏色。前面也有提到一般是8、12、16色板。我負責的項目選擇是10個色板～
3. 色彩校正
HSB色彩空間最大的弊端就在于相同 Saturation（飽和度） 和 Value（亮度）的色彩，在不同的 Hue （色相）上的亮度感知是完全不一樣的，其原因是 HSV/HSL 色彩空間是應(yīng)用于數(shù)字化圖像處理領(lǐng)域，為了方便機器理解、計算、呈現(xiàn)而設(shè)計，是人類視覺的線性模型，但人類的感知卻是非線性的，所以造成數(shù)值與感知不匹配的問題
市面上的校準方式一般是在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無彩色視覺感官明度～具體怎么調(diào)，是不是就按照這個方式全部都要調(diào)成統(tǒng)一的感官明度？我去研究了Apple/Material design/Ant design的色板，從里面選取統(tǒng)一編號的顏色，發(fā)現(xiàn)如下：
他們的色彩明度并不是完全一致的，一般是橙色、黃色這些帶有語義的顏色明度會亮一些～所以色彩校正不能完全調(diào)成一樣的感官明度，只能作為一個輔助。
為了滿足界面對色彩的需求，需要對主色和輔助色進行色板延伸，建立不同梯度的調(diào)色板。常用的有2種方法：
第一類：手動調(diào)整
1.淺色調(diào)色板，在顏色上有序疊加（ 比如20%、40%、60%、80%、90%）不透明度的白色#ffffff；深色調(diào)色板，在顏色上有序疊加 （比如20%、40%、60%、80%）不透明度的黑色#000000。（數(shù)值并不是固定的，設(shè)計師可按需自行調(diào)整～）
2.淺色調(diào)色板，色相（H）往感光明度高的色相依次差值 2，飽和度（S）依次減少 15，明度（B）依次增加 5；深色調(diào)色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次減少 15，飽和度（S）依次增加 5。（Ant Design 和 Material Design 調(diào)色板也都加了色相旋轉(zhuǎn)）
第二類：使用色板生成工具（走捷徑）
1.Material Design
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
2. Ant Design
https://ant.design/docs/spec/colors
3. ColorBoX
4.figma插件Supa Palette(收費)
中性色包含了黑、白、灰，是頁面中文字、背景常用的顏色，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關(guān)鍵。
最熟悉的常見文字顏色就是#333，#666，#999，我喜歡直接拿Material design的灰色色板來用，同時還會拓展藍灰色板（在確定好灰色色板后，在上面疊加主色的不透明度即可生成藍灰色色板～）應(yīng)用于圖標、背景、描邊。
最后，得出所有顏色的同色系色階：
從色板里面挑選亮模式下主色為Primary600，暗模式下主色為Primary400，實際效果圖如下：
dashboard數(shù)據(jù)可視化頁面的配色方案我是如何實踐的呢？
結(jié)合AntV數(shù)據(jù)可視化色彩體系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/
匯總?cè)缦拢?
根據(jù)不同數(shù)據(jù)類型、使用場景擴展出 6 種可視化色板類型
適用于描述不同類別的數(shù)據(jù)，比如餅圖的不同分類、填充地圖中的不同國家、關(guān)系圖中的不同角色等
適用于表示數(shù)據(jù)樣本中數(shù)值或梯度的變化，如排行榜等級變化、風險等級變化等
適用于描述數(shù)據(jù)正負值的變化，中間一般會有一個中間值（通常為0），比如氣溫的冷熱、海拔高低、股票漲跌等
將兩組順序色板通過圖層疊加模式產(chǎn)生一組新的色板，一個顏色代表兩種變量數(shù)據(jù)，常用于觀察一個事物兩個維度變化的相關(guān)性
對比突出重點或特殊數(shù)據(jù)，將重點關(guān)注的數(shù)據(jù)標以高飽和度的強色調(diào)，其他普通數(shù)據(jù)標以低飽和、低明度的基本色。常用于對比重點關(guān)注事物與其他分類事物的差別
適用于氣象預(yù)警配色、紅綠燈配色、股市的紅漲綠跌等
我負責的項目數(shù)據(jù)類型采用的是兩種配色方案
1.不同類別的數(shù)據(jù)，圖表類型有餅圖、折線圖、柱狀圖采用分類色板；
2.明確表明狀態(tài)的用語義色板
如何從色彩系統(tǒng)中調(diào)分類色板呢，我常用的方法如下：
1. 參照Echart的配色規(guī)律(保守不會出錯的方法)
2. 研究市面上做的好的表盤產(chǎn)品（比如Mixpanel）或者競品Datadog的配色規(guī)律
3.無障礙測試校驗-色盲群體的適用性
大約10%的世界人口是色盲，可以借助工具來校驗：Adobe color 網(wǎng)頁版 https://color.adobe.com/zh/create/color-accessibility
實踐才是檢驗真理的唯一標準～色彩規(guī)范只是為了讓設(shè)計更有章法、更有說服力，在運用色彩時還是需要謹慎克制，可以研究各大廠的設(shè)計規(guī)范，然后把學(xué)到的東西運用在項目實踐中。
作者：志龍有妖氣_zlyyq 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
莫奈是一款主要服務(wù)京東內(nèi)部用戶的數(shù)據(jù)可視化平臺，它以容器的形式將京東城市各種與智慧城市建設(shè)及運營相關(guān)的能力聚合，并以可視化的形式面向客戶呈現(xiàn)。
作為京東莫奈的設(shè)計負責人，過去三年一直負責莫奈可視化平臺的用戶體驗設(shè)計工作，由于本人日常設(shè)計主要以智慧城市、數(shù)據(jù)可視化大屏為主，所以我即是莫奈的設(shè)計負責人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關(guān)的問題，這些問題，部分在產(chǎn)品日常迭代中得到了優(yōu)化，但是也有相當一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設(shè)計師，我日常與業(yè)務(wù)方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側(cè)收集了不少使用體驗相關(guān)的問題。我對以上兩個渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產(chǎn)品迭代的周期，針對莫奈體驗問題，進行一次密集的優(yōu)化和革新，這便是本次莫奈體驗升級改版的基礎(chǔ)背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設(shè)計中用到的一些方法、流程和經(jīng)驗與大家做次交流和分享，希望能為同行在類似的改版設(shè)計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產(chǎn)品負責人的多次溝通，我們事實上已經(jīng)對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數(shù)產(chǎn)品的體驗升級都可參考下面的流程執(zhí)行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產(chǎn)品負責人、開發(fā)負責人等關(guān)鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預(yù)估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節(jié)奏有條理，避免工作內(nèi)容長時間停滯在某一個環(huán)節(jié)而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗設(shè)計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責任將用戶的聲音轉(zhuǎn)化為需求，并推進落地為產(chǎn)品的一部分；從產(chǎn)品團隊來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務(wù)方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產(chǎn)品架構(gòu)做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學(xué)的角度看，以往不合理的底層代碼設(shè)計，使產(chǎn)品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學(xué)總要消耗部分精力去維護那部分不穩(wěn)定的存在，從而導(dǎo)致研發(fā)同學(xué)人效比低、開發(fā)體驗差；從上級Leader來看，公司的核心經(jīng)營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優(yōu)化都依賴于強悍的技術(shù)和優(yōu)秀的產(chǎn)品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現(xiàn)實執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計師也有相當大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價值便得以體現(xiàn)。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現(xiàn)，莫奈的使用具有上下游的關(guān)聯(lián)性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業(yè)務(wù)，往往具有比核心用戶更高的決策權(quán)。因此我們優(yōu)先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時，我們也通過對內(nèi)外的宣講和培訓(xùn)，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經(jīng)獲取了不少用戶反饋、收集了相當?shù)膯栴}建議，但作為體驗升級的系統(tǒng)性工作，為了更全面的了解用戶體驗痛點，我們還是設(shè)計了一次完整的用戶調(diào)研活動。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實的反饋。
用戶調(diào)研的核心目標是充分收集用戶反饋，并將反饋結(jié)果量化及系統(tǒng)化，量化后的結(jié)果可做為設(shè)計側(cè)推動產(chǎn)品執(zhí)行體驗優(yōu)化的關(guān)鍵依據(jù)，也可以作為后續(xù)驗證優(yōu)化結(jié)果的對照項。
本次問卷設(shè)計我們參考了PSSUQ整體可用性量表，并結(jié)合本次調(diào)研目標做了部分調(diào)整。
PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個方面將體驗結(jié)果量化，然后通過與行業(yè)基本經(jīng)驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當前整體體驗結(jié)果有一個全局的概況性評價。同時根據(jù)三個方向的評分也可以更細致的指導(dǎo)后續(xù)的設(shè)計優(yōu)化方向，為設(shè)計決策提供更多科學(xué)可信的依據(jù)。
PSSUQ整體可用性量表作為一個通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(nèi)容更加符合本次調(diào)研目標。
問卷設(shè)計好之后，接下來就是問卷發(fā)放以及結(jié)果分析了。
PSSUQ量表內(nèi)每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調(diào)研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數(shù)量：20），說明問卷結(jié)果具有較好的可信度，其結(jié)果值得進一步研究。
通過整理和統(tǒng)計問卷數(shù)據(jù)，可以得出以下結(jié)論：
1、內(nèi)外部用戶在系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個維度對莫奈均不滿意
2、對比行業(yè)經(jīng)驗值（均值），莫奈系統(tǒng)總體體驗質(zhì)量與行業(yè)同類產(chǎn)品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結(jié)果與日常同相關(guān)同學(xué)的溝通結(jié)果一致，以上評分結(jié)果也反映出此次體驗升級的緊迫性，作為由設(shè)計驅(qū)動的改版設(shè)計，設(shè)計側(cè)面臨較大壓力。
在設(shè)計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個選項以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關(guān)聯(lián)屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產(chǎn)品的反應(yīng)速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎(chǔ)的使用體驗，后者決定產(chǎn)品能多大程度上便捷的服務(wù)用戶。良好的穩(wěn)定性和反應(yīng)速度可以讓用戶專注于任務(wù)本身，而使用模板能最快速的產(chǎn)出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復(fù)雜場景下的業(yè)務(wù)需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當前產(chǎn)品日常迭代中優(yōu)化的點，我整理后會以需求的方式向產(chǎn)品團隊提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關(guān)信息，并將相關(guān)問題梳理到本次改版任務(wù)中，做系統(tǒng)的解決和處理。
在【05、體驗痛點分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數(shù)據(jù)....。之后，在用戶完成基礎(chǔ)任務(wù)后，我們還會針對用戶關(guān)心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內(nèi)部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產(chǎn)品團隊并同步添加反饋問題的用戶為該需求的關(guān)注者，后續(xù)，當該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環(huán)。這樣做既是我們團隊的責任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。
通過線上問卷調(diào)研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產(chǎn)品建設(shè)的上下游協(xié)作關(guān)系，把每一個具體的問題匯總給對應(yīng)的角色，并由對應(yīng)的角色產(chǎn)出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關(guān)于體驗升級的所有事項及具體任務(wù)便可周密安排，之后便是資源投入、推進升級工作具體執(zhí)行。
用戶體驗5要素模型，從產(chǎn)品的戰(zhàn)略層出發(fā)，層層遞進直到表現(xiàn)層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側(cè)同學(xué)更是如此，他們鮮有意識到產(chǎn)品的目標、內(nèi)容以及性能等這類的因素，也是構(gòu)成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續(xù)迭代的產(chǎn)品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現(xiàn)，而是要通過持續(xù)不斷的改進和優(yōu)化才能持續(xù)滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導(dǎo)產(chǎn)品及研發(fā)團隊更好的理解用戶體驗，這樣不僅能幫助設(shè)計師在本次體驗升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責人產(chǎn)出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結(jié)果，體驗升級方向以設(shè)計為主導(dǎo)，同時兼顧產(chǎn)品和研發(fā)的部分目標，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質(zhì)量提升”解決表現(xiàn)層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗升級方向作為對體驗升級結(jié)果的導(dǎo)向，將指導(dǎo)后續(xù)設(shè)計動作的展開。
基于體驗升級方向，接下來就要制定具體的設(shè)計策略，來實現(xiàn)體驗升級方向中要達成的結(jié)果。設(shè)計策略制定第一步先確定設(shè)計目標，我們將設(shè)計目標拆解為三個方向，每個方向通過兩個關(guān)鍵詞定義。設(shè)計目標主要分為視角與交互兩個方向，同時兼顧產(chǎn)品側(cè)“易拓展、易維護”的需求。實際設(shè)計中，視覺與交互并非獨自分開進行，在設(shè)計開始的階段，需要先定義設(shè)計風格等基礎(chǔ)設(shè)計要素，之后視覺便可在此基礎(chǔ)之上全面展開，此時視覺設(shè)計要考慮交互的效果，交互設(shè)計也需要斟酌設(shè)計的展現(xiàn)。
對于設(shè)計目標中關(guān)鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(guān)鍵詞所表現(xiàn)出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關(guān)鍵詞所表達出的意象的設(shè)計要素，之后通過在設(shè)計中應(yīng)用這些設(shè)計要素，就能把關(guān)鍵詞定義的抽象的設(shè)計概念轉(zhuǎn)化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關(guān)聯(lián)算法，針對“科技和高效”這兩個視覺目標的關(guān)鍵詞收集了海量的音視頻設(shè)計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現(xiàn)“科技、高效”這兩個概念的所有設(shè)計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設(shè)計執(zhí)行的過程中應(yīng)用這些設(shè)計要素，通過合理的搭配和組織，將這些設(shè)計要素融入到莫奈新的設(shè)計語言，如此，產(chǎn)品最終便可在視覺上呈現(xiàn)出與視覺目標關(guān)鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設(shè)計要素其實已經(jīng)足夠具體，但是如何將這些要素應(yīng)用在設(shè)計中，我們還需要進一步歸納。我個人一直以來習(xí)慣從形、色、字、質(zhì)、構(gòu)、動、音7個維度分析一個設(shè)計作品的設(shè)計風格，就如同人體是由肌肉、骨骼構(gòu)成的一樣，以上7個維度也是構(gòu)成一個設(shè)計作品的“經(jīng)、骨、肉”。所以，我認為對于一個設(shè)計作品，尤其是UI設(shè)計作品，以上7個維度基本能夠完全概況它的風格，所以當我要為自己的產(chǎn)品做風格設(shè)定時，我也是從這7個維度出發(fā)來為每個維度定義具體的風格和策略。
這種細分維度然后定義風格的方式有多種優(yōu)勢，其中最明顯的是它能夠?qū)⑽覀冿L格定義的設(shè)計工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計要素的特點，這時候我只需要對“質(zhì)感”這個維度的風格進行優(yōu)化和調(diào)整，而不需要推翻整個7要素重新再來。這種設(shè)計方式讓我的設(shè)計更加理性，也讓后續(xù)設(shè)計執(zhí)行的工作更加的有條理和舒適，從設(shè)計風格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設(shè)計感受的方法。
對于產(chǎn)品界面的造形設(shè)計，一方面依照情緒版中提取的設(shè)計要素“透視、空間感、異構(gòu)造形”來考慮，另一方面我也結(jié)合莫奈的產(chǎn)品Logo做了適當?shù)某橄蠛脱堇[；兩者結(jié)合最終確定了當前莫奈的造形設(shè)計。
首先，產(chǎn)品左側(cè)主導(dǎo)航采用了具有一定透視角度的異形設(shè)計；產(chǎn)品頂部標題區(qū)域也采用了相同的設(shè)計思路：左側(cè)為品牌Logo設(shè)計了一個容器，Logo在其中容納放置；Logo右側(cè)收起的區(qū)域預(yù)留了常用公告、跑馬燈的設(shè)計，方便產(chǎn)品把日常重要信息同步給用戶；最右側(cè)呈現(xiàn)用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設(shè)計，用戶是否能夠接受，在設(shè)計開始時我存在一定的疑慮，因此在設(shè)計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設(shè)計有創(chuàng)意具有鮮明的特點，也有部分用戶認為透視的設(shè)計看著較為怪異，尤其是左側(cè)主導(dǎo)航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數(shù)值中選擇了一個即能展示透視的設(shè)計效果、又不至于透視過大導(dǎo)致文本圖標等變形嚴重而不易識別的角度，其次，我還配合開發(fā)同學(xué)對導(dǎo)航透視文本和圖標的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項優(yōu)化完成后，新的用戶測試表明大家對該設(shè)計的滿意度有很好的提升。
莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關(guān)鍵詞，結(jié)合情緒版提取的設(shè)計要素，將原有品牌色做了細微的調(diào)整。首先藍色飽和度增加，綠色調(diào)整色相使其偏向藍色的一端并增加亮度。如此，當兩個顏色搭配使用時，藍色作為主色調(diào)體現(xiàn)科技、可靠的視覺和心理感受；綠色作為點綴色和強調(diào)色，體現(xiàn)活力、高效與創(chuàng)新。藍綠對比強烈，具有很好的場景適應(yīng)性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設(shè)計要素，對于字體的設(shè)計風格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現(xiàn)字體風格的設(shè)計目標，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經(jīng)過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現(xiàn)京東的品牌特色并體現(xiàn)出與其它產(chǎn)品差異化的字體設(shè)計。京東正黑體主要用于莫奈產(chǎn)品中的數(shù)字、拼音、英語、數(shù)值符號四個場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時，其小數(shù)點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現(xiàn)象，加之該字體很少更新，沒有針對當前高像素密度、高分辨率的屏幕特點做相關(guān)的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調(diào)研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯(lián)合開發(fā)的開源字體，其字重豐富、字形簡潔、現(xiàn)代，能夠很好的適應(yīng)PC與移動端的顯示，也能適應(yīng)當前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現(xiàn)。除此之外，思源黑體的字形特點與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。
結(jié)構(gòu)設(shè)計主要目標是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構(gòu)建所需的大多數(shù)功能，也是莫奈產(chǎn)品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設(shè)計雖然也有不錯的設(shè)計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設(shè)計規(guī)范，大屏編輯器頁面的產(chǎn)品需求總是需要UI產(chǎn)出設(shè)計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設(shè)計、開發(fā)和維護都具有較高的成本。
新的改版設(shè)計，在設(shè)計之初就聯(lián)合產(chǎn)品對編輯器內(nèi)的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數(shù)量，同時每個組件也針對自身功能和用途的特點進行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計兼顧了開發(fā)與設(shè)計同學(xué)使用莫奈的場景。對于開發(fā)同學(xué)，他們在代碼中習(xí)慣使用十六進制色值，而設(shè)計師更習(xí)慣于RGBA或HSLA的調(diào)色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設(shè)計同學(xué)確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設(shè)置的模式以統(tǒng)一的格式呈現(xiàn)。而諸如此類優(yōu)化，在本次體驗升級中不勝枚舉。
莫奈的動效設(shè)計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設(shè)計風格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網(wǎng)頁端實時渲染，具有矢量動畫的特點，能適應(yīng)多種設(shè)備及屏幕分辨率，具有優(yōu)秀的前端呈現(xiàn)效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設(shè)計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優(yōu)化，我們交互優(yōu)化的目標是“簡單、流暢”。
首先進行交互優(yōu)化的是各類圖表的屬性及配置項設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數(shù)據(jù)、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現(xiàn)了什么數(shù)據(jù)、圖表可以與用戶進行那些互動三個維度解決了圖表在數(shù)據(jù)可視化呈現(xiàn)中最基礎(chǔ)的需求。由于圖表在數(shù)據(jù)可視化呈現(xiàn)中頻繁使用，所以與圖表配置相關(guān)的操作自然也是相當高頻和常用。當前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內(nèi)容進行修改；第二是批量對多個圖表的相同屬性進行修改在當前版本不可用，導(dǎo)致用戶圖表配置成本高。針對用戶最關(guān)心最影響體驗的兩個交互問題，我的優(yōu)化方案如下。
要解決問題，首先要知道問題從何而來。經(jīng)過深入與產(chǎn)品、研發(fā)同學(xué)及部分用戶訪談溝通后，我發(fā)現(xiàn)當前導(dǎo)致圖表配置項層級過深主要有兩個原因，分別是產(chǎn)品規(guī)劃與設(shè)計展現(xiàn)。
具體來講，產(chǎn)品層面有三個問題：
01、產(chǎn)品對于當前圖表配置項的結(jié)構(gòu)梳理是以程序的邏輯來呈現(xiàn)，而非以用戶的視角來歸納。舉個栗子，在當前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數(shù)據(jù)系列>系列名稱>形狀設(shè)置>顏色設(shè)置。而這一路徑為何如此設(shè)計？因為顏色這個屬性的后端代碼就是這樣的結(jié)構(gòu)。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現(xiàn)的內(nèi)容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設(shè)置時往往需要在樣式一級菜單下點擊多個屬性、反復(fù)嘗試確認，才能最終完成顏色修改的設(shè)置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結(jié)構(gòu)設(shè)計是必要的么？答案是并不是！因為只有用戶關(guān)注的才是有用的，產(chǎn)品應(yīng)該提供用戶想要的內(nèi)容而不是強塞給用戶產(chǎn)品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當?shù)膶ε渲庙椬鲂┚?，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現(xiàn)無關(guān)緊要的內(nèi)容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯(lián)合產(chǎn)品經(jīng)理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當所有圖表的配置項都以思維導(dǎo)圖的形式呈現(xiàn)時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結(jié)構(gòu)存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設(shè)計和產(chǎn)品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結(jié)論，對此，一方面我們通過為配置項區(qū)域增加數(shù)據(jù)埋點，分析用戶對各個配置項使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調(diào)研了同類產(chǎn)品中一些用戶量較大、設(shè)計質(zhì)量較高的產(chǎn)品來進行當前有限的優(yōu)化。
配置項層級過深的另一個原因，是屬性配置列表的結(jié)構(gòu)及布局設(shè)計存在“深層級、空間利用率底”的特點。
如下圖，左側(cè)圖片示意了舊版莫奈的配置列表設(shè)計結(jié)構(gòu)。可以看到舊版設(shè)計完全采用樹結(jié)構(gòu)的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區(qū)分，舊版的設(shè)計基準尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導(dǎo)致信息展示困難；其次，樹狀的結(jié)構(gòu)在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標滾輪才能看全信息，綜上，舊的設(shè)計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設(shè)計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設(shè)計，將提煉后的一級屬性標簽固定在屬性配置列表左側(cè)。相較于之前，這樣的設(shè)計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側(cè)屬性內(nèi)容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設(shè)計采用分隔線與色塊結(jié)合的方式來表達屬性列表內(nèi)的層級關(guān)系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數(shù)據(jù)可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統(tǒng)一修改、一次性調(diào)整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調(diào)整為相同的綠色，在用戶的視角下，此時的操作應(yīng)該是先選中6個想要調(diào)整的圖表，然后找到橫軸顏色設(shè)置項，之后統(tǒng)一調(diào)整色彩。但莫奈當前的版本，如果用戶按照上述流程操作，看到的將是下圖左側(cè)的示例：圖表多選之后，對齊、坐標等基礎(chǔ)項仍然可用，而與屬性相關(guān)的其它設(shè)置并沒有被聚合并呈現(xiàn)，在此情況下，用戶想要完成最初的目標就只能6個圖表逐個依次調(diào)整！顯然，這樣的操作并不符合用戶預(yù)期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關(guān)的問題，同時也是一個強技術(shù)相關(guān)的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經(jīng)完成了對60多個圖表的細致分析，有了這項工作的基礎(chǔ)，當前面臨的問題便不那么棘手。如右側(cè)示例：當用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。
新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預(yù)覽與模板展示。
創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏?xí)r可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內(nèi)部編輯器是什么樣，或許用戶有實際項目，但當前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設(shè)計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預(yù)覽與模板展示優(yōu)化：原有的設(shè)計，當用戶點擊創(chuàng)建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內(nèi)包含一個空白模板以及有限多個其它內(nèi)容模板，而在如此狹小的區(qū)域展示這么多內(nèi)容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設(shè)計首先是全屏鋪開，盡可能充分的利用頁面空間。
在模板展示及預(yù)覽方面，我設(shè)計了列表展示與縮略圖分布展示兩種方式，并添加了分類標簽和搜索按鈕，此外還聯(lián)合產(chǎn)品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用
模板預(yù)覽方面，在兩種布局模式下，用戶鼠標滑過模板縮略圖時，模板均會以較大的視圖動態(tài)呈現(xiàn)模板內(nèi)容。在列表模式下，模板預(yù)覽窗口固定在頁面右側(cè)區(qū)域；縮略圖分布的模式下，預(yù)覽窗口根據(jù)鼠標指針的位置激活。當用戶選中某個模板時，點擊底部創(chuàng)建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內(nèi)容進一步完成自己的定制化設(shè)計。
如今移動端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當前也逐步從移動端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設(shè)計在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進一步提升搜索的效率。
一個數(shù)據(jù)可視化場景，通常是由N個數(shù)據(jù)圖表與其它數(shù)據(jù)要素一起構(gòu)成的多個頁面來呈現(xiàn)和展示的。這些頁面內(nèi)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調(diào)研時發(fā)現(xiàn)，大部分用戶都沒有給組件規(guī)范命名的習(xí)慣，大多數(shù)情況下，組件在圖層面板列表內(nèi)都是以默認名稱或者默認名稱+1、2、3的形式存在。這導(dǎo)致了當頁面組件較多時，通過組件命名來查找組件其實相當困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗?？s略圖以快照方式保存當前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。
新的設(shè)計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設(shè)計更明顯的分組示意圖標以及為組內(nèi)列表添加深色色塊的方式，完成了成組對象與列表內(nèi)其他要素區(qū)分的需求，新的設(shè)計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設(shè)計元素。
此次體驗升級是設(shè)計主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗設(shè)計師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時刻關(guān)注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉(zhuǎn)化為體驗痛點、制定對應(yīng)的優(yōu)化策略是體驗設(shè)計師的基本功。而對于設(shè)計和產(chǎn)品本身是否熱愛，也是設(shè)計能否不斷精進、體驗是否能夠不斷提升的關(guān)鍵。好的設(shè)計不僅服務(wù)了產(chǎn)品、幫助了用戶、同時也成就了設(shè)計師本身。
本人為莫奈提供設(shè)計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內(nèi)部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗優(yōu)化建議；以線下線上的形式面向莫奈產(chǎn)品及研發(fā)團隊進行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團隊建立了非常友好緊密的聯(lián)系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設(shè)計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關(guān)乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗的能力，并將其應(yīng)用到體驗設(shè)計師的職業(yè)工作中，我相信，倘若如此實踐，必能在職業(yè)和生活中都獲得有不錯的成就。
好的產(chǎn)品，必然是持續(xù)關(guān)注用戶訴求，不斷迭代發(fā)展的產(chǎn)品，好的體驗設(shè)計也必然是陪伴產(chǎn)品不斷優(yōu)化、持續(xù)精進的設(shè)計，復(fù)盤的意義不僅是沉淀過去的經(jīng)驗，更是為未來更好的體驗蓄能。
此次分享如能為大家?guī)砟桥乱稽c點的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
// 寫在前面
端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品，帶來使用量的提升，從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務(wù)快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣，依托各端流量實現(xiàn)矩陣產(chǎn)品間的導(dǎo)流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗升級的項目為例，分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。
// 為什么要做導(dǎo)流
導(dǎo)流的目的
對于業(yè)務(wù)本身而言，隨著移動互聯(lián)網(wǎng)流量紅利期的結(jié)束，獲取新用戶的成本越來越高，不管是新產(chǎn)品還是成熟型產(chǎn)品，都需要通過導(dǎo)流的手段來持續(xù)擴充新用戶。其次，對于有駕產(chǎn)品生態(tài)而言，需要各端產(chǎn)品間的相互聯(lián)動，協(xié)同發(fā)揮優(yōu)勢，實現(xiàn)流量價值最大化。
導(dǎo)流的優(yōu)勢
成本低，相較于投放、活動等渠道流量獲取方式，矩陣導(dǎo)流成本低；
高意向，用戶購車意向明確更容易實現(xiàn)商業(yè)轉(zhuǎn)化；
可共享，用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。
// 如何做好導(dǎo)流設(shè)計
1.問題分析
通過梳理核心場景的4種導(dǎo)流條，發(fā)現(xiàn)各個場景導(dǎo)流形式各異，用戶缺乏統(tǒng)一認知，導(dǎo)流引導(dǎo)語單一內(nèi)容吸引力弱。在用戶在瀏覽頁面時，點擊功能入口或想要繼續(xù)查看更多內(nèi)容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：
缺乏統(tǒng)一認知：視覺表達形式不成體系，用戶感知不夠；
內(nèi)容吸引力弱：內(nèi)容單一缺乏吸引力，用戶沒有點擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗。
從導(dǎo)流鏈路的用戶行為來看，整個流程下載路徑過長，發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點：
從小程序落地頁到下載頁：在進入小程序瀏覽頁面時，用戶沒有注意到導(dǎo)流條就滑走了；
點擊導(dǎo)流條進入下載頁：點擊導(dǎo)流條會先調(diào)起導(dǎo)流彈窗，點擊確認后再進入到下載頁，用戶未選擇下載就退出了。
2.明確設(shè)計方向
針對導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認知，內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個完整的導(dǎo)流鏈路圖，根據(jù)用戶增長模型，把用戶生命周期各節(jié)點的用戶行為與產(chǎn)品觸點一一羅列出來，找到增長路徑的設(shè)計機會點。
通過以上的問題分析，如何建立用戶和產(chǎn)品的鏈接，保障友好的體驗，是本次導(dǎo)流升級要解決的問題。根據(jù)用戶關(guān)鍵行為，我們可以將整個導(dǎo)流鏈路拆分為3個階段來挖掘主要機會點：
下載前：興趣激發(fā)導(dǎo)流吸引，建立用戶穩(wěn)定認知；
下載中：強化用戶轉(zhuǎn)化動機，刺激用戶完成下載；
下載后：保障還原體驗暢通，提升首次使用體驗。
下面將分別介紹導(dǎo)流下載前階段的設(shè)計落地實踐，以及下載中、下載后階段的延伸設(shè)計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意，是轉(zhuǎn)化開始的第一步，統(tǒng)一的視覺風格和滿足用戶訴求的內(nèi)容，有利于增強導(dǎo)流條的吸引力。
1）收斂導(dǎo)流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉(zhuǎn)預(yù)期的體驗問題，下線了阻斷式和截斷式兩種體驗不友好的導(dǎo)流類型，將原來4種導(dǎo)流類型收斂為2種，僅保留通用導(dǎo)流條和功能延展導(dǎo)流條，基于這2種導(dǎo)流形態(tài)進行深入的設(shè)計探索。
2）建立通用視覺標準
針對【缺乏統(tǒng)一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題，建立了通用導(dǎo)流條標準化規(guī)范。統(tǒng)一視覺形態(tài)，優(yōu)化為頁面內(nèi)通欄嵌入式，同時融入品牌色強化用戶感知，根據(jù)頁面布局制定了不同的展示規(guī)則。
上線后，內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下，導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平，為了進一步提升導(dǎo)流的點擊效果，開始探索場景化定制提轉(zhuǎn)的設(shè)計方向。
3）定制場景化內(nèi)容
針對【內(nèi)容吸引力弱】內(nèi)容單一缺乏吸引力、用戶沒有點擊欲望的內(nèi)容問題，在通用標準化形態(tài)的基礎(chǔ)上，根據(jù)不同場景用戶訴求點，豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉(zhuǎn)化的影響。
內(nèi)容定制：豐富導(dǎo)流利益點、場景化內(nèi)容更能激發(fā)用戶興趣，促進轉(zhuǎn)化達成；
按鈕文案：轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點匹配，可以助力按鈕轉(zhuǎn)化提升；
氛圍強化：導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導(dǎo)流條點擊。
2.拓展場景擴量
復(fù)利通用標準導(dǎo)流條的成功經(jīng)驗，應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗證有效性，從產(chǎn)品價值點出發(fā)，挖掘高流量場景的機會點從而帶來轉(zhuǎn)化增量。
1）價值傳遞
根據(jù)小程序和APP兩端各自的不同點，分別從功能差異及體驗差異兩個方向進行優(yōu)化。
APP特有功能：APP完善的功能體驗可以更好滿足用戶訴求，例如參配瀏覽場景下，引導(dǎo)用戶體驗搜索及橫屏查看的高頻功能，對于導(dǎo)流轉(zhuǎn)化有正向幫助；
各端體驗差異：小程序和APP兩端體驗存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗，能夠刺激用戶轉(zhuǎn)化。
2）價值延續(xù)
當用戶完成核心內(nèi)容消費后，是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容，進而引導(dǎo)用戶下載呢？
服務(wù)透傳：平臺服務(wù)內(nèi)容傳遞，例如在內(nèi)容落地頁文末增加品牌廣告導(dǎo)流條，幫助用戶建立品牌認知；
相關(guān)推薦：引導(dǎo)相關(guān)內(nèi)容消費，例如在文章或視頻頁增加相關(guān)推薦導(dǎo)流條，引導(dǎo)用戶瀏覽更多相似內(nèi)容。
// 下載中
當用戶通過導(dǎo)流條進入到下載流程時，還有哪些手段可以刺激用戶激活減少流失呢？
強化下載動機：下載頁前置APP落地頁內(nèi)容，例如將通用下載頁優(yōu)化為場景化下載頁，給用戶超前產(chǎn)品體驗吸引轉(zhuǎn)化；
減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應(yīng)用下載，同時退出下載頁時增加挽留。
// 下載后
當用戶在應(yīng)用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗?zāi)兀?/span>
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導(dǎo)新用戶探索功能，根據(jù)用戶興趣推薦適合的內(nèi)容。
以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計思考，為大家提供可以繼續(xù)探索的方向。
// 寫在最后
總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗設(shè)計要點：
全鏈路洞察，對導(dǎo)流鏈路進行拆解，通過盤點導(dǎo)流鏈路的用戶行為，明確每個節(jié)點的設(shè)計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導(dǎo)，讓用戶專注于產(chǎn)品本身傳遞的價值，引領(lǐng)用戶完成對產(chǎn)品的探索從而完成下載激活。
希望以上的設(shè)計思考，可以帶給大家一些啟發(fā)。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
當你使用形形色色的APP時，是不是時常不由自主地感慨“這個APP的界面太丑了”、“這個APP太難用了，連入口都找不到”，是什么原因造成這種感受呢？
認知心理學(xué)中有個概念叫做認知負荷「cognitive load」，它表示大腦在工作中記憶資源的使用量，會影響用戶的信息閱讀和產(chǎn)品使用體驗。本文將從信息層級、信息結(jié)構(gòu)、閱讀順序、信息密度、文案表述五個層面來探討如何降低用戶認知負荷。
格式塔心理學(xué)的封閉性原理告訴我們，人們在認知某個東西的時候首先看到的會是整體、而不是單獨的部分。如圖所示，你首先看到的是一個藍色的字母U和深褐色的人頭側(cè)臉，其次才是構(gòu)成這個形狀的各種細節(jié)。
從人類視覺系統(tǒng)成像原理來說，人類天生對于顏色對比非常敏感（彩色視覺是因為視網(wǎng)膜中3種視錐細胞分別感知特定顏色所致，當用戶同時看到多種不同的顏色時，不同視錐細胞就會被激活眼睛感受到強烈的對比）。
因此，在設(shè)計界面時通常會通過大面積的色塊對比來凸出層級更高的信息。
總結(jié)來說，我們在平時的設(shè)計中常用形狀大小差異和顏色對比差異來拉開信息層級。
此外，由于人眼視度（舒適的垂直視場角度為-30°~25°）和用戶使用不同設(shè)備時的閱讀角度問題，人眼對于屏幕上不同區(qū)域的關(guān)注度有著天然的差異。
因此，我們在設(shè)計時若想拉開信息層級，除了使用面積和顏色對比外，也可以通過位置對比來實現(xiàn)，即將層級較高的信息置于舒適閱讀區(qū)內(nèi)。如圖所示，移動端設(shè)備位于屏幕中央偏上的信息在閱讀舒適度上會優(yōu)于屏幕下方的信息。
我們知道了如何通過設(shè)計手段來區(qū)分信息層級，那在信息層級區(qū)分上是不是越多越好呢？
顯然不是，信息層級過多也會增加人腦的認知負荷（整個頁面顯得很花哨）；而信息層級過少，則頁面的內(nèi)容展示會比較平均、不一定能突出所有重點信息。一般來說，我們可以將信息劃分為重要信息、次重要信息、一般信息和和輔助信息，也就是信息層級控制在4個以內(nèi)比較合適。
如圖所示，我們把聚劃算的頁面做高斯模糊后，里面的信息層級就一目了然了。
在討論信息結(jié)構(gòu)之前，我們首先對基本的信息單元做拆解：信息單元 = 信息本體 + 信息容器，這里我們把信息本體定義為我們主動讓用戶感知并能輔助其進行下一步動作的信息元素，而容器定義為具有明顯視覺區(qū)隔的信息承載物。信息本體一般包括圖片、文案、icon、行動按鈕等，而信息容器可以大到頁面小到一般的模態(tài)、非模態(tài)控件。
如圖所示，在典型的電商場景中商品卡片可拆分為信息本體（商品圖、商品名、商品價格、利益點）+ 信息容器（卡片）：
熟悉格式塔原理的朋友都知道相近原則——即彼此位置相近的物體會被人們看成是一類東西。同時，保持相同的信息結(jié)構(gòu)意味著視覺焦點內(nèi)不同層級信息的相對位置是固定的，這樣用戶在快速掃視某個產(chǎn)品時會降低記憶負擔——即無需尋找同屬性的信息。反之有一定的記憶負擔，不利于用戶快速掃視重要信息。
如圖所示，滴滴我的錢包頁面5張輪播圖的信息結(jié)構(gòu)相同，遵循左文右圖和主文案在上、輔助文案在下的信息結(jié)構(gòu)。
而支付寶理財頁面的輪播圖則有著不同的信息結(jié)構(gòu)，如輔助文案和按鈕在不同輪播圖中的位置和大小、樣式均不一樣，輪播時同類屬性的信息會以不同樣式在不同位置切換，增加用戶的眼動成本和認知負擔。
從頁面整體動線看，同類或關(guān)聯(lián)信息會有明顯的區(qū)塊分隔。如下圖所示，滴滴「我的」tab在頁面整體動線布局上有著非常明顯的區(qū)塊劃分來承載關(guān)聯(lián)信息：
用戶信息（個人信息+會員信息）→常用工具→促活福利（卡券 + 福利）→平臺服務(wù)（金融服務(wù) + 企業(yè)服務(wù)）→低頻工具。
從信息單元內(nèi)部來看，同樣會對關(guān)聯(lián)信息做位置上的劃分。例如一般的社區(qū)信息流卡片結(jié)構(gòu)基本都是生產(chǎn)者信息→內(nèi)容信息→互動入口。
我們前面提到過信息單元=信息本體+信息容器（容器為具有明顯視覺區(qū)隔的信息承載物），而信息容器的排布也有其內(nèi)在的規(guī)律。
筆者體驗過大量產(chǎn)品后，大致總結(jié)了3種較為常見的容器排布結(jié)構(gòu)，即三角結(jié)構(gòu)、宮格結(jié)構(gòu)和列表結(jié)構(gòu)，每種結(jié)構(gòu)容器的排列規(guī)則會遵循一定的主次關(guān)系并根據(jù)其特點有不同的適用場景。
（1）三角結(jié)構(gòu)
我們都知道三角形是多邊形里最穩(wěn)定的結(jié)構(gòu)，其容器排布主次突出（根據(jù)主要容器與次要容器的位置關(guān)系可分為上下結(jié)構(gòu)和左右結(jié)構(gòu)），用戶縱向的視覺遷移路徑較短，一般比較適用于數(shù)量較少、且有明顯優(yōu)先級的場景。
（2）宮格結(jié)構(gòu)
宮格結(jié)構(gòu)適用于優(yōu)先級相同或相似的功能入口，一般以四宮格和六宮格為主，數(shù)量過多時容易造成視覺疲勞和信息密度過高。四宮格信息容器和六宮格信息容器如圖：
值得注意的是容器內(nèi)也可以是宮格結(jié)構(gòu)，但這種宮格結(jié)構(gòu)的信息主體數(shù)量會比信息容器更多：
（3）列表結(jié)構(gòu)
列表結(jié)構(gòu)同樣適用于優(yōu)先級相同或相似的功能入口，但與宮格結(jié)構(gòu)不同的是列表結(jié)構(gòu)的一般具有排布邏輯或規(guī)則，如按照時間線排布。
列表結(jié)構(gòu)包含橫向列表和縱向列表，橫向列表適用于短文案卡片（比如活動或功能入口），方便用戶掃視更多圖片；縱向列表適用于長文案卡片，用戶可以快速掃視較多文字。
在B端設(shè)計需求中，我們經(jīng)常會遇到讓用戶輸入一堆信息的場景，這時候如果我們把所有信息都羅列在1個頁面中，可能會造成高跳出率和低完成率。
表單設(shè)計領(lǐng)域的專家Adam Silver通過實際項目發(fā)現(xiàn)：將較長表單按照關(guān)聯(lián)性拆解為若干部分，能有效提升用戶滿意度以及完成率。除此之外，Adam還總結(jié)了這種設(shè)計理念的16個優(yōu)點，我們認為其中比較有價值的是這3個點：
市面上將長表單拆分成幾個步驟做分頁處理的產(chǎn)品比較多，如下圖小紅書就將店鋪申請流程拆分為了填寫店鋪類型、經(jīng)營類目、個人信息3個部分。
我們都知道用戶的閱讀習(xí)慣一般是近似于從左往右、從上至下的Z字形結(jié)構(gòu)，且基于人眼視度和不同設(shè)備屏幕角度的差異，人們掃視屏幕時一般會先注意到屏幕中央偏上一點的位置，因此我們在設(shè)計信息結(jié)構(gòu)時也要考慮用戶的閱讀路徑和習(xí)慣，將對用戶高價值或者高優(yōu)先級的信息置于視覺焦點容易觸及的地方。
那什么是對用戶高價值或者高優(yōu)先級的信息呢？我們判斷的標準是哪種信息形式（圖片or文字）更能高效地傳遞有效信息以輔助用戶決策，比如在電商產(chǎn)品或外賣產(chǎn)品中一般采用上圖下文或者左圖右文的信息結(jié)構(gòu)，且會將圖片的信息層級拉到最高，這是因為用戶在快速掃視過程中僅通過看圖即可看到這件商品，初步了解外賣商家賣的是什么。
但如果我們換一個場景，這種形式就不那么適用了，用戶僅通過看圖并不了解這條資訊的大致含義，因此，此時文案的優(yōu)先級更高，常常采用上文下圖或者左文右圖的形式。
國外的用研團隊曾通過眼動熱力圖的AB實驗發(fā)現(xiàn)通過在圖片中加入人類面部表情的視覺引導(dǎo)對于信息的閱讀率有明顯提升作用。如圖所示在第一張廣告圖中，用戶的視覺焦點大部分集中在了嬰兒的臉部，而右側(cè)的文案則很少有用戶關(guān)注，第二張圖中嬰兒由正臉轉(zhuǎn)化成了側(cè)臉同時眼睛看向右側(cè)的文字，此時右側(cè)文字的眼動熱力成像明顯提升。
這里的信息密度指的是在單位容器內(nèi)（卡片、頁面）所呈現(xiàn)的信息量，比如在1個頁面中如果信息密度大，則相對屏效較高，但卻容易增加用戶的認知負荷；反之，1個頁面中信息密度低則相對屏效較低，用戶的認知負荷也相對較低。
我們來看1個關(guān)于信息密度對于閱讀體驗影響的案例：在美國開車，人們常常因為看不懂街邊的停車牌而違停被罰款，我們可以看到左圖中的停車牌上密密麻麻全是字，想要閱讀根本無從下手。
Nikki Sylianteng是一個華裔的設(shè)計師，當她初來乍到美國時也因此遇到了很多不便，針對這個問題她簡化用戶的需求，即：
于是她將文字信息做了可視化處理，通過較少的文字+色塊極大地降低了停車牌的信息密度，讓司機看到后一目了然。Nikki Sylianteng的這種設(shè)計被美國各地的市政部門廣泛采用。
在傳統(tǒng)媒介中，一張充滿文字和圖片的報紙與一個時尚雜志封面的信息密度對比更加明顯，給讀者帶來的閱讀體驗和認知負荷也完全不同，這也是為什么很少有人會耐心讀完報紙上的文字。
關(guān)于海報與雜志設(shè)計還牽涉到圖版率這一個概念，簡單講就是圖片面積所占整體版面的比率，通常來說圖版率越高則表現(xiàn)力和親和力就越強，有興趣的讀者可以自行上網(wǎng)了解圖版率的相關(guān)知識，在這里就不做詳細闡述了。
在廣告場景下，當用戶被圖片吸引視覺焦點后，文案表述就顯得尤其重要了。這時候我們要搞清楚3個問題：
首先，我們得搞清楚核心目標受眾是誰，同一款產(chǎn)品來自一線城市的年輕白領(lǐng)和三四線城市的中年人關(guān)注點和付費動機可能完全不一樣（比如同樣都是手機，一線城市的年輕白領(lǐng)更關(guān)注顏值和性能，而三四線城市中年人更關(guān)注價格和質(zhì)量）。
這時候產(chǎn)品的廣告文案也必須依據(jù)核心目標受眾的需求點來設(shè)計才能命中用戶，小米手機的線下廣告語在一線城市的地鐵站（左圖）和農(nóng)村的大字報廣告（右圖）就采取了完全不同的描述策略。
在回答完以上3個問題后還需要注意，我們的文案描述目標受眾是否能夠理解，因為人群不一樣，其受教育程度和理解能力也會不一樣。
在設(shè)計動作文案時，我們時常會受到慣性思維（常態(tài)場景下的通用做法）的影響而忽略了動作本身的意涵。
比如下圖的二次確認彈窗用戶取消上傳和取消訂單是一個對當前行為的否定，但我們習(xí)慣于用“確定”和“取消”來讓用戶回應(yīng)是否進行某個行為（我們也可以從另一個角度理解，否定的否定就是肯定，點擊「取消」按鈕即繼續(xù)用戶當前行為，但這種理解很繞），這個時候就會帶來理解上的歧義，當出現(xiàn)這種情況時，最好的做法就是將動作本身簡單明了地描述出來避免產(chǎn)生歧義。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
2022卡塔爾世界杯已經(jīng)拉開帷幕，相信大家從這周開始，都已經(jīng)陷入四年一次的狂熱的足球氛圍中。那你有聽過懂球帝這款足球APP嗎？作為國內(nèi)用戶規(guī)模和影響力最大的足球社區(qū)，據(jù)官方統(tǒng)計，懂球帝在全國足球迷中的滲透率高達83%，甚至有這樣一句口號——十個足球迷，八個用懂球帝。本期設(shè)計大偵探，全面拆解體育行業(yè)的獨角獸懂球帝，看看一款足球類APP是如何設(shè)計的！
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
全文8517字，分為五個部分，分別是導(dǎo)讀、產(chǎn)品畫像、內(nèi)容服務(wù)、變現(xiàn)服務(wù)和設(shè)計總結(jié)，你可以通過下面的思維導(dǎo)圖對本文內(nèi)容結(jié)構(gòu)有全面的了解。
2. 適合人群
第一類，UI/交互設(shè)計師，可以跳出執(zhí)行層，去思考懂球帝的產(chǎn)品設(shè)計策略，提升產(chǎn)品分析能力；
第二類，產(chǎn)品經(jīng)理/運營，通過全面的產(chǎn)品設(shè)計拆解、策略推導(dǎo)，獲取產(chǎn)品設(shè)計參考；
第三類，體育產(chǎn)品行業(yè)從業(yè)者，通過對懂球帝的全面拆解，獲取競品設(shè)計參考。
3. 分析模型
我們主要運用三種模型對產(chǎn)品的功能、設(shè)計進行拆解，由于沒有權(quán)威的官方數(shù)據(jù)，所以我們更多以推導(dǎo)的形式去思考懂球帝為什么這樣設(shè)計。
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應(yīng)用戶生命周期中的5個重要環(huán)節(jié)，主要用于分析產(chǎn)品的功能價值。
第二個，上癮模型。由尼爾·法埃爾提出，通過對上千種習(xí)慣類產(chǎn)品的調(diào)研，總結(jié)出一款產(chǎn)品如果要讓用戶習(xí)慣、上癮，可以按照觸發(fā)、行動、多變的酬賞和投入四個步驟去設(shè)計，主要用于分析產(chǎn)品的功能價值和推導(dǎo)產(chǎn)品的策略設(shè)計。
第三個，社會心理學(xué)。主要結(jié)合西奧迪尼的社會心理學(xué)《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權(quán)威和稀缺，去推導(dǎo)產(chǎn)品設(shè)計的用戶心理設(shè)計，主要用于推導(dǎo)產(chǎn)品的策略設(shè)計。
二、產(chǎn)品畫像
1. 產(chǎn)品介紹
懂球帝是一款體育類APP，首個版本發(fā)布于2013年12月5日，根據(jù)易觀千帆2022年8月的最新數(shù)據(jù)，懂球帝月活躍用戶人數(shù)301.8萬。懂球帝持有中超、德甲、足協(xié)杯等賽事直播版權(quán)，靠著多年的積累，吸引了眾多國內(nèi)外豪門俱樂部、足球媒體和運動員在懂球帝開通官方懂球號，目前是全國用戶規(guī)模和影響力最大的足球內(nèi)容平臺和社區(qū)。
2. 商業(yè)模式
2.1 客戶細分
懂球帝的客戶群體主要以足球迷為主，年齡區(qū)間在24-35歲，男性居多。據(jù)官方數(shù)據(jù)，在足球球迷群體中，懂球帝APP的滲透率高達83%。從這些數(shù)據(jù)可以看得出來，懂球帝是一個覆蓋大眾足球用戶群體的產(chǎn)品，不僅為用戶提供專業(yè)的足球資訊、直播、競彩和游戲等服務(wù)，還滿足了很多小眾用戶群體的需求，比如球星卡交易、賽事舉辦曝光等。
2.2 價值主張
懂球帝以懂足球，更懂你為價值主張。
2.3 渠道通路
懂球帝主要通過網(wǎng)絡(luò)媒體平臺進行拉新引流，比如微信、微博（56.6萬）、抖音（110萬粉絲）、知乎和小紅書（3.7萬）等平臺，其次還會通過贊助線下足球比賽活動進行宣傳，比如懂球帝足球星火公益計劃等，還有會直接投入廣告進行宣傳，比如在世界杯、歐洲杯、歐洲五大聯(lián)賽投入廣告，邀請世界巨星為產(chǎn)品代言等。
2.4 客戶關(guān)系
懂球帝主要通過社區(qū)、圈子和粉絲群等方式和用戶建立緊密的關(guān)系。
2.5 收入來源
懂球帝的收入來源主要通過會員VIP、商城、競彩、游戲和廣告等方式實現(xiàn)營收。
2.6 核心資源
懂球帝在足球領(lǐng)域深耕已有十年，無論是技術(shù)、數(shù)據(jù)、資源、口碑還是球迷用戶，都已經(jīng)有了非常夯實的積累。
2.7 關(guān)鍵業(yè)務(wù)
懂球帝的核心業(yè)務(wù)包含足球資訊、球迷社區(qū)、體育彩票、比賽直播、球星卡交易和游戲等。
2.8 重要合作伙伴
第一類，體育行業(yè)的知識創(chuàng)作者，通過簽約合作的形式為平臺輸出高質(zhì)量的內(nèi)容，比如專欄和懂彩帝；第二類，體育運動員、解說員及具有一定名氣的體育從業(yè)者，通過在懂球帝建立懂球號和球迷進行深入的溝通，提高個人知名度和影響力；第三類，體育機構(gòu)和俱樂部，比如亞足聯(lián)、歐洲各大聯(lián)賽豪門俱樂部均在懂球帝開通了懂球號，和中國地區(qū)的球迷第一時間進行交流互動，提高球隊知名度和影響力。
2.9 成本結(jié)構(gòu)
作為一個互聯(lián)網(wǎng)產(chǎn)品公司，懂球帝的成本開銷主要是產(chǎn)品運營和開發(fā)人力等成本。
3. 用戶畫像
懂球帝的用戶群體主要以男性用戶居多，占比75.55%；從年齡分布看，以31-35歲的用戶群體最多，占比39.55%，其次為24到30歲的用戶，占比33.21%；從用戶消費能力看，懂球帝的中等及中高消費者占比67.11%；從地域分布看，三線城市用戶最多，占比21.62%，新一線城市占比23.05%，二線城市占比19.39%，一線城市僅占12.42%，其中廣東省最多，山東和四川省位居前三。
4. 信息結(jié)構(gòu)
懂球帝的一級菜單包含首頁、比賽、主隊、發(fā)現(xiàn)、數(shù)據(jù)和用戶中心?！甘醉摗共捎们饲娴男畔⒘鞣绞?，根據(jù)用戶的興趣、標簽和瀏覽記錄推薦新聞，其中包含了頭條、精選、快訊、游戲等熱門欄目；「比賽」主要為球迷提供最新足球、籃球比賽的體育賽事直播，球迷可在直播間和專家進行互動；「主隊」是為球迷設(shè)置自己喜歡的球隊，當球隊開啟比賽時，會第一時間通知球迷；「數(shù)據(jù)」主要為球迷提供各大主流聯(lián)賽的當季的聯(lián)賽排名、積分、射手榜和賽程等數(shù)據(jù)；「用戶中心」設(shè)計成抽屜導(dǎo)航，聚合了懂球帝整個產(chǎn)品其他功能的入口，比如賽事、公益足球、系統(tǒng)設(shè)置等功能。從信息結(jié)構(gòu)看，懂球帝的產(chǎn)品功能并不復(fù)雜。
5. 重要迭代記錄
根據(jù)七麥數(shù)據(jù)統(tǒng)計，懂球帝APP首個版本發(fā)布于2013年12月5日，截止到11月20日，APP版本已經(jīng)更新至V7.8.8版本，近一年版本更新次數(shù)為17次。
版本重要迭代記錄
2015年1月，發(fā)布V3.0版本，全新UI，球員球隊資料頁改版，新增實時聊天室、訂閱等功能；
2016年2月，發(fā)布V4.1.1版本，Slogan為「足球迷神器（足球、直播、新聞、足彩、足球論壇社區(qū)）」；
2016年7月，發(fā)布V4.6版本，上線商品搜索功能，方便用戶購買裝備；
2017年1月，發(fā)布V5.1版本，圈子功能改版，新增Twins功能（球員twitter和ins動態(tài)）
2018年4月，發(fā)布V5.9.9版本，新增球隊數(shù)據(jù)頁，為用戶提供豐富的足球數(shù)據(jù)；
2019年1月，發(fā)布V7.0版本，全新UI，提供舒適的閱讀體驗，新增世界功能；
2020年3月，發(fā)布V7.3.5版本，上線球隊球員人氣榜功能，支持用戶為喜歡的球隊球員打榜；
2020年7月，發(fā)布V7.4.2版本，Slogan升級為「不只是一個足球APP」；
2021年9月，發(fā)布V7.6.6版本，上線會員連續(xù)包月服務(wù)；
6. 產(chǎn)品生命周期
根據(jù)易觀千帆2022年8月數(shù)據(jù)，懂球帝月活躍用戶人數(shù)301.80萬。官方數(shù)據(jù)公布目前懂球帝下載量超過1.5億次，注冊用戶4000萬，在足球迷群體中，懂球帝用戶滲透率超過82%，是國內(nèi)最大的足球聚合平臺。 懂球帝目前在2016年就拿到了C輪融資，明年即將年滿的十周歲的懂球帝，目前處于產(chǎn)品生命周期的成熟期，當下聚焦于商業(yè)變現(xiàn)的探索和創(chuàng)新。
7. 競爭圖譜
截止到2022年11月21日，懂球帝APP在蘋果的APP Store應(yīng)用市場，體育分類排名第11，騰訊體育位居第一，月活躍用戶人數(shù)1,205.75萬；在體育彩票分類，懂球帝位居第一，是中國體育彩票月活躍用戶人數(shù)的3倍；在體育資訊分類，虎撲以555.25萬月活躍用戶人數(shù)排名第一，懂球帝位居第二。
三、內(nèi)容服務(wù)
「內(nèi)容服務(wù)」是產(chǎn)品實現(xiàn)用戶留存的關(guān)鍵方式。作為一個足球媒體，懂球帝不僅覆蓋了歐洲五大主流聯(lián)賽，還包含中超、中甲、電競等聯(lián)賽資訊，為球迷提供了豐富的內(nèi)容。作為一個社區(qū)，懂球帝以UGC用戶生產(chǎn)內(nèi)容模式，吸引了全國眾多足球愛好者和創(chuàng)作者加入了平臺，并設(shè)計了圈子（球迷可根據(jù)自己的喜好加入不同的圈子，比如皇馬球迷圈、梅西球迷圈）等欄目，為全國球迷提供了一個創(chuàng)作、交流和娛樂的足球平臺。其次懂球帝利用自身強大的技術(shù)資源能力，為用戶提供每日足球/籃球比賽的直播，滿足眾多球迷無法觀看比賽或需要付費支付觀看的痛點。懂球帝還提供了非常強大的數(shù)據(jù)查詢功能，球迷可以在「數(shù)據(jù)」欄目查詢到當季各大聯(lián)賽最新的賽程、排名和射手榜等信息。
1. 內(nèi)容頻道
作為一個足球媒體社區(qū)，懂球帝的內(nèi)容頻道主要分為以下幾類。按聯(lián)賽分，有歐洲五大聯(lián)賽（英超、西甲、德甲、意甲和法甲）還有中超和中甲聯(lián)賽；按內(nèi)容長短分，有「快訊」（提供每天最新的足球資訊）；按內(nèi)容質(zhì)量分，有「精選」和「深度」；按興趣分，有「關(guān)注」和「頭條」；按傳播形式，有「視頻」；其次還有電競和彩經(jīng)等欄目。從內(nèi)容頻道設(shè)計分類看，懂球帝的內(nèi)容非常夯實，可以滿足不同球迷們的需求，但是內(nèi)容設(shè)計的創(chuàng)新度有一定缺失，比較中規(guī)中矩。
1.1 頭條
「頭條」作為懂球帝的首頁，采用千人千面的信息流形式為用戶推薦足球資訊。頭部的輪播主要以當日或當周熱點賽事或活動為主，輪播下方內(nèi)容為當日熱點比賽預(yù)告或比分，方便球迷第一時間獲取比賽數(shù)據(jù)。從第一屏開始，平臺主要結(jié)合用戶的個人興趣、標簽和主隊（球迷群體一般會選擇一個主隊，比如廖爾摩斯是阿森納球迷，就會把阿森納設(shè)置為自己的主隊）進行個性化資訊推薦。
1.1.1 新聞詳情頁
足球社區(qū)是一個充滿了愛恨交織的大江湖，比如皇馬和巴薩、AC米蘭和國際米蘭的球迷往往水火不容，所以往往在足球新聞的評論區(qū)，會非常鬧熱，甚至形成獨特的球迷文化。從懂球帝的內(nèi)容詳情頁可以看出，懂球帝的用戶活躍度非常高，一篇頭條的新聞評論數(shù)有上百條評論，甚至單條評論還支持多人評論、點贊、分享和舉報，非常熱鬧。
1.1.2 用戶主頁
「用戶主頁」主要指用戶的個人主頁，主要包含發(fā)表、評論、關(guān)注和粉絲四個內(nèi)容。用戶之間可進行相互關(guān)注，但不支持發(fā)送私信或其他互動方式，無法進行建立更深的關(guān)系鏈接。
1.2 精選
「精選」主要按資訊的熱度來設(shè)計，從上至下分為今日賽事、戰(zhàn)報、12小時熱門、24小時熱門和今日推薦五個部分。這個欄目的設(shè)計有利于讓球迷看到過去24小時的熱門新聞，避免因為個性化推送錯過當天重要新聞。
1.3 圈子
「圈子」就像貼吧，用戶可自行加入喜歡的圈子和其他用戶一起交流。懂球帝的圈子非常豐富，有按俱樂部、國家隊和球星分類建立的圈子，也有根據(jù)用戶興趣愛好建立的圈子。從官方數(shù)據(jù)看，足球彩票圈子發(fā)帖數(shù)超過1000萬，一支歐洲明星球隊的圈子發(fā)帖數(shù)均在100萬以上，可以看出用戶活躍度非常高。圈子的設(shè)計，本質(zhì)就是細分用戶，讓有共同愛好的球迷相聚在一起，從而建立用戶關(guān)系，最終提高用戶留存率。
2. 懂球號
懂球帝是一個UGC內(nèi)容模式的球迷社區(qū)，社區(qū)內(nèi)容主要由用戶創(chuàng)作。懂球號分為企業(yè)機構(gòu)和個人自媒體兩種類型，企業(yè)機構(gòu)主要針對國內(nèi)外俱樂部和足球媒體機構(gòu)，個人自媒體主要針對球員教練以及熱愛足球創(chuàng)作的的球迷群體。
懂球號的認證分為兩種，第一種是個人認證標識，黃V，主要針對在業(yè)內(nèi)有一定知名度的記者、球員、KOL和優(yōu)秀創(chuàng)作者；第二種是團體認證標識，藍V，主要針對各大俱樂部、媒體和有公眾影響力的團體。
懂球號作為一個知識創(chuàng)作平臺，創(chuàng)作者通過寫作獲取流量曝光也可以獲得收益，以此形成內(nèi)容創(chuàng)作閉環(huán)，為社區(qū)提供專業(yè)的資訊內(nèi)容。從官方公布數(shù)據(jù)看，目前懂球帝已經(jīng)吸引了眾多知名俱樂部開通了懂球號，包括亞足聯(lián)、歐洲五大聯(lián)賽眾多豪門球隊和中國男女足，可謂星光熠熠，具有很大的號召力。
3. 比賽
「比賽」這個欄目，主要為球迷們提供各大足球聯(lián)賽的比賽預(yù)告和直播。從賽事分類看，懂球帝幾乎包含了世界足壇所有主流和非主流聯(lián)賽，從最熱門的歐洲五大聯(lián)賽到巴甲、阿超、墨超這些南美聯(lián)賽，都有比賽播放源和精準的數(shù)據(jù)。
3.1 直播間
直播間分為直播君、球迷直播間和專家直播間。「直播君」就是官方的直播間，由懂球帝官方負責解說。「球迷直播間」就是球迷們一起聊天看球，這就像在B站看視頻彈幕一樣，非常熱鬧，屬于獨特的懂球帝看球文化。
「專家直播間」加入了很多足彩內(nèi)容，首先完全由懂球帝的足彩專家負責解說比賽，其次在比賽中會向球迷推送自己的競彩方案，用戶需要購買專家錦囊或開通紅單會員才能觀看，對付費用戶的激活有很大幫助。
3.2 數(shù)據(jù)
3.2.1 賽況
「賽況」就是記錄一場比賽的真實數(shù)據(jù)，包含比賽動態(tài)（GIF動圖）、高評分球員、進攻心率圖、技術(shù)統(tǒng)計和完整事件。
3.2.2 陣容
「陣容」記錄了整場比賽運動員的詳細數(shù)據(jù)，包括出場時間、進球數(shù)、射門數(shù)、跑動距離和比賽評分等。
3.3 競彩
3.3.1 情報
「情報」是付費服務(wù)，用戶需要開通小紅單會員（懂球帝足彩會員服務(wù)，售價每月588元）以后才能查看。從內(nèi)容設(shè)計看，非常豐富，包含專家方案、歐亞對比、高斯大小球、會員專享情報、得失球時間分布、必發(fā)冷熱分布和必發(fā)大注傾向等內(nèi)容。這是懂球帝的核心優(yōu)質(zhì)內(nèi)容，通過直播看球的場景，提升用戶開通VIP的激活率。
3.3.2 分析
「分析」內(nèi)容包含猜勝負（球迷競猜數(shù)據(jù)）、大數(shù)據(jù)錦囊（付費服務(wù)）、近期戰(zhàn)績、未來三場、綜合實力（包含近10場戰(zhàn)績、場均進球等）、場面控制（控球率等）、雙方特征（射門進球效率、射門次數(shù)等）、角球、半全場（近10場半場進球數(shù)平均值）和事件統(tǒng)計（犯規(guī)次數(shù)和紅黃牌）。
3.3.3 專家
「專家」主要指懂球帝彩票板塊的足彩專家，這是懂球帝足彩內(nèi)容的核心創(chuàng)作團隊，他們通過對比賽的分析輸出精準的投注方案，用戶需要購買才能查看。
3.3.4 指數(shù)
「指數(shù)」是指歐亞各大博彩公司對當場比賽競彩賠率的數(shù)據(jù)，這個欄目為用戶提供更多全面的投注參考。
4. 數(shù)據(jù)
數(shù)據(jù)分為歐洲足球、亞洲足球、美洲足球、非洲足球、全球足球、籃球和電競7大類，幾乎覆蓋了全球所有足球聯(lián)賽。
①積分主要查看當前聯(lián)賽的積分排行榜，包含勝平負場次和進失球等數(shù)據(jù)。
②球員榜的數(shù)據(jù)非常精細，幾乎可以查詢到一個球員的所有比賽數(shù)據(jù)，從射手榜、助攻榜、關(guān)鍵傳球、射門、越位、傳球再到攔截、成功過人、搶斷和解圍，應(yīng)有盡有。
③球隊榜和球員榜也很相似，顆粒度非常細，從進球數(shù)、控球率到撲救點球數(shù)、領(lǐng)先情況下丟分數(shù)據(jù)都包含了。
④賽程主要提供當前聯(lián)賽的比賽進程，方便球迷查詢。
⑤懂球帝還為球迷提供過往賽季數(shù)據(jù)查詢的功能，甚至可追溯到1986~87賽季的數(shù)據(jù)。這就像一座足球博物館，球迷可以查詢過往賽季各大聯(lián)賽、各支球隊的詳細數(shù)據(jù)，非常方便。如此專業(yè)強大的數(shù)據(jù)服務(wù)，也能提升球迷對產(chǎn)品的滿意度，提高用戶留存率。
4.1 球隊主頁
「球隊主頁」包含球隊當前戰(zhàn)績、動態(tài)、賽程、數(shù)據(jù)、球員、圈子、資料和轉(zhuǎn)會8個內(nèi)容模塊。
①「動態(tài)」就是把球隊的新聞資訊匯總，方便球迷可以看到和俱樂部相關(guān)的所有新聞。
②「賽程」展示球隊當前賽季的比賽記錄，懂球帝還提供了一個歷史賽季查詢的功能，最高可追溯到1920賽季，跨度超過100年。
③「數(shù)據(jù)」主要展示當前賽季球隊的聯(lián)賽數(shù)據(jù)，包括進攻、組織、防守、關(guān)鍵球員等數(shù)據(jù)，懂球帝統(tǒng)計了近10個賽季的球隊數(shù)據(jù)，非常完善。
④「球員」主要展示球隊當前的球員信息，包含出場數(shù)量、進球數(shù)、助攻數(shù)以及合同到期時間。
⑤「圈子」關(guān)聯(lián)了球隊的球迷圈，用戶可以在圈子發(fā)帖，和其他球迷一起交流。
⑥「資料」展示了球隊的歷史資料，數(shù)據(jù)非常豐富，包括歷任主教練、隊史紀錄（進球、出場記錄）、榮譽記錄（聯(lián)賽冠軍、杯賽冠軍等）。
⑦「轉(zhuǎn)會」就是統(tǒng)計球隊的球員轉(zhuǎn)出和轉(zhuǎn)入記錄，包含球員轉(zhuǎn)入轉(zhuǎn)出的去向以及轉(zhuǎn)會費，懂球帝統(tǒng)計了近10個賽季的數(shù)據(jù)轉(zhuǎn)會記錄。
4.2 球員主頁
「球員主頁」就是展示球員的詳細信息，主要包含球員的動態(tài)、數(shù)據(jù)、能力值和資料。
①「數(shù)據(jù)」統(tǒng)計了球員整個職業(yè)生涯在聯(lián)賽、杯賽以及國家隊的數(shù)據(jù)，包括出場時間、進球數(shù)、助攻數(shù)、射門次數(shù)等，非常全面。
②「能力值」就是對當前球員的能力評估，包括速度、射門、力量、防守、傳球和盤帶等；
③「資料」統(tǒng)計了當前球員職業(yè)生涯中的所有榮譽，包括基礎(chǔ)資料、球員身價變化、轉(zhuǎn)會記錄、俱樂部生涯以及個人榮譽。
④「球星卡」是一個競拍交易的版塊，球迷可以出售和當前球星相關(guān)聯(lián)的等物品。
5. 賽事服務(wù)
「賽事服務(wù)」面向的用戶人群主要是擁有舉辦體育比賽活動組織能力的機構(gòu)或球迷團體，但由于賽事規(guī)?；蛸Y金的緣故，無法獲取更高的曝光以及獲取專業(yè)的技術(shù)設(shè)備。懂球帝從技術(shù)、數(shù)據(jù)、直播以及流量四個維度為用戶提供專業(yè)完善的服務(wù)，吸引全國各地的體育愛好者加入懂球帝，實現(xiàn)用戶拉新（已經(jīng)單獨設(shè)計直播君APP運營），提高知名度。目前該服務(wù)官方顯示為免費，滿足條件的用戶都可以免費申請。
5.1 賽事詳情頁
「賽事詳情頁」包含了賽程、積分榜、球隊榜、球員榜和參與球隊等內(nèi)容，有效幫助賽事舉辦方實現(xiàn)精準的數(shù)據(jù)化統(tǒng)計，方便球迷查詢。
6. 公益足球
「懂球帝公益」在2016年開始運營，在2021年升級為「懂球帝足球星火公益計劃」。這個活動的主要目的是為貧困地區(qū)和專項足球小學(xué)的學(xué)生提供愛心足球，在幫助他們快樂健康成長的同時，也擴大了中國足球的青少年基礎(chǔ)。目前APP顯示已向916所學(xué)校捐贈足球14441個，其次公益版塊顯示正在全新升級，暫停捐款。
四、變現(xiàn)服務(wù)
懂球帝在商業(yè)變現(xiàn)的形式設(shè)計上，主要通過體育彩票版塊切入。通過「彩經(jīng)」版塊，招募了眾多足彩KOL組成了懂彩帝專家團，以撰寫比賽分析向用戶銷售競彩情報。用戶不僅可以直接購買，也可以開通懂球帝的小紅單會員和紅單會員，獲得專業(yè)可靠的競彩方案。其次，懂球帝還有球星卡、周邊商城和游戲三個變現(xiàn)業(yè)務(wù)。
1. 彩經(jīng)
「彩經(jīng)」就是體育彩票，作為體育產(chǎn)品最重要的變現(xiàn)服務(wù)之一，懂球帝的彩經(jīng)版塊包含了足球、籃球、電競和數(shù)字彩四種類型。從頁面內(nèi)容結(jié)構(gòu)看，從上至下主要分為熱門專家直播、金剛區(qū)、專家和足彩情報。
1.1 懂彩帝
「懂彩帝」就是懂球帝官方的專家團，包含了足球、籃球和電競的各種競彩專家。競彩專家主要通過對賽事的分析，以撰寫競彩情報向用戶銷售。懂彩帝的專家?guī)旆浅Ｍ晟?，從歐洲主流聯(lián)賽到中超、中甲、美職聯(lián)這些聯(lián)賽，都有不同的專家針對對應(yīng)的聯(lián)賽研究分析。
其次懂彩帝還設(shè)計了三個排行榜，非常有趣，不僅可以吸引粉絲關(guān)注，還能利用攀比心理，倒逼專家寫出更精準的投注方案，分別為命中榜（推薦的方案命中率）、連紅榜（連續(xù)推薦命中的比賽場次）和回報榜（通過購買專家方案獲取的回報排行）。
1.2 專家主頁
「專家主頁」主要包含專家資料、命中率數(shù)據(jù)趨勢圖和在售方案三塊內(nèi)容。用戶可以關(guān)注專家，成為他的粉絲，還可以購買真愛卡（虛擬貨幣）加入專家的粉絲團，成為他的忠實粉絲；其次通過命中率趨勢圖可以查看專家近期的競彩命中趨勢；「在售方案」就是專家最新的競彩方案，用戶可直接購買查看。
2. 球星卡
「球星卡」作為一種實物珍藏品，近兩年在國內(nèi)市場非常火熱，由于其獨有的稀缺性和投資屬性，所以催生了球星卡的拍賣模式。從懂球帝關(guān)于球星卡科普的文章可以看出，一張稀有的球星卡售價可以超過百萬美元，在美國每年的球星卡成交額高達上億美元。
球星卡版塊主要包含每日截標卡推薦、?？ú┪镳^、圈子、數(shù)據(jù)庫和商品等內(nèi)容。球星卡采用拍賣的形式進行銷售，商家設(shè)置競拍底價以后，在截止時間內(nèi)出價最高者勝出。
3. 商城
懂球帝的商城主要包含運動休閑、配件和足球周邊三大類服務(wù)，商城的設(shè)計比較簡單，除了分類，就是商品信息流，用戶可直接加入購物車購買。
4. 游戲中心
游戲是體育產(chǎn)品的最重要的變現(xiàn)方式之一，懂球帝的游戲中心包含了電競、足球、籃球、休閑掛機和魔幻修仙等游戲，以小程序的形式游戲，非常方便。
5. 付費會員
懂球帝的會員主要分為三種類型，分別是小紅單會員、紅單會員和D+會員。
5.1 小紅單會員
小紅單會員售價588元每月，主要針對足彩的用戶，主要權(quán)益包含專家方案解鎖、專家方案公布、每月神券、冷門提前預(yù)警、關(guān)鍵情報推送、高斯大小球模型、必發(fā)冷熱分布、深度數(shù)據(jù)分析、歐亞大盤對比、昵稱紅名、入場廣播、紅單會員標識和會員免廣告13種會員權(quán)益。
5.2 紅單會員
紅單會員售價1998元，主要針對足彩用戶，和小紅單會員特權(quán)相比，增加了專家方案折扣（9折）、免費大數(shù)據(jù)錦囊（每月2次）、會員專屬圈子三個服務(wù)。
5.3 D+會員
D+會員屬于平臺的基礎(chǔ)會員，售價19元每月，可享受免廣告特權(quán)、極致畫質(zhì)、尊貴身份和炫彩名牌4種特權(quán)服務(wù)。
五、設(shè)計總結(jié)
1. 商業(yè)層
從懂球帝的商業(yè)模式看，懂球帝的盈利模式比較單一。除了傳統(tǒng)的線上廣告收入，盈利模式主要圍繞體育彩票設(shè)計，比如懂彩帝專家團以及小紅單和紅單會員等。而體育彩票這塊，由于國家的政策等原因，懂彩帝更像一個知識付費服務(wù)，只是向球迷銷售投注方案。另外體育彩票服務(wù)也容易導(dǎo)致球迷購買了方案去境外網(wǎng)站Du球，觸及國家的紅線區(qū)。對于馬上年滿10周歲的懂球帝來說，對商業(yè)模式的設(shè)計還需要拓展和創(chuàng)新。
2. 內(nèi)容層
懂球帝這個產(chǎn)品，在內(nèi)容設(shè)計方面，其實比較中規(guī)中矩，缺乏創(chuàng)新。作為一個足球媒體，懂球帝欠缺有深度、特色、個性化的內(nèi)容欄目，雖然依靠UGC內(nèi)容模式可以降低大量人力成本，但在內(nèi)容深度的缺失就很難讓懂球帝擁有核心競爭力。其次在整個產(chǎn)品的功能、內(nèi)容以及結(jié)構(gòu)的設(shè)計上，也看不到太多的亮點。比如周邊商城，就只是最簡單直接的商品銷售，而如果你有看過樊登讀書的商城設(shè)計，你就會發(fā)現(xiàn)同是各自行業(yè)的獨角獸，懂球帝的產(chǎn)品設(shè)計創(chuàng)新力就太弱了。
3. 體驗層
體驗層包含產(chǎn)品的交互、視覺以及用戶在使用產(chǎn)品整個過程中的操作體驗。從交互和視覺看，懂球帝的產(chǎn)品設(shè)計不夠精細，比如像「比賽」版塊，無論是內(nèi)容布局，還是字體大小、顏色，在視覺上給人的感覺比較粗糙。還有彩經(jīng)版塊，金剛區(qū)的圖標都是模糊的，整個版塊的設(shè)計顯得雜亂又廉價。其次在產(chǎn)品的使用中，廣告實在太多，而用戶屏蔽廣告的方式除了花錢開通D+會員，只有通過觀看其他廣告獲取免廣告卡才能屏蔽，這樣的設(shè)計，讓人略失所望。
4. 運營層
懂球帝在用戶運營方面的功能設(shè)計得比較淺，整個產(chǎn)品只設(shè)計了一個任務(wù)中心，內(nèi)容也比較常規(guī)，用戶通過簽到或者做任務(wù)可以領(lǐng)取金幣（金幣可以兌換成現(xiàn)金提現(xiàn)，5萬金幣可以兌換5元），其他的功能就再也沒有了。相比脈脈和樊登讀書這些具有豐富用戶福利的產(chǎn)品，懂球帝和站酷很像，其實我也是懂球帝的老用戶（注冊時間超過7年），但迄今為止并沒有看到任何官方粉絲交流群，也無法和平臺建立任何鏈接，甚至在球迷圈，即便我關(guān)注了同是阿森納的球迷朋友，也無法建立更深的鏈接。
參考文獻
易觀千帆 - 懂球帝/虎撲/騰訊體育APP數(shù)據(jù)分析
七麥網(wǎng)-懂球帝迭代記錄
懂球帝官網(wǎng)
2017年中國互聯(lián)網(wǎng)體育服務(wù)行業(yè)研究報告
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
作為全球最火爆的體育賽事，世界杯由于其獨有的稀缺性，被外界譽為四年一次的足球盛宴。根據(jù)國際足聯(lián)主席因凡蒂諾預(yù)測，2022年的卡塔爾世界杯賽事將會吸引到全球超過五十億人觀看，這一人數(shù)占全球總?cè)藬?shù)的比重超過60%。
以往球迷們觀看世界杯，更多是通過電視或者央視頻、優(yōu)酷這種傳統(tǒng)的互聯(lián)網(wǎng)視頻平臺，而在2022年這個冬天，抖音花費10億巨資，成為了國內(nèi)首個獲得世界杯直播版權(quán)的短視頻平臺。作為擁有6億日活的抖音，將會如何跨界設(shè)計世界杯專題，讓億萬球迷能在抖音享受四年一次的足球盛宴，本期設(shè)計大偵探，就來全面拆解抖音世界杯專題。
一、欄目入口
抖音世界杯的入口在抖音頭部一級導(dǎo)航欄最左邊，和周邊、關(guān)注、商城以及推薦并列。世界杯的欄目首頁從上至下主要分為5個部分，分別是輪播（當日熱門賽事以及活動）、金剛區(qū)（包含賽程、積分榜、有獎預(yù)測和我的主隊入口）、比賽直播（當日賽事）、名嘴聊球（簽約足球大咖）、賽事熱點（熱點頭條資訊）、熱門球星（入駐足球巨星）、世界杯好物（周邊商城和抖音生活服務(wù)）、重磅熱播（抖音自制節(jié)目）、大家都在拍（平臺用戶自創(chuàng)視頻）和視頻信息流（世界杯專題相關(guān)視頻）。
二、內(nèi)容策劃
抖音在內(nèi)容策劃方面，幾乎把前央視解說團隊都邀請過來了，比如黃健翔、段暄、劉建宏這些家喻戶曉的的足球主持人，都在抖音單獨負責至少一款足球綜藝欄目。除了解說團隊，抖音還邀請了眾多跨界娛樂綜藝大咖，為球迷一口氣送上8個原創(chuàng)足球綜藝節(jié)目。從這個版塊可以看出，抖音對此次世界杯的重視度之高，就像卡塔爾為了舉辦世界杯投資2200億美元一樣，劣勢可以用金錢彌補。
1. 內(nèi)容專題
1.1 觀賽指南
「觀賽指南」是指在一場比賽開打之前，各方媒體對這場比賽進行的賽事分析和預(yù)測。足球這項運動，由于充滿了競技性，一場焦點比賽，從賽前到比賽，再到比賽后，都充滿了無數(shù)話題。而觀賽指南，可以為球迷提供完整的比賽情報和指南，為比賽做預(yù)熱。
1.1.1 分組解析
「分組解析」是針對世界杯的8個小組（世界杯有32支參賽球隊，分為8個小組，每個小組4支球隊，前兩名可以晉級到淘汰賽）進行出線形勢分析。作為四年舉辦一次的比賽，對于每支球隊來說，都是非常寶貴的機會，所以關(guān)于小組的出線分析也往往是世界杯的熱門話題之一。從內(nèi)容設(shè)計看，抖音的分組解析包含了專家預(yù)測（名嘴大咖）、小組賽程、歷史數(shù)據(jù)（歷史對戰(zhàn)記錄）、熱門球員（小組熱門球星）和熱門動態(tài)（相關(guān)的足球資訊）五個內(nèi)容。
1.1.2 賽程解讀
「賽程解讀」就是針對單場比賽進行解讀，包含比賽前瞻（專業(yè)的足球分析）、專家點評（世界杯專家團，含金量高）、網(wǎng)友熱議（精選網(wǎng)友的高質(zhì)量分析）、近5場戰(zhàn)績、球隊名單、球員PK（核心球員）、積分榜以及相關(guān)的最新足球資訊。從這個欄目的內(nèi)容策劃看，由于缺少足彩競彩和有深度的內(nèi)容，顯得中規(guī)中矩，稍顯嚴謹，欠缺互動。
1.2 比賽日報
「比賽日報」就是根據(jù)每天結(jié)束的比賽生成當天所有比賽的戰(zhàn)報，這個頁面包含了直播回放、圖文戰(zhàn)報、視頻集錦、賽況詳情、技術(shù)統(tǒng)計和積分榜等內(nèi)容，球迷也可以切換不同的比賽查看當場比賽詳細的戰(zhàn)報。
1.2.1 直播回放
「直播回放」對于體育賽事來說非常重要，比如像深夜場的比賽，大部分球迷都很難熬夜觀看，這個時候只能通過直播回放來觀看比賽。抖音的「直播回放」提供了全場錄播回放、全場集錦（分長集錦和短集錦）、球星集錦和精彩時刻集錦，可以滿足不同用戶的觀看需求。
1.3 熱議話題
當一場比賽結(jié)束以后，話題討論的熱度將會達到最高值，比如阿根廷輸給沙特的比賽，全網(wǎng)球迷都在心疼梅西。抖音在「熱議話題」的內(nèi)容設(shè)計上，不僅有獨立的圖文專題頁還有白巖松的「白說世界杯」短視頻欄目，給球迷帶來全方位的內(nèi)容解讀。
2. 視頻節(jié)目
2.1 DOU來世界杯
「DOU來世界杯」是抖音官方自制的視頻節(jié)目，這個節(jié)目合計29期，每天更新1期，內(nèi)容非常豐富，包含比賽復(fù)盤、每日看點、球星球隊故事和賽事預(yù)測等。從欄目定位看，這個欄目直接對標曾經(jīng)央視體育最知名的《天下足球》欄目，更是邀請了主持多年《天下足球》的主持人段暄親自負責，這不僅可以確保內(nèi)容質(zhì)量，還可以幫助抖音贏取眾多80、90后球迷的好感（國內(nèi)80%的80、90后球迷都是看著《天下足球》長大的），既賣專業(yè)，也賣情懷，一舉兩得。
2.2 宏哥侃球
「宏哥侃球」是資深體育解說員劉建宏獨家打造的足球直播綜藝，合計12期。劉建宏和段暄一樣，是央視體育另一個王牌節(jié)目《足球之夜》的制片人和主持人，甚至是第一位獲得“金話筒獎”的體育節(jié)目主持人。從內(nèi)容定位看，這個欄目主要以劉建宏通過邀約足球名宿和名人明星聊天的形式，為球迷帶來不同角度的比賽解讀和話題討論。從嘉賓陣容看，不僅邀請了李明、徐亮、徐云龍這些足球大咖，還邀請了蘇醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可謂群星熠熠。
2.3 黃健翔談
「黃健翔談」是前央視主持人黃健翔的個人脫口秀節(jié)目，合計24期。從內(nèi)容定位看，這個欄目主要是黃健翔針對每日比賽進行看點分析，講述隊伍、球員之間的淵源與故事，專業(yè)性較強，差異化低。
2.4 依然范志毅
「依然范志毅」是前國足名宿范志毅打造的直播節(jié)目。從內(nèi)容定位看，這個欄目集合了脫口秀、電競PK、國際球星挑戰(zhàn)等娛樂內(nèi)容，其次還會邀請02年世界杯國足的眾多足球大咖一起聊球。范志毅作為前國足名宿，不僅知名度高，近年來在社交媒體平臺也以獨特的“范式辣評”成為了眾多網(wǎng)友崇拜的偶像，話題熱度非常高。
2.5 懂球大會
「懂球大會」是以段暄、黃健翔和劉建宏為常駐嘉賓，搭配各路懂球大咖賽前或賽后連線的足球直播節(jié)目。從內(nèi)容定位看，這個節(jié)目主打前央視解說鐵三角的賣點，再邀請其他足球嘉賓圍繞每期的熱門話題以直播火熱開“吵”的形式為球迷們打造一款直播時代的另類足球節(jié)目。
2.6 黃家足球班
「黃家足球班」 是黃健翔聯(lián)手德云社打造的直播節(jié)目，合計12期。從內(nèi)容定位看，這個節(jié)目把足球的專業(yè)性稀釋，加入了相聲的元素，從而拓寬用戶人群，讓大眾都能看得懂，看得進去，感受到足球的樂趣。
2.7 大咖侃球
「大咖侃球」由抖音官方出品。從內(nèi)容定位看，這個節(jié)目主要以邀請體育、文化、財經(jīng)、商業(yè)等領(lǐng)域的名人大咖，圍繞世界杯開展泛人文社會熱點話題討的論，旨在打造一個專業(yè)又具有趣味性、互動性的世界杯抖音脫口秀。不過這個節(jié)目話題寬度太廣，目標用戶不精準。
2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方贊助商海信獨家打造的一款足球少年選秀節(jié)目，通過節(jié)目選拔足球熱忱最突出的4名少年奔赴卡塔爾。這個節(jié)目邀請了李明、米盧等國足退役名將，還有柳巖、梁漢文這些娛樂明星，從嘉賓陣容看，這個節(jié)目以娛樂選秀為主，目前8期節(jié)目已全部更新結(jié)束。
三、比賽數(shù)據(jù)
歷時29天的世界杯，將會進行64場比賽，最終決出冠軍、MVP和金靴獎等。隨著互聯(lián)網(wǎng)泛娛樂的發(fā)展，相比過往大家主要通過電視觀看比賽這樣靜態(tài)的形式，現(xiàn)在的足球比賽不僅擁有豐富的直播形式，而且每個平臺都有自己獨特的看球文化。
1. 直播間
抖音的比賽直播間，功能非常豐富，主要包含六個內(nèi)容，分別是直播、聊天、陣容、賽況、看點和預(yù)測。
①「直播」就像視頻彈幕一樣，大家可以暢所欲言的一邊看球一邊聊天。在底部的聊天窗口，點擊「分享」后，不僅可以保存本場比賽即時生成的精彩瞬間，還能邀請好友一起觀看比賽直播，互動非常強。
②「聊天」這個功能，充分利用了抖音的社交屬性，通過邀請好有，可以像建立群組一樣快速創(chuàng)建一個直播聊天群，非常便捷。這個功能就像一個VIP包廂，為用戶提供了一個相對私密的空間，滿足不同用戶的需求。
③「陣容」是指當場比賽的出場人員統(tǒng)計，包含首發(fā)陣容、球員統(tǒng)計和替補球員等信息，點擊球員頭像以后，可查看球員當場比賽的數(shù)據(jù)，包含進球、射門、傳球成功率等，非常全面。
④「賽況」是指當場比賽的詳細戰(zhàn)況，包含各種技術(shù)統(tǒng)計，比如控球率、射門數(shù)、傳球成功率等。
⑤「看點」就是把一場比賽的精彩時刻快速生成GIF，不僅可以作為當場比賽的賽況回放，也降低了用戶傳播的行動成本，吸引用戶分享傳播。
⑥「預(yù)測」就是競彩，球迷可以通過金幣預(yù)測當場比賽的勝平負、兩隊總進球數(shù)以及其他話題。
1.1 播放器
「播放器」的功能非常豐富，除了彈幕、倍速、視頻畫質(zhì)和電視投屏這樣的常見功能，抖音還支持多種類型的解說和視角方式。比如同一場比賽可以切換不同的主持人（央視主持人、退役運動員還有粵語主持），還支持球星、無障礙字幕、現(xiàn)場原聲、戰(zhàn)術(shù)機位、場館全景等四種視角方式，觀看體驗非常豐富。
2. 數(shù)據(jù)
作為一項體育運動，比賽數(shù)據(jù)的統(tǒng)計分析至關(guān)重要。球迷需要查詢世界杯的詳細賽程、積分榜、射手榜、球隊和球員的詳細數(shù)據(jù)。
2.1 賽程
「賽程」主要為球迷提供世界杯的詳細比賽賽程，用戶可以直接預(yù)約比賽直播。當球迷預(yù)約后，抖音會一鍵生成比賽海報吸引用戶傳播，設(shè)計得非常巧妙。其次抖音的設(shè)計團隊非常用心，相比其他產(chǎn)品的「賽程」欄目，他們會用一句簡短的話來描述每場比賽的結(jié)果或前瞻，讓「賽程」這個冰冷的欄目加入了溫度。
2.2 積分榜
「積分榜」主要為球迷們提供8個小組的積分排行詳細，包含勝平負場次、進失球數(shù)和小組積分。
2.3 晉級圖
「晉級圖」主要為淘汰賽服務(wù)，當小組賽結(jié)束以后，每個小組的前兩名會進入淘汰賽，球迷可以通過這個圖俯瞰世界杯的晉級明細路徑。
2.4 射手榜
「射手榜」主要針對球員個人，統(tǒng)計的數(shù)據(jù)非常全面，包含進球、助攻、射正、關(guān)鍵傳球、紅牌、黃牌等數(shù)據(jù)。
2.4.1 球員主頁
「球員主頁」就是足球運動員的詳情落地頁，主要包含六個部分，分別是基礎(chǔ)資料（姓名、年齡、身高、體重、位置、身價、效力俱樂部等）、精彩集錦、球員單場表現(xiàn)、球員累計數(shù)據(jù)、球員賽程和球員百科。
2.5 球隊榜
「球隊榜」和「射手榜」一樣，包含進球、助攻、射正、關(guān)鍵傳球、紅牌、黃牌等數(shù)據(jù)。
2.5.1 球隊主頁
「球隊主頁」就是參賽球隊的詳情落地頁，主要包含六個部分，分別是基礎(chǔ)資料（世界排名、總身價、平均年齡、歷屆最佳成績等）、精彩集錦、球隊單場表現(xiàn)、球隊累計數(shù)據(jù)、球隊賽程、熱門球星、球隊陣容、歷史數(shù)據(jù)和球隊百科。
3、互動
從2014年開始，世界杯就成了一個全民狂歡的盛宴，可謂全民參與，全民娛樂。由于受政策限制，抖音沒有足彩版塊，而是通過虛擬金幣的形式設(shè)計了有獎預(yù)測和世界杯樂園、足球答人等游戲。其次為了鼓勵用戶參與到世界杯的盛宴中，抖音還設(shè)計了一套世界杯特效，提升用戶的參與度。
3.1 有獎預(yù)測
「有獎預(yù)測」其實就是足球競彩。足球競彩作為支撐足球運動發(fā)展的重要支柱，也是全民世界杯的主要動力之一。由于國家政策等原因，抖音使用了虛擬的金球幣用來作為競彩的籌碼，增加娛樂性。
①「有獎預(yù)測」的頁面設(shè)計比較簡單，頭部為用戶的錢包（金幣和紅包數(shù)量），主視覺為當前比賽的對陣雙方，右上角是活動規(guī)則和預(yù)測記錄，右下角是賺金錢幣和預(yù)測榜。預(yù)測的內(nèi)容主要是比賽的勝平負、總進球數(shù)以及其他根據(jù)當前比賽設(shè)計的競彩內(nèi)容，比如梅西會不會進球，比賽會不會出現(xiàn)頭球等。
②整個預(yù)測頁面的內(nèi)容，相對而言比較簡單，主要以提升用戶參與度和用戶拉新為目的。當用戶確認預(yù)測后，抖音設(shè)計了一個用戶拉新的功能，只要邀請好友助力就可以獲得10萬金幣，如果是一個新用戶，則可以獲得3倍獎勵。
3.1.1 錢包
「錢包」的內(nèi)容主要分為三塊，頭部是數(shù)據(jù)板，包含金球幣數(shù)量、現(xiàn)金金額（金球幣可以兌換成現(xiàn)金，提現(xiàn)到自己的銀行卡）、獎品數(shù)量、優(yōu)惠券數(shù)量和抖音成就（類似勛章）；中間是「金球幣抽獎」，用戶可以使用金球幣進行抽獎，獎品包含足球、優(yōu)惠券等周邊商品；底部是「公益版塊」，用戶可以使用金球幣購買足球等方式助力貧困地區(qū)的鄉(xiāng)村學(xué)校捐建足球場。
3.1.2 預(yù)測榜
抖音統(tǒng)計了全站預(yù)測榜的球迷，分為全國榜、本地榜和朋友榜。榜單的設(shè)計，能增加球迷的攀比心理，提升用戶活躍度。
3.1.3 金幣游戲
3.1.3.1 世界杯樂園
「世界杯樂園」是一款足球游戲，玩法比較簡單，用戶通過體力可以讓角色不斷前進獲取福利。而用戶獲取體力的方式需要做任務(wù)、看比賽以及邀請好友。
3.1.3.2 足球答人
「足球答人」是一款問答競技類型足球游戲。這款游戲設(shè)計得非常有創(chuàng)意，三人隨機組隊，通過答題的形式模擬足球比賽在線PK。第一個回答正確的用戶會有模擬進球的畫面，吸引球迷搶答，其次模擬世界杯的賽制，勝利后可以晉級下一輪，最終決出冠軍，非常有趣。
3.2 我的主隊
每個球迷都有自己喜歡的球隊，這支球隊就稱為「主隊」，比如一個喜歡阿根廷的球迷就會把阿根廷看作自己的主隊。這種帶有鮮明愛恨的元素，也是足球這項運動的魅力之一。用戶進入「我的主隊」以后，需要設(shè)置自己的主隊，選定后，將會展示主隊的賽況、比賽數(shù)據(jù)和視頻集錦。用戶如果更換主隊，還需要消耗金幣，可見抖音產(chǎn)品團隊對球迷的研究足夠透徹。通過建立「主隊」，不僅可以增加用戶的黏度，還能建立關(guān)系鏈接，提升用戶的留存率。
3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷銷售世界杯相關(guān)的周邊商品，比如世界杯吉祥物、鑰匙扣、手辦、紀念品等物品。
3.3.2 吃喝玩樂
世界杯獨有的文化就是喝著啤酒看比賽，所以「吃喝玩樂」這個版塊接入了抖音的「生活服務(wù)」，球迷可以在抖音購買夜宵、小吃、奶茶等，非常方便。
3.4 大家都在拍
為了鼓勵用戶參與到世界杯的狂歡中，抖音為世界杯專門設(shè)計了一套視頻特效，用戶可以選擇喜歡的特效錄制，提升用戶參與度。
四、總結(jié)思考
1.商業(yè)層
作為一個短視頻平臺，抖音為什么舍得花費巨資打造世界杯欄目，通過此次對抖音世界杯專題的拆解，我認為這是一次對針對80、90后群體的二次拉新和激活。從抖音重金邀請前央視主持人陣容看，抖音正在嘗試通過世界杯這樣能激發(fā)球迷情懷的載體把那些邊緣用戶重新拉回來?！窪OU來世界杯」不僅直接對標央視體育曾經(jīng)最知名的《天下足球》欄目，甚至連主持人都不變，既賣內(nèi)容，更賣情懷。像筆者這樣以前每周只會打開幾次抖音的用戶，通過此次世界杯的直播，變成了日均使用超過6個小時的重度用戶，這在以前簡直不敢想象。
當然，和四年前的優(yōu)酷等互聯(lián)網(wǎng)視頻平臺面臨的情況一樣，當世界杯硝煙散完以后，抖音又如何通過高質(zhì)量的內(nèi)容留住這部分用戶群體，是一個問題。
2. 內(nèi)容層
在過去，多數(shù)用戶對抖音的印象是一個內(nèi)容質(zhì)量低劣、靠娛樂搞笑博眼球的短視頻平臺，但從此次世界杯的內(nèi)容策劃看，抖音不僅誠意十足，一口氣推出8檔原創(chuàng)足球直播節(jié)目，更是邀請了眾多體育名嘴、知名運動員和跨界嘉賓輸出高質(zhì)量的內(nèi)容。這對廣大球迷來說，實在太過癮了，已經(jīng)很久沒有這樣的足球盛宴。而且相比過去傳統(tǒng)的圖文時代，加入了短視頻傳播媒介的世界杯，給了億萬球迷全新的看球體驗，切換不同的解說風格、直播視角，在抖音直播間邀上幾個好友，就可以一邊聊天，一邊看球，這樣的看球體驗，太爽了。
3. 體驗層
抖音產(chǎn)品設(shè)計團隊對世界杯專題的設(shè)計，無論是視覺、交互還是產(chǎn)品體驗，都非常用心。比如在「賽程」頁面，通過一句簡短的賽況描述，不僅豐富了設(shè)計形式，還傳遞了設(shè)計的溫度（其他的體育產(chǎn)品相比，「賽程」頁面更像一個冰冷的機器，除了播報數(shù)據(jù)，沒有任何情感）。還有像「足球答人」這樣的游戲，完全以模擬世界杯晉級賽制的形式設(shè)計，在我首次試玩的時候，就開始為了“進球”進行“搶答”，最終拿下比賽冠軍。這樣讓用戶尖叫的設(shè)計，真的讓人愛不釋手。
參考文獻：
當抖音進軍世界杯，TikTok挖了NBA墻角
終于，我們都能在抖音看世界杯直播了
“抖”來世界杯：流量盛筵，意義幾何？
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
從事互聯(lián)網(wǎng)醫(yī)療行業(yè)的年頭也不短了，做過慢病的健康管理產(chǎn)品，負責過互聯(lián)網(wǎng)醫(yī)院整條產(chǎn)品線的建設(shè)，也參與過AI健康檢測硬件產(chǎn)品的設(shè)計。
行業(yè)中互聯(lián)網(wǎng)醫(yī)療行業(yè)中一些公司在對外的宣傳中也衍生出了數(shù)字醫(yī)療、數(shù)智醫(yī)療等新名詞，無論是服務(wù)于醫(yī)生、還是醫(yī)院或者是藥企或者是保險，最終落地或者說繞不開的都是C端患者。那么，如今市面上互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成成分都有哪些呢？
在談互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成前，我們先用一小段介紹下人體有哪些重要組成部分：
“臟”是指實心有機構(gòu)的臟器，“腑”是指空心的容器。
人體五臟包含：心臟、肝臟、脾臟、肺臟、腎臟。
人體六腑包含：小腸、膽囊、胃、大腸、膀胱等分別和五個臟相對應(yīng)的五個腑，另外人體的胸腔和腹腔分為上焦、中焦、下焦，統(tǒng)稱為三焦，是第六個腑。
五臟和六腑的關(guān)系：臟與腑是表里互相配合的，一臟配一腑，臟屬陰為里，腑屬陽為表。臟腑的表里是由經(jīng)絡(luò)來聯(lián)系，即臟的經(jīng)脈絡(luò)于腑，腑的經(jīng)脈絡(luò)于臟，彼此經(jīng)氣相通，互相作用，因此臟與腑在病變上能夠互相影響，互相傳變。
人體各個器官按照一定的順序排列在一起，完成一項或多項生理活動的結(jié)構(gòu)叫系統(tǒng)。
人體的八大系統(tǒng)：消化系統(tǒng)、呼吸系統(tǒng)、循環(huán)系統(tǒng)、泌尿系統(tǒng)、運動系統(tǒng)、生殖系統(tǒng)、內(nèi)分泌系統(tǒng)和神經(jīng)系統(tǒng)。
八大系統(tǒng)在神經(jīng)和內(nèi)分泌系統(tǒng)調(diào)節(jié)下，互相聯(lián)系、互相制約，共同完成整個人體的全部生命活動，以保證人體生存和種族綿延。
看到這也許大家會納悶，文章標題是“互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成和優(yōu)勢的建立”，PM大白怎么在開篇講起人體的五臟六腑和八大系統(tǒng)呢，因為PM大白認為產(chǎn)品同樣也是一個生命體，產(chǎn)品的0-1即是產(chǎn)品的出生、產(chǎn)品的迭代即是產(chǎn)品的成長、產(chǎn)品的矩陣即是種族的綿延，那么產(chǎn)品作為一個生命體，并且是互聯(lián)網(wǎng)醫(yī)療產(chǎn)品，那么她同樣存在著類似五臟六腑八大系統(tǒng)的組織，只是組織的名稱不一樣，大家不這樣稱呼而已。
不多說了，下文進入正題，看看互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品的組成成分有哪些：
上文中提到了人體的五臟六腑：“臟”是指實心有機構(gòu)的臟器，屬陰；“腑”是指空心的容器，屬陽。
那互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品中（下文中簡稱為“產(chǎn)品”）的五臟六腑PM大白如何定義呢？
上文中選擇互聯(lián)網(wǎng)醫(yī)療C端產(chǎn)品中的幾個重要模塊定義為其“五臟六腑”，那互聯(lián)網(wǎng)醫(yī)院C端產(chǎn)品中將這“五臟六腑”串聯(lián)起來的八大系統(tǒng)又有哪些呢？其實本質(zhì)是各個維度中的供需關(guān)系的維護。
上文我們介紹了互聯(lián)網(wǎng)醫(yī)療產(chǎn)品的核心組成模塊，但是好像現(xiàn)在互聯(lián)網(wǎng)醫(yī)療行業(yè)并沒有迎來爆發(fā)期或者說沒有得到大范圍的應(yīng)用和產(chǎn)生價值，那又是為何呢？
之前我在生物實驗室工作，那個時候社會上就說生物行業(yè)是朝陽產(chǎn)業(yè)，未來可期；后來我轉(zhuǎn)行到了互聯(lián)網(wǎng)醫(yī)療行業(yè)，身邊的朋友又說，互聯(lián)網(wǎng)醫(yī)療可是互聯(lián)網(wǎng)垂直行業(yè)中的朝陽行業(yè)，可是互聯(lián)網(wǎng)醫(yī)療這個朝陽一直在海平面附近起起落落，一直沒有升起來，更不用說什么日到中天的趨勢，反而是不溫不火。
更有甚者，同行們開始懷疑互聯(lián)網(wǎng)醫(yī)療的價值到底在何處，難道互聯(lián)網(wǎng)醫(yī)療就是賣藥賣保險賣醫(yī)療周邊延伸服務(wù)的工具嗎？個人沒有懷疑過互聯(lián)網(wǎng)醫(yī)療價值，至少從沒有懷疑過這個行業(yè)的未來價值的，只是限于當前的用戶就醫(yī)習(xí)慣、政策法規(guī)、相關(guān)技術(shù)以及醫(yī)療體系，醫(yī)療是一個嚴肅的產(chǎn)業(yè)，必須循序漸進與互聯(lián)網(wǎng)、AI等新技術(shù)結(jié)合，這才是負責任的醫(yī)療行業(yè)從業(yè)者該有的態(tài)度，因為醫(yī)療健康事關(guān)生死。
如何在現(xiàn)在的這個行業(yè)處境下默默地建立起自己的優(yōu)勢才是正道，那么互聯(lián)網(wǎng)醫(yī)療產(chǎn)品的優(yōu)勢在何處建立呢？其實有兩個方向：資源和技術(shù)（也許對從事互聯(lián)網(wǎng)醫(yī)療行業(yè)的大家來說，這就是大白話）。
資源型優(yōu)勢：通過不斷地積累醫(yī)療業(yè)務(wù)相關(guān)的核心資源建立優(yōu)勢。
1）數(shù)據(jù)優(yōu)勢
定義：這里提到的“數(shù)據(jù)”僅指患者在所有醫(yī)療、健康活動中產(chǎn)生的用于組成患者健康檔案的數(shù)據(jù)。
來源：線下醫(yī)院（核心）、線上問診、用藥記錄、醫(yī)保數(shù)據(jù)、健康險數(shù)據(jù)、移動設(shè)備檢測數(shù)據(jù)……
政策：近期國家相關(guān)部門出臺了《“十四五”全民健康信息化規(guī)劃》正是一個信號，出于患者個人醫(yī)療健康數(shù)據(jù)的重要性、復(fù)雜性、安全性、隱私性，也只有國家力量才有這種能力去實現(xiàn)；以下是從《“十四五”全民健康信息化規(guī)劃》摘錄的部分信息 ：
堅持統(tǒng)籌集約，共建共享。堅持統(tǒng)籌布局，深化共建共用，增強全民健康信息化發(fā)展的系統(tǒng)性、整體性和協(xié)調(diào)性，以構(gòu)建大平臺、大系統(tǒng)、大目錄為導(dǎo)向，加大信息化建設(shè)統(tǒng)籌力度，加強信息化基礎(chǔ)設(shè)施集約化建設(shè)，鞏固政務(wù)信息系統(tǒng)整合成果，進一步破除數(shù)據(jù)共享壁壘，暢通數(shù)據(jù)共享通道，推進數(shù)據(jù)全生命周期管理。
到2025年，初步建設(shè)形成統(tǒng)一權(quán)威、互聯(lián)互通的全民健康信息平臺支撐保障體系，基本實現(xiàn)公立醫(yī)療衛(wèi)生機構(gòu)與全民健康信息平臺聯(lián)通全覆蓋。
數(shù)字健康服務(wù)成為醫(yī)療衛(wèi)生服務(wù)體系的重要組成部分，每個居民擁有一份動態(tài)管理的電子健康檔案和一個功能完備的電子健康碼，推動每個家庭實現(xiàn)家庭醫(yī)生簽約服務(wù)，建成若干區(qū)域健康醫(yī)療大數(shù)據(jù)中心與“互聯(lián)網(wǎng)+醫(yī)療健康”示范省，基本形成衛(wèi)生健康行業(yè)機構(gòu)數(shù)字化、資源網(wǎng)絡(luò)化、服務(wù)智能化、監(jiān)管一體化的全民健康信息服務(wù)體系。
目的：打通各個醫(yī)療數(shù)據(jù)孤島，構(gòu)建患者全生命周期的健康檔案、屬于整個現(xiàn)代醫(yī)療體系的底層基礎(chǔ)建設(shè)，服務(wù)于上層所有與醫(yī)療相關(guān)的應(yīng)用服務(wù)，對線上互聯(lián)網(wǎng)醫(yī)療尤為重要；
最終在健康數(shù)據(jù)這塊的發(fā)展趨勢，應(yīng)該是國家完成居民全生命周期的健康檔案的統(tǒng)籌和建設(shè)，制定授權(quán)標準，然后通過授權(quán)的方式提供給具備相關(guān)資質(zhì)的互聯(lián)網(wǎng)醫(yī)療企業(yè)在其產(chǎn)品中進行調(diào)用。
我們選取了騰訊醫(yī)療官網(wǎng)以及騰訊醫(yī)療面向C端用戶的一款產(chǎn)品：騰訊健康（小程序），看看對方在數(shù)據(jù)建設(shè)方面的的產(chǎn)品。
①騰訊官網(wǎng)
產(chǎn)品服務(wù)對象劃分為了兩類：醫(yī)療機構(gòu)與患者、區(qū)域醫(yī)療。
面向不同的服務(wù)對象，騰訊提供了不同的解決方案；面向醫(yī)療機構(gòu)與患者，解決方案有：
前兩種方案的實現(xiàn)必然需要與醫(yī)保系統(tǒng)和醫(yī)院his系統(tǒng)的對接，則涉及醫(yī)保數(shù)據(jù)和his數(shù)據(jù)的互通；后兩種方案則涉及到疾病和藥品數(shù)據(jù)知識庫的建設(shè)。面向區(qū)域醫(yī)療，解決方案是：微信電子健康卡開放平臺、全名健康信息平臺、區(qū)域智慧醫(yī)療平臺、區(qū)域大數(shù)據(jù)云，這類方案完全符合了《“十四五”全民健康信息化規(guī)劃》的目標。
②騰訊健康小程序
進入首頁是不是發(fā)現(xiàn)與其他互聯(lián)網(wǎng)醫(yī)療APP呈現(xiàn)的內(nèi)容有所不同呢，騰訊健康既沒有直接呈現(xiàn)大量的醫(yī)生和科室，也沒有直接呈現(xiàn)各種醫(yī)療服務(wù)包，金剛區(qū)顯示的是“醫(yī)保電子憑證”和“防疫健康碼”，首頁還還在功能區(qū)顯示了“我的醫(yī)?！比肟?，以及在服務(wù)推薦區(qū)1號位顯示“本地醫(yī)保碼”領(lǐng)取和查看入口。
2）知識優(yōu)勢
定義：這里提到的知識主要指與健康管理，疾病治療相關(guān)的醫(yī)學(xué)知識。
來源：醫(yī)生、醫(yī)院、協(xié)會、醫(yī)學(xué)百科以及權(quán)威醫(yī)學(xué)書籍。
形式：直播、短視頻、音頻、圖文。
目的：培養(yǎng)患者的健康習(xí)慣、提供患者自我健康管理的科學(xué)方法、提高患者對疾病各方面的認知以及自我治療和線下就醫(yī)的各種渠道和流程信息，對產(chǎn)品來講是前期的流量入口。
我們選取百度健康官網(wǎng)和騰訊醫(yī)典APP，看看同行在醫(yī)療健康知識這方面的重視程度和所做的努力：
我們可以看到百度健康的PC端官網(wǎng)沒有一個醫(yī)生，沒有任何線上問診等其他醫(yī)療服務(wù)入口，展示的是不同形式的疾病知識，其中包含短視頻、直播、圖文等形式，其實百度健康是用它的“醫(yī)典”模塊作為的PC端官網(wǎng)，如果不是百度健康搞錯了，那就足以看出百度健康認為健康知識這塊的重要程度；還有就是騰訊很早就做出了一款定位醫(yī)學(xué)科普知識的產(chǎn)品——騰訊醫(yī)典。
3）服務(wù)優(yōu)勢
定義：這里提到的服務(wù)主要指線上的問診、開藥、健康管理、掛號、等需要醫(yī)生或其他專業(yè)醫(yī)療健康從業(yè)者或醫(yī)療機構(gòu)參與的業(yè)務(wù)。
來源：醫(yī)療機構(gòu)、專家、醫(yī)生、藥師、健康管理師、營養(yǎng)師等。
目的：醫(yī)療健康服務(wù)是最直觀的能讓患者感受到當前產(chǎn)品所具備醫(yī)療健康價值的模塊，也是能幫助患者解決實際需求的重要模塊，對定位于互聯(lián)網(wǎng)醫(yī)療的產(chǎn)品長期發(fā)展來講，醫(yī)療健康服務(wù)必定是后期的主要盈利入口，互聯(lián)網(wǎng)醫(yī)療也必然會像現(xiàn)在的線下醫(yī)療體系改革一樣擺脫以藥養(yǎng)醫(yī)的依賴。在所有的互聯(lián)網(wǎng)醫(yī)療產(chǎn)品中，好大夫便是聚焦服務(wù)和堅持線上醫(yī)療服務(wù)為主要方向的一款產(chǎn)品。
4）商品優(yōu)勢
定義：這里提到的商品主要指藥品、健康險、保健品等與醫(yī)療健康相關(guān)，由醫(yī)療服務(wù)延伸出的需要付費交易的實物產(chǎn)品。
來源：藥企、健康險公司、移動健康設(shè)備等。
目的：在患者對線上醫(yī)療健康服務(wù)付費接受度還沒有那么高時，采取的一種盈利生存手段；如果一家互聯(lián)網(wǎng)醫(yī)療公司是靠藥品、保險或其他非服務(wù)產(chǎn)品維持發(fā)展和成長的話，醫(yī)療服務(wù)型產(chǎn)品只是為這些盈利手段服務(wù)的話，也許會是一個成功的生意，但是個人寧愿將這類公司直接稱之為醫(yī)藥電商公司、醫(yī)療設(shè)備提供商，而不是今天全篇講的互聯(lián)網(wǎng)醫(yī)療公司（或產(chǎn)品）；目前在京東健康上的藥品收入與醫(yī)療服務(wù)收入占比接近7:1。
技術(shù)型優(yōu)勢：通過發(fā)明或優(yōu)化新的技術(shù)讓線上的互聯(lián)網(wǎng)醫(yī)療服務(wù)流程發(fā)生革命性的變化，并且獲得醫(yī)生、患者以及醫(yī)療權(quán)威機構(gòu)或政府相關(guān)單位的認可。
1）檢測技術(shù)
大家去線下就醫(yī)見到醫(yī)生后的第一件事是做什么？是各種抽血化驗等檢查，檢查前的醫(yī)生問診只是為了縮小檢查范圍。
我們必須接受的一個現(xiàn)實就是：如今沒有設(shè)備檢查，沒有具體定量的檢查指標，醫(yī)生可能都不會下診斷，這也不能怪醫(yī)院或醫(yī)生，西醫(yī)就是這個流程：檢查-診斷-給藥或手術(shù)，而這個流程中哪些是可以在線上真正解決的呢？我想應(yīng)該只有“給藥”了，這也是目前大多數(shù)互聯(lián)網(wǎng)醫(yī)療公司以藥品為突破口的原因之一。
說到第一步：檢查，互聯(lián)網(wǎng)醫(yī)療是無法在線上做到醫(yī)院要求的各種指標檢查的，所以最終線上問診，醫(yī)生給出的結(jié)果多是“可能”、“建議線下就診”等結(jié)論，同時也是現(xiàn)在線下問診開藥不支持首診的原因，因為在沒有線下確診的情況下開具處方藥是有很大風險的。
SO如果患者不用去醫(yī)院就能完成醫(yī)院要求的部分疾病確診的核心指標的檢測，理想情況下那是不是互聯(lián)網(wǎng)醫(yī)療就可以實現(xiàn)部分疾病的檢查-診斷-給藥的流程了，特別是常見的慢性病或者季節(jié)性疾病。
這就依賴于便攜式家庭健康檢測技術(shù)和設(shè)備的發(fā)展了，例如：血管納米機器人，全體24小時記錄生物體的各種生理指標。
2）溝通技術(shù)
患者另一個不愿意接受線下問診治療，或不相信在不去醫(yī)院的情況下，就可以給出一個滿意的健康問題的解決方案的原因是——信任的力量。
因為千百年來患者就醫(yī)都是與醫(yī)生面對面接觸進行檢查診斷，線上的方式中，也許目前的視頻溝通比起之前的文字或者語音的方式更進了一步，但是不光是醫(yī)生無法確認是否完整地了解到了相關(guān)的病情信息，就是患者自己也會擔心自己是否把病情完整陳述給了對面的醫(yī)生，醫(yī)生是否有認真在給自己看病。
因為每個患者的語音表達力都不同，很有可能患者對癥狀的描述并不是真實的疾病表現(xiàn)；更何況線下就醫(yī)，患者都有可能去多家醫(yī)院咨詢問診。
這種線上的溝通方式與面對面的溝通相比，以及加上患者早已習(xí)慣的線下就診方式，新的溝通問診形式讓患者對另外一頭醫(yī)生的信任感大打折扣。
文字溝通到語音再到視頻，問診溝通方式在不斷進步，但還不夠，與線下相比越真實越好，越趨于線下面對面的體驗越能增強患者的安全感和信任感，也許目前比較火的虛擬現(xiàn)實、元宇宙在溝通方式上的應(yīng)用在一定程度上改變這種狀態(tài)。
以上提到的案例基本并不會在單一維度努力去沉淀自己的產(chǎn)品優(yōu)勢，而多會綜合去發(fā)展，但是需要根據(jù)自身的優(yōu)勢和能力范去選擇建立優(yōu)勢的方向。
例如做醫(yī)藥電商的建東健康，也在大力發(fā)展醫(yī)療服務(wù)，家庭醫(yī)生方面的產(chǎn)品；專注做醫(yī)生問診服務(wù)的好大夫也有在向藥店、醫(yī)院合作方面發(fā)展；上文還未提到的平安健康更是在醫(yī)療服務(wù)、醫(yī)藥、健康險等方面同時發(fā)力（目前平安健康財報顯示其在醫(yī)療服務(wù)和醫(yī)藥上的營收占比已接近1:1）。
其實上文提到的這些維度大致可以分為：基礎(chǔ)能力建設(shè)層（數(shù)據(jù)+技術(shù)）、知識引流層、醫(yī)療服務(wù)層、醫(yī)療商品層。
醫(yī)療醫(yī)藥醫(yī)保醫(yī)健康，診前診中診后整閉環(huán)；線上線下，院內(nèi)院外，醫(yī)院醫(yī)生醫(yī)護醫(yī)全家；上有政策，下找對策，To G To B To C To all in；深挖坑，廣積糧，醫(yī)路漫漫修遠兮！
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
界面設(shè)計的好壞，會直接影響到用戶的使用體驗，很多時候我們往往會直接拿到競品的頁面搬運到自己產(chǎn)品上，而沒有針對自身產(chǎn)品的特點和業(yè)務(wù)加以思考。
這種做法理論上不會讓自己的頁面出錯。但是很多人往往忽略了一點，就是別人這么設(shè)計的出發(fā)點是什么，是否匹配自身產(chǎn)品的業(yè)務(wù)流程，如果不了解這些貿(mào)然的去搬運設(shè)計，那么時間久了就會養(yǎng)成一個不好的習(xí)慣，導(dǎo)致思維不能得到足夠的刺激和知識的沉淀。當需要我們專門進行設(shè)計構(gòu)思時，就會遇到諸多困難。
如果是剛?cè)胧值念I(lǐng)域，前期可以去進行適當?shù)陌徇\參考，但是一定要了解別人設(shè)計思考點，明白其背后的原因，將其沉淀成自己的知識儲備在腦海中。
過去60年，人類社會的數(shù)據(jù)發(fā)生了爆炸式增長。2008年人類大約創(chuàng)造了近10億張DVD能存儲的數(shù)據(jù)，這等同于過去5000年的人類創(chuàng)造數(shù)據(jù)的總和。12年，調(diào)研機構(gòu)預(yù)測信息每隔18月會翻一倍20年，調(diào)研機構(gòu)預(yù)測信息每隔73天會翻一倍
在信息爆炸的年代，人類進化的速度卻是緩慢的，我們現(xiàn)在的大腦跟250萬年前的原始人并沒有太大區(qū)別。
我們的大腦每秒鐘要接收約4000萬次的感官信息輸入，但意識一次能注意到其中約40個，其中短期工作記憶能處理的只有4±1個。
正是由于現(xiàn)代信息數(shù)據(jù)的大爆炸，多數(shù)產(chǎn)品日益臃腫的結(jié)構(gòu)，以及人類有限的處理能力，所以呈現(xiàn)什么信息，以何種形式呈現(xiàn)的信息層級設(shè)計就非常重要。
作為設(shè)計師，我們有必要根據(jù)自身產(chǎn)品的業(yè)務(wù)方向，以及用戶的行為和特征，結(jié)合信息環(huán)境，選擇合適的信息，并以適合的方式進行組織和呈現(xiàn)，以便讓用戶獲取并理解信息更容易，完成信息的組織和傳達作用。
相關(guān)聯(lián)信息需要進行歸類，無論是什么類型的產(chǎn)品模塊，我們在設(shè)計中應(yīng)當做好信息分層，當兩段內(nèi)容元素具有關(guān)聯(lián)性時，他們應(yīng)當作為一個整體給用戶展現(xiàn)。
（1）層級數(shù)量應(yīng)靠近“3”
信息層級作為影響頁面信息傳達效率的重要因素之一，那么怎樣做好頁面的信息層級便尤為重要。網(wǎng)上資料大多都在圍繞對比、對齊、親密、重復(fù)四個基本原則講解。
不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用，并且也是我們非常熟悉的。但其闡述得太過寬泛，在我們實際工作中面對復(fù)雜層級排版時，仍會面感到困惑，很難直接有效地利用。
于是我把優(yōu)秀的案例進行收集并整理分析。
經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn)，他們在遵循排版原則的基礎(chǔ)上，都存在著一個簡單的規(guī)律：主內(nèi)容的層級控制在三層左右。
如下圖所示：
可以發(fā)現(xiàn)，三層左右的層級是最容易被用戶識別的，且視覺上不易混亂。三層往后，隨著層級越多其復(fù)雜性會成比增加。
比如我們看下面這兩個例子，左邊層級方面平鋪直敘沒有重構(gòu)區(qū)分，使得層級復(fù)雜，造成用戶識別效率變低。但其實我們只需要對信息加以歸類并控制層級數(shù)量，瞬間就變得更簡單且易懂。
因此，我們需要在著手設(shè)計前，首先思考一個邏輯：盡量將我們的內(nèi)容層級控制在三層左右，且這三層內(nèi)有比較明顯的對比關(guān)系。
有朋友看到這肯定要問了，這個道理大家都懂啊，可是在實際工作中大多數(shù)拿到的信息都非常多，根本做不到保持在三層以內(nèi)。別著急，本文的重點當然不是告訴你這么簡單的道理，而是在面對復(fù)雜層級的時候，我們應(yīng)該怎樣去控制它的層級表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶獲取信息的效率更高。
（2）源頭篩選處理
源頭篩選的關(guān)鍵在于接手復(fù)雜信息時，我們首先需要從源頭上進行第一層的判斷，了解這些信息是否真實地被需要。這也是我們大多數(shù)人容易忽視的一點，當然這也不能完全怪我們，因為通常需求給到我們的時候都是大致的概括，好一點的話還有個交接文檔，甚至有時候需求拿到我們手上時，已經(jīng)轉(zhuǎn)好幾手了交接人可能也不知所云，導(dǎo)致很難知曉其底層出因，
源頭篩選的本質(zhì)就是判斷我們當前所要呈現(xiàn)的信息是不是必要的。
比如某些時候產(chǎn)品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業(yè)務(wù)場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設(shè)計的一致性。
過程需要我們對以下2點進行思考：
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
（3）在排布上降低復(fù)雜度
信息排布的本質(zhì)是通過我們對信息進行主觀的排列上的組織重構(gòu)，來將復(fù)雜的層級控制在三層左右的區(qū)間里。從而保證我們頁面的簡潔性、規(guī)律性、識別性。
通過目前的實踐總結(jié)，合理地安排信息層級的方法大致可以分為：分組、組件、組織、融入、弱化。
① 信息分組
信息分組是大家在設(shè)計時都能夠想到的形式，分組能夠?qū)?fù)雜的信息歸組從整，從而降低整體復(fù)雜度，清晰線索。
我們常用的分組方式主要有三種：間距、分割線、卡片。
那么這三種方式有沒有區(qū)分呢？
VIVO設(shè)計團隊曾經(jīng)就這個問題展開過用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現(xiàn)信息時的整體視覺觀感，因此我們可以根據(jù)當前信息的復(fù)雜度作出以下規(guī)則：
② 利用組件拆分
組件其實是目前大部分設(shè)計師在進行信息排布時必備的部分，因此對于這部分設(shè)計師的熟練度也是最高的。而本篇想要強調(diào)的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項卡。
③ 靈活組織
通過對組織方式的調(diào)整，我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。
舉個簡單的例子：
從圖中你可以看出左側(cè)的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復(fù)雜邏輯時，我們可以通過改變結(jié)構(gòu)使其交互邏輯更清晰，從而減少其復(fù)雜度。
④ 巧妙融入
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，產(chǎn)品設(shè)計中將button與查詢項利用分割排列在一起，從而變?yōu)橥粚蛹?，通過這種方式有效降低了頁面的復(fù)雜度。
當我們在進行B端布局時，信息融入這個方法用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復(fù)雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應(yīng)的搜索范圍。
⑤ 信息弱化
信息弱化的原則是：將某些超出層級的部分進行弱化。
比如圖中有5個層級，但其巧妙地將功能篩選融入到了當前的結(jié)構(gòu)中，使得即使超過3層我們也不會覺得其特別復(fù)雜。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。
比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復(fù)雜度：
因此我們需要學(xué)會對信息分級，不重要的信息就進行弱化，這樣整體的呈現(xiàn)上會好很多。
但不可否認仍會有更復(fù)雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
（4）突出熱區(qū)
當模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關(guān)鍵元素，需要進行高亮顯示，以此幫助用戶快速定位目標。
圖中 “Learn more” 使用文字高亮進行處理，通過顏色讓用戶快速定位入口，且不影響用戶正常閱讀，若使用色塊按鈕進行突出，模塊會冗余，過于喧賓奪主。
當產(chǎn)品需要用戶進行多步驟完成任務(wù)時，應(yīng)當展示系統(tǒng)進度，讓用戶了解他們的行為操作在界面中所處于的位置。
比如下圖中房屋裝修信息填寫流程，用戶面對這種多流程任務(wù)時，耐心往往很低，我們可以在設(shè)計時添加系統(tǒng)狀態(tài)進度條，時刻提示用戶當前的節(jié)點，此方法應(yīng)用場景還有注冊登錄、信息完善等更多場景，目的都是為了讓用戶達到交互可預(yù)測的狀態(tài)，提升用戶體驗。
我們在設(shè)計內(nèi)容復(fù)雜的網(wǎng)頁時，建議根據(jù)產(chǎn)品訴求和用戶目標，合理的放置元素，以此來達到目標，另一方面符合眼動規(guī)律的瀏覽順序，可以讓用戶不會產(chǎn)生視覺疲憊，每個視覺點停頓時看到元素都是不同，提升用戶體驗。
在設(shè)計大面積文字排版時，應(yīng)當注意字體粗細，它決定著我們的設(shè)計是否易讀性高。
無論標題還是內(nèi)容，字體過重或者過輕都會降低文本的基本識別度，而且遇到文字信息過多的情況，長時間專注文本的識別很容易出現(xiàn)視覺疲勞的情況。
在設(shè)計UI界面中，無論是長文字體還是模塊元素字體，我們都要注意字體的重量，保證基本識別度的同時，優(yōu)化視覺重心，確保用戶在閱讀時不容易陷入疲勞。
當界面中存在多個入口時，我們可以對這些入口進行優(yōu)先級處理，以突出核心功能為目的，用戶瀏覽界面的動作是大面積掃讀的形式，這就意味著我們需要弱化無關(guān)信息，既保證了界面的基本美觀性，又能夠具備良好的體驗。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
B 端設(shè)計離不開設(shè)計規(guī)范這個話題，而做好設(shè)計規(guī)范是一個龐大復(fù)雜工程，很多人對這些處于一知半解狀態(tài)，在這個系列文章里我通過結(jié)合自己平時的項目案例來談?wù)勛约簩?B 端設(shè)計規(guī)范的一些理解，希望可以帶來一些啟發(fā)。
本篇先談?wù)勗O(shè)計規(guī)范制作的指導(dǎo)思想--設(shè)計原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計規(guī)范。
設(shè)計規(guī)范作為 B 端設(shè)計中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經(jīng)具備了成熟的設(shè)計規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內(nèi)容我們知道了設(shè)計規(guī)范對于產(chǎn)品設(shè)計意義重大，那么制定設(shè)計規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計原則這個話題，設(shè)計原則是設(shè)計規(guī)范的總的綱領(lǐng)，所有的設(shè)計規(guī)范都應(yīng)當以設(shè)計原則為基準。設(shè)計原則主要包含以下內(nèi)容：
接下來就圍繞設(shè)計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復(fù)四個方面。
① 對比：
對比是指界面中為了區(qū)分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關(guān)鍵文字信息。
② 親密：
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，則它們的距離就應(yīng)該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。
③ 對齊：
在界面設(shè)計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線），也能引導(dǎo)視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復(fù)：
重復(fù)是指相同的元素在項目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時提高這些元素之間的關(guān)聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產(chǎn)品操作更加便捷；交互體驗與內(nèi)容更加輕量和簡化；以及產(chǎn)品風格保持一致。下面結(jié)合幾個常見案例說明如何應(yīng)用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉(zhuǎn)--便捷、輕量：
用戶操作過程盡量減少跳轉(zhuǎn)，以實現(xiàn)交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優(yōu)先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區(qū)--便捷：
放大可點擊按鈕熱區(qū)，相對于較小點擊熱區(qū)，具備更絲滑操作體驗。
④ 懸停即現(xiàn)--輕量：
利用懸停即現(xiàn)，避免信息過于重復(fù)啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內(nèi)容簡潔。
⑥ 統(tǒng)一樣式--一致：
一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。
友好原則應(yīng)貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態(tài)
可控主要體現(xiàn)在自由和導(dǎo)航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導(dǎo)航：
導(dǎo)航是指用戶隨時知曉當前所在位置，而且可以利用導(dǎo)航隨意到達目標頁面。
通過本篇內(nèi)容我們大概知道了制作設(shè)計規(guī)范主要方向，那么具體到每個組件上，我們該如何去設(shè)計呢？后續(xù)篇章將細分聊聊如何去設(shè)計 B 端常見組件的一些內(nèi)容。
部分參考資料：
作者：huang。亮 來源：優(yōu)設(shè)網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.yvirxh.cn