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