乾貨滿滿!移動數據可視化的圖表設計
GIF
只缺一個UED
1
前言
1.概念
圖表泛指在屏幕中顯示的,可直觀展示統計信息屬性(時間性、數量性等),對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構,是一種很好的將對象屬性數據直觀、形象地「可視化」的手段。
2.使用場景
(1)比較數據差異情況。基於分類的數據,可以通過比較數據來了解不同分類的差異,比如柱狀圖。基於流程的數據,可以通過比較數據了解數據的變化趨勢,比如折線圖。
(2)分析數據關聯情況。展現數據間相互關係和數據的流向。
(3)查看數據分布情況。對於錯綜複雜的變數之間關係,可以通過圖表來找出規律。
(4)了解數據構成情況。發現各變數的佔比情況,比如餅圖。
3.原則
(1)輕量。眾所周知表格是可以承載數據的全面性,但將相同的數據用可視化展示時,設計師總想將所有的信息堆砌在圖表上,顯得圖表非常笨重,因此增加了用戶的思考時間。在此建議明確你圖表類型的特點,將主要信息呈現在圖表上或者分層展示圖表,比如數據鑽取功能。
(2)直觀。設計師應該將數據信息清晰而直觀地表達出來,使用戶一眼就能洞察事實,更快地發掘商業價值並作出決策。
(3)美感。缺乏美感的數據可視化僅僅是數據展示。美感包括兩個部分,第一個部分是整體協調美,比如對圖表中的各個元素(標題、網格、坐標軸、縮略軸、圖例、提示信息、預警線和輔助線等)進行合理的排版和使用協調的配色。第二部分是局部細節美,比如設計師根據流行趨勢給圖表加上漸變色。
2
功能
1.標題。包括左對齊、居中對齊和右對齊。在選擇某種對齊方式前,請兼顧圖例的擺放位置。
2.柵格。包含點狀、線狀和斑馬線。
(1)根據數據特點選擇橫縱向輔助線,橫向引導線增強水平方向的導視。縱向引導線增強垂直方向的導視。
(2)線狀建議用虛線,因為不是用戶確定指向值。
3.坐標軸。坐標軸包括X坐標軸、Y坐標軸和次坐標軸。
4.縮略軸。包括滑面和滑柱。
(1)拖動滑柱滑動,增加或較少滑面,從而改變查看密度。
(2)拖動滑面滑動,保持滑面長度,進行前後移動。不改變查看密度,只改變查看範圍。
5.圖例。離散型數據包括橫向排列和縱向排列,連續型數據包括連續圖例。
6.提示信息。包括查看單個數據點和多個數據點。
(1)單變數的浮層提示內容為相同維度下選擇的變數。多變數的浮層提示內容為相同維度下所有的變數。
(2)提示內容遵從表單規範,按照冒號對齊。
(3)拓展:直聯表的圖例是展示所有變數,但是交叉表不是,是「變數+列維度」的排列組合。
GIF
7.預警線。數據超過閾值就會報警,幫助用戶監控數據。
(1)預警線建議用實線,並用警示的顏色引起用戶的注意,最好用郵件或簡訊通知用戶。
8.輔助線。用戶設置某值作為數據參考進行比較,比如設置平均分為參考數值。
(1)輔助線建議用虛線,僅起參考作用。
3
圖表組織
移動設備最大的特點是屏幕小,用戶每次可接收的數據信息量小,所以如何有效組織圖表信息是一個重要的設計點。
1.如何展示單個數據?
鑒於APP屏幕小,單個頁面中就展示一個重要數據,如何設計?
此時選用圓形,會是一個不錯的選擇,因為它在頁面中形成視覺中心。不管是餅狀圖,還是環形圖,或是擁有視覺中心的雷達圖,都會讓頁面上呈現一個視覺重點。
單個數據未免有些單調,為了讓頁面更加豐富,可採用深色、彩色、圖片為背景輔以純色的圖形(如芝麻信用分),或者將像Clue一樣,用重色將圖形撐滿,求得視覺上的飽滿。
2.如何展示主次數據?
要在頁面中展示兩到三種類型的數據,如何設計?
此時要注意以稍大的篇幅突出重點數據,弱化次要數據,盡量讓主次數據的圖表類型不一致,曲線圖、餅圖、環形圖、柱狀圖等基礎圖表,交替使用,這樣使得整個頁面層次清晰,內容豐富。
3.如何展示大量數據?
還有一種類型,整個頁面要分幾大模塊展示大量的數據信息,如何設計?
用戶可能要刷幾屏才能把所有的數據閱讀完,此時,建議每個模塊單獨採用一種圖表類型,各個模塊的圖表類型均不同,這樣會減輕用戶對數據展示的疲勞度。
GIF
4
UI
1.顏色
(1)顏色主題
1)深色背景。適合較少信息內容。
優點:可以通過布局建立良好的視覺層次,深層次地反映內容,而且視覺吸引力強,給人以高端的視覺感受。
缺點:可讀性低。頁面太過聚焦所以對留白的平衡要求較高。
2)淺色背景。適合較多信息內容。
優點:可讀性高,增加了頁面空間。
缺點:內容不聚焦,信息過少則頁面顯得太空。
3)彩色背景。
有時,為了讓頁面更加生動,可以將數據信息展示在大面積色塊上。
商務類APP可採用用藍色、綠色系作為底色。
運動類APP可選用的色彩自由度更高,偏活力的色彩,如橙色、黃色、橘色等都可以。
4)圖片背景。
為了讓數據閱讀更加輕鬆,可採用圖片底。在一些天氣類APP中,這種使用方式比較常見,圖片內容與數據信息產生關聯,提升可讀性。
(2)配色方案。首先要確保顏色數量足夠滿足數據系列在圖表中的展示。
1)使用成熟的色板,比如Flat UI Colors和Material Design Colors。
2)使用流行的元素,比如漸變色。
3)使用情緒板,情緒板是一種藉助於圖像,啟發和探索用戶的體驗,然後再作用於視覺設計的研究方法。 可以調查並形成具有指導意義的「風格感受」和「設計元素」。
(3)顏色生成規則。一個變數統一用一種顏色,再按配色方案依次出每個變數的顏色。 使得同一圖表的色彩搭配和諧且具有美感。
2.布局
視覺層級要符合邏輯層級,利用信息深度引導用戶閱讀。每個元素要保持一致,保證布局的整體協調。
3.動效
動效可以提升產品趣味性,尤其在展示大量數據信息時,使用動效能緩解閱讀壓力。數據圖表中常見的動效有以下幾種:
(1)以時間先後動態呈現數據
GIF
(2)導航切換
GIF
(3)展示更多功能
GIF
(4)屏幕橫縱向切換數據
GIF
(5)增加趣味性
GIF
4.字體
避免有個性的襯線字體,字體要保證清晰可見。字體大小適中,太小影響閱讀,太大容易佔用圖表控制項。
一款字體使用的好,能彰顯整個APP的氣質,讓整個APP特立獨行。CityGuides是一款特別出色的APP,其圖表設計很棒,字體選用也與整個風格設計相得益彰,非常出彩。有興趣的可以網上下載這個字體(Optigiant),非商業用途的情況很受用。
5
總結
1.先懂數據,再談可視化
為此我們要了解圖表類型的適用場景和局限,可以幫助大家通過UI設計更好地展現圖表的特點。
2.真實數據,友好可視化
數據產品不要試圖去掩蓋問題,而要反映真實數據,暴露問題,並且和用戶一同解決。比如對數據閾值進行監測,預警線就是很友好的可視化方式。
3.適配移動端,有效傳達
移動設備最大的特點是屏幕小,用戶每次可接收的數據信息量小,所以如何有效組織圖表信息是一個重要的設計點。
GIF
最後給面給大家安利一個能帶來無限靈感的數據可視化網站
datavizproject.com
關注我們
TAG:只缺一個UED |