比對(duì)出行時(shí)長(zhǎng)

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

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

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

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

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

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

 

眼見(jiàn)為實(shí)

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

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

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

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

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

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

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

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

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

圖3：西雅圖的出現(xiàn)時(shí)長(zhǎng)

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

 

設(shè)計(jì)探索

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

1.通過(guò)相鄰色和對(duì)比色兩個(gè)樣本有效區(qū)分耗時(shí)熱力圖和對(duì)比熱力圖

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

圖4：為實(shí)驗(yàn)準(zhǔn)備的色階方案

 

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

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

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

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

之所以選擇了梯度增加，是因?yàn)楦鶕?jù)我們與城市規(guī)劃者的溝通，了解到他們是基于「交通分析區(qū)（TAZ）」這種交通規(guī)劃模型來(lái)進(jìn)行分析的，它將每個(gè)區(qū)域以人口密度劃分。城市區(qū)域的人口密度相比郊區(qū)會(huì)高很多?；谑袇^(qū)人口密度高，在市區(qū)對(duì)交通狀況進(jìn)行定義時(shí)，以每5分鐘為間隔相比在郊區(qū)更有效。

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

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

 

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

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

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

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

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

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

 

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

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

表2：鄰近色組的對(duì)比度計(jì)算

下圖7展示了波士頓城整體區(qū)域的熱圖效果，讓我們?cè)倏纯淳劢沟绞兄行牡男Ч绾巍?

圖7：波士頓城整體區(qū)域的熱圖效果

圖8更進(jìn)一步地確認(rèn)了「變化時(shí)間間隔取色」提供了更高的對(duì)比度。

圖8：「變化時(shí)間間隔取色」后的效果

 

5.對(duì)配色色階進(jìn)行微調(diào)

在這一系列的實(shí)驗(yàn)之后，才明確了這個(gè)方案（方案2中的11階色彩）屬最佳效果。能夠很好地滿(mǎn)足視圖中大跨度時(shí)間差的呈現(xiàn)。不論是城市的整體縱覽或是聚焦在市中心區(qū)域，都能提供最佳的對(duì)比度。

我們的內(nèi)部團(tuán)隊(duì)對(duì)實(shí)驗(yàn)進(jìn)行了評(píng)審和測(cè)試，并最終敲定了色彩范圍（見(jiàn)圖表1），結(jié)果將在近期發(fā)布。

隨著越來(lái)越多的用戶(hù)在 Uber Movement 中探索他們的城市，我們也在不斷的學(xué)習(xí)與迭代，讓數(shù)據(jù)更有效地為大家所用。

 

因效用而美

數(shù)據(jù)可視化的最終目的還是信息溝通。當(dāng)我們?cè)噲D清晰地傳達(dá)事實(shí)時(shí)，創(chuàng)作物的美學(xué)不是附屬品，而是一種內(nèi)在價(jià)值。美感不只是粉飾。當(dāng)數(shù)據(jù)可視化被合理地創(chuàng)造時(shí)，它因效用而美。

我們以一種微小的方式，通過(guò)不斷試錯(cuò)與探索，試圖讓人們以一種全新的視角看看這個(gè)世界。它是有效的，也即是美的。

文章來(lái)源：UXRen    作者：Dawei Huang

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)