1. 程式人生 > >知道這7個設計原則,你也可以設計出漂亮圖表

知道這7個設計原則,你也可以設計出漂亮圖表

想象你是公司的資料分析師。去年,老闆開除了一些人,現在想要制定下一年的招聘需求,老闆正在思考是否有必要再招人,他想徵求你的建議。

首先,你想要了解去年解僱那些人對團隊整體生產力的影響。所以你繪製了下面圖片中的折線圖。藍色折線是每個月新增工單數,紅色折線是去年處理工單數。

兩個折線一對比,你發現從7月份解僱人員後,新增工單數超過了處理工單數,這說明人力不足的確導致了團隊生產力的下降。

現在你想將繪製的這個粗糙圖表改造,然後再展示給老闆看,不然如此醜陋的圖表肯定會挨批的。

你能發現這個圖形有哪些地方可以優化嗎?

圖表中每一個多餘的元素都會增加使用者的認知負荷。所以我們採用下面的設計原則,來讓圖表變的漂亮。

  • 設計原則1:去掉圖形邊框、網格線

這樣會使的資料更突出。

  • 設計原則2:去除資料標記

線條本來就可以直觀展示資料,有了資料標記會增加使用者的認知負荷。

這並不是說永遠不要使用資料標記,而是要有目的地使用,尤其不要因為它們預設包含在你的繪圖軟體裡而使用。

下面圖片是經過這兩個原則處理後的效果,你會發現資料顯得更加突出了。

  • 設計原則3:座標軸標籤處理

避免使用傾斜的元素。一項研究(2005年Wigdor和Balakrishnan的研究)表明,閱讀45度傾斜的文字時,速度比閱讀正常方向排列的文字要平均慢52%,閱讀90度傾斜的文字平均慢205%。所以我們將上面圖表中的x軸標籤水平排列,從而消除傾斜的文字。

很多時候,系統預設生成的軸標籤當中會在小數點後面出現多餘的尾數0,這些0沒有任何參考價值,反而讓數字看起來比實際複雜得多。

當小數點後面尾數是0時,我們可以去掉這些尾數以減少受眾不必要的認知負荷。

  • 設計原則4:刪掉不必要的圖例

作為資料的設計師,我們需要儘量識別出任何困難消耗使用者精力的問題。我始終覺得在圖例和資料之間切換事件麻煩的事情。在這種情況下,我們直接在需要描述的資料旁進行標記出來。


  • 設計原則5:保持顏色一致

對資料標籤和所描述的資料使用相同的顏色。這對使用者來說給出的資訊是:這兩部分資訊是相關聯的。比如前面案例中的新增工單折線和資料標籤都用藍色。而處理工單折線和資料標籤都是有紅色。

  • 設計原則6:對齊

使用者通常會從頁面或者螢幕的左上方開始,按“之”字形移動視線並消化資訊(如下圖)。

所以避免使用居中對齊的文字,我喜歡將文字(標題,座標軸標籤等)按左上角對齊。這意味著使用者會先看到有關如何閱讀圖表的細節,然後再看到資料本身。

  • 設計原則7:字型

很多人軟體比如Excel自動生成的字型太醜了。我一般中文使用微軟雅黑,英文和數字使用:Arial 字型。

經過上面7個圖表設計原則,整個圖表的可讀性有了顯著提升(下圖)。

現在你已經知道了這7個設計原則,以後就可以像設計師一樣設計圖表了。

本文圖表案例來自書《用資料講故事》

相關推薦

知道7設計原則可以設計漂亮圖表

想象你是公司的資料分析師。去年,老闆開除了一些人,現在想要制定下一年的招聘需求,老闆正在思考是否有必要再招人,他想徵求你的建議。 首先,你想要了解去年解僱那些人對團隊整體生產力的影響。所以你繪製了下面圖片中的折線圖。藍色折線是每個月新增工單數,紅色折線是去年處理

學會4PPT技巧就能做出漂亮的PPT教學課件

PPT2016中有很多隱藏神技,看似複雜的一個操作,在這些技巧面前,其實分分鐘就能搞定。還在羨慕網上那些PPT大神麼?其實在做PPT的時候掌握20%操作就可以啦! 一起趕快學習一下吧。 1、插入圖塊 圖塊是PPT中最基本的操作,但是圖塊確是PPT中創意的最好表達方式,特別是教學PPT中,

讀完7本演算法書可以像10位演算法大師一樣改變世界

導讀:演算法是整個電腦科學的基石,是計算機處理資訊的本質。從開創演算法分析這一領域的高德納、Am

PPT總是做不好?那是因為沒有收藏7線上網站建議私藏一份

PPT不管你是在工作上還是在學習上都需要用的上,它與我們是密不可分的,比如你在公司工作彙報時候,還是在學校裡面完成老師佈置的作業都需要,它可以幫助我們完成各種演講製作、完成作業! 但製作PPT時候經常會需要許多素材,和基本的PPT製作技巧,可能這些我們已經快忘記了一乾二淨了!不用擔心今天為大家分

區塊鏈運作的7核心技術知道

1.區塊鏈的連結 顧名思義,區塊鏈即由一個個區塊組成的鏈。每個區塊分為區塊頭和區塊體(含交易資料)兩個部分。區塊頭包括用來實現區塊連結的前一區塊的雜湊(PrevHash)值(又稱雜湊值)和用於計算挖礦難度的隨機數(nonce)。前一區塊的雜湊值實際是上一個區塊頭部的雜湊值,

太高效了!玩了這麼久的Linux居然不知道7終端快捷鍵!

大家好,我是良許。 作為 Linux 使用者,大家肯定在 Linux 終端下敲過無數的命令。有的命令很短,比如:`ls` 、`cd` 、`pwd` 之類,這種命令大家毫無壓力。但是,有些命令就比較長了,比如: ``` $ git push origin HEAD:refs/for/master ```

學會搜尋技巧的效率將提高 10 倍

我之前有一篇許岑的課程筆記(如何有效訓練你的研究能力)中提到過下面這句話:「研究在英文中叫 research,search 就是搜尋的意思,勤於搜尋,才適合做研究。」 很多新手總是喜歡問別人簡單的問題,其實沒有自己搜尋過就去問別人問題對你的研究能力基本沒有提升。我剛畢業的時候我

對比10注意事項的網頁文字排版達標了麼?

 編輯 : 陳子木  閱讀本文需 8 分鐘 優設投稿入口 對於網頁而言,視覺資訊的傳達至關重要。使用者通過頁面獲取資訊,文字、圖片、圖示、按鈕、表單等UI元素都承載著不同型別的資訊。在這其中,文字的作用尤其巨大。排版設計

大資料人都該知道的 75 專業術語一定得看!

接下來繼續瞭解另外 50 個大資料術語。   Apache 軟體基金會(ASF) 提供了許多大資料的開源專案,目前有 350 多個。解釋完這些專案需要耗費大量時間,所以我只挑選解釋了一些流行術語。     Apache Kafka  

掌握技術點可以玩轉AppCan前端開發

 “AppCan的前端開發其實非常簡單,只要掌握兩方面的技術即可。一方面是會使用柵格佈局完成UI的介面排版,另外一方面就是使用AppCan MVVM模型來完成整個頁面構造和使用者操作邏輯。”在2016AppCan移動開發者大會的技術脫口秀環節, AppCan技術副總監陳雪分

關於小米智慧家庭套裝的十小常識能答

1:小米智慧家庭套裝都有神馬東西? 回答:包含小米多功能閘道器、小米人體感測器、小米門窗感測器和小米無線開關各一個,其中閘道器是智慧家庭套裝的控制中心,感測器需要配合閘道器才能使用。 2:同一個閘道器可以繫結多個人體感測器、門窗感測器或者是無線開關嗎? 回答:多功能閘道器可以連入多個子裝置,閘道器是自

來自開發者技術前線 高級程序員需要養成7習慣

等等 網絡七層協議 有意 數據 爆發 程序員開發 提高 程序解耦 功能 要有負責心 在我們的每日工作中,有一半以上時間是在解決各種Bug。高級程序員在面對這些Bug時會從多個維度思考,Bug出現的時間、系統環境、硬件版本以及軟件版本等等。接著修復問題,嚴格自測,上線後觀察,

用好6新功能的項目設計事半功倍

本文由Mockplus提供素材。 Mockplus3.2新功能發布有段時間了,新功能具體能給我們的設計帶來什麽呢?且聽我一一道來: 格子 格子功能,可以快速制作重復的布局,提高設計效率。 步驟: 一

[ZZ] 深度學習三巨頭之一來清華演講了只需要知道7

動態 能夠 關系 領域 那一刻 計劃 world 哪些 net 深度學習三巨頭之一來清華演講了,你只需要知道這7點 http://wemedia.ifeng.com/10939074/wemedia.shtml Yann LeCun還提到了一項FAIR開發的,用於

知道20正則表達式能讓少寫1,000行代碼

des key htm 兼容 需要 處理工具 取代 windows 手機號正則表達式 轉自:https://www.jianshu.com/p/e7bb97218946 正則表達式,一個十分古老而又強大的文本處理工具,僅僅用一段非常簡短的表達式語句,便能夠快速實現一個非常

掌握7的移動端交互體驗更優秀

移動端設計 原型設計 產品經理 以下內容由Mockplus團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具。 移動端設計的質量好壞,其實並不難度量。當用戶可以流暢輕松地使用,不用耗費精力便可以完成各種任務,這就說明此款APP或者網站的設計足夠優

居然不知道PPT還隱藏4神技巧難怪做起來效率慢

PPT有人天天用,但還是有很多操作不會,甚至不知道,導致做起來的效率低下。今天小編就來說一下4個神技巧,助你提升效率。 1、PPT上的虛線框 在開啟PPT的時候,不想要讓PPT上的虛線框出現怎麼辦?換個版式唄。 操作方法:【ctrl+A】全選幻燈片-【版式】-【空白】。 2、刪除圖片底

關於SQL Server 2017需要知道5重點

SQL Server 2017增加了一些最新的資料服務和分析功能,包括強大的AI功能、對R和Python的支援。 當技術主管為公司定義其分析策略時,大多數人認為AI、機器學習、自然語言處理和資料探勘是這些計劃的關鍵組成部分。在過去幾年中,許多分析功能很受歡迎,但它們仍然是複雜、昂貴,並且有一些特殊

知道20正則表示式能讓少寫1,000行程式碼

正則表示式,一個十分古老而又強大的文字處理工具,僅僅用一段非常簡短的表示式語句,便能夠快速實現一個非常複雜的業務邏輯。熟練地掌握正則表示式的話,能夠使你的開發效率得到極大的提升。 正則表示式經常被用於欄位或任意字串的校驗,如下面這段校驗基本日期格式的JavaScript程式碼: var reg = /^(\

機器學習首先得知道知識點

1.機器學習意味著從資料中學習,而AI呢是一個比較炫酷時髦的詞。 機器學習基於這樣的假設:我們可以通過將正確的資料放到正確的演算法中去訓練解決一系列複雜的問題。當你需要融資或者釋出產品的時候可以毫不猶豫的稱之為人工智慧(AI),但是你心裡需要明白現在AI是一個