【Tableau | Tips】色盲模擬建立友善的設計

招弟嘉嘉
3 min readSep 5, 2019

--

過去製作投影片, Web 界面, Tableau Dashboard 用的都是個人的直覺感官決定顏色,加上前人留下來的盡量版面一致,在空檔的時間回頭檢視,並且重新建構自己對工作文件的管理,歸納需要注意的事項,我寫下「顏色」雖然不是視覺設計工作者,但對色彩敏銳度不算低的我,原本打算使用氣象局的雨量圖來作為顏色定義的標準, 在收集資料的過程中,看到林思民教授的文章,才發現過往以自己觀點出發的顏色設計,缺少對 "色盲" 的影響

林思民教授:[紅綠燈真的是人類史上最糟糕的一項發明。為什麼會設計出一個8%的人無法辨識的系統?],對色盲不友善的設計,我在過去也不曾思考過,重構時才發現到盲點

氣象局後續回覆林思民教授一文:看不懂累積雨量圖的色盲該怎麼辦?氣象局的新嘗試!

追踪:林思民教授臉書收到的5天雨量圖,排列在一起看明顯的就連不是色盲的人也更容易閱讀,尤其是我喜歡色階變少,減少判斷數據的干擾,雨量低的灰色設計,凸顯其他地區的雨量,視覺化的效果更好

看到氣象局的主動回應,讓我覺得社會各個地方,都有人默默的在努力貢獻的感覺真好

回過來檢視 Tableau 內顏色的預設設計, 我使用 coblis 的模擬器查看結果

提醒自己不要同時使用紅色色盲的看到的相近色設計 Dashboard

最後好奇 Tableau 的 Superstore 的顏色設計是否友善,從結果來看沒有在同一張 Dashboard 呈現超過 2種顏色(不算黑色)僅用色階的方式表達,也不會對色盲造成識別困擾

從中得到一項不變的結論:Less is MORE 同一個畫面不要呈現太多顏色,未來在設計的時候,不要把色盲的相近色放在一起,就能夠建立更友善的介面

發現自己在思考上的誤區,並且找到方式可以解決,接下來就是實際執行,下一步,從使用自定義的 Tableau 的顏色功能,打造 Dashboard 的色彩規範

(Reference: Create Custom Color Palettes)

Updated 2019.Sep. 11 【Tableau | Tips 】色盲色弱友善設計的HTML顏色樣版~歡迎索取

--

--

招弟嘉嘉
招弟嘉嘉

No responses yet