以下是具體介紹:
也叫條形圖,條形圖。它是壹個以長方形的長度為變量的統計圖。通常用於比較兩個或多個值。柱形圖有四種常見類型:
垂直柱形圖,最常見的柱形圖;水平柱形圖,壹般按數值大小排列;聚類柱形圖,用於多組數據的比較,強調壹組數據的內部比較;堆積柱形圖用於比較多組數據。與簇柱形圖不同,堆積柱形圖強調壹組數據中部分與整體的關系。
用圓心角度數表示數值的統計圖。常用來表示數據的比例。餅狀圖中各項之和為100%,最適合表達單壹主題,即局部占整體的比例。餅狀圖類型較少,主要有以下三種:
基本餅圖,包括規則餅圖和環形餅圖;半圓餅狀圖,在某些場景下,半圓會更方便排版和對齊。而且便於呈現標簽信息;復合餅狀圖,當餅狀圖切片過多時,可以將最後幾項合並到其他類中,在二級圖中表示這些項的組成。
它是通過線條的波動(上升或下降)來顯示連續數據隨時間或有序類別的變化的圖表。通常用於強調數據的變化或趨勢。折線圖可以分為單線、多線和堆疊線:
單線圖,只顯示壹組數據的波動;多條折線圖,同時顯示多組數據的波動情況;多組堆疊折線圖展示多組數據的波動情況,以及多組數據組合在同壹時間的變化情況。多個數據疊加時(堆積圖),推薦面積圖,不推薦折線圖。
表格是由若幹行和列組成的有序組織形式,可以有效地顯示大量數據。表格的類型有很多種,除了簡單的文字和數字,我們還可以添加圖片、操作等類型。表格是幾種圖表中最多樣化和最特殊的類型。
基本表,靜態純文本類的基本表;內容復合表,結合其他內容類型的更復雜的表格形式;操作復合表時,用戶的行為會對表的樣式或特征產生影響。
使用平滑曲線進行連接。如果數據是連續的、實時的,任意兩點之間的數據是有分析價值的,那麽用[圖形]比用[折線圖]更合適,比如24小時數據。
也就是說,壹個中心為空的餅圖用於顯示進度。除了顯示比例,它還可以用來顯示進度加載和模擬時鐘/定時器設計。
它常用於圖表中,根據地理位置分布和統計壹段時間內的累積數據量(通常是離散的),然後可以分析數據密集區/稀疏區。這是展示效果的好方法。
【雷達圖】在比較多種類型的數據序列和查看整體情況時非常有用,不僅可以查看自身整體發展的平衡情況,還可以從整體上比較兩個序列的優劣。這也是壹種顯示效果很好的數據表達,直觀的顯示整體的綜合信息。
List是壹個常用的表達式。通常我們看到的列表是右邊Spendee的界面,但是有些app試圖將列表中的數據可視化。詳見下圖左中Elevate的界面。
面積圖強調數據隨時間變化的程度。
就是在同壹個圖表中顯示兩種或兩種以上的圖表類型,主要是把不同角度的數據放在同壹個圖表中,以便找到數據之間的相關性。
散點圖常用於顯示兩組數據之間的相關性,可以顯示數據的分布情況。例如,下圖顯示了全年每個訂單的產品數量。
用來顯示三組數據之間的關系,其中壹組數據作為橫坐標,壹組數據作為縱坐標,另壹組數據代表氣泡的大小。
深色背景的圖表通常用於營造氛圍,顯示的數據信息壹般較少。這時候可以用亮色,讓圖表信息很容易跳出暗色。
如果需要清晰顯示大量的數據信息,建議選擇淺色背景,淺色背景上的數據信息識別度比較高。但需要註意的是,如果數據信息量太小,頁面空間會出現在淺色背景上,會讓用戶覺得妳的平臺沒有內容,沒有熱度。當然,這可以通過圖形紋理、顏色等進行優化。
有時為了使頁面更加生動,可以在大面積的色塊上顯示數據信息。
商業應用可以使用藍色和綠色作為背景色。
運動類app可以選擇自由度更高的顏色,比如橙色、黃色、橘色等等。
為了使數據讀取更容易,可以使用圖片底部。在壹些天氣應用程序中,這種用法很常見,圖像內容與數據信息相關聯,以提高可讀性。
原則:以設計師為準。
行長:每行的字符數對整體的可讀性起著重要的作用。如果段落很寬,很嚇人,很難讀。同理,每行文字太短,會給讀者的眼睛帶來壓力,造成混亂。
行距:文本行之間的間距同樣重要。看這篇文章。如果每壹行字都和上下行粘在壹起,妳就看不懂這些句子。
字體風格:字體風格也影響可讀性。簡單的襯線和無襯線字體可讀性最強,容易瀏覽,而那些華麗的書法和新穎的字體最難破譯。
外部邊距和內部邊距:和行距壹樣,元素周圍和元素之間的間距也會影響用戶對文本本身的閱讀。
顏色和對比度:文字顏色和相應的背景也很重要。如果妳在綠色的背景上寫綠色的字,將很難閱讀。設計師選擇深色背景配淺色文字或者深色背景配淺色文字是有原因的。對比使字符易於閱讀。
數據產品的圖表強調數據的準確性,通常零基線是必不可少的。為了強調起始位置,顏色比其他網格線更深。考慮到用戶不同顯示設備的差異,建議至少取94灰度值才能保證清晰識別,顏色太淺在某些設備上顯示不清楚。
如果列的寬度為d,列間距建議在1/2D和d之間,簇柱形圖中兩列間距建議為1/8D。這樣既能保證欄目不太分散——失去數據之間的相關性,又能保證不太密集——保證數據之間的獨立性和舒適閱讀。
壹般我們對於餅狀圖采用的繪制方式是從12點開始,按照用戶的閱讀習慣,從上到下順時針排列扇面。
然而,這種繪圖方法有壹些缺點。在餅圖的上半部分,不重要的最小數據項和最大數據項壹起占據視覺焦點。為了解決這個問題,我們在此基礎上做了壹些優化。同樣,從時鐘的12開始,逆時針畫最大切片,然後回到12,順時針畫第二大切片,依次畫其余切片(圖2-17)。這種方法使得餅狀圖的上半部分,用戶視線的焦點,成為最重要的數據。但這種繪制方式也有壹個小缺點:當有多個餅圖時,每個餅圖的起始位置是不壹樣的(圖中問號標記的位置)。可以根據不同的使用場景選擇不同的餅圖繪制方式。
折線圖常用來表示數據的變化和趨勢,軸的不同對折線的變化幅度影響很大。如果坐標軸的值設置得太高,多段線的變化會太平緩,會掩蓋多段線的變化無法清晰表達的事實。另壹方面,如果坐標軸設置得太低,會使折線變化太陡,誇大折線變化的趨勢。
如何提高圖表的可讀性
數據產品往往充斥著大量的數字和圖表,用戶很容易淹沒在數據的海洋中。除了準確表達這些數據,提高圖表的可讀性也是數據產品中圖表設計的顯著特點。圖表中的文字部分通常是具體的數值及其含義解釋。通過對這些文字的合理排版,用戶可以快速理解圖表,從而達到高效閱讀的目的。
坐標軸的標簽橫向排列,不建議縱向或斜向排列。單詞多的時候不容易讀。柱形圖中某些標簽的使用也適用於折線圖。
柱形圖的標簽排列水平柱形圖壹般簡化坐標,數據值跟隨柱形圖,增加數據墨跡比。
水平柱形圖當軸標簽太長時,垂直柱形圖無法顯示所有軸標簽。有幾種解決方案:
水平柱形圖可用於增加標簽的顯示空間。
顯示主要比例,省略其余數據,並通過交互操作顯示。例如,顯示年份2010 /2011,隱藏並懸停年份中的特定月份。如圖2-22橫坐標所示。高位值可以轉換成單位。比如50萬顯示為50萬,更符合中國人的閱讀習慣,節省空間。如圖2-22所示。
用百分比值顯示在餅圖中。
信息連貫和視覺集中,理論上最合適的位置。但受限於餅狀圖本身的形狀和大小,文本過多時容易溢出。
使用輔助線將其顯示在餅圖周圍的適當位置。
引導線可以有效地將切片與標簽關聯起來,顯示更多的字符。當有許多引導線時,可以調節變形。在數據產品中,通常是活動數據,數值經常在變化,標簽和引導線的位置不固定,很難控制排版。
值和標簽分別顯示。
標簽中的字符數不限,但標簽與餅狀圖分離,需要對照閱讀。
交互式切換標簽顯示在環形圓餅的空白處。
空白部分不受切片大小的影響,標簽和值可以壹起顯示。適合強調每個切片的價值。標簽和切片的對應關系需要通過交互操作來解釋,數據顯示是隱藏的。
文本信息的豎列比較可以很好地形成視覺引導線,符合格式塔心理學中的相似性原理。不同的數據類型有不同的對齊方法。壹般來說,文字左對齊,數據右對齊,方便通過數字位數的長短來比較數據的大小。
指示狀態的文本通常只有幾種固定類型(如已完成、待支付等。),所以可以居中。關系密切的字段可以分組排列,這樣可以加強數據之間的關聯,減少數據組的數量,方便用戶快速定位信息。
首先,必須記住,圖表的任何元素都不能隨意放置。
很多人提倡商業圖表的原因是圖表中的元素沒有壹個是隨機放置的。
該設計圍繞以下四個基本原則:
1.親密
親密原則是指將相關的物品組織在壹起。因為在圖表上,物理上的接近意味著他們之前有有意義的關聯。
對齊
對齊原則是指任何元素都不能隨意放在圖表上,每壹項都要和圖表上的某個東西有某種視覺上的聯系。
重復
重復原則是指設計的某些方面應該在整個作品中重復。
比較
對比原則是指,如果兩個項目不完全相同,就應該使它們不同,完全不同。
B1理順妳們的元素關系[親密細節]
觀察附圖:
第壹張圖表的標題和圖例看似有平行關系,其實沒有平行關系。
這樣的圖表讓人看起來沒有重點,所以根本不會有人看圖表的標題。
觀眾會不知所措。這是什麽圖?
記住:圖表元素中圖表標題的意義是告訴觀眾圖片是關於什麽的。
第二個把標題和圖例按空間和大小分成兩組,這樣好很多。
觀眾看到圖表中標題較大的文字,會立刻明白妳想通過圖表表達什麽。
B2專業[路線詳情]
妳我其實在Excel應用中已經不自覺的使用了這個原理,很多時候妳我使用的可能是居中對齊。
尤其是Excel圖表的標題默認是這樣的。
但是妳要知道,左右對齊給人的視覺效果更強。
通常最好是將文本的邊緣與圖表的核心遠程對齊。
這裏有兩個概念需要討論:
柔軟:
中心對齊的邊界就是中心線,這個中心線在人類視覺中的概念是模糊的。兩邊大量的空白會讓人有安全感,但卻體現了妳的懦弱。
硬:
不管妳喜不喜歡,海圖的坐標和邊框總是給人壹種生硬的感覺,與這些對齊會讓圖紙呈現出硬朗的感覺,讓人信服。
下面這個例子,3號比其他的好很多,最差的是1號。
B3不要讓妳的圖表失去統壹性【重復原理詳解】
為了整體性,妳甚至可以在自己的圖表中使用壹定的重復,讓別人看到這個重復就知道這個圖表是妳的作品。
在圖表設計中,重復性原則有兩個應用。
首先是顏色。在使用顏色之前,壹定要明確顏色的大面積,尤其是圖表區的背景。
使用會減少圖表核心訴求的表達面積,降低圖表的表現力。
看圖標№ 1
第二次重復是元素中的同壹格式,會讓觀眾清楚地理解元素之間的層級關系。
重復的原則可以讓妳的圖表看起來更簡單,可讀性更強。
比如字體的大小,字體的類別。
請盡量不要超過圖表中壹種字體和兩種字體大小的限制,因為字體就是形狀。
看圖№ 2
總之:圖表中不要有太多的字符。坐標軸上的字符是圖表字符相對集中的區域,請謹慎處理坐標軸。
圖表重點關註的是:潛力/差異/趨勢。這是表達妳的目標和要求的壹種方式。
如果有太多的潛在/差異/趨勢信息,其他信息幹擾圖表的目標吸引力的表現並不明顯
不要覺得圖表上有些元素是不可侵犯的,大膽的去掉,比如坐標軸、網格線、繪圖區、背景、邊框。
看圖№ 3
記住壹個原則:所有的字符和信息必須至少3秒才能理解妳的圖表。
B4。強烈表達妳的要求[比較並解釋]
妳的目的是什麽:妳打算用圖表來說明什麽問題?為了說明這個問題,請大膽使用對比。
它會有力地幫助妳完成這個表達。
對比壹定要強烈,不要退縮和偷懶。不管是有意識的還是無意識的,大多數人很少使用對比原則,但在這個問題上卻經常出錯。
需要註意的是,如果對比不強烈(比如3號字體和4號字體),就不算對比,反而會變成沖突。在觀眾看來,這樣的設計更像是壹個錯誤。
在圖表設計中,可以通過多種方法實現對比,如字體大小、字體顏色、形狀[點、線、面]等。
通常情況下,我們需要使用上述方法來實現比較。
最好的比較切入點是:顏色和大小或面積。
如果妳的圖表上顏色不多:比如只有白色和黑色,妳只需要把其中壹個元素改成紅色,對比效果就完全不壹樣了。
但是在字體的使用上要註意:同壹個圖表中壹個元素的對比效果不能出現兩次【比如字體的類別和顏色】。
永遠記住:請保持整個圖表的布局在焦點上,焦點是唯壹的。
附圖右側的圖表向觀眾清楚地傳達了以下信息:
壹個更大的字體用來顯示這張圖片做了什麽,壹個強烈的紅色用來顯示當前的進展如何。
註意:
這裏色彩的運用,紅色把觀眾的註意力集中在當前的進度上,他因為太強烈而成為關註的焦點。
在圖表的標題中使用大字已經成為幫助解釋當前進展的必要信息。
左側的表現相應要差很多。