天天看點

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

在閱讀正文之前,先請大家一起來玩個遊戲。下面這些圖,看看大家第一眼看到的是什麼?

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析
圖1,不同大小的圓,你的眼睛是否立刻被那個小圓吸引?
掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析
圖2,不同方向的線段,你的眼睛是否停留在了那個傾斜的線段?
掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析
圖3,不同顔色的圓,你的眼睛是否馬上識别出來灰色的圓圈?
掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析
圖4,不同形狀,你的眼睛是否首先注意到的是那個正方形?
掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析
圖5,不同透明度,你的眼睛是否最先注意到那個透明了的線段?
掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

不同的标記、位置、長度、粗細、動作下,你的眼睛都會被那個與衆不同的東西給抓住,最先意識到它的不一樣。

當眼睛掃過上述這些内容時,你的視線會被每組中唯一的一個與衆不同的元素所吸引,你根本不需要任何有意識的思考就會被它吸引到。這正是因為我們的大腦天生能快速找出環境中的差異,這是一個認知心理學概念——前注意過程(Pre-attentive processing)。

前注意過程有什麼用

當有政策地使用前注意過程,就能夠讓閱聽人的注意力引導至你期望的地方,不知不覺地看到我們期望展現的内容。

此外根據不同前注意過程對注意力的吸引強弱,可以建立視覺層次,按你希望的方式和順序引導閱聽人處理資訊。

劃重點,前注意過程兩個作用:

第一,引導閱聽人注意到特定位置。

第二,建立視覺層次,引導閱聽人按你的順序閱讀。

是以利用前注意過程所建立的視覺層次可以為閱聽人提供隐式的訓示,引導他們處理資訊,我們可以标記什麼是最重要的,他們應該最先關注,什麼是次重要的,接下來應該關注的。

舉個例子,

重複使用相同的圖表表達,但不同部分強調不同的問題或同一個問題的不同方面。這是前注意過程的有效政策。首先讓閱聽人熟悉資料和圖表,然後再進行說明。下圖中産品優勢的6個特性正式使用了這種重複政策。

明亮的藍色通常會比柔和的藍色吸引更多的注意。而兩者都會比淺灰色吸引更多的注意。是以用淺灰色将必要但不影響資訊傳遞的元素淡化到背景中,減少對閱聽人注意力的競争,使閱聽人能夠更簡單、更快速地消化我們提供的資訊。文字的描述是這種顔色改變政策的實踐。

一些特殊的标簽、形狀、按鈕、則充當了“看這裡”的信号,更快地将手中的注意力吸引到那裡。柔和的藍色“聯系我們”按鈕,在不喧賓奪主的前提下,最終吸引了閱聽人的注意,呼喚他們的點選操作。

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

實用政策

講了這麼多,相信大家對前注意過程有了一定的了解。下面就讨論三個好用的前注意過程政策,對大小、顔色和空間位置的使用,大家可以嘗試着把它用于日常彙報的ppt、可視化大屏等等需要資料可視化表達的場景中來。

1.大小

很簡單,就一句話:當幾個資料重要性相同時,請使用相同的大小。相反,如果有一件事尤其重要,那麼大小可以用來展現,毫無猶豫的将它放大吧。

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

2.顔色

顔色是吸引閱聽人注意的最強大工具,但請克制為了豐富多彩而使用顔色的沖動,對顔色的使用建議遵循以下原則:

  • 少量使用

隻有少量使用顔色才能確定有效性,種類太多會導緻沒有哪一種是足夠突出的,前注意過程消失,一切都不同,不但不能突出其中的某些内容,而且會令人分心。

視線在高飽和度的顔色上探索卻不知重點,使用單一顔色的不同飽和度會是一個更好的選擇,使用了同一個顔色,我們更容易看到其不同飽和度下代表的量化假設。

下面的圖,明顯左圖會更容易看到不同省份的熱力的變化程度。

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

一般來說,人眼難以區分出七種以上的顔色,除非顔色直接反映資料中的值,否則請将類保持在七個以下。

  • 一緻性

盡可能避免将集中顔色用于别的目的。不要改變顔色使用,否則會讓閱聽人感到困擾。設想下此前你使用紅色代表警告,卻在後續圖表中用紅色代表贊揚。

不要改變顔色使用,會讓使用者困惑。當然如果你希望表達主題或者語氣的明顯變化,顔色切換是利器。

  • 考慮色覺障礙者

8%的男性和0.5%的女性是色盲患者,更有大類色弱患者。通常他們難以區分紅色和綠色,是以可以考慮加粗、不同的飽和度或亮度,以及在數字前添加正負号等方法確定突出兩個數字。後面我們也會有專門的專題讨論如何為色覺障礙者進行設計。

這裡先給推薦一個開源軟體——Color Oracle,在設計的過程中能夠模拟各種類型的色盲來輔助選擇合适的顔色。

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

正常人眼中的顔色

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

紅色色盲和綠色色盲人眼中的世界

3.頁面位置

還記得前面一篇文章裡我們講的

之字形視線

嗎?

大部分人習慣性的從左上角開始閱讀,哪怕其他視覺線索嘗試鼓勵去做有想法的事情,還是會不自覺的從左上角開始讀起。是以請注意你頁面元素的擺放位置,讓閱聽人感到自然并且留意到你最希望閱聽人看到的内容,把重要的内容放在左上角的部分。

有趣的是,你可以多留意留意紙質的報紙,基本都遵循了這樣的規則。我們先看到的肯定是人民日報這幾個字,然後再是頭條、頭圖等等。

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

當然如果為了使版面不要有那麼強的整體感和緊張,也可以打破這種“左上到右下”的排版規則,緩解這種拘束感。

案例分析

掌握這3個政策,輕松提升資料資訊傳達效率前注意過程有什麼用實用政策案例分析

最後,拿一個Easy[V]平台中的模闆和大家再總結下本文講的前注意過程。

在看上方這個可視化大屏的時候,大機率你的視線移動過程是“标題-中心地圖-左側圖表-右側圖表”,其中有動态的部分又會比靜态圖表更容易被看到,頁面位置和大小的前注意過程政策造成了這樣的順序。

整個頁面以藍紫色為主要配色,但黃色飛線會非常抓人眼球,在第一時間讓你了解從北京與各地的聯系。

不同比例占比的餅圖,通過動态的突出動畫,能快速的讓你了解各系列資料的分布情況。

時序的折線變化動畫,讓你注意到不同系列的變化趨勢。

排名标題輪播,增加了頁面動感的同時也在向你傳達top10的具體情況。

所有的好設計其實都是專業思考的過程的反映。通過前注意過程,潛移默化地引導你的閱讀順序,強調重點的内容。好的可視化大屏,是藝術更是科學,細微的變動可能完全影響資料資訊的傳達。

袋鼠雲可視化團隊希望提供一些基本知識,從如何選擇合适的圖表到如何創造一個好的故事,讓你在資料溝通上勝人一籌。