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