2023-11-20 周周
最近翻譯了一篇國外設計師在做 B 端儀表盤頁面的設計過程和思考，最后我會通過文章進行分析，看看我們能從這個設計案例中學到哪些東西。
這個設計案例以創(chuàng)作者為中心，驅(qū)動創(chuàng)作者更好的創(chuàng)作內(nèi)容，關(guān)注創(chuàng)作者成長。跟我們?nèi)粘＝佑|的優(yōu)設平臺也有很大的相似之處，從文章中也可以感知內(nèi)容創(chuàng)作平臺是如何驅(qū)動設計師進行輸出和提升的。
這也是一個很典型的設計項目復盤案例，可以幫助我們設計師學習從 0 到 1 完成設計復盤。
譯文：
在這個案例研究中，我想要分享的是我們?nèi)绾谓鉀Q讓創(chuàng)作者在 Graphy 創(chuàng)意平臺上時刻了解他們的進展和成長的問題。
我作為這個項目唯一的設計師主導這個項目，負責這個項目的方向制定和設計執(zhí)行。我的主要職責包含提出產(chǎn)品創(chuàng)意、改善用戶體驗、視覺設計、與產(chǎn)品相關(guān)利益相關(guān)者合作。
自始至終，我得到了我的設計主管巴蒂、產(chǎn)品和技術(shù)同行的支持，他們向我提供了反饋意見和評論。
2023 年初，Graphy 推出了一個企業(yè)對消費者的平臺（B2C），旨在幫助內(nèi)容創(chuàng)作者通過直播生成內(nèi)容并從中盈利。
將自己想象成以為教授金融的內(nèi)容創(chuàng)作者，你可以通過 Graphy 直播平臺進行直播并教授你的觀眾，通過你的知識業(yè)務進行獲利。
在 Graphy 平臺，創(chuàng)作者可以通過兩種途徑變形：
Graphy 直播平臺首頁
如果你曾經(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)作者成長與分析儀表盤的一階效應（即影響因素），但是有一個可以幫助我們了解創(chuàng)作者認為儀表盤很有用的指標就是：參與率和留存率。因此，這些是我們這個項目的成功指標。
1. 最初的想法和感受
當我第一次聽到「分析」和「儀表盤」這兩個詞時，最先涌上我的腦海里的是大量的數(shù)字、一組圖表和一個狹小的屏幕。之前沒有設計過儀表盤，這個似乎讓人不知所措。
2. 舊設計稿作為一種概念的證明
我們有一個舊的設計，之前我們的其他設計師很快就把他們組合在一起了。這樣做的目的是給我們的利益相關(guān)者和領(lǐng)導層展示概念證明。（因為這個直播平臺是我們正在進行的 0-1 項目中的一個）
舊設計稿的信息架構(gòu)
舊設計稿
3. 簡要介紹
我收到的任務簡單說就是重新思考整個儀表盤設計并改善用戶體驗。
4. 舊設計稿分析的見解
首先，舊的設計似乎充滿了各種信息，可能會給用戶帶來巨大的認知負擔。第二個觀察發(fā)現(xiàn)存在大量的用戶操作點，反過來可能會造成困擾并阻礙平滑導覽。
我需要考慮的事情：
5. 構(gòu)思
除了解決舊的設計稿中觀察到的問題之外，我還想縮小范圍，從新的角度來處理手上的任務。
首先提出最基本的問題：創(chuàng)作者最想在平臺上了解創(chuàng)作旅程中的哪些事情？
以下是我最初列出的幾點：
創(chuàng)作者關(guān)于他們的創(chuàng)作旅程最想了解的幾件事
我還對如何為用戶提供更好的儀表盤體驗提供了一些想法，我把這些內(nèi)容都列了出來，并于團隊分享，以便他們在該方法上保持一致。
這個儀表盤應該是什么樣的?
6. 研究和見解
基于研究工作臺設計靈感時，我發(fā)現(xiàn)屏幕上的展示非常的雜亂，堆滿了過多的圖像和圖表，難以閱讀，很難去理解這些儀表盤上的信息。
然而，在讀了一些關(guān)于工作臺設計的文章之后，我意識到很多專家建議在屏幕上盡可能多的顯示數(shù)據(jù)，這一個概念看上去違反直覺的，更加促使我去挖掘這些建議背后的基本原理。
在與團隊負責人的交談中，我們討論了儀表盤通常供數(shù)據(jù)和業(yè)務分析使用。他們有資格并熟練地以某種方式閱讀數(shù)據(jù)，并且需要同時查看大量的指標。然而，我的用戶不是分析師，而是創(chuàng)作者。它可以是任何人，比如你和我。背景很重要！
在設計儀表盤時，我想要確保它易于導航和使用。創(chuàng)作者到這里來尋求見解，而不是感到不知所措。它應該被設計的簡單的，不會過于繁瑣。
當做競品分析的時候，我研究了其他產(chǎn)品使用的方法。我的重點是具有類似以消費者為基礎(chǔ)目標受眾的公司，而不是以分析師為核心的受眾。我發(fā)現(xiàn)一些令人影響深刻且相關(guān)的例子，包括 Airbnb, Vimeo, Unsplash 和 YouTube.
競品分析頁面
我發(fā)現(xiàn)并從競品分析中得出：
7. 信息架構(gòu)
此時，與產(chǎn)品經(jīng)理進行頭腦風暴并最終確定我們希望分析儀表盤顯示的所有數(shù)據(jù)點似乎是正確的。正如我們看到的，舊的設計頁面有很多的數(shù)據(jù)點。我想在這里澄清兩件事情：
Analytics 儀表盤菜單
8. 視覺設計
這些是該項目的第一個版本的設計
當用戶登錄點擊 Analytics 菜單后，就會看到「概覽」頁面。
所有的信息和數(shù)據(jù)點被分為三部分：概覽、內(nèi)容、支付
這使得用戶可以輕松得通過儀表盤導航并使用數(shù)據(jù)。
①概覽
概覽頁面
在一系列的頭腦風暴會議后，我們決定并希望創(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)作旅程時還可以感受到獎勵和動力。同時，我不希望儀表盤過于繁瑣和事務性。
因此，我們決定在指標中 添加這個 Banner 條以及最新更新（自上次出現(xiàn)在該儀表盤上以來），例如關(guān)注者的增加、支持者的增加等。此類信息會激勵用戶訪問儀表盤并更好的了解他們的成長，而不是害怕它。向他們展示哪怕是最小的提升都會讓他們對自己的旅程感到滿意。
除了總體指標之外，我們還決定展示他們最近的直播表現(xiàn)。這是創(chuàng)作者普遍希望跟蹤的內(nèi)容，以了解他們最近發(fā)布內(nèi)容的表現(xiàn)。
②內(nèi)容頁面
內(nèi)容界面
包含內(nèi)容選項卡，我們決定顯示與觀看次數(shù)、觀看時間、最近直播相關(guān)的所有數(shù)據(jù)點，這些指標都與創(chuàng)作者在我們平臺上創(chuàng)建的內(nèi)容相關(guān)。
實時觀看次數(shù)是創(chuàng)作者直播時獲得的直播觀看總數(shù)。
錄制觀看次數(shù)是錄制的直播流獲得的觀看總數(shù)。（每個直播都由平臺錄制，供學習者稍后觀看）
餅圖與觀看次數(shù)一起展示，以便清晰的區(qū)分實時觀看次數(shù)和錄播觀看次數(shù)之間的差異，以便讓看到數(shù)據(jù)的讀者一目了然地了解比例的要點。
③選擇數(shù)據(jù)可視化類型
我考慮了多種數(shù)據(jù)可視化選項，但最終選擇了折線圖，因為他簡單、熟悉且易于使用。
決定在折線圖中使用多線條，可以輕松比較總觀看次數(shù)、實時觀看次數(shù)和記錄觀看次數(shù)。
圖表圖例也是可操作的復選框，用戶可以勾選或者不勾選，來決定每條線的顯示與不顯示。
這些圖例是這樣設計的，因此用戶對他們想要查看的數(shù)據(jù)和想要隱藏的數(shù)據(jù)有更多的選擇權(quán)。與沒有復選框和用戶必須始終看三行的情況相反，這在某種情況下會導致信息過載。
數(shù)據(jù)可視化中的顏色展示
數(shù)據(jù)可視化中的顏色展示非常的重要，關(guān)乎到儀表盤上使用的數(shù)據(jù)可視化的顏色選擇，為了更好地理解怎樣在 dataviz 中使用顏色，我參考了一些資源，例如 Material Design, mysidewalk Style Guide, Chartio, Datawrapper Academy 等。
我還檢查了色盲模擬器中的顏色，以驗證我使用的所有顏色是否對于具有任何色盲或者對訪問具有困難的人來說都是可以區(qū)分的。
④默認值設計
在用戶界面中設置默認值是 UI 界面設計和信息設計的一個重要方面。例如，當我們在考慮數(shù)據(jù)過濾的默認持續(xù)時間時，選擇正確的值非常的重要。在本例中，默認過濾持續(xù)時間設置為 28 天，有以下幾個因素決定：
平臺的新穎性：鑒于該平臺相對較新且創(chuàng)作者最近才加入，因此選擇較短的時間范圍（28 天）作為默認值，他提供了他們最近的表現(xiàn)的相關(guān)快照。
趨勢之間的平衡：短于一個月（例如一周）的時間被認為太短，無法提供有意義的趨勢數(shù)據(jù)。另一方面，較長的持續(xù)時間可能會因為過多的數(shù)據(jù)點而讓用戶不知所措。這樣，28 天的設置就達到了平衡。
行業(yè)標準：研究和競品分析表明。大多數(shù)儀表盤都會顯示月度數(shù)據(jù)。與這種模式保持對齊可以提供熟悉度和友好的體驗。
從本質(zhì)上來說，默認值設置的選擇在確保向用戶提供相關(guān)且易于理解的信息，最終增強界面的整體可用性方面發(fā)揮著關(guān)鍵作用。
⑤支付
支付頁面
在「支付」選項卡中，我們顯示與收入和結(jié)算相關(guān)的所有數(shù)據(jù)點。結(jié)算金額是創(chuàng)作者根據(jù)每個月產(chǎn)生的收入從 Graphy 平臺收到的金額。
在將近兩月的上線后，儀表盤顯示了值得注意的指標：
我覺得我們還可以做更多的事情，來使分析儀表盤體驗更加直觀和信息豐富。這個想法不僅僅是為了展示數(shù)據(jù)，而且是為了幫助創(chuàng)作者從中獲得認識和見解。我們還可以通過幫助創(chuàng)作者將這些見解轉(zhuǎn)化為可操作的行為，讓體驗更上一層樓，幫助他們改變指標。
其中一個想法是，我們可以展示創(chuàng)作者旅程中的里程碑。假設一個創(chuàng)作者已經(jīng)獲得了一定數(shù)量的關(guān)注者，當他們登錄時，我們可以用五彩紙屑動畫進行慶祝，并提供有關(guān)他們的里程碑的更多詳細信息。打個比方，到達這個里程碑需要多長時間，這是轉(zhuǎn)折點、高光時刻等。
另一個想法是，我們可以顯示表現(xiàn)最好的直播以及有關(guān)它們的更多詳細信息，例如直播期間提出了多少問題、反應時間戳、參與度、峰值觀看次數(shù)等。這可以幫助創(chuàng)作者了解哪些內(nèi)容可以表現(xiàn)更好以及原因。
文章來源：優(yōu)設網(wǎng) 作者：阿琦Aqi
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。
關(guān)鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
