信息可視化圖表設計指南!

2021-02-15 數盟

【數盟致力於成為最卓越的數據科學社區,聚焦於大數據、分析挖掘、數據可視化領域,業務範圍:線下活動、在線課程、獵頭服務】

一個人學習太寂寞?數據可視化教學班3999元勁爆2.5折,現價998元!!!課程連結見文末閱讀原文

作者:cherries

出處:ued.baidu

信息可視化包括了信息圖形、知識、科學、數據等的可視化表現形式,以及視覺可視化設計方面的進步與發展。地圖、表格、圖形,甚至包括文本在內,都是信息的表現形式,無論它是動態的或是靜態的,都可以讓我們從中了解到我們想知道的內容,發現各式各樣的關係,達到最終解決問題的目的。信息可視化的意義就是在於運用形象化方式把不易被理解的抽象信息直觀地表現和傳達出來。

我們用一個簡單的例子來說明一下信息可視化:

上圖所示是信任圈,一款基於Google+的信息可視化應用。Google+是一款類似於微博的社交軟體,圖中我們可以看到綠色為相互關注的人,黃色為你關注了他而對方沒有關注你的人,紅色為單方面關注你的人。這樣一個信息圖就可以清楚的反應出在Google+上,人與人之間的信任關係,這一抽象概念。

從上圖看三位名人的信任圈就可以非常清楚明了的了解他們的交友狀態這一更為抽象的概念。1為小甜甜布萊尼,2為英國著名音樂製作人,3為facebook 馬克。而圖表呢?根據道格·紐瑟姆2004年定義,從表現形式的角度「信息圖表」作為視覺工具應包括以下六類:圖表、圖解、圖形、表格、地圖、列表。

信息可視化圖表則隸屬於視覺傳達的一種設計,是以凝練、直觀和清晰的視覺語言,通過梳理數據構建圖形、通過圖形構建符號、通過符號構建信息,以視覺化的邏輯語言對信息進行剖析視覺傳達方式。

(一)圖表類型

信息可視化圖表能使複雜問題簡單化,能以直觀方式傳達抽象信息,使枯燥的數據轉化為具有人性色彩的圖表,從而抓住閱讀群體的眼球。

設計的目的決定了圖表設計的形式,按照形式特點我們常把圖表分為關係流程圖、敘事插圖型、樹型結構圖、時間分布類及空間解構類五種類型。不管何種類型,都是運用列表、對照、圖解、標註、連接等表述手段,使視覺語言最大化的融入信息之中,使信息的傳達直觀化、圖像化、藝術化。

1、關係流程類圖表

我們用語言難以表述清楚的東西,如果藉助於圖形來說明,效果就會好的多。如果想說明的事情需要費勁腦筋、費勁口舌來表述,而且也許自己講起來也會是一團亂麻,即使從頭至尾的給閱讀群體講一遍內容都會有遺漏或亂頭緒的地方。如果有圖形輔助就不一樣了,我們可以迅速的找到表述亮點或表述事件的主幹,這樣能讓你的主題和思路清晰動人。

2、敘事插圖型圖表

敘事性圖表就是強調時間維度,並隨著時間的推移,信息也不斷有變化的圖表。插圖型圖表就是用詼諧幽默的圖畫表達信息的圖表。

3、樹狀結構示意圖

樹狀結構圖具有非常有序的系統特徵,可以把繁複的數據通過分支梳理的方式表達清楚。運用分組,每組再次分類的主體框架表示主從結構,讓數據與示意圖有效的結合在一起。

4、時間表述類示意圖

時間表述類示意圖只要以時間軸為中心加入文字數據即可。從設計的角度來看,將主題融入圖形設計中,挑選重要事件點解讀,就可以使畫面精美,加深理解力度。

5、空間結構類示意圖

運用設計語言把繁雜結構模型化、虛擬化是空間結構示意圖存在的意義。大篇幅的文字講不清楚的事情,也許需要的僅僅是一個簡單的空間結構示意圖。

(二)圖表設計流程

設計流程又是如何的呢?數據內容從哪裡來?圖表內容怎麼取捨?

從上面產出圖中可以看出這個流程需要協作完成,數據需要篩選和整理 ,精準是首要條件,其次是梳理。找出出主線邏輯,篩選次要內容從而進行精心的設計。圖表作為信息傳達中的一種獨特的表現方式,已經滲透到生活的各個方面。它不僅僅是文字的補充說明更可以獨立表現內容。完美的圖表創意是任何人都感到清晰明了的作品。我們現在就來關注它必備的幾大要素。

1、基礎圖形創意

在設計中基礎圖形創意是重中之中,柱狀圖和餅狀圖是最常用的兩種基礎圖形,但是簡單的幾何形態很難給人設計感。通過對基礎圖形的創意來突出設計主題,就可以取得一舉多得、事半功倍的效果。

上面圖片中左右的內容是完全一致的,但右圖即使讀者不詳細關注也可心領神會。

2、高吸引度與視覺亮點

在讀者閱讀過程中,如果想要設計作品始終佔據視覺的主導地位,就需要作品本身具有很好的表現力。這需要我們費盡心思去讓讀者以最直觀的方式去理解作品所要傳達的信息內容。網際網路的發展使信息的更新速度非常快速,從傳統網頁到社交微博,用戶對信息的瀏覽速度也越來越快,高吸引度便是最寶貴的財富點。如下面兩張圖片,風趣幽默的表現手法,時下最新的熱點,都是我們設計的入手點。

3、畫面簡潔明了

圖表設計是直觀的、形象的、準確的、明了的,它的表現手法雖然多種多樣,但是在信息傳達方面始終要堅持可讀性和條理性共存。

上面兩個圖表的優勢就在於簡化了表格信息的同時讓人身臨其境。信息的整理和歸納也並不是越多越好,力求以最精簡的數據產出最清晰的效果,使人一目了然。

4、視覺導向與秩序

圖表的版面設計要充分尊重人們的閱讀習慣,當一張圖表中充斥了大量的信息時,需要設計者合理地利用視線移動規律,將信息順暢有效地傳達給讀者。

如上圖所示,遵循視覺導向規律的設計往往可以提高人們對信息的理解力,給人舒適的閱讀感受。反之,則會失去圖文重點,讓人不解其意,給人以雜亂無章的感覺。

5、象徵圖釋

在圖表設計中,我們儘可能少用文字來表達信息含義,用圖說話,用圖溝通。其實在我們生活中,部分公共標識就已經很好的做到了這一點,公共場所出現的各種導視圖形,就起到了很好的指示說明作用,象徵性圖釋要以受眾廣為前提和目標。

如圖上圖所示,在設計的上要注重保持風格的統一,這樣才能讓人視覺連貫、賞心悅目。

信息圖表不僅優化了傳統的圖文閱讀方式,而且已經成為當下視覺傳達發展的必然趨勢。信息圖表不僅把枯燥的文字、數據變成美好的閱讀體驗,而且刷新了設計師們的設計思維方式,煥發出他們更豐富的設計潛能。

點擊[閱讀原文] 數據可視化在線課程


相關焦點

  • 6 個設計準則讓圖表煥然一新,數據可視化並不難!
    本文是繼《剝繭抽絲做 UI 動效,其實很簡單》之後,又一篇官方設計規範介紹。2017 年 8 月,一群熱情的 Google 設計師、研究人員和工程師聚集在一起,創建了一套全面的數據可視化指南,它涵蓋了顏色、形狀、排版、圖像、交互和動效等所有內容。這次成功的合作促成了 Google 首個專門的數據可視化團隊誕生 (2018 年 5 月成立)。
  • B端互動設計——數據可視化圖表
    在B端設計中,數據可視化是必不可少而且非常重要,越來越多的設計師需要和數據打交道,但是很多設計師不懂可視化當中不同用途的圖表規範,只是單純設計出好看的數據圖表,卻不能給用戶帶來更多的信息和價值。  因此掌握數據可視化能力是設計師必不可少的一個技能,然而目前國內網際網路對於數據的教學不夠全面,這讓很多B端的設計師很苦惱;所以今天我結合自己的工作經驗和大家分享一下——「數據可視化之圖表設計」,為大家梳理一套完整的數據可視化的框架,以及關於可視化設計的基本準則和規範。  幫助大家理解什麼樣的數據對應什麼樣的圖標,了解顏色的意義,知道數據排版的要點。
  • 數據可視化設計過程:面向初學者的循序漸進指南
    原標題:數據可視化設計過程:面向初學者的循序漸進指南導讀:可視化圖表,圖形和儀表中的數據是使數字能夠實際對話的最強大的方式之一。但是,很多剛開始使用的人往往會不知所措,無法下手。本文作者詳細解讀了關於數據可視化圖表設計如何循序漸進的過程,以便大家在將電子表格轉換為可視化圖表時可以明確要執行的第一,第二和第三步,供大家一同參考和學習。步驟1:分析目標對象首先,我們必須做一些計劃,先不要急著馬上從圖形下手。從長遠來看,一點點的前期計劃可以節省數小時的血液,汗水和眼淚。我們最先需要分析的是目標受眾群體。
  • Excel商務圖表設計,從數據到圖表,變身可視化達人
    前言圖表是語言表達的一種重要形式,它藉助於各種可視化的組件,通過展示數據間的對比,達到傳遞信息、表達觀點或發現數據背後的趨勢等目的。本期將通過可視化組件、從數據到圖表2個部分簡單說明下商務圖表的設計可視化組件可視化組件分為四種:視覺暗示、坐標系、標尺、背景信息 不同組件組合在一起,有時它們直接顯示在可視化圖形中,有時候它們則形成背景圖,這都取決於數據本身。
  • 數據可視化大屏設計實戰分享
    重點概覽:了解數據可視化圖表設計指南;具體設計思路;大屏優化設計總結一、了解數據可視化可視化是為了幫助用戶更好的分析數據,信息的質量很大程度上依賴於其表達方式。數據本身是冰冷的數字,通過選擇合適的圖形或者圖表來進行展示表達,使得傳遞給使用者的感受更加直觀、更容易獲得其中的價值。數據可視化將技術與藝術完美結合,藉助圖形化的手段,清晰有效地傳達與溝通信息。一方面,數據賦予可視化以價值;另一方面,可視化增加數據的靈性,兩者相輔相成,幫助企業從信息中提取有價值的信息。
  • 為選擇數據可視化圖表而發愁?學會這14個可視化圖表即可
    如果您想了解有關數據集在特定時間段內的執行方式的更多信息,則某些特定的圖表類型會非常有用。這種類型的可視化也可以用於顯示負數。它可以幫助您分析總體趨勢信息和單個趨勢信息。>使用透明的顏色,以便在背景中不會遮擋信息。
  • 搞定這12個設計圖表,就知道該如何製作數據可視化
    但是,儘管這樣做很容易,但是一個好的可視化仍然需要一定數量的戰略規劃和設計思想。知道誰是受眾能夠幫助你確定所需的數據。知道要講的故事(分析數據)會告訴你要使用哪種數據可視化類型。假設你擁有正確的數據和正確的數據可視化軟體。還需要選擇正確的圖表。希望這篇文章可以幫助您創建更好的數據可視化和儀錶板,以便於理解。
  • 設計實戰:圖表設計,遠不止好看這麼簡單
    圖表設計的過程實則是將數據進行可視化表達的過程,其研究的對象源頭是數據,然而,數據本身價值不大,所謂的「數據」往往是由一些看起來有用和沒用的「數字」組成,用戶很難從這些散亂的數字中發現有價值的信息,so,如果把這些「數字」從商業目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義(價值),圖表只是最終的表現形式。
  • 數據可視化中的經典圖表
    可視化設計原則中最基本和最經典的原則來自於設計師愛德華·R·塔夫特,他在《量化信息的視覺表現》中概述了數據墨水比例原則。該原則要表達的核心思想就是簡潔,最好的大屏可視化不是數據的平鋪,不是設計的天馬星空,我們的圖表要簡潔,我們的數據要簡潔。今天,可視化的設計過程我們暫且略過,先來看一看這些經典的大屏可視化圖表。
  • 數據可視化與信息可視化怎麼搞?
    數據可視化和信息可視化都是可視化的一種方式,數據可視化將資料庫中每一個數據項作為單個圖元元素表示,大量的數據集構成數據圖像,同時將數據的各個屬性值以多維數據的形式表示,可以從不同的維度觀察數據,從而對數據進行更深入的觀察和分析。信息可視化,旨在把數據資料以視覺化的方式表現出。信息可視化是一種將數據與設計結合起來的圖片,有利於個人或組織簡短有效地向受眾傳播信息的數據表現形式。
  • 數據可視化必修課 - 圖表篇
    ,而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是後臺設計,都離不開圖表的使用。然而關於圖表類相關的資料太零碎了,不成體系,對於初學者非常不友好,本篇文章我從圖表的祖輩開始,把它都給挖了出來,希望對你有幫助。
  • UI設計中大屏可視化設計尺寸指南
    大屏可視化的設計尺寸定義,一直是很多設計師苦惱的一件事,很多時候大屏出現的問題,都是因為對設計尺寸沒有一個正確的認識導致。 比如大屏內容呈現不全、拉伸、壓縮、字號小的看不見等等,出現這樣的問題就會浪費時間調整返工,今天我就帶大家來認認真真的討論一下大屏的設計尺寸。
  • 數據可視化圖表工具有哪些圖表類型?
    大家都聽過「數據可視化」,也知道要用直觀的圖表讓受眾理解複雜多變的數據。但很多人往往只注重讓圖表看上去「高大上」,而忽視了「這些的數據究竟適合哪些圖表來表達」。結果很多人花了大力氣做可視化圖表,卻沒達到想要的效果。 那麼,如何讓數據「說人話」,讓受眾更快速地懂你呢?
  • 大公司都是怎麼做數據可視化規範的
    如何從中啟發來構建自己的數據可視化設計指南?企業或組織進行數據可視化時,需要用數據可視化設計指南來規範信息表示形式。通常包括是什麼(圖表的類型有哪些?)、為什麼(如為什麼使用這個顏色?)和怎麼做(如用什麼工具設計?)。如果涉及到一些設計工具,如Excel、R、D3.js或Tableau,可視化指南還會提供一個模板來演示如何應用。
  • 數據可視化:常用圖表使用總結
    文章對常見的數據可視化圖表進行了簡單的匯總分析,希望對你有益。什麼是數據可視化?數據可視化,簡簡單單就是把數據展示出來嗎?非也非也,其終極是為了滿足用戶對數據的價值期望,利用數據,藉助可視化工具,還原和探索數據隱藏價值,描述數據世界。(⊙o⊙)…還是說人話吧,就是以下兩步。分析需求,熟悉數據,制定目標。
  • 數據信息圖表參數化設計技巧
    信息圖表設計(Infographic Design),是信息設計(Information Design)學科的一個分支,它興起於20世紀末信息技術介入到多樣化的平面設計的過程中,是一種新型的視覺設計。
  • 50 個數據可視化圖表
    這些圖表列表允許您使用 python 的 matplotlib 和 seaborn 庫選擇要顯示的可視化對象。這些圖表根據可視化目標的 7 個不同情景進行分組。例如,如果要想像兩個變量之間的關係,請查看「關聯」部分下的圖表。或者,如果您想要顯示值如何隨時間變化,請查看「變化」部分,依此類推。
  • 藝術設計留學:可用在作品集裡的數據可視化圖表類型,驚到審核官
    上次給大家分享了數據可視化對作品集的幫助,這次我們就來說說數據可視化運用類型。目前比較多用到數據可視化的專業主要是建築方向的專業,以及互動設計、視覺傳達、產品設計、媒體設計相關專業,這些專業的同學可以多了解下數據可視化。
  • 《經濟學人》數據可視化編輯:錯誤的圖表,我們也畫了很多
    我將針對數據可視化的問題分為三類:免責聲明:大多數「原始」圖表是在我們的圖表重新設計之前發布的。改進的圖表是為了符合我們的新規格而繪製的。它們的數據完全一致。誤導性的圖表以誤導的方式呈現數據是數據可視化中最嚴重的問題,雖然我們從不故意這樣做,但它確實時不時發生。我們來看看三個例子。
  • 冠軍之選 | 一份全面的國內外數據可視化書籍閱讀指南!
    好圖表:哈佛商業評論教你如何聰明且有說服力的數據可視化(暫譯)Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizationsby Scott Berinato