亚洲av无码专区色爱老鸭,亚洲一级无毛黄片

如何使用色彩可視化出行耗時

2020-10-16 資深UI設(shè)計者

比對出行時長

每天，世界上有40億人在城市中穿行，這個不斷增長變化的群體占據(jù)了世界人口的一半還多。了解人們?nèi)绾纬鲂幸约俺鲂械难葑儗τ诟纳莆覀兊某鞘?、環(huán)境和數(shù)十億人的生活至關(guān)重要。我們創(chuàng)建了 Uber Movement，來幫助大家增進理解。

視頻地址：https://youtu.be/bszvEIMVsIc （需翻墻）

目前，Uber已在全球700多個城市提供服務，所有出行數(shù)據(jù)不僅能幫助我們提高服務質(zhì)量，也有可能幫助到城市規(guī)劃師，以及那些渴望提高城市建設(shè)水平的人。Uber Movement允許用戶以多種方式查看數(shù)據(jù)：用戶可以查看某個日期某次出行的平均耗時，也可以查看某個區(qū)域不同日期范圍內(nèi)的平均耗時，或者可以對比同一個區(qū)域不同的兩個行程的耗時。

圖1：從華盛頓市中心出發(fā)到各地所需的出行時長

圖1中的截圖展現(xiàn)了從華盛頓市中心到達城市其他區(qū)域的平均耗時（在2016年3月16日鐵路運輸因維修而暫停服務）。截圖a中顯示了晚高峰的耗時情況，截圖b顯示了兩周前鐵路運輸未中止的耗時情況，截圖c則比對了兩個時段下的數(shù)據(jù)，指示出鐵路服務暫停對路面交通帶來的嚴重影響。如圖示，在上述情況下，晚高峰時段從1400 K St NE區(qū)到1500 Kearny St NE區(qū)的平均出行時間增加了67.8％。

對于需考慮在哪里新增公交線路的公共交通機構(gòu)，以及那些判別什么時候主干道需要進行道路養(yǎng)護的城市機構(gòu)，都能夠通過這些數(shù)據(jù)了解到什么時候減少車道會對交通的影響最小，應向駕駛者提供哪些替代路線。

眼見為實

為了讓這些數(shù)據(jù)有價值，必須讓它們有使用價值。這就需要數(shù)據(jù)可視化的加持了。作為負責 Uber Movement 的產(chǎn)品設(shè)計師，我需要確保我們分享的數(shù)據(jù)是盡可能清晰易懂的。

我們遇到了一個有趣的問題：如何展示兩個不同卻又有關(guān)聯(lián)的可視化元素?！笗r長熱力圖」展現(xiàn)了在一個特定的日期（例如，2016年1月11日星期一下午）下，從任一起始點到某個位置的耗時（以分鐘為單位）；也可以是一個跨度長達幾個月（例如，2016年3月至5月的工作日早晨）的平均耗時。這個熱力圖使用了相鄰色，基于相同的顏色來調(diào)整色調(diào)由亮至暗（如下圖1所示，淺藍色至深藍色）。

「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度，哪一個時段下的耗時更少，少多少？對于該熱力圖，我們使用了對比色（如圖2）來表現(xiàn)數(shù)據(jù)由0至兩極（快與慢）。如果差值為零，則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。

我們的用戶會在這兩種熱力圖中連續(xù)反復切換，所以我們需要將這兩種模式從視覺上明確區(qū)分出來。

圖2：早期設(shè)計的5階色（左側(cè)單位為絕對耗時，右側(cè)單位為相對耗時比）

在早期的設(shè)計中（如圖2），5階相鄰色（由淡綠色至藍色）被用來表現(xiàn)路程的絕對耗時，而5階對比色（由綠至淡黃再到紅色）則用來表現(xiàn)兩種條件的對比。

初期嘗試使用五個顏色梯度，但在可用性測試中發(fā)現(xiàn)地圖的色彩辨識度低（見下圖3）。主要有以下幾個問題：

我們通過顏色表現(xiàn)由A點至B點的路程耗時，每一個目的地區(qū)域根據(jù)時間被賦予5階范圍中的一個顏色，并有20%的透明度，疊加在地圖上。這樣的設(shè)計呈現(xiàn)出由中心至外圍的漸變效果，區(qū)塊之間對比度較低，使它們看起來糊在一塊，讓色彩背后的數(shù)據(jù)以及地圖上的標簽都不那么易讀。
結(jié)果就是，5階色彩沒有足夠的對比度將中心至邊緣的區(qū)塊區(qū)分開來。
另外，5階色彩不足以滿足不同城市，不同時間段耗時的有效展示。

顯而易見，可用性測試的參與者難以從地圖判斷出耗時，特別是當?shù)貓D縮放聚焦在市中心時，也難以區(qū)分兩種模式（耗時熱力圖/對比熱力圖），見圖3。

圖3：西雅圖的出現(xiàn)時長

圖3，以早期的設(shè)計效果（5階相鄰色）查看從西雅圖市中心至其他區(qū)域的平均耗時，截圖a 展現(xiàn)了西雅圖所有區(qū)域的耗費時長，顏色讓區(qū)塊看起來“糊在一塊兒”。截圖b則展現(xiàn)了縮放聚焦至市中心區(qū)域時的效果，難以區(qū)分不同區(qū)域。

設(shè)計探索

通過多步的探索實驗，我將這個復雜的設(shè)計難題拆解為幾個不同的小挑戰(zhàn)，并驗證不同的方案，最終獲得一個色彩系統(tǒng)達到易讀性最理想的熱圖效果。

1.通過相鄰色和對比色兩個樣本有效區(qū)分耗時熱力圖和對比熱力圖

由于同時應用相鄰色與對比色，所用的配色就必須是“四色系”配色方案以明確區(qū)分。（譯注：tetradic color 的翻譯可能不合適，根據(jù)定義，其為一種大膽的配色方案，四種顏色對立均等地分布在色輪的四個方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作為相鄰色的基準色，然后使用 Paletton.com 列舉了幾組“四色系”配色方案，將四種顏色分配為兩對互補組合。

圖4：為實驗準備的色階方案

2.根據(jù)時長間隔等比或是梯度增加色組的色彩階層數(shù)

早期設(shè)計從5階色彩范圍開始（如圖2、3），兩種模式的熱圖都產(chǎn)生了一種“糊在一塊兒”的漸變效果。我們希望這個系統(tǒng)可以滿足不同體量的城市，從市中心到外圍區(qū)域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現(xiàn)0至1.5小時，顯然不足以讓用戶有效辯識地圖上的時間跨度。

我實驗性地將色彩范圍的階層從5增加到9，11，13。時間間隔分別以等比增加與梯度增加羅列（梯度增加以30分鐘為總時長）。

表1：5、9、11、13色階方案（左側(cè)為等距增加，右側(cè)為非等距增加）

之所以選擇了梯度增加，是因為根據(jù)我們與城市規(guī)劃者的溝通，了解到他們是基于「交通分析區(qū)（TAZ）」這種交通規(guī)劃模型來進行分析的，它將每個區(qū)域以人口密度劃分。城市區(qū)域的人口密度相比郊區(qū)會高很多。基于市區(qū)人口密度高，在市區(qū)對交通狀況進行定義時，以每5分鐘為間隔相比在郊區(qū)更有效。

顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續(xù)性（見圖5）。圖中左側(cè)（方案1）使用了單色系，右側(cè)（方案2）則通過不同色調(diào)的顏色組合增加色組內(nèi)的對比度。

圖5：用于實驗的2個色階（左側(cè)為淡色系，右側(cè)為多色系）

3.嘗試通過提升對比度去除掉區(qū)間的漸變效果

我將不同的顏色方案放到測試環(huán)境中去看看實際效果。為了去除漸變效果，在不受時間值和透明度影響的情況下，使用了彩色比例尺上的離散色值（見圖6右側(cè)的效果）。這樣處在相同色彩尺度區(qū)間的區(qū)域看起來合并了，能夠很好地辨別出區(qū)域之間耗時的異同。

圖6：采用離散色值消除漸變色。（從左側(cè)變?yōu)橛覀?cè)）

早期的配色方案是基于「耗時」調(diào)整的色值，并且使用了20%的透明度，由此顯示出一種「漸變效果」，導致鄰近區(qū)域過于相近，用戶難以根據(jù)顏色判斷數(shù)值差異。新的配色方案則取消了以上兩點，這使得相同時間的區(qū)域合并，清晰的色帶使其更易讀。

我還開發(fā)了個程序用來計算鄰近色組的對比度（見下方表2），方案2配色中的9階色彩范圍表現(xiàn)出最佳的平均對比度，其次是11階?？紤]到平均路程耗費時長在不同城市會有較大的差異，方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比，新方案的對比度提高了30%。

從上面的圖表可以看到，方案2配色有更高的對比度。其中，顏色階次越少，對比度也越高。

4.在測試環(huán)境中對比顏色方案

基于以上的結(jié)果，我將方案1（單色系）排除了。我們將方案2放到測試環(huán)境中查看了兩種間隔取色策略的效果。（譯注：這里的兩種策略指的是上面圖表1呈現(xiàn)的兩種取色方案。一種是例如每10分鐘遞進一個色階，等分；另一種則是會變化，例如前30分鐘每5分鐘遞進一個色階，超過30分鐘則每10分鐘遞進一個色階。）