2020-10-16 資深UI設計者
每天，世界上有40億人在城市中穿行，這個不斷增長變化的群體占據了世界人口的一半還多。了解人們如何出行以及出行的演變對于改善我們的城市、環境和數十億人的生活至關重要。我們創建了 Uber Movement，來幫助大家增進理解。
視頻地址：https://youtu.be/bszvEIMVsIc （需翻墻）
目前，Uber已在全球700多個城市提供服務，所有出行數據不僅能幫助我們提高服務質量，也有可能幫助到城市規劃師，以及那些渴望提高城市建設水平的人。Uber Movement允許用戶以多種方式查看數據：用戶可以查看某個日期某次出行的平均耗時，也可以查看某個區域不同日期范圍內的平均耗時，或者可以對比同一個區域不同的兩個行程的耗時。
圖1：從華盛頓市中心出發到各地所需的出行時長
圖1中的截圖展現了從華盛頓市中心到達城市其他區域的平均耗時（在2016年3月16日鐵路運輸因維修而暫停服務）。截圖a中顯示了晚高峰的耗時情況，截圖b顯示了兩周前鐵路運輸未中止的耗時情況，截圖c則比對了兩個時段下的數據，指示出鐵路服務暫停對路面交通帶來的嚴重影響。如圖示，在上述情況下，晚高峰時段從1400 K St NE區到1500 Kearny St NE區的平均出行時間增加了67.8％。
對于需考慮在哪里新增公交線路的公共交通機構，以及那些判別什么時候主干道需要進行道路養護的城市機構，都能夠通過這些數據了解到什么時候減少車道會對交通的影響最小，應向駕駛者提供哪些替代路線。
為了讓這些數據有價值，必須讓它們有使用價值。這就需要數據可視化的加持了。作為負責 Uber Movement 的產品設計師，我需要確保我們分享的數據是盡可能清晰易懂的。
我們遇到了一個有趣的問題：如何展示兩個不同卻又有關聯的可視化元素。「時長熱力圖」展現了在一個特定的日期（例如，2016年1月11日星期一下午）下，從任一起始點到某個位置的耗時（以分鐘為單位）；也可以是一個跨度長達幾個月（例如，2016年3月至5月的工作日早晨）的平均耗時。這個熱力圖使用了相鄰色，基于相同的顏色來調整色調由亮至暗（如下圖1所示，淺藍色至深藍色）。
「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度，哪一個時段下的耗時更少，少多少？對于該熱力圖，我們使用了對比色（如圖2）來表現數據由0至兩極（快與慢）。如果差值為零，則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。
我們的用戶會在這兩種熱力圖中連續反復切換，所以我們需要將這兩種模式從視覺上明確區分出來。
圖2：早期設計的5階色（左側單位為絕對耗時，右側單位為相對耗時比）
在早期的設計中（如圖2），5階相鄰色（由淡綠色至藍色）被用來表現路程的絕對耗時，而5階對比色（由綠至淡黃再到紅色）則用來表現兩種條件的對比。
初期嘗試使用五個顏色梯度，但在可用性測試中發現地圖的色彩辨識度低（見下圖3）。主要有以下幾個問題：
顯而易見，可用性測試的參與者難以從地圖判斷出耗時，特別是當地圖縮放聚焦在市中心時，也難以區分兩種模式（耗時熱力圖/對比熱力圖），見圖3。
圖3：西雅圖的出現時長
圖3，以早期的設計效果（5階相鄰色）查看從西雅圖市中心至其他區域的平均耗時，截圖a 展現了西雅圖所有區域的耗費時長，顏色讓區塊看起來“糊在一塊兒”。截圖b則展現了縮放聚焦至市中心區域時的效果，難以區分不同區域。
通過多步的探索實驗，我將這個復雜的設計難題拆解為幾個不同的小挑戰，并驗證不同的方案，最終獲得一個色彩系統達到易讀性最理想的熱圖效果。
1.通過相鄰色和對比色兩個樣本有效區分耗時熱力圖和對比熱力圖
由于同時應用相鄰色與對比色，所用的配色就必須是“四色系”配色方案以明確區分。（譯注：tetradic color 的翻譯可能不合適，根據定義，其為一種大膽的配色方案，四種顏色對立均等地分布在色輪的四個方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作為相鄰色的基準色，然后使用 Paletton.com 列舉了幾組“四色系”配色方案，將四種顏色分配為兩對互補組合。
圖4：為實驗準備的色階方案
2.根據時長間隔等比或是梯度增加色組的色彩階層數
早期設計從5階色彩范圍開始（如圖2、3），兩種模式的熱圖都產生了一種“糊在一塊兒”的漸變效果。我們希望這個系統可以滿足不同體量的城市，從市中心到外圍區域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現0至1.5小時，顯然不足以讓用戶有效辯識地圖上的時間跨度。
我實驗性地將色彩范圍的階層從5增加到9，11，13。時間間隔分別以等比增加與梯度增加羅列（梯度增加以30分鐘為總時長）。
表1：5、9、11、13色階方案（左側為等距增加，右側為非等距增加）
之所以選擇了梯度增加，是因為根據我們與城市規劃者的溝通，了解到他們是基于「交通分析區（TAZ）」這種交通規劃模型來進行分析的，它將每個區域以人口密度劃分。城市區域的人口密度相比郊區會高很多?；谑袇^人口密度高，在市區對交通狀況進行定義時，以每5分鐘為間隔相比在郊區更有效。
顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續性（見圖5）。圖中左側（方案1）使用了單色系，右側（方案2）則通過不同色調的顏色組合增加色組內的對比度。
圖5：用于實驗的2個色階（左側為淡色系，右側為多色系）
3.嘗試通過提升對比度去除掉區間的漸變效果
我將不同的顏色方案放到測試環境中去看看實際效果。為了去除漸變效果，在不受時間值和透明度影響的情況下，使用了彩色比例尺上的離散色值（見圖6右側的效果）。這樣處在相同色彩尺度區間的區域看起來合并了，能夠很好地辨別出區域之間耗時的異同。
圖6：采用離散色值消除漸變色。（從左側變為右側）
早期的配色方案是基于「耗時」調整的色值，并且使用了20%的透明度，由此顯示出一種「漸變效果」，導致鄰近區域過于相近，用戶難以根據顏色判斷數值差異。新的配色方案則取消了以上兩點，這使得相同時間的區域合并，清晰的色帶使其更易讀。
我還開發了個程序用來計算鄰近色組的對比度（見下方表2），方案2配色中的9階色彩范圍表現出最佳的平均對比度，其次是11階?？紤]到平均路程耗費時長在不同城市會有較大的差異，方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比，新方案的對比度提高了30%。
從上面的圖表可以看到，方案2配色有更高的對比度。其中，顏色階次越少，對比度也越高。
4.在測試環境中對比顏色方案
基于以上的結果，我將方案1（單色系）排除了。我們將方案2放到測試環境中查看了兩種間隔取色策略的效果。（譯注：這里的兩種策略指的是上面圖表1呈現的兩種取色方案。一種是例如每10分鐘遞進一個色階，等分；另一種則是會變化，例如前30分鐘每5分鐘遞進一個色階，超過30分鐘則每10分鐘遞進一個色階。）
表2：鄰近色組的對比度計算
下圖7展示了波士頓城整體區域的熱圖效果，讓我們再看看聚焦到市中心的效果如何。
圖7：波士頓城整體區域的熱圖效果
圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。
圖8：「變化時間間隔取色」后的效果
5.對配色色階進行微調
在這一系列的實驗之后，才明確了這個方案（方案2中的11階色彩）屬最佳效果。能夠很好地滿足視圖中大跨度時間差的呈現。不論是城市的整體縱覽或是聚焦在市中心區域，都能提供最佳的對比度。
我們的內部團隊對實驗進行了評審和測試，并最終敲定了色彩范圍（見圖表1），結果將在近期發布。
隨著越來越多的用戶在 Uber Movement 中探索他們的城市，我們也在不斷的學習與迭代，讓數據更有效地為大家所用。
數據可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時，創作物的美學不是附屬品，而是一種內在價值。美感不只是粉飾。當數據可視化被合理地創造時，它因效用而美。
我們以一種微小的方式，通過不斷試錯與探索，試圖讓人們以一種全新的視角看看這個世界。它是有效的，也即是美的。
文章來源：UXRen 作者：Dawei Huang
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務