圖表設計:如何利用「雷達圖」的視覺衝突感,來加強數據之間的對比?

  发布时间:2024-05-18 21:08:51   作者:玩站小弟   我要评论
文:上班族簡報日常「競爭」彷彿就是商業社會的代名詞。產品的銷量、員工的業績、市佔的比例,每年每月鬥個你死我活。這些具競爭性的數據,大多數會採用長條圖或是圓餅圖來表示,我們來看一下,如何利用雷達圖的視覺 。

文:上班族簡報日常

「競爭」彷彿就是圖表突感商業社會的代名詞。產品的設計銷量、員工的何利業績、市佔的用雷比例,每年每月鬥個你死我活。達圖的視對比這些具競爭性的覺衝據之間數據,大多數會採用長條圖或是來加圓餅圖來表示,我們來看一下,強數如何利用雷達圖的圖表突感視覺衝突感,來加強數據之間的設計對比。在商業應用以外、何利獎項與選舉的用雷候選人支持度也是適用的場合呢。

是達圖的視對比次的教材來自於端傳媒較早前奧斯卡頒獎禮的系列報導。

在圖中可以看到五個長條從中央擴散開來,覺衝據之間營造出互相競爭的來加視覺效果。可能你會覺得,這樣做很簡單,把五個長條形的形狀,各自旋轉再組合便可以吧?可是形狀朝中央對齊其實不是想像中容易(教材便有出現不整齊的情況),而且,既然有自動化的方法,又何苦要做手工呢?

resize(3)Photo Credit: 截自作者

第1步:擴張數據的範圍

改造由長條圖開始,將「比例」列的數據呈對角線錯開如下:

現在於錯開後的空白位置補上零,秘訣是當數列中只有一個非零值,而其餘的數值都是零的時候,就可迫使雷達圖由繪出網狀,變成繪出一條直線。

resize(4)Photo Credit: 截自作者

第2步:加入預設雷達圖

完成數據的梳理與準備,下一步就是選擇「演員」及「比例」的內容並加入軟件中預設的雷達圖。你看,毫無難度之下雷達圖已經基本成型了喲!

resize(5)Photo Credit: 截自作者

第3步:修正雷達圖設計

產出了雷達圖的原型,就可以修正設計來加強溝通的效益。

先進行減噪,把軸線上的數字隱藏,因為各個數據點最終會配上很大的標籤,所以軸線上的刻度就相對不重要;再把五條數據線的顏色統一並加粗顯示(可隨個人喜好修改cap/join type 使其變成圓頭);

接著是突出訊息,把軸線跨度由5%改為10%,並把軸線的最大值設定值訂為35%,這個組合會使最外圍的網線只得30%,目的就是造就楊紫瓊的支持比例(32.6%) 突出於網線外,視覺上更突出其領先地位。

resize(6)Photo Credit: 截自作者

第4步:加入數據的標籤

最後也是最需要心思的一步就是標籤的處理。當然你可以走懶惰又直接的路線,手動以文字方塊為每個數據線配上標籤,不是錯誤的做法;也可以繼續看下去學習解難技巧,將來遇上其他問題也更容易解決。

看到這裡你可能會想,在之前幾次的資訊圖表改造,學會了應用CHAR(10)來強制標籤的分行,今次的教材也是採用兩行的標籤,可否用同樣的做法呢?

遺憾地是不能夠這樣做。

CHAR(10)沒錯可以帶來兩行的標籤,但是不能分開設定兩行之間各自的字體和大小,共同進退之下,就不能夠做到教材中的上大下小效果。

另一個角度是考慮separator,軟件中數據標籤的設定,可以選擇不同內容之間的separator,當中的new line就可以幫助我們達致兩行標籤,並且可以分開設定字體及大小。

教材中的第一行是數值,第二行是分數,然而在軟件中,數據標籤設定頁,從上而下,Value from cells(可用來顯示分數)是先於Values(用來顯示數值),而且無法改動次序,那麼,難道我們只可以造出第一行是分數,第二行是數值的數據標籤嗎?

也不一定呢。

既然Value from cells是先於Values,就乾脆用Value from cells來顯示分數吧!記住按下Select Range時把整列的數值也選取而不是單一儲存格;然後標籤第二行的分數,則可以來自於Series Name設定,做法就是在試算表中,把演員的名字(反正在教材中演員名字會另外顯示)換轉成分數便可。

resize(7)Photo Credit: 截自作者
resize(8)Photo Credit: 截自作者

延伸問題:六項數據又可以嗎?

常見的雷達圖多是五邊形的設定,套用現在所學的,數據線由圖中央擴散開去的設計,能夠支援五個數據點。

要是有六個數據點,又可以怎麼辦呢?這種設計就只有那麼狹窄的應用嗎?

不用擔心,其實在軟件之中,選取六組數據(還記得要依對角線錯開嗎?六組數據就是6X6的儲存格)並加入雷達圖,就會自動調整和顯示全部六組數據,雷達圖背後的網格也會自動調整成為六邊形,十分方便。

可是六個數據點會有一個問題,就是數據線從中央擴散開來時,因為是六條線的關係,與五條線相比,會出現了三對平行線,而影響了視覺上對長度的判斷。

這個時候我們可以花一點小心思,在圖中央繪上一個*形圖案,簡約地協助區分平行線。

設計考量:沒有哪裡都適用的設計

學會了這種圖表設計技巧,當然不代表所有場景也會適用,所以也要學會各種技巧的使用時機。

由長條圖換成雷達圖,固然可以增加視覺的衝突感,但只適用於五至七個數據點,再多的話看上去就只會像花瓣般密集,光有設計感而失去了簡報需要的快速可讀性。

另外,數值之間也要有一定差異,這種設計才會有效與好看。試想像一下,同樣五項數據,但是全都是約20%上下,雷達圖看上去也變得像花瓣一樣。

數據線之間各有不同的角度,因此視覺上要比較長度就沒那麼容易,也就是為什麼標籤的文字不能夠太小的原因,觀眾可以直接看標籤而省去視覺比較。

resize(9)Photo Credit: 截自作者

結語

雷達圖多數用於比較兩組數據,然而只要稍花一下心思,也可以成為長條圖的變奏版,也就是說,手頭上的工具可以有多於一種用途 ,多觀察就能夠打破固有的認知。

本文經《方格子》授權轉載,原文發表於此

【加入關鍵評論網會員】每天精彩好文直送你的信箱,每週獨享編輯精選、時事精選、藝文週報等特製電子報。還可留言與作者、記者、編輯討論文章內容。立刻點擊免費加入會員!

責任編輯:王祖鵬
核稿編輯:翁世航


  • Tag:

相关文章

  • 北京教育考试院专家权威解析2023北京中考物理卷

    千龙网北京6月25日讯 2023年北京市初中学业水平考试物理试题以教育部颁布的《义务教育物理课程标准2011年版)》为依据,落实立德树人的根本任务,以“把社会主义核心价值观和中华优秀传统文
    2024-05-18
  • 威力彩開獎!頭獎上看「6.2億」 獎號出爐

    已經連17槓的威力彩,頭獎上看6.2億元,今19)日晚間台灣彩券公司開出第112000049期中獎獎號,第一區獎號由小到大依序為04、08、12、20、27、36,第二區獎號為01。其他獎項開獎號碼如
    2024-05-18
  • 漏尿全身皆異味不敢社交 1治療方法療擺脫尿騷味困擾

    「孩子們常常邀約家族旅遊,但一想到出門就要找廁所或不敢喝水,只能婉拒出遊,頻尿與漏尿問題讓我日漸自卑起來。」65歲的張媽媽化名)無奈說到,尤其現在天氣日漸炎熱,漏尿的異味讓人更加煩憂,在人際社交也飽受
    2024-05-18
  • 海口月饼市场刮平民风 最便宜铁盒装9.9元

    中秋节临近,记者近日走访发现,今年海口月饼市场刮起“平民风”,天价月饼几乎不见踪影。“虽然前两天才刚开始卖,但可以预见的是,今年的月饼市场会比前两年要差。&rdqu
    2024-05-18
  • 办温暖的高品质学校 办人民满意的教育

    ——安徽师范大学附属淮南高新学校建设发展纪略2021年3月,淮南高新区管委会与安徽师大教育发展集团牵手,合作创办“安徽师范大学附属淮南高新学校”。同年8月学校建成交付,9月开始面向社会招生一年级和七年
    2024-05-18
  • 广东全面织密中(高)考食品安全防护网

    中国消费者报广州讯陈晓莹记者李青山)6月27日,记者从广东省市场监管局获悉,为全力做好中高)考期间食品安全保障工作,该局立足职能,从提前介入、全程驻点、线上预警、现场检查等方面发力,部署全省校园食品安
    2024-05-18

最新评论