超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

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

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

比對出行時長

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

視頻地址:https://youtu.be/bszvEIMVsIc (需翻墻)

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

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

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

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

 

眼見為實

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

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

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

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

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

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

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

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

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

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

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

 

設(shè)計探索

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

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

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

圖4:為實驗準(zhǔn)備的色階方案

 

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ī)劃模型來進(jìn)行分析的,它將每個區(qū)域以人口密度劃分。城市區(qū)域的人口密度相比郊區(qū)會高很多。基于市區(qū)人口密度高,在市區(qū)對交通狀況進(jìn)行定義時,以每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%的透明度,由此顯示出一種「漸變效果」,導(dǎo)致鄰近區(qū)域過于相近,用戶難以根據(jù)顏色判斷數(shù)值差異。新的配色方案則取消了以上兩點,這使得相同時間的區(qū)域合并,清晰的色帶使其更易讀。

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

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

 

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

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

表2:鄰近色組的對比度計算

下圖7展示了波士頓城整體區(qū)域的熱圖效果,讓我們再看看聚焦到市中心的效果如何。

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

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

圖8:「變化時間間隔取色」后的效果

 

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

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

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

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

 

因效用而美

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

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



文章來源:UXRen    作者:Dawei Huang


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

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com

存檔