我們可以怎么設(shè)計B端儀表盤？過程中有哪些事項需要注意或規(guī)避？這篇文章里，作者分享了一名國外設(shè)計師在做B端儀表盤頁面的設(shè)計過程和思考，一起來看一下，或許會對屏幕前的你有所啟發(fā)。

翻譯了一篇國外設(shè)計師在做B端儀表盤頁面的設(shè)計過程和思考，最后我會通過文章進行分析，看看我們能從這個設(shè)計案例中學(xué)到哪些東西？

這個設(shè)計案例以創(chuàng)作者為中心，驅(qū)動創(chuàng)作者更好的創(chuàng)作內(nèi)容和關(guān)注創(chuàng)作者成長。跟我們?nèi)粘＝佑|的內(nèi)容創(chuàng)作平臺也有很大的相似之處，從文章中也可以感知內(nèi)容創(chuàng)作平臺是如何驅(qū)動設(shè)計師進行輸出和提升的。

這也是一個很典型的設(shè)計項目復(fù)盤案例，也可以幫助我們的設(shè)計師學(xué)習(xí)從0到1完成設(shè)計復(fù)盤。

譯文：讓創(chuàng)作者能夠在Graphy平臺上追蹤他們的內(nèi)容創(chuàng)作歷程——產(chǎn)品設(shè)計案例研究

在這個案例研究中，我想要分享的是我們?nèi)绾谓鉀Q讓創(chuàng)作者在Graphy創(chuàng)意平臺上時刻了解他們的進展和成長的問題。

一、團隊與職責

我作為這個項目唯一的設(shè)計師主導(dǎo)這個項目，負責這個項目的方向制定和設(shè)計執(zhí)行。我的主要職責包含提出產(chǎn)品創(chuàng)意、改善用戶體驗、視覺設(shè)計、與產(chǎn)品相關(guān)利益相關(guān)者合作。

自始至終，我得到了我的設(shè)計主管巴蒂、產(chǎn)品和技術(shù)同行的支持，他們向我提供了反饋意見和評論。

二、背景

2023年初，Graphy推出了一個企業(yè)對消費者的平臺（B2C），旨在幫助內(nèi)容創(chuàng)作者通過直播生成內(nèi)容并從中盈利。

將自己想象成以為教授金融的內(nèi)容創(chuàng)作者，你可以通過Graphy直播平臺進行直播并教授你的觀眾，通過你的知識業(yè)務(wù)進行獲利。

在Graphy平臺，創(chuàng)作者可以通過兩種途徑變形：

1. 專業(yè)推薦：專業(yè)訂閱使學(xué)習(xí)者能夠使用類似在直播間內(nèi)提問和無限制聊天等功能，當觀眾（我們稱之為學(xué)習(xí)者）在觀看創(chuàng)作者直播時購買專業(yè)訂閱功能時，我們會將一定比例的金額分給創(chuàng)作者。
2. 觀看時長：基于創(chuàng)作者內(nèi)容的觀看時長，平臺會計算一定金額作為收入給到創(chuàng)作者。

三、目標

如果你曾經(jīng)在線創(chuàng)建過內(nèi)容，您會明白這是一項艱巨的工作，他需要毅力和一致性，同時它要求創(chuàng)作者自發(fā)地有意愿地去創(chuàng)作內(nèi)容。作為一個平臺，我們有責任讓這一旅程為我們的創(chuàng)作者帶來鼓勵和回報。

一種方法是幫助他們跟蹤和了解他們的進展，這將使他們能夠了解到什么對他們有用，以及他們可能需要改變什么才能使指標發(fā)生變化。

因此，我們決定做一個分析儀表盤為創(chuàng)作者提供需要的數(shù)據(jù)點，以更好的幫助他們了解他們在平臺上的內(nèi)容創(chuàng)作歷程。

四、成功指標

雖然我們沒有可以跟蹤創(chuàng)作者成長與分析儀表盤的一階效應(yīng)（即影響因素），但是有一個可以幫助我們了解創(chuàng)作者認為儀表盤很有用的指標就是：參與率和留存率。因此，這些是我們這個項目的成功指標。

五、解決問題

1. 最初的想法和感受

當我第一次聽到【分析】和【儀表盤】這兩個詞時，最先涌上我的腦海里的是大量的數(shù)字、一組圖表和一個狹小的屏幕。之前沒有設(shè)計過儀表盤，這個似乎讓人不知所措。

2. 舊設(shè)計稿作為一種概念的證明

我們有一個舊的設(shè)計，之前我們的其他設(shè)計師很快就把他們組合在一起了。這樣做的目的是給我們的利益相關(guān)者和領(lǐng)導(dǎo)層展示概念證明（因為這個直播平臺是我們正在進行的0-1項目中的一個）。

3. 簡要介紹

我收到的任務(wù)簡單說就是重新思考整個儀表盤設(shè)計并改善用戶體驗。

4. 舊設(shè)計稿分析的見解

首先，舊的設(shè)計似乎充滿了各種信息，可能會給用戶帶來巨大的認知負擔。第二個觀察發(fā)現(xiàn)存在大量的用戶操作點，反過來可能會造成困擾并阻礙平滑導(dǎo)覽。

我需要考慮的事情：

• 此時，我們的創(chuàng)作者是否需要所有的信息？我們是否可以重新優(yōu)化數(shù)據(jù)的范圍？
• 哪些數(shù)據(jù)對創(chuàng)作者旅程是至關(guān)重要的，哪些數(shù)據(jù)可能被認為是多余的或者可以被隱藏以簡化用戶體驗，防止認知過載？

5. 構(gòu)思

除了解決舊的設(shè)計稿中觀察到的問題之外，我還想縮小范圍，從新的角度來處理手上的任務(wù)。

首先提出最基本的問題：創(chuàng)作者最想在平臺上了解創(chuàng)作旅程中的哪些事情？

以下是我最初列出的幾點：

創(chuàng)作者關(guān)于他們的創(chuàng)作旅程最想了解的幾件事：

1. 關(guān)注總數(shù)
2. 每日、每周、每月粉絲增長
3. 總收入
4. 每日，每周，每月收入增長-可以顯示每個月的最高水平(用獎杯或明星標記)
5. 直播總數(shù)
6. 每日、每周、每月直播數(shù)量
7. 總觀看時間-直播+錄制，付費+免費(*獨立觀眾)
8. 每日、每周、每月觀看時間數(shù)據(jù)-可以突出觀看時間最多的一天或每個月最多
9. 收入來自哪里(哪些是直播，哪些是錄播，總觀看時間，分布顯示)
10. 支持者(超級粉絲)人數(shù)-以及他們的名單，支持日期
11. 支持者/追隨者的地區(qū)/城市
12. 頂級表現(xiàn)流列表-在線觀看人數(shù)、總觀看時間、總視圖、收入、日期
13. 在表現(xiàn)最好的直播中，顯示被問到的問題，顯示反應(yīng)時間戳
14. 直播下降率/時間地圖-在什么時候下降最多，在什么時候開始下降
15. 你的內(nèi)容在搜索中出現(xiàn)了多少次
16. 搜索與你的類別/內(nèi)容相關(guān)的字符串(這樣創(chuàng)作者在直播中可以更好地命名)
17. 你的類別中有沒有類似的創(chuàng)作者列表?

我還對如何為用戶提供更好的儀表盤體驗提供了一些想法，我把這些內(nèi)容都列了出來，并于團隊分享，以便他們在該方法上保持一致。

這個儀表盤應(yīng)該是什么樣的?

1. 易于使用，信息應(yīng)該易于識別
2. 創(chuàng)造者應(yīng)該覺得來到這里是為了獲得見解，而不是被周圍的數(shù)字所淹沒
3. 以有趣的方式展示見解
4. 不應(yīng)該感覺周圍都是數(shù)字
5. 試著用儀表板上的數(shù)據(jù)/信息講一個故事——我在我的旅程中處于什么位置，我正在做什么，如何提高（情報范圍）？

6. 研究和見解

基于研究工作臺設(shè)計靈感時，我發(fā)現(xiàn)屏幕上的展示非常的雜亂，堆滿了過多的圖像和圖表，難以閱讀，很難去理解這些儀表盤上的信息。

然而，在讀了一些關(guān)于工作臺設(shè)計的文章之后，我意識到很多專家建議在屏幕上盡可能多的顯示數(shù)據(jù)，這一個概念看上去違反直覺的，更加促使我去挖掘這些建議背后的基本原理。

在與團隊負責人的交談中，我們討論了儀表盤通常供數(shù)據(jù)和業(yè)務(wù)分析使用。他們有資格并熟練地以某種方式閱讀數(shù)據(jù)，并且需要同時查看大量的指標。然而，我的用戶不是分析師，而是創(chuàng)作者。它可以是任何人，比如你和我。背景很重要！

在設(shè)計儀表盤時，我想要確保它易于導(dǎo)航和使用。創(chuàng)作者到這里來尋求見解，而不是感到不知所措。它應(yīng)該被設(shè)計的簡單的，不會過于繁瑣。

當做競品分析的時候，我研究了其他產(chǎn)品使用的方法。我的重點是具有類似以消費者為基礎(chǔ)目標受眾的公司，而不是以分析師為核心的受眾。我發(fā)現(xiàn)一些令人影響深刻且相關(guān)的例子，包括Airbnb, Vimeo, Unsplash, and YouTube。

我發(fā)現(xiàn)并從競品分析中得出：

1. 展示數(shù)據(jù)的簡單方法（例如，使用什么類型的數(shù)據(jù)可視化以及如何設(shè)計圖形易于閱讀）；
2. 信息層級（例如，標簽應(yīng)該如何編寫、重要的數(shù)字如何突出）。

7. 信息架構(gòu)

此時，與產(chǎn)品經(jīng)理進行頭腦風(fēng)暴并最終確定我們希望分析儀表盤顯示的所有數(shù)據(jù)點似乎是正確的。正如我們看到的，舊的設(shè)計頁面有很多的數(shù)據(jù)點。

我想在這里澄清兩件事情：

1. 當創(chuàng)作者在Graphy上開始他們的內(nèi)容創(chuàng)作的時候，確定他們需要和不需要的數(shù)據(jù)點。
2. 根據(jù)更有意義的內(nèi)容以及我們之前在創(chuàng)作者經(jīng)濟領(lǐng)域的經(jīng)驗，重新考慮和思考數(shù)據(jù)的耦合。

8. 視覺設(shè)計

這些是該項目的第一個版本的設(shè)計

當用戶登錄點擊Analytics菜單后，就會看到【概覽】頁面。

所有的信息和數(shù)據(jù)點被分為三部分：概覽、內(nèi)容、支付。

這使得用戶可以輕松得通過儀表盤導(dǎo)航并使用數(shù)據(jù)。

1）概覽

在一系列的頭腦風(fēng)暴會議后，我們決定并希望創(chuàng)作者聚焦于三個主要的指標，以幫助他們更快的成長。這三個指標是：觀看次數(shù)、關(guān)注數(shù)量和收入。

在這里，我們可以看到創(chuàng)作者內(nèi)容的全生命周期的總觀看次數(shù)、他們擁有的關(guān)注人數(shù)以及他們產(chǎn)生的收入。

在總生命周期數(shù)下方，我們顯示了過去28天的變化。

為什么顯示全生命周期數(shù)據(jù)而不是每個月的數(shù)據(jù)呢？那是因為，因為平臺剛剛推出，創(chuàng)作者還沒有足夠的數(shù)據(jù)供我們每月展示。因此，我們決定首先展示生命周期，并最終轉(zhuǎn)向每月數(shù)據(jù)。

輔助提示提供了有關(guān)特定指標的含義的更多信息，并告知用戶該數(shù)據(jù)是全部生命周期。

我們決定將圖表與數(shù)字一起展示，以便用戶輕松了解他們的增長模式。

正如之前我在本案例中研究的那樣，我希望用戶在我們平臺上的內(nèi)容創(chuàng)作旅程時還可以感受到獎勵和動力。同時，我不希望儀表盤過于繁瑣和事務(wù)性。

因此，我們決定在指標中 添加這個Banner條以及最新更新（自上次出現(xiàn)在該儀表盤上以來），例如關(guān)注者的增加、支持者的增加等。此類信息會激勵用戶訪問儀表盤并更好的了解他們的成長，而不是害怕它。向他們展示哪怕是最小的提升都會讓他們對自己的旅程感到滿意。

除了總體指標之外，我們還決定展示他們最近的直播表現(xiàn)。這是創(chuàng)作者普遍希望跟蹤的內(nèi)容，以了解他們最近發(fā)布內(nèi)容的表現(xiàn)。

2）內(nèi)容頁面

包含內(nèi)容選項卡，我們決定顯示與觀看次數(shù)、觀看時間、最近直播相關(guān)的所有數(shù)據(jù)點，這些指標都與創(chuàng)作者在我們平臺上創(chuàng)建的內(nèi)容相關(guān)。

實時觀看次數(shù)是創(chuàng)作者直播時獲得的直播觀看總數(shù)。

錄制觀看次數(shù)是錄制的直播流獲得的觀看總數(shù)（每個直播都由平臺錄制，供學(xué)習(xí)者稍后觀看）。

餅圖與觀看次數(shù)一起展示，以便清晰的區(qū)分實時觀看次數(shù)和錄播觀看次數(shù)之間的差異，以便讓看到數(shù)據(jù)的讀者一目了然地了解比例的要點。

3）選擇數(shù)據(jù)可視化類型

我考慮了多種數(shù)據(jù)可視化選項，但最終選擇了折線圖，因為他簡單、熟悉且易于使用。

決定在折線圖中使用多線條，可以輕松比較總觀看次數(shù)、實時觀看次數(shù)和記錄觀看次數(shù)。

圖表圖例也是可操作的復(fù)選框，用戶可以勾選或者不勾選，來決定每條線的顯示與不顯示。

這些圖例是這樣設(shè)計的，因此用戶對他們想要查看的數(shù)據(jù)和想要隱藏的數(shù)據(jù)有更多的選擇權(quán)。與沒有復(fù)選框和用戶必須始終看三行的情況相反，這在某種情況下會導(dǎo)致信息過載。

數(shù)據(jù)可視化中的顏色展示：

數(shù)據(jù)可視化中的顏色展示非常的重要，關(guān)乎到儀表盤上使用的數(shù)據(jù)可視化的顏色選擇，為了更好地理解怎樣在dataviz中使用顏色，我參考了一些資源，例如 Material Design, mysidewalk Style Guide, Chartio, Datawrapper Academy等。

我還檢查了色盲模擬器中的顏色，以驗證我使用的所有顏色是否對于具有任何色盲或者對訪問具有困難的人來說都是可以區(qū)分的。

4）默認值設(shè)計

在用戶界面中設(shè)置默認值是UI界面設(shè)計和信息設(shè)計的一個重要方面。例如，當我們在考慮數(shù)據(jù)過濾的默認持續(xù)時間時，選擇正確的值非常的重要。在本例中，默認過濾持續(xù)時間設(shè)置為28天，有以下幾個因素決定：

平臺的新穎性：鑒于該平臺相對較新且創(chuàng)作者最近才加入，因此選擇較短的時間范圍（28天）作為默認值，他提供了他們最近的表現(xiàn)的相關(guān)快照。

趨勢之間的平衡：短于一個月（例如一周）的時間被認為太短，無法提供有意義的趨勢數(shù)據(jù)。另一方面，較長的持續(xù)時間可能會因為過多的數(shù)據(jù)點而讓用戶不知所措。這樣，28天的設(shè)置就達到了平衡。

行業(yè)標準：研究和競品分析表明。大多數(shù)儀表盤都會顯示月度數(shù)據(jù)。與這種模式保持對齊可以提供熟悉度和友好的體驗。

從本質(zhì)上來說，默認值設(shè)置的選擇在確保向用戶提供相關(guān)且易于理解的信息，最終增強界面的整體可用性方面發(fā)揮著關(guān)鍵作用。

5）支付

在【支付】選項卡中，我們顯示與收入和結(jié)算相關(guān)的所有數(shù)據(jù)點。結(jié)算金額是創(chuàng)作者根據(jù)每個月產(chǎn)生的收入從Graphy平臺收到的金額。

六、影響

在將近兩月的上線后，儀表盤顯示了值得注意的指標：

1. 平臺40%的總流量被定向到分析儀表盤；
2. 據(jù)觀察，第一天的留存為55%，而第7天的留存為40%；
3. 參與度百分比（人們與圖表交互、切換選項卡等）為70%，表明用戶互動活躍；
4. 平均參與時間（每個創(chuàng)作者每天在儀表盤上花費的時間）為1.5分鐘。

七、學(xué)習(xí)內(nèi)容與總結(jié)

1. 由于我是第一次設(shè)計儀表盤，這對我來說是一次新的學(xué)習(xí)體驗，我非常喜歡這個過程，和過程中經(jīng)歷的頭腦風(fēng)暴；
2. 在做這個項目的過程中，我被提醒說設(shè)計有時與環(huán)境密切相關(guān)。了解我們的目標受眾并進行相應(yīng)的設(shè)計非常重要，而不是盲目遵循模式；
3. 由于從事這個項目，我有機會閱讀和學(xué)習(xí)了一些關(guān)于數(shù)據(jù)可視化的內(nèi)容，我相信這些信息對我將來從事的項目有很大的幫助。

八、面向未來設(shè)計

我覺得我們還可以做更多的事情，來使分析儀表盤體驗更加直觀和信息豐富。這個想法不僅僅是為了展示數(shù)據(jù)，而且是為了幫助創(chuàng)作者從中獲得認識和見解。我們還可以通過幫助創(chuàng)作者將這些見解轉(zhuǎn)化為可操作的行為，讓體驗更上一層樓，幫助他們改變指標。

其中一個想法是，我們可以展示創(chuàng)作者旅程中的里程碑。假設(shè)一個創(chuàng)作者已經(jīng)獲得了一定數(shù)量的關(guān)注者，當他們登錄時，我們可以用五彩紙屑動畫進行慶祝，并提供有關(guān)他們的里程碑的更多詳細信息。打個比方，到達這個里程碑需要多長時間，這是轉(zhuǎn)折點、高光時刻等。

另一個想法是，我們可以顯示表現(xiàn)最好的直播以及有關(guān)它們的更多詳細信息，例如直播期間提出了多少問題、反應(yīng)時間戳、參與度、峰值觀看次數(shù)等。這可以幫助創(chuàng)作者了解哪些內(nèi)容可以表現(xiàn)更好以及原因。

思考：從設(shè)計師Zainab身上我們可以學(xué)習(xí)到什么

1. 用戶體驗五要素體現(xiàn)得淋漓盡致

戰(zhàn)略層和范圍層要求我們分析項目的背景和目標。Zainab拿到項目時，對內(nèi)容平臺項目背景進行了簡單分析，然后制定了目標，確定了衡量模型的指標。

Zainab對舊的設(shè)計稿進行了梳理，確定了一些列創(chuàng)作者旅程中的數(shù)據(jù)指標。

對儀表盤設(shè)計而言，她并沒有被一些列數(shù)據(jù)指標所迷惑，而是堅定地制定儀表盤應(yīng)該有的體驗規(guī)則。

2. 正確地使用設(shè)計方法讓工作事半功倍

使用競品分析得出數(shù)據(jù)展示的技巧和信息層級的劃分；使用頭腦風(fēng)暴，盡可能多的獲取設(shè)計靈感和方案。

3. 設(shè)計細節(jié)上的強化和理論學(xué)習(xí)支撐

數(shù)據(jù)篩選時間維度的制定，設(shè)計師參考了競品、行業(yè)基本規(guī)則等；

數(shù)據(jù)可視化顏色的測試，設(shè)計師通過色盲模擬器，避免顏色的顯示問題，非常嚴謹；

數(shù)據(jù)圖表類型的選擇，單線和多線的處理，可見與不可見的處理，設(shè)計師從體驗上做了很多的考慮。

默認值的設(shè)定，也是讀了一定的設(shè)計文章作為理論支撐。

4. 數(shù)據(jù)跟蹤

設(shè)計師在上線兩個月后對數(shù)據(jù)進行跟蹤，從中得出跟多的思路和經(jīng)驗。

5. 復(fù)盤

設(shè)計師對項目進行了總結(jié)，同時也對項目的未來版本做了一點的思路分析。對未來的設(shè)計值得我們學(xué)習(xí)，只有深入?yún)⑴c了、分析了、總結(jié)了，我們才更加知道用戶的偏好。

6. 價值證明

這個跟國內(nèi)的設(shè)計環(huán)境不一樣，國外設(shè)計師比較在意和重視項目負責人或者設(shè)計總監(jiān)對她的認可，這樣在一定程度上給她樹立信心，促進成長。