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

在B端設(shè)計(jì)中，圖表設(shè)計(jì)是一個(gè)不可忽視的板塊，那么你知道要怎樣才能做好圖表設(shè)計(jì)，既清晰地傳遞出信息、且在展示上也可以更加美觀和高級(jí)嗎？本篇文章里，作者便總結(jié)了B端圖表設(shè)計(jì)的相關(guān)原則，一起來(lái)看看吧，也許會(huì)對(duì)你有所啟發(fā)。

最近幾年以來(lái)，大家能看到B端設(shè)計(jì)趨勢(shì)已經(jīng)越來(lái)越火熱，在B端設(shè)計(jì)中關(guān)于圖表的設(shè)計(jì)算是為數(shù)不多的視覺(jué)發(fā)揮點(diǎn)了。那么怎樣才能做好圖表設(shè)計(jì)，讓設(shè)計(jì)出來(lái)的圖表高大上，符合業(yè)務(wù)需求，讓業(yè)務(wù)方和總監(jiān)對(duì)你贊不絕口，本文就必須看完和收藏了，因?yàn)閷?shí)在是太實(shí)用！

彩云之前也分享過(guò)一篇關(guān)于數(shù)據(jù)可視化的干貨，《如何做好數(shù)據(jù)可視化設(shè)計(jì)，國(guó)外大神給出了十條實(shí)用建議》，今天的這篇算是更加系統(tǒng)和完善了。

應(yīng)用設(shè)計(jì)越來(lái)越依賴數(shù)據(jù)驅(qū)動(dòng)，對(duì)高質(zhì)量的數(shù)據(jù)可視化需求也越來(lái)越高。然而我們身邊卻充斥著令人困惑和誤導(dǎo)的數(shù)據(jù)圖表，但我們其實(shí)可以通過(guò)遵循一些簡(jiǎn)單的規(guī)則來(lái)改變這個(gè)情況。

一、選擇一個(gè)正確的圖表可視化類型

選擇錯(cuò)誤的圖表類型，或默認(rèn)為最常見(jiàn)的數(shù)據(jù)可視化類型，可能會(huì)讓用戶感到困惑或?qū)е聦?duì)數(shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容，可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時(shí)都能從數(shù)據(jù)集類型分析和用戶訪談開(kāi)始。

二、根據(jù)正負(fù)值使用正確的繪圖方向

當(dāng)使用水平條時(shí)，在基線的左側(cè)繪制負(fù)值，在右側(cè)繪制正值。不要在基線的同一側(cè)繪制負(fù)值和正值。

三、條形圖總是以0基線開(kāi)始

刪數(shù)據(jù)起點(diǎn)會(huì)導(dǎo)致曲解。在下面的例子中，看左邊的圖表可以很快的得出結(jié)論，值B比D大3倍多，而實(shí)際上，兩者的差異要小得多。從0開(kāi)始可以確保用戶獲得更準(zhǔn)確的數(shù)據(jù)表示。

四、折線圖應(yīng)該要清晰體現(xiàn)y軸上的趨勢(shì)變化

對(duì)于折線圖，總是限制y軸比例從0開(kāi)始可能會(huì)使圖表幾乎平坦。由于折線圖的主要目標(biāo)是表示趨勢(shì)，因此根據(jù)給定時(shí)期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。

五、使用折線圖時(shí)要考慮時(shí)間連貫性

折線圖是由線連接的“標(biāo)記”組成，通常用于可視化時(shí)間間隔內(nèi)的數(shù)據(jù)趨勢(shì)。這有助于說(shuō)明數(shù)值是如何隨時(shí)間變化的，并且對(duì)于較短的時(shí)間間隔非常有效，但當(dāng)數(shù)據(jù)更新不頻繁時(shí)，這可能會(huì)導(dǎo)致混淆。

例如: 使用折線圖來(lái)代表年度收入，如果數(shù)據(jù)是每月更新的，則每個(gè)月在圖表中會(huì)生成一個(gè)個(gè)孤立的標(biāo)記點(diǎn)。用戶可能會(huì)假設(shè)連接“標(biāo)記”的線代表實(shí)際值，而在特定時(shí)間實(shí)際的收入數(shù)字是未知的，所以可能會(huì)產(chǎn)生誤會(huì)。在這種情況下，使用垂直條形圖可能是一個(gè)更好的選擇。

六、不把折線圖強(qiáng)行“平滑”

平滑的折線圖可能在視覺(jué)上很好看，但它們錯(cuò)誤地反映了背后的實(shí)際數(shù)據(jù)，而且過(guò)粗的線會(huì)模糊真正的“標(biāo)記”位置。

七、避免使用比例不同的雙軸折線圖

通常，為了節(jié)省可視化空間，當(dāng)有兩個(gè)具有相同度量但大小不同的數(shù)據(jù)系列時(shí)，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導(dǎo)的方式代表了兩個(gè)數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會(huì)密切關(guān)注比例，只是瀏覽圖表，然后就得出了錯(cuò)誤的結(jié)論。

八、限制餅圖中顯示的切片數(shù)量

餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但如果你決定做一個(gè)餅狀圖，有2個(gè)比較好的建議：

1. 不要超過(guò)5-7片，保持簡(jiǎn)單；
2. 可以將額外的最小段分組到“其他”切片。

九、在圖表上直接標(biāo)注

如果沒(méi)有適當(dāng)?shù)臉?biāo)簽，無(wú)論你的圖表有多好，它都不會(huì)有意義。直接在圖表上標(biāo)注對(duì)所有用戶都非常有幫助。查閱圖例需要時(shí)間和精力來(lái)理清數(shù)據(jù)和對(duì)應(yīng)的部分。

十、不要在切片上貼數(shù)據(jù)

將數(shù)據(jù)放在切片上可能會(huì)導(dǎo)致多個(gè)問(wèn)題，在可讀性問(wèn)題上和窄切片上都會(huì)有挑戰(zhàn)。相反，添加黑色標(biāo)簽?zāi)芮逦逆溄拥矫總€(gè)部分。

十一、保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時(shí)，有幾種常用的方法：

1. 將最大的切片放在12點(diǎn)的位置，然后將下一片切片順時(shí)針降序排列；
2. 把最大的切片放在12點(diǎn)的位置，第二大的放在順時(shí)針相鄰位置，第三大的放在11點(diǎn)的位置，其余的切片按順時(shí)針降序排列。

十二、避免隨機(jī)排列

同樣的建議也適用于其他許多圖表。不要默認(rèn)采用字母排序，將最大的數(shù)值放在頂部(對(duì)于水平條形圖)或左側(cè)(對(duì)于垂直條形圖)，以確保最重要的數(shù)值占據(jù)最突出的空間，減少眼球運(yùn)動(dòng)和閱讀圖表所需的時(shí)間。

十三、窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因?yàn)楸容^相似的值非常困難。當(dāng)我們把中間部分去掉，創(chuàng)建一個(gè)圓圈圖表時(shí)，我們騰出了空間來(lái)顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會(huì)變得毫無(wú)用處。

十四、視覺(jué)效果不要搶了數(shù)據(jù)風(fēng)頭

不必要的造型不僅會(huì)分散注意力，還可能導(dǎo)致對(duì)數(shù)據(jù)的誤解和用戶的錯(cuò)誤印象。你應(yīng)該避免：

1. 3D元素，明暗面；
2. 陰影、漸變和其他扭曲的多彩色；
3. 斑馬圖案，過(guò)多的網(wǎng)格線；
4. 過(guò)度裝飾，斜體，粗體或襯線字體。

十五、選擇與數(shù)據(jù)性質(zhì)相匹配的調(diào)色板

顏色是有效的數(shù)據(jù)可視化的組成部分，在設(shè)計(jì)時(shí)考慮以下3種顏色類型：

一個(gè)定性調(diào)色板最適合顯示分類變量。為確保易用性，所分配的顏色應(yīng)該是不同的。

連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合，可以創(chuàng)建一個(gè)連續(xù)的顏色集。

發(fā)散調(diào)色板是兩個(gè)連續(xù)調(diào)色板的組合，中間有一個(gè)中心值（通常為0）。通常不同的調(diào)色板將傳達(dá)積極和消極的價(jià)值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。

看看一個(gè)方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調(diào)色板。

十六、設(shè)計(jì)的可訪問(wèn)性

根據(jù)美國(guó)國(guó)家眼科研究所（National Eye Institute）的數(shù)據(jù)，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問(wèn)時(shí)才會(huì)成功。

1. 在調(diào)色板中使用不同的飽和度和亮度；
2. 把現(xiàn)有配色去色然后檢查對(duì)比度和可讀性。

十七、關(guān)注易讀性

確保排版能夠準(zhǔn)確傳達(dá)信息，幫助用戶專注于數(shù)據(jù)，而不是分散用戶的注意力。

1. 選擇易讀的字體，避免襯線和裝飾過(guò)度的字體；
2. 避免使用斜體、粗體和全部大寫；
3. 確保與背景有高對(duì)比度；
4. 不要旋轉(zhuǎn)文字。

十八、使用水平條形圖代替旋轉(zhuǎn)標(biāo)簽

這個(gè)簡(jiǎn)單的技巧將確保用戶能夠更有效地閱讀圖表，而不會(huì)扭傷他們的脖子。

十九、事先選擇合適的圖表庫(kù)

如果你的任務(wù)是在web和移動(dòng)項(xiàng)目中添加交互式圖表，你應(yīng)該問(wèn)的第一個(gè)問(wèn)題是我們將使用什么圖表庫(kù)?現(xiàn)代圖表庫(kù)包含了許多前面提到的交互和規(guī)則。基于已定義庫(kù)的設(shè)計(jì)將確保易于實(shí)現(xiàn)，并能提供大量交互想法。

二十、做成動(dòng)態(tài)圖表

幫助用戶通過(guò)改變參數(shù)，可視化數(shù)據(jù)進(jìn)行探索。然后得出結(jié)論，最大化價(jià)值和洞察力。在下面的示例中，你可以看到IOS Health應(yīng)用使用了各種數(shù)據(jù)表示的組合。