中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：在B端產(chǎn)品設(shè)計中，圖表設(shè)計是常見的工作項目。合理有效的圖表設(shè)計有助于數(shù)據(jù)抽象化、可視化，體現(xiàn)數(shù)據(jù)真實性，并傳達相關(guān)信息。在本篇文章里，作者對B端圖表設(shè)計可能出現(xiàn)的問題做了相應(yīng)總結(jié)，一起來看一下。

這些天在幫網(wǎng)友看Ｂ端測試題，幾乎每份都會涉及到可視化圖表。我從中提煉出一些規(guī)律，將這些梳理總結(jié)出一份七宗罪走查清單，正如芒格先生所說“如果知道我會si在哪里，那我將永遠不會去那個地方”，希望這份清單能幫助大家排雷掃障。

本文5480字，預(yù)計閱讀時長20分鐘，內(nèi)含大量圖表示例，建議PC端閱讀。記得每次設(shè)計完圖表后拿出來對照走查。閱讀指引如下：

一、圖表構(gòu)成

清單中涉及一些專業(yè)詞匯，為方便大家理解，我們先簡單地認識一下圖表構(gòu)成。

圖表設(shè)計規(guī)范同樣由原子、分子、組件、模塊、頁面搭建而成，其中圖表由多個組件構(gòu)成，如數(shù)據(jù)標簽、圖例、圖形主體、坐標系等。

• 標題：圖表內(nèi)容主題，包括主標題和副標題?？梢允菆D表內(nèi)容的概括，也可以是結(jié)論。
• 切換選項：用以切換同組對象的不同維度數(shù)據(jù)，如銷售量與銷售額。
• 數(shù)據(jù)標簽：也叫提示信息，即當前數(shù)據(jù)的內(nèi)容標注。數(shù)字型的數(shù)據(jù)標簽，以通常以常駐形式存在于圖表；氣泡型/卡片型的數(shù)據(jù)標簽，常以交互行為（點擊、長按、懸停等）觸發(fā)的形式出現(xiàn)。
• 圖例：指圖表內(nèi)容與數(shù)據(jù)的符號或顏色說明，它既為繪圖標準，又是圖表的閱讀指南。
• 工具（欄）：當前圖表的操作項，例如編輯、刷新、導出、分享等。

• 坐標系：將抽象的數(shù)據(jù)關(guān)系映射到具象的圖表上，該圖表所處的空間維度叫做“坐標系”，用來確定數(shù)據(jù)空間位置的數(shù)組叫做“坐標”，例如（x，y）、（北緯N22°38′17.54″ ，東經(jīng)E114°05′52.35）。坐標系包括坐標軸和標尺。
• 圖形主體 ：用于數(shù)據(jù)視覺展現(xiàn)形式的圖形，可以根據(jù)數(shù)據(jù)維度、數(shù)據(jù)差異，在同一圖表使用不同圖形繪制，例如常見的折柱混合、K線圖。
• 網(wǎng)格：以標尺刻度為基準的參考線，用以輔助數(shù)據(jù)的快速定位。
• 值域：表示圖表X軸的縮放大小，以及可視區(qū)域，多用于存在大量數(shù)據(jù)的情況。
• 映射域：表示圖表Y軸的縮放大小，以及可視區(qū)域，多用于數(shù)據(jù)差異較大的情況。

二、圖表設(shè)計七宗罪

1. 冗余

冗余即多余的、不必要的信息，或重復內(nèi)容，產(chǎn)生了視覺干擾，無法直觀獲取數(shù)據(jù)信息。

圖表的價值在于使抽象的數(shù)據(jù)關(guān)系具象化、可視化，使其直觀易懂。我們在設(shè)計時，可通過信息降噪來提高信息獲取效率。《紐約時報》信息設(shè)計師Jonathan Corum曾給出指導：“顯示內(nèi)容，而非顯示框架”。

例如下圖斑馬紋背景、黑色的網(wǎng)格，作者試圖給柱形添加描邊來提高閱讀性，使得圖表更加地混亂不堪。當我們?nèi)サ舭唏R紋與描邊，適當削弱網(wǎng)格，圖表是否變得干凈起來？接著我們添加數(shù)據(jù)標簽，剔除坐標系，不僅使得圖表更清爽，閱讀效率也有大步提升。

再者，刻度值選取也是較容易忽視的地方。

我們的設(shè)計原則為：在保證易讀取坐標的基礎(chǔ)上做最簡化。例如我們可以保留半個刻度值，灰色顯示，方便用戶快速讀取數(shù)值。如果你的圖表用只來展示對比情況，無需精確讀值，亦或者有交互行為觸發(fā)數(shù)據(jù)標簽，那么你完全可以只選取合適的整值刻度。

可視化的數(shù)據(jù)集一般分為展示類和業(yè)務(wù)類，展示類只做某些確定的數(shù)據(jù)集展示，如項目提案、工作匯報等；業(yè)務(wù)類圍繞著業(yè)務(wù)數(shù)據(jù)，包含已有的確定數(shù)據(jù)集與未知的數(shù)據(jù)集，如物流監(jiān)控、天氣預(yù)監(jiān)、數(shù)據(jù)埋點監(jiān)測等等。

業(yè)務(wù)數(shù)據(jù)集大多隨時間推演而變化，縮小字號與斜置X軸軸標簽都會影響數(shù)據(jù)閱讀。建議抽樣選取軸標簽，并輔以交互行為觸發(fā)數(shù)據(jù)標簽。也可以完整保留軸標簽，用值域縮略器控制顯示范圍與軸刻度大小。

題外話，當展示類數(shù)據(jù)集遇到類別名稱較長，又不具備連續(xù)性時，建議使用條形圖。

潛在風險

過多不必要的視覺噪音，干擾信息讀取效率，圖表內(nèi)容得不到凸顯，失去直觀、形象的價值。

如何避免

• 剔除不必要的非數(shù)據(jù)元素（如輪廓、網(wǎng)格線、背景），將重點放在數(shù)據(jù)元素；
• 弱化坐標系（坐標軸、刻度線），保持其清晰但不起眼；
• 當你設(shè)計了常駐數(shù)據(jù)標簽時，甚至可以剔除坐標系；
• 數(shù)據(jù)集具有連續(xù)性時，坐標軸抽樣顯示，或使用值域縮略器。

2. 繁雜

即多而雜亂，分為設(shè)計語言繁雜、數(shù)據(jù)集繁雜，和視覺瀏覽動線繁雜。

相比其設(shè)計冗余，設(shè)計繁雜時閱讀更為困難，甚至出現(xiàn)無法讀取信息的情況。

1）設(shè)計語言繁雜

在同一套系統(tǒng)中各個模塊，分別使用藍綠科技風、黑金尊貴風、玫紫時尚風、駝色休閑風等等等。紛繁多樣的設(shè)計語言，不僅使用戶困惑、認知困難，還加大了開發(fā)成本。

雖在業(yè)內(nèi)沒有明確的規(guī)范，大家可應(yīng)根據(jù)載體終端，將產(chǎn)品原設(shè)計系統(tǒng)衍生出一份圖表設(shè)計規(guī)范。

在可視化專業(yè)術(shù)語中，我們給圖表定義的設(shè)計語言叫做視覺編碼，它是數(shù)據(jù)與視覺結(jié)果之間的映射規(guī)則。其中包括了形態(tài)、大小、位置、色彩、紋理、方向等等。

感興趣的朋友可以閱讀Jacques Bertin 的《Semiology of Graphics》，他在當中總結(jié)了有哪些視覺變量，能最有效地顯示定性或定量差異。

其中比較值得注意的是圖表色板的設(shè)定，我們分為定性色板、順序色板、離散色板。

• 定性色板：基于明度、飽和度的平衡上，調(diào)整色相以區(qū)分不同類別。適用于無順序關(guān)系的圖表，多見于對比類圖表，例如柱狀圖、條形圖、面積圖。
• 順序色板：基于色相、飽和度的平衡上，調(diào)整明度以表示遞進、流程、順序等。適用于順序關(guān)系的圖表，例如于漏斗圖、熱圖。
• 離散色板：基于中間值（例如0）將兩種順序色板組合起來，適用于兩種不同關(guān)聯(lián)關(guān)系的圖表，例如雙向堆疊圖。

注：這里的順序關(guān)系指的是圖表類型本身帶有連續(xù)性、遞進性、流轉(zhuǎn)性，與數(shù)據(jù)本身的連續(xù)性不同。

2）數(shù)據(jù)集繁雜

數(shù)據(jù)集難免出現(xiàn)極限情況，例如對比幾十個省份訂單變化情況時，你能在左側(cè)圖中找上海的數(shù)據(jù)嗎？

建議把總覽圖表按某種規(guī)則拆分為小組，例如按地理分區(qū)拆分為東北、華北、華中、華東、華南、西南、西北七區(qū)各省份訂單對比。

也可以拆分為若干個子數(shù)據(jù)圖表，如示例右側(cè)每個省份一張圖，拓展性更強，可以靈活調(diào)取任意省份進行對比。

當我們要看子數(shù)據(jù)占比情況時，較多的分類會出現(xiàn)餅圖切片過小，讀取困難。當數(shù)據(jù)類別＞5時，我們可以將較小的/不重要的數(shù)據(jù)合并為“其他”。

如果每個數(shù)據(jù)都很重要，合并子數(shù)據(jù)會導致信息顯示不全，可以在外部展開單獨繪制，但要注意合并項與總項的比例大小，避免讓用戶誤解該合并項為重點特寫部分。

3）視覺瀏覽動線繁雜

數(shù)據(jù)排列時，為幫助用戶快速讀取信息，我們需要將數(shù)據(jù)按照某種邏輯順序進行排列，避免用戶視線來回橫跳。

① 按數(shù)據(jù)值大小排列

如數(shù)據(jù)類別無任何邏輯順序，那么我們可以按照數(shù)據(jù)值的大小順序進行排列。除非你的圖表只用作點綴裝飾。

餅圖與玫瑰圖除了按數(shù)據(jù)值大小排列，還應(yīng)注意起始位點，最好從12點鐘方向順時針或逆時針繪制。以及將合并項置于最后。

② 按邏輯順序排列

如果你的數(shù)據(jù)類別帶有連續(xù)性質(zhì)，如時間、量級、年齡等，那么就按照連續(xù)順序排列。

潛在風險

設(shè)計語言、數(shù)據(jù)集和瀏覽動線的繁雜，使得用戶需要自行處理復雜信息，讀取困難、認知成本高。

如何避免

制定視覺規(guī)范、統(tǒng)一有效的視覺編碼，將龐大數(shù)據(jù)集拆分為多個子數(shù)據(jù)組或單一數(shù)據(jù)，按照大小、時間、年齡等邏輯順序排列，幫助用戶降低認知成本。

3. 曖昧

指關(guān)系含糊不明朗，令人難以辨別，常見于視覺編碼近似、圖表選擇失誤。

大多B端設(shè)計師天然喜歡克制、冷靜、理性，經(jīng)常在設(shè)計中使用同類色。但對比類圖表如果使用同類色、鄰近色，在餅圖中尚且可以勉強分辨，但在折線圖中就難以辨別了。

數(shù)據(jù)類別較少時建議選取定性色板中的對比色，數(shù)據(jù)類別多時可在定性色板基礎(chǔ)上進行擴展。

人眼對于面積的敏感度會低于高度/長度，數(shù)據(jù)值差異較小時，不建議使用面積圖，可改用玫瑰圖、條形圖/柱狀圖、異形柱狀圖。

可能有朋友要好奇了，南丁格爾玫瑰圖不是基于面積對比嗎？玫瑰圖是基于半徑進行對比的，具體會在第七點中詳細展開。如下圖，從面積圖至異形柱狀圖，用戶認知敏感度逐漸遞增。

當我們使用面積圖時，兩類數(shù)據(jù)近距離重疊，建議使用透明色，確保信息不會被遮擋。

還有，曖昧要兩個人才是甜甜的，最多可以加一位僚機，當出現(xiàn)第四人，場面開始有點不受控制了。所以數(shù)據(jù)類別≥4類時，建議使用折線圖或柱狀圖。

潛在風險

顏色、圖表選取不當，信息區(qū)分感模糊，容易造成用戶困惑，價值體驗降低。

如何避免

針對不同需求不同場景，選取合適的顏色與圖表，幫助用戶快速辨別。

4. 失焦

即層級模糊，無法對焦核心信息。

與剛才的曖昧不同，失焦指在傳遞某一個核心信息時層級模糊，數(shù)據(jù)之間是有層級關(guān)系的；而曖昧指在展示數(shù)據(jù)集時分辨邊界模糊，數(shù)據(jù)之間是平級的。

例如在匯報提案場景，有想要著重傳達的核心觀點結(jié)論。此時我們可弱化次要數(shù)據(jù)，強調(diào)主要數(shù)據(jù)，以突顯關(guān)鍵信息；亦或者在查看基金業(yè)績走勢場景，用戶更關(guān)注的是當前所選基金的走勢詳情，同類均值與滬深300只是參照物。

潛在風險

特殊情況下，信息層級模糊，用戶需要主動獲取信息，不利于核心業(yè)務(wù)信息的高效傳達。

如何避免

通過顏色明度對比、特殊樣式，按需強調(diào)主數(shù)據(jù)、淡化次要數(shù)據(jù)，幫助用戶直接接收核心信息，提高傳達效率與準確性。

5. 浮夸

即虛幻夸張，不切實際。

這是很多設(shè)計師常犯的錯誤，總是忍不住地添加視覺效果，影響了數(shù)據(jù)真實性卻不自知。以下的柱狀圖，你能快速地告訴我1月、3月、5月哪個數(shù)據(jù)值更大嗎？折線圖中，你能快速地分辨分辨并讀取信息嗎？

如果這些圖表只做視覺點綴作用，不承載信息傳遞作用，那么是勉強可用的。但如果你需要傳遞信息，讓用戶讀取，那么建議你放棄3D、物理投影、擬物質(zhì)感，除非你是在VR場景中使用它們。

還有很多設(shè)計師喜歡用的大圓角，圓頭端點讀取困難且不精準，是讀端點還是圓心呢？

端點只此一個點，單憑一個小點如何精確讀值？

在堆疊圖中更會因為圓角之間的間隙丟失數(shù)值，請問圖二的間隙應(yīng)該計算在數(shù)值內(nèi)嗎？算在哪個屬性之內(nèi)呢？

如果你的數(shù)據(jù)集屬于展示類，在常駐數(shù)據(jù)標簽的存在下，你是可以使用大圓角的。在業(yè)務(wù)類數(shù)據(jù)集，還是建議大家使用平角或小圓角（1~5pt即可）。

還有這種嵌套式的環(huán)狀圖，相關(guān)從業(yè)人員或許能清楚的判斷3個數(shù)據(jù)值大小，但是普羅大眾未必就能清楚判斷了。

我們將其拆開，你能清楚地發(fā)現(xiàn)藍色百分比最高，但是黃色的視覺重量明顯最大。百分比值與視覺重量不符，容易影響用戶判斷，并且空間利用率低。

潛在風險

浮夸的3D效果、質(zhì)感效果、大圓角效果、異形效果，在業(yè)務(wù)數(shù)據(jù)集的可視化中容易丟失數(shù)據(jù)、信息讀取困難、浪費空間。

如何避免

去掉一切浮夸樣式，回到可視化本質(zhì)：清晰、高效、準確地傳遞信息，而不是讓用戶猜測、計算。

6. 失真

即失去本意或本來的面貌，信息傳遞錯誤。

我們常見的平滑曲線圖，相較于折線圖，多了一份柔美、自然與律動感。但是請注意，曲線在用戶心智當中是一組連續(xù)的數(shù)據(jù)，是真實的趨勢，曲線上任意一點都會對應(yīng)一個真實的數(shù)據(jù)。而折線圖在用戶心智中是一組有限的數(shù)據(jù)進行連接，方便查看大致趨勢。

例如當你只測量了整點時刻的溫度，為了美觀繪制了平滑曲線，用戶可能會認為12:30時，溫度為20°。但這并非真實的，誰知道是12點后緩慢降溫，還是突然降溫呢？

如果我們用鋼筆工具在相同的幾個點當中繪制平滑曲線，我們可以獲得無數(shù)種可能性，這就是平滑曲線的失真原因。

在業(yè)務(wù)數(shù)據(jù)集中，我們需要考慮更多可能會發(fā)生的情況，例如出現(xiàn)了缺失的數(shù)據(jù)點?！翱铡迸c“0”是完全不同的概念，我們不能擅自為該數(shù)據(jù)點添加“0”值，而是真實的反應(yīng)存在數(shù)據(jù)缺失。

潛在風險

設(shè)計偏離用戶心智與擅自定義數(shù)據(jù)，造成數(shù)據(jù)不真實，使用戶接收到錯誤的信息。

如何避免

盡可能考慮更多的場景，與用戶心智保持一致性，杜絕擅自修改數(shù)據(jù)，真實反映數(shù)據(jù)情況。

7. 誤導

即錯誤的引導，讓用戶接收到錯誤的信息。

誤導是7宗罪當中最嚴重的，前面幾條多是基于無心之失，而誤導卻是刻意而為的。

商業(yè)活動中，所有項目都是圍繞著商業(yè)價值的，我們不能否認設(shè)計是帶著商業(yè)考量展開的。所以為了商業(yè)目的，或多或少會存在一些“美化”作用，為的是數(shù)據(jù)更好看或者更能為商業(yè)目標服務(wù)。我們作為B端設(shè)計師，甚至是C端設(shè)計，都應(yīng)該真實地反映數(shù)據(jù)，而不是欺騙我們的用戶。

我們在第三點曖昧中提到，建議數(shù)據(jù)值差異較小時使用玫瑰圖。仔細看會發(fā)現(xiàn)玫瑰圖每個扇形角度是一致的，但半徑不同。由扇形面積S=nπr2/360可得，數(shù)據(jù)類別的面積對比由r2決定，也就是半徑的平方，它放大了數(shù)據(jù)之間的差異。

這一解釋，似乎玫瑰圖存在失真情況，但玫瑰圖的真實對比不是基于面積，而是基于半徑，面積只是在視覺上放大了不易觀察的較小差異。

你可以理解玫瑰圖是一種扇形的、旋轉(zhuǎn)排布的柱狀圖。畢竟事物都具有雙面性，我們可以用玫瑰圖放大較小的差異感知，但是不可以用于夸大差異、傳遞某種美好的假象。其他“美化”手段也是如此。

Y軸標簽的起始值選取，是提案、匯報中較為常見的一種美化手段。當取值非0時，數(shù)據(jù)差異被直接拉大。

如左圖5月銷量看似是1月的25倍，但實際情況是它們只相差將近2倍。我們秉承真實反映的原則，Y軸起始值應(yīng)從0開始。當數(shù)據(jù)存在負值時，可根據(jù)實際情況選擇負值起始值。

潛在風險

用戶被刻意引導，接收了錯誤的信息，容易造成信任危機，且違反了真實原則。

如何避免

真實反映數(shù)據(jù)，放棄“美化”手段，真實引導用戶讀取真實信息，不要欺騙用戶。

三、圖標設(shè)計走查表

我特意整理了一份圖表設(shè)計走查表，在此分享出來，希望它能幫助到大家，如果你在使用過程中有任何問題請務(wù)必向我反饋，作為體驗設(shè)計師我很注重用戶反饋的，嘿嘿～讓我們一起持續(xù)迭代這個走查表。

最后

以上就是本文的所有內(nèi)容啦，如果你有什么B端相關(guān)問題，歡迎和我一起交流。在此也感謝有贊設(shè)計師@美芳的指導，一群人才能跑得更快一點。

參考資料

http://www.aharts.cn/data-analysis/4197825.html

https://www.yuque.com/books/share/0cec1b86-5c3d-4a31-8a2e-a2dd00ab917f?#

https://appo8jahz3e4635.h5.xiaoeknow.com/v1/course/column/p_6007ced1e4b0ab9a254ac006?is_redirect=1&pro_id=p_6007ced1e4b0ab9a254ac006&scene=%E9%82%80%E8%AF%B7%E9%93%BE%E6%8E%A5&share_type=5&share_user_id=u_5f675e0e1be1e_PNfrKK2u4m&sw=1%20&type=3&wxwork_userid=ZhuLinLin

https://medium.com/m/global-identity?redirectUrl=https%3A%2F%2Fmedium.muz.li%2Fdataviz-sins-976f3a08948c

https://www.zhihu.com/question/20855952

作者：梁17，微信公眾號：梁17

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

題圖來自Unsplash，基于CC0協(xié)議。