Yandex Metro vs 廣州地鐵#交互#對(duì)比分析

Cover

之前去莫斯科出差,一開始對(duì)毛子的地鐵比較怕,第一是因?yàn)榈罔F年代久遠(yuǎn),車開起來(lái)都是哐當(dāng)哐當(dāng)?shù)?,第二是線網(wǎng)比較復(fù)雜,第三是語(yǔ)言不通。放一張圖你們感受下。

莫斯科地鐵線網(wǎng)圖

綜合起來(lái)說(shuō)就是怕坐丟,不過(guò)去了當(dāng)?shù)匕l(fā)現(xiàn)Yandex有一個(gè)地鐵app,下了后用了一下,發(fā)現(xiàn)很好用,很自然的就想到跟我們廣州自己的地鐵app做一個(gè)對(duì)比。


第一印象

首頁(yè)對(duì)比

“廣州地鐵”首頁(yè)上有banner,有入口,有新聞,有底部導(dǎo)航,與其說(shuō)是一個(gè)坐地鐵查地鐵的工具,它更像是一個(gè)廣州地鐵的宣傳平臺(tái)。 “Yandex Metro”一進(jìn)去就只有線網(wǎng)圖、起始點(diǎn)的輸入框以設(shè)置和買票按鈕,其就是一個(gè)工具。

**視覺(jué)風(fēng)格上“Yandex Metro”更簡(jiǎn)潔直觀,而“廣州地鐵”則會(huì)流露國(guó)家事業(yè)單位app那種特有的外包風(fēng)。 **


Core Action

作為地鐵app,其的core action就應(yīng)該是:查詢地鐵線路。 而要完成這一任務(wù)的流程中會(huì)涉及到很多環(huán)節(jié):

任務(wù)流程

查看線網(wǎng)圖 → 選擇起點(diǎn)終點(diǎn) → 搜索路線 → 反饋路線(系統(tǒng))/選擇合適路線 → 查看路線詳情


使用場(chǎng)景

首先明確在什么樣的場(chǎng)景下會(huì)用這類型的APP。

就拿我自己舉例,我第一次去莫斯科,不熟悉莫斯科的地鐵,所以我要用來(lái)查線路。但這是否意味著只有對(duì)這個(gè)城市地鐵不熟悉的人才會(huì)用呢?不一定。

再換個(gè)例子,我經(jīng)常在廣州,一般也很少?gòu)V州地鐵app的,因?yàn)槲页Hサ穆肪€我都清楚,但是偶爾去個(gè)不常去的地方,還是要看一下怎樣換乘的(雖然都是直接百度地圖就能滿足這種需求,這里忽略掉這種使用場(chǎng)景)。
所以準(zhǔn)確的來(lái)說(shuō),當(dāng)需要查詢不熟悉的地鐵線路的時(shí)候,就可能會(huì)用到這種地鐵app。

**那么從core action的角度去看,顯然“Yandex Metro”的使用體驗(yàn)會(huì)更加純粹,用戶在第一個(gè)頁(yè)面就可以開始主任務(wù)流程的操作。而“廣州地鐵”在查詢地鐵線路之外增加了很多其他的便民功能,這樣做雖然更加人性化,也增加了app的使用場(chǎng)景,但用戶在首頁(yè)看不到任何線網(wǎng)圖的信息,只能通過(guò)頂部的起始點(diǎn)輸入框去進(jìn)行第二步操作-選擇起點(diǎn)終點(diǎn),這樣一定程度上會(huì)影響用戶體驗(yàn),是不符合用戶的心理預(yù)期的。 **

所以這里僅僅將“廣州地鐵“線網(wǎng)圖功能和“Yandex Metro”進(jìn)行對(duì)比。


查看線網(wǎng)圖 → 選擇起點(diǎn)終點(diǎn)

線網(wǎng)圖對(duì)比

從頁(yè)面可以看出,兩個(gè)app的任務(wù)流程在頁(yè)面的表達(dá)上是不一樣的。

“Yandex Metro”是讓用戶先看到線網(wǎng)圖,再進(jìn)行起始點(diǎn)的輸入,而“廣州地鐵”則是相反。

**從用戶認(rèn)知順序的角度來(lái)說(shuō),地鐵線網(wǎng)圖應(yīng)該是用戶第一時(shí)間像關(guān)注了解的信息,而篩選起始點(diǎn)這種輸入操作行為并非所有用戶的首選,這也就是為什么在廣州地鐵大的換乘站,線網(wǎng)圖前面總是站滿了人。 所以“Yandex Metro”這種布局設(shè)計(jì)是相對(duì)合理的,而“廣州地鐵”這樣設(shè)計(jì)我猜很大原因是希望和外部首頁(yè)的交互統(tǒng)一,即輸入操作都在頂部標(biāo)題欄完成。 **

但是二者都有一個(gè)設(shè)計(jì)不好的地方

起始點(diǎn)選擇

二者線網(wǎng)圖上的所有站點(diǎn)都是可點(diǎn)擊并快速設(shè)置起點(diǎn)終點(diǎn)的,但是這個(gè)功能并沒(méi)有相關(guān)的交互引導(dǎo)或視覺(jué)引導(dǎo),屬于隱藏功能。出于職業(yè)角度,我在用新的app的時(shí)候都會(huì)這里點(diǎn)點(diǎn)那里戳戳,但這不代表所有的人都會(huì)發(fā)現(xiàn)這個(gè)功能,或者第一次使用時(shí)就發(fā)現(xiàn)這個(gè)功能。因此這里比較適合在用戶首次進(jìn)入這個(gè)頁(yè)面時(shí)給其一個(gè)引導(dǎo)浮層引導(dǎo)其去發(fā)現(xiàn)這個(gè)隱藏功能。

而在這個(gè)隱藏功能的設(shè)計(jì)上,“廣州地鐵”是在當(dāng)前選中站點(diǎn)的上方直接彈出浮層,而“Yandex Metro”則是以當(dāng)前選中站點(diǎn)為中心彈出浮層,同時(shí)會(huì)顯示當(dāng)前選中站點(diǎn)的名稱。

**當(dāng)站點(diǎn)名稱在站點(diǎn)圖標(biāo)上方時(shí),“廣州地鐵”的這種設(shè)計(jì)就會(huì)造成浮層把站點(diǎn)名稱遮住,而“Yandex Metro”的這種設(shè)計(jì)無(wú)論在什么情況下,用戶在換出浮層后都能知道選中的是哪個(gè)站點(diǎn),顯然這樣的設(shè)計(jì)更加合理,體驗(yàn)也更好。 **


搜索路線

當(dāng)用戶瀏覽完線網(wǎng)圖,需要去輸入起始點(diǎn)信息的時(shí)候,就會(huì)接觸到輸入框,這里可以發(fā)現(xiàn)二者在輸入框的交互上也有所不同。

搜索框?qū)Ρ?/div>

*首先是輸入框本身,可以看到“廣州地鐵”是通過(guò)圖標(biāo)和文案來(lái)告知用戶在此輸入。而“Yandex Metro”除了文案之外,還有一個(gè)可點(diǎn)擊的list圖標(biāo),也就是說(shuō)它的輸入框是有兩種輸入方式的。 *

點(diǎn)擊后發(fā)現(xiàn),二者的輸入交互都是選擇跳轉(zhuǎn)到新的輸入頁(yè)面,這里應(yīng)該是考慮到用戶精準(zhǔn)輸入站點(diǎn)名稱的成本較高,需要給用戶快速簡(jiǎn)單的篩選方式,并且考慮到站點(diǎn)的數(shù)量太多,所以就需要用新的頁(yè)面去承載這些用于篩選的信息和功能。區(qū)別就在于,“Yandex Metro”拆成了兩個(gè)頁(yè)面,而“廣州地鐵”就只有一個(gè)。

廣州地鐵-輸入頁(yè)面

*“廣州地鐵”的輸入頁(yè)分為按車站和按出口地標(biāo)兩種內(nèi)容輸入方式,除了輸入框外,就直接是附近的站點(diǎn)以及按線路序號(hào)進(jìn)行快速選擇的列表。 *

Yandex Metro-輸入頁(yè)面

*“Yandex Metro”的兩個(gè)輸入頁(yè),一個(gè)鍵盤輸入,一個(gè)是列表篩選。輸入頁(yè)上除了輸入框,還有用戶收藏、最近使用記錄以及附近站點(diǎn)三欄列表信息。這些信息是用于匹配用戶在鍵盤輸入情況下,可能是去輸入收藏、歷史、附近站點(diǎn)的場(chǎng)景。而其點(diǎn)擊list圖標(biāo)進(jìn)入的這個(gè)list頁(yè)面,沒(méi)有任何輸入功能,只有篩選功能,并且有上下兩個(gè)導(dǎo)航。 *

評(píng)價(jià)輸入功能的好壞,就是看輸入的效率誰(shuí)更高

從使用場(chǎng)景來(lái)說(shuō),當(dāng)用戶進(jìn)行輸入操作,那么必定是搜索某條路線,而無(wú)論其所在地是起點(diǎn)還是終點(diǎn),都有很大可能是在找其當(dāng)前位置附近的地鐵站,因此附近站點(diǎn)這個(gè)信息是有存在價(jià)值的。而用戶收藏、最近使用記錄這些信息,從實(shí)際角度考慮,一般人坐地鐵坐過(guò)一次這條路線,那么下次再坐都應(yīng)該知道了,真正需要用到收藏和歷史的場(chǎng)景非常少。 因此在這點(diǎn)上,“Yandex Metro”的輸入頁(yè)面設(shè)計(jì)的收藏和歷史列表會(huì)有些多余。

而對(duì)于那些不喜歡鍵盤輸入的懶用戶來(lái)說(shuō),他們需要的是能夠快速找到他們想要的站點(diǎn),因此就需要篩選功能。

*“Yandex Metro”提供的篩選思路是通過(guò)字母表和線路序號(hào)兩種排列方式展示所有站點(diǎn)信息,篩選的交互同iOS通訊錄的交互一樣,即通過(guò)屏幕右側(cè)的字母數(shù)字列表快速錨點(diǎn)定位。這樣的好處是,無(wú)論是按字母表還是按線路序號(hào),用戶只需要切換segment控件即可,不會(huì)產(chǎn)生二次跳轉(zhuǎn)。缺點(diǎn)則是線路信息在頁(yè)面中的存在感較低,僅僅是通過(guò)顏色和小標(biāo)題去區(qū)分。 *

*“廣州地鐵”則是完全按照線路去對(duì)站點(diǎn)進(jìn)行分類,想去幾號(hào)線的站就去幾號(hào)線里面找。這樣的好處是,線路列表給用戶的感知度很強(qiáng)烈,這樣能使用戶在進(jìn)行篩選操作時(shí)目的感更強(qiáng),不容易出錯(cuò)。缺點(diǎn)則是需要產(chǎn)生二次跳轉(zhuǎn),無(wú)法快速在線路之間進(jìn)行切換,而且不知道是不是版本還沒(méi)更新,目前廣州地鐵每條線路上的所有站點(diǎn)都有一個(gè)對(duì)應(yīng)的序號(hào),但在app里面還是顯示當(dāng)前線路的序號(hào)。 *

**綜合來(lái)說(shuō),考慮到俄語(yǔ)也是由字母構(gòu)成,因此“Yandex Metro”通過(guò)字母以及序號(hào)排序的篩選方式是比較符合其本國(guó)人的語(yǔ)言習(xí)慣的,但這種操作方式誤操作的幾率太大,并不適合中國(guó)人(iOS自帶的通訊錄和微信的通訊錄讓我好頭疼,錘子通訊錄我覺(jué)得才是符合中國(guó)人語(yǔ)言習(xí)慣的),特別是當(dāng)某個(gè)字母表或者線路下面的站點(diǎn)太多,其實(shí)找起來(lái)也不方便?!皬V州地鐵”提供的篩選方式雖然會(huì)產(chǎn)生二次跳轉(zhuǎn),但是這種方式直接簡(jiǎn)單,檢索的成功率很高,相對(duì)來(lái)說(shuō)會(huì)比較適合國(guó)人使用。 **


反饋路線(系統(tǒng))/選擇合適路線 → 查看線路詳情

在搜索結(jié)果的頁(yè)面呈現(xiàn)上,二者的對(duì)比就非常明顯了。

廣州地鐵-搜索結(jié)果&路線詳情

*“廣州地鐵”是在線路圖上用位置icon標(biāo)記線路上的每一個(gè)站點(diǎn),上部支持耗時(shí)最短和換乘最短路線的切換,下部點(diǎn)擊或上滑是展開線路詳情。 *

Yandex Metro-搜索結(jié)果&路線詳情

*“Yandex Metro”會(huì)將當(dāng)前線路放大至屏幕合適區(qū)域,同時(shí)弱化其他所有無(wú)關(guān)站點(diǎn),只突出當(dāng)前線路的站點(diǎn)信息,同時(shí)頁(yè)面底部會(huì)有當(dāng)前線路的預(yù)覽。底部的預(yù)覽信息支持左右滑動(dòng)切換路線,點(diǎn)擊或上滑展開線路詳情,可以查看沿路站點(diǎn)以及換乘站。 *

**對(duì)比來(lái)說(shuō),“Yandex Metro”的設(shè)計(jì)對(duì)用戶來(lái)說(shuō)非常直觀,在結(jié)果狀態(tài)去除無(wú)關(guān)信息的做法有助于用戶專注于結(jié)果,避免用戶被無(wú)關(guān)信息干擾而影響對(duì)結(jié)果信息的閱讀。而“廣州地鐵”的設(shè)計(jì)就顯得有些隨意,這樣做相當(dāng)于是在頁(yè)面原有的信息上增加了等同數(shù)量的icon,使頁(yè)面更加復(fù)雜,位置icon在部分情況下甚至?xí)谧≌军c(diǎn)的名稱,這種體驗(yàn)對(duì)用戶來(lái)說(shuō)是非常差的,并且其只能提供兩種路線,用戶可選擇的路線少,這可能是因?yàn)槟壳皬V州地鐵的線網(wǎng)并不復(fù)雜,但目前已經(jīng)有七八條在建過(guò)規(guī)劃中,以后的線路組合是會(huì)越來(lái)越多,因此這種設(shè)計(jì)顯然是不合理的。 **


總結(jié)

總的來(lái)說(shuō),“Yandex Metro”在體驗(yàn)上還是明顯好過(guò)于“廣州地鐵”的,這也是大型互聯(lián)網(wǎng)公司產(chǎn)品和政府+外包公司組合產(chǎn)出的產(chǎn)品的區(qū)別所在,無(wú)論是視覺(jué)風(fēng)格還是交互反饋,甚至到微動(dòng)效上,都能看出Yandex在細(xì)節(jié)上的打磨是很用心的,各位可以自己下載體驗(yàn)一下,國(guó)內(nèi)可下無(wú)需代理。


非常感謝您的閱讀,您的支持是我最大的動(dòng)力

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容