他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

圖表設(shè)計總結(jié)┃數(shù)據(jù)可視化的精益之道

2020-2-6    前端達人

1.png



數(shù)據(jù)可視化是傳達信息的最好的方法之一,它可以直觀地呈現(xiàn)數(shù)據(jù),快速吸引用戶的注意力。但是如果設(shè)計師對圖表設(shè)計的理解有偏差,在界面呈現(xiàn)上可能會對用戶產(chǎn)生錯誤的引導(dǎo),因此筆者結(jié)合自己的工作經(jīng)驗對圖表設(shè)計進行總結(jié),希望每位設(shè)計師都能成為優(yōu)秀的數(shù)據(jù)搬運工。

下面我將從功能、交互和UI深挖圖表設(shè)計的各個知識點,敲黑板劃重點咯~

2.png




前言

1.概念
圖表泛指在屏幕中顯示的,可直觀展示統(tǒng)計信息屬性(時間性、數(shù)量性等),對知識挖掘和信息直觀生動感受起關(guān)鍵作用的圖形結(jié)構(gòu),是一種很好的將對象屬性數(shù)據(jù)直觀、形象地“可視化”的手段。

如果說表格可以承載數(shù)據(jù)的全面性,那么圖表可以完美展現(xiàn)數(shù)據(jù)的特點和變化,它對數(shù)據(jù)的解讀能力是表格無法做到的。



3.png


2.使用場景


4.png


(1)比較數(shù)據(jù)差異情況。基于分類的數(shù)據(jù),可以通過比較數(shù)據(jù)來了解不同分類的差異,比如柱狀圖。基于流程的數(shù)據(jù),可以通過比較數(shù)據(jù)了解數(shù)據(jù)的變化趨勢,比如折線圖。
(2)分析數(shù)據(jù)關(guān)聯(lián)情況。展現(xiàn)數(shù)據(jù)間相互關(guān)系和數(shù)據(jù)的流向。比如桑葚圖。
(3)查看數(shù)據(jù)分布情況。對于錯綜復(fù)雜的變量之間關(guān)系,可以通過圖表來找出規(guī)律。比如利用氣泡圖進行回歸分析。
(4)了解數(shù)據(jù)構(gòu)成情況。發(fā)現(xiàn)各變量的占比情況,比如餅圖。

3.原則

5.png



(1)輕量。眾所周知表格是可以承載數(shù)據(jù)的全面性,但將相同的數(shù)據(jù)用可視化展示時,設(shè)計師總想將所有的信息堆砌在圖表上,顯得圖表非常笨重,因此增加了用戶的思考時間。在此建議明確你圖表類型的特點,將主要信息呈現(xiàn)在圖表上或者分層展示圖表,比如數(shù)據(jù)鉆取功能。
(2)直觀。設(shè)計師應(yīng)該將數(shù)據(jù)信息清晰而直觀地表達出來,使用戶一眼就能洞察事實,更快地發(fā)掘商業(yè)價值并作出決策。
(3)美感。缺乏美感的數(shù)據(jù)可視化僅僅是數(shù)據(jù)展示。美感包括兩個部分,第一個部分是整體協(xié)調(diào)美,比如對圖表中的各個元素(標題、網(wǎng)格、坐標軸、縮略軸、圖例、提示信息、預(yù)警線和輔助線等)進行合理的排版和使用協(xié)調(diào)的配色。第二部分是局部細節(jié)美,比如設(shè)計師根據(jù)流行趨勢給圖表加上漸變色。

功能

6.png



我將用一種最復(fù)雜的圖表類型-雙軸圖當(dāng)作示范。

1.標題。包括左對齊、居中對齊和右對齊。在選擇某種對齊方式前,請兼顧圖例的擺放位置。


7.png

2.柵格。包含點狀、線狀和斑馬線。
(1)根據(jù)數(shù)據(jù)特點選擇橫縱向輔助線,橫向引導(dǎo)線增強水平方向的導(dǎo)視。縱向引導(dǎo)線增強垂直方向的導(dǎo)視。
(2)線狀建議用虛線,因為不是用戶確定指向值。

8.png



3.坐標軸。坐標軸包括X坐標軸、Y坐標軸和次坐標軸。
(1)X軸刻度方向的改變,如果維度過多,則橫向刻度的展示范圍有限。在沒有縮略軸的情況下,需要適當(dāng)改變刻度的角度(0~90度為宜)節(jié)省空間,但是要遵從人的閱讀習(xí)慣是從左到右的規(guī)則。
(2)Y軸初始值定為0,如果不是,則無法體現(xiàn)數(shù)據(jù)的全面性。如果數(shù)據(jù)的波動比較小有意義的(例如,在股票市場數(shù)據(jù)中),你可以截斷刻度以顯示這些差異。
(3)Y軸刻度值盡量轉(zhuǎn)化為千位分隔符,如K,M,B。
(4)Y軸最大值取值要恰當(dāng),保證圖表占據(jù)2/3以上。


9.png



4.縮略軸。包括滑面和滑柱。

(1)拖動滑柱滑動,增加或較少滑面,從而改變查看密度。

(2)拖動滑面滑動,保持滑面長度,進行前后移動。不改變查看密度,只改變查看范圍。


10.png



5.圖例。離散型數(shù)據(jù)包括橫向排列和縱向排列,連續(xù)型數(shù)據(jù)包括連續(xù)圖例。
(1)所有圖表類型的排列方式要統(tǒng)一,所以要考慮整體的圖表空間是適合橫向排列,還是縱向排列。
(2)所有形式總長度超過內(nèi)容區(qū)換行或換列。
(3)雙軸圖包含了2種圖表類型,不同類型的圖例樣式要有所區(qū)分。
(4)連續(xù)型數(shù)據(jù)通過漸變色來展示數(shù)據(jù)大小的變化。


11.png




6.提示信息。包括查看單個數(shù)據(jù)點和多個數(shù)據(jù)點。
(1)單變量的浮層提示內(nèi)容為相同維度下選擇的變量。多變量的浮層提示內(nèi)容為相同維度下所有的變量。
(2)提示內(nèi)容遵從表單規(guī)范,按照冒號對齊。
(3)拓展:直聯(lián)表的圖例是展示所有變量,但是交叉表不是,是“變量+列維度”的排列組合


12.png



7.預(yù)警線。數(shù)據(jù)超過閾值就會報警,幫助用戶監(jiān)控數(shù)據(jù)。
(1)預(yù)警線建議用實線,并用警示的顏色引起用戶的注意,最好用郵件或短信通知用戶。

8.輔助線。用戶設(shè)置某值作為數(shù)據(jù)參考進行比較,比如設(shè)置平均分為參考數(shù)值。
(1)輔助線建議用虛線,僅起參考作用。

交互

1.加載方式。加載動畫建議使用和圖表相關(guān)的樣式。


13.png

2.排除異常值。允許用戶剔除高度異常點,因為異常值會影響用戶對整個圖表的分析。

14.png

3.數(shù)據(jù)鉆取。單擊某個數(shù)據(jù)可以看到該數(shù)據(jù)的詳細信息,變換分析的粒度。

15.png

4.適配
(1)增減留白。圖表大小固定不變,只是增減留白空間。
(2)等比縮放。圖表的長寬都以相同比例縮放。

16.png



UI

1.顏色
(1)顏色主題
1)深色背景。適合較少信息內(nèi)容。
優(yōu)點:可以通過布局建立良好的視覺層次,深層次地反映內(nèi)容,而且視覺吸引力強,給人以高端的視覺感受。
缺點:可讀性低。頁面太過聚焦所以對留白的平衡要求較高。

17.png



2)淺色背景。適合較多信息內(nèi)容。
優(yōu)點:可讀性高,增加了頁面空間。
缺點:內(nèi)容不聚焦,信息過少則頁面顯得太空。

18.png


(2)配色方案。首先要確保顏色數(shù)量足夠滿足數(shù)據(jù)系列在圖表中的展示。
1)使用成熟的色板,比如Flat UI Colors和Material Design Colors。
2)使用流行的元素,比如漸變色。
3)使用情緒板,情緒板是一種借助于圖像,啟發(fā)和探索用戶的體驗,然后再作用于視覺設(shè)計的研究方法。 可以調(diào)查并形成具有指導(dǎo)意義的“風(fēng)格感受”和“設(shè)計元素”。


19.png



(3)顏色生成規(guī)則。一個變量統(tǒng)一用一種顏色,再按配色方案依次出每個變量的顏色。 使得同一圖表的色彩搭配和諧且具有美感。


20.png

(4)視覺缺陷。世界上有一部分人群有視覺缺陷,他們無法通過顏色來得到來精準地區(qū)分圖表的維度和變量。作為設(shè)計師不能忽略這部分較為龐大的特殊群體。

21.png

設(shè)計師常用的PS和AI提供了模擬紅色盲和綠色盲的校樣設(shè)置,選擇“視圖—校樣設(shè)置—紅色盲型/綠色盲型”。

22.png



想要從根本上解決這個問題,推薦一篇騰訊設(shè)計師的文章信息圖形中的顏色探討—面向色盲人士友好的設(shè)計解決方案

2.布局
視覺層級要符合邏輯層級,利用信息深度引導(dǎo)用戶閱讀。每個元素要保持一致,保證布局的整體協(xié)調(diào)。

23.png

3.插畫
符合主題和整體基調(diào),簡單易懂,數(shù)據(jù)可視化具有一定的認知門檻,有時候需要插畫來提高用戶的理解力。

24.png



4.留白
信息過多容易造成視覺壓力,合理的留白可以增強用戶對信息的吸收能力。

5.字體
避免有個性的襯線字體,字體要保證清晰可見。字體大小適中,太小影響閱讀,太大容易占用圖表控件。普通字體大概12px,標題用14px。

工具

1.使用大廠開放的圖表庫
圖表庫的圖表類型豐富且統(tǒng)一,而且大大節(jié)省了開發(fā)時間,比如百度的Echart阿里的G2

2.在專業(yè)數(shù)據(jù)分析網(wǎng)站獲取靈感
筆者剛開始學(xué)習(xí)數(shù)據(jù)可視化就是拿著數(shù)據(jù)表格不停地在競品上摸索,作為一名用戶去感受這些圖表的交互體驗。這里推薦一份數(shù)據(jù)可視化網(wǎng)站名單

總結(jié)

1.先懂?dāng)?shù)據(jù),再談可視化
為此我們要了解圖表類型的適用場景和局限,可以看33種經(jīng)典圖表類型總結(jié),輕松玩轉(zhuǎn)數(shù)據(jù)可視化。了解這些可以幫助大家通過UI設(shè)計更好地展現(xiàn)圖表的特點。比如展示各地區(qū)的人口密度,可以用柱狀圖來展示,但是我們發(fā)現(xiàn)用地圖會更加接近用戶的期望。

2.為了數(shù)據(jù),過度可視化
很多時候設(shè)計師在圖表上很難展現(xiàn)自己的設(shè)計功力,從而會給圖表增加過多的視覺效果,比如3D效果。

3.真實數(shù)據(jù),友好可視化
數(shù)據(jù)產(chǎn)品不要試圖去掩蓋問題,而要反映真實數(shù)據(jù),暴露問題,并且和用戶一同解決。比如對數(shù)據(jù)閾值進行監(jiān)測,預(yù)警線就是很友好的可視化方式。


轉(zhuǎn)自:簡書

作者:idatadesign

鏈接:https://www.jianshu.com/p/816f10b7d594

來源:簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。




藍藍設(shè)計m.ssll180.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)







日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.ssll180.com

存檔