「鐵路12306」App Redesign for Interaction

設(shè)計(jì)背景

由于春運(yùn)規(guī)模的龐大铃剔,搶車票大戰(zhàn)幾乎成為每年年尾準(zhǔn)時(shí)上演的重頭戲撒桨。移動(dòng)端設(shè)備由于其豐富的使用場(chǎng)景及更加便捷友好的交互方式,愈加成為各大產(chǎn)品首要考慮的平臺(tái)键兜。作為擁有「純正皇族血統(tǒng)」的訂票平臺(tái)凤类,12306 的移動(dòng)端產(chǎn)品「鐵路12306」一經(jīng)推出,便引發(fā)吐槽無數(shù)普气。系統(tǒng)穩(wěn)定性差谜疤,卡頓頻繁,加載緩慢现诀,易崩潰閃退等夷磕。當(dāng)今扁平化、配色活潑的視覺風(fēng)格大行其道時(shí)仔沿,其UI看起來依舊像是iOS6以前的產(chǎn)物坐桩。交互層面上,任務(wù)流程與頁面邏輯基本是照搬Web端的思路封锉,并沒有針對(duì)移動(dòng)設(shè)備的特性與用戶場(chǎng)景的多變性做出針對(duì)性設(shè)計(jì)绵跷。

而后,產(chǎn)品在14年12月推出了2.0版本烘浦,重新設(shè)計(jì)UI抖坪,優(yōu)化性能萍鲸,雖然整體品質(zhì)仍乏善可陳闷叉,但至少讓其從「老古董」煥發(fā)成「剛踏入社會(huì)的毛頭小子」,有那么一點(diǎn)「年輕面貌」與「強(qiáng)健體魄」脊阴,雖涉世未深握侧,亟待提高蚯瞧,但至少有些許潛力可言,也讓人稍微感受到政府系產(chǎn)品并不是高高在上而是會(huì)注重用戶體驗(yàn)的品擎。此次Redesign主要針對(duì)iOS版「鐵路12306」2.11的核心功能——「訂票」進(jìn)行交互層面上的優(yōu)化設(shè)計(jì)埋合,目標(biāo)是讓功能模塊的信息架構(gòu)愈加合理化,讓用戶更加便捷順暢地完成訂票任務(wù)萄传,提升產(chǎn)品的用戶體驗(yàn)甚颂。

產(chǎn)品定位

顯而易見地,「鐵路12306」是一款為國(guó)人提供在線訂購(gòu)火車票功能的工具型產(chǎn)品秀菱。就如產(chǎn)品Splash Screen上的slogan「便捷購(gòu)票振诬,就在12306」所說,作為一款工具型產(chǎn)品衍菱,又有春運(yùn)搶票這種特殊的場(chǎng)景赶么,「產(chǎn)品效率」在設(shè)計(jì)中必定是一個(gè)需要緊緊圍繞的關(guān)鍵點(diǎn)。

訂票

一脊串、車票查詢首頁

根據(jù)現(xiàn)實(shí)中的具體業(yè)務(wù)與邏輯習(xí)慣辫呻,訂購(gòu)一張車票一般都有一個(gè)相對(duì)固定的流程,即最先確定出發(fā)地與目的地琼锋,接著確定出發(fā)時(shí)間放闺,然后再根據(jù)車型、席別缕坎、耗時(shí)雄人、票價(jià)、余票量(這幾個(gè)順序可變)等因素來選擇車票念赶,最終確認(rèn)訂單础钠、完成訂票流程。

車票預(yù)訂首頁

如上圖1叉谜,「鐵路12306」的車票查詢首頁給出了諸多檢索的條件供用戶選擇旗吁,有些非必填的條件則給出了默認(rèn)選項(xiàng),如出發(fā)時(shí)間默認(rèn)00:00-24:00停局,席別默認(rèn)不限很钓,車型默認(rèn)全部,同時(shí)還提供添加乘客的功能董栽。在此頁面码倦,新方案將出發(fā)時(shí)間、席別锭碳、車型的選項(xiàng)和添加乘客功能直接砍掉袁稽,增加只查高鐵/動(dòng)車選項(xiàng),將學(xué)生票選項(xiàng)改為iOS上常用的checkbox控件...重設(shè)計(jì)思考主要有以下幾點(diǎn):

1.只要給出「起始終點(diǎn)站」和「出發(fā)日期」兩個(gè)必要檢索條件擒抛,就可以檢索出一定數(shù)量(一般是十幾種)以內(nèi)的特定車票推汽。在大多數(shù)場(chǎng)景下补疑,我們需要盡可能快地讓用戶看到具體車票的情況,即讓用戶盡快完成檢索達(dá)到車票列表頁面歹撒,讓用戶在檢索前填寫或選擇大量選項(xiàng)只會(huì)增加其焦慮感莲组,就如在很多情況下用戶不愿意去填寫超長(zhǎng)表單一個(gè)道理。

2.用戶首先需要知道「起始終點(diǎn)站」和「出發(fā)日期」對(duì)應(yīng)的車票余量暖夭,才會(huì)去考慮出發(fā)時(shí)間锹杈、車型、席別迈着、價(jià)格等具體因素嬉橙。所以在用戶未知車票余量情況時(shí),對(duì)這些因素進(jìn)行選擇意義不大寥假。

3.雖然有些非必填的條件給出了默認(rèn)選項(xiàng)市框,但依照用戶從上到下的視覺掃描習(xí)慣,頁面上存在的元素必定會(huì)在某個(gè)時(shí)間點(diǎn)成為用戶的視焦糕韧,用戶需要花時(shí)間對(duì)其進(jìn)行辨識(shí)枫振、思考、甚至是試操作萤彩,這無疑會(huì)增加用戶的時(shí)間精力成本粪滤,降低效率,所以與第1雀扶、2點(diǎn)結(jié)合杖小,這些選項(xiàng)可直接砍掉。

4.乘客的選擇/添加一般是在確認(rèn)選擇具體車票之后愚墓,即確認(rèn)訂單時(shí)予权,放在車票檢索前意義不大。

5.保留「學(xué)生票」選項(xiàng)是因?yàn)閷W(xué)生票與普通票在乘車時(shí)間上有差別浪册,學(xué)生票一般是12月1號(hào)至3月31號(hào)和6月1號(hào)至9月30號(hào)扫腺,如果在車票檢索結(jié)果出來后再切換乘車日期的話會(huì)很麻煩,破壞任務(wù)流程的流暢度村象,不如在一開始就給此次車票檢索定性笆环。且考慮到很少學(xué)生用戶了解學(xué)生票的相關(guān)說明,故增加了「學(xué)生票說明」的入口厚者。

6.頁面只有「只查學(xué)生票」和「只查高鐵動(dòng)車」兩個(gè)復(fù)選項(xiàng)躁劣,并沒有構(gòu)成長(zhǎng)列表(空間充足),所以應(yīng)根據(jù)平臺(tái)規(guī)范選擇相應(yīng)的復(fù)選框控件库菲。

二账忘、車站選擇

車站選擇頁

如上圖1,「鐵路12306」車站選擇頁使用「最近常用」、「熱點(diǎn)車站」闪萄、「車站列表」三個(gè)頂Tab來實(shí)現(xiàn)視圖的切換,重新設(shè)計(jì)的頁面將「起始終點(diǎn)車站」置于頁面頂部奇颠,并將輸入框與搜索結(jié)合败去,既可在下方list中進(jìn)行點(diǎn)選,也可點(diǎn)擊輸入框進(jìn)行車站搜索烈拒;「熱門城市」采用方塊排布的呈現(xiàn)方式圆裕,屏幕右邊緣有首字母快速定位條。

1.將「起始終點(diǎn)車站」置于頁面頂部的好處是用戶可以在當(dāng)前頁面對(duì)車站進(jìn)行多次更改荆几,而不需要來回切換頁面吓妆。

2.熱門車站數(shù)量有限,只需占用部分屏幕空間吨铸,采用方塊排布對(duì)空間的利用率更高行拢,點(diǎn)選更直觀便捷。

3.由于車票查詢首頁已經(jīng)有「最近常用路線」可選诞吱,所以此頁面的「最近常用車站」優(yōu)先級(jí)不高舟奠,可以去除。

三房维、選擇出發(fā)日期

選擇出發(fā)日期頁

如上圖1沼瘫,「鐵路12306」選擇出發(fā)日期頁面采用web端較常見的calendar控件,這種形式的控件在iOS7之后的移動(dòng)端已經(jīng)很難看到了咙俩,信息的可預(yù)見性差耿戚,需要頻繁點(diǎn)擊切換,沒有充分發(fā)揮移動(dòng)端設(shè)備交互豐富阿趁、感官直接的天生優(yōu)勢(shì)膜蛔。

1.由訂票業(yè)務(wù)可知,車票的預(yù)售期一般為60天脖阵,60天外不可購(gòu)買飞几,也就是說我們只需要在某三個(gè)月份里面進(jìn)行日期選擇,頁面也只需給出三個(gè)月的日歷表独撇,這塊信息內(nèi)容的框架是穩(wěn)定的屑墨。所以重設(shè)計(jì)方案采用現(xiàn)在比較流行的類似feed流的排布,月份之間的關(guān)聯(lián)性較強(qiáng)纷铣,信息內(nèi)容更直觀卵史,通過swipe手勢(shì)來查看前后月份的日歷表。

2.給出農(nóng)歷日期及重要節(jié)日搜立,滿足不同用戶在不同場(chǎng)景下的需求以躯。

3.「今天」、「已選日期」、「不可選日期」做不同狀態(tài)的視覺區(qū)分(如上圖2)

四忧设、車票信息列表

車票信息列表頁

「鐵路12306」屬于webapp刁标,內(nèi)部功能都是通過web實(shí)現(xiàn),這也是其性能差址晕,不穩(wěn)定的原因之一膀懈。webapp適用于數(shù)據(jù)量大,加載頻繁的內(nèi)容谨垃,但顯示效果較差启搂,某些視覺、動(dòng)效實(shí)現(xiàn)效果一般刘陶。原產(chǎn)品的車票信息列表視圖信息較多胳赌,留白較少,排布效果一般匙隔,顯得雜亂擁擠疑苫,信息無重點(diǎn),層級(jí)不明顯纷责,展開列表還可以查看列車時(shí)刻表缀匕。重設(shè)計(jì)的列表視圖將信息重新進(jìn)行歸類、排布碰逸、區(qū)分:

1.將發(fā)車時(shí)間乡小、終點(diǎn)站到達(dá)時(shí)間歸于從左到右順序的第一區(qū)塊,在頁面最左側(cè)形成一條虛擬的從上到下的時(shí)間軸饵史,并通過大字號(hào)和顏色突出發(fā)車時(shí)間的優(yōu)先級(jí)满钟,這樣用戶可以快速定位到自己理想的乘車時(shí)間。

2.第二區(qū)塊為車型(列車號(hào))與全程耗時(shí)胳喷,此部分對(duì)于用戶重要性一般(只需對(duì)D/G/T這些字母進(jìn)行識(shí)別)湃番,但按照信息的邏輯順序,可以把其排在第二區(qū)塊吭露。

3.第三區(qū)塊為起始站和終點(diǎn)站吠撮,通過引導(dǎo)線圖形的引導(dǎo),增強(qiáng)信息可讀性讲竿、易讀性泥兰。

4.最后區(qū)塊一般是最重要的信息,影響著訂單成功率或轉(zhuǎn)化率题禀,所以把價(jià)格和車票余量信息置于此區(qū)塊內(nèi)鞋诗。這樣用戶閱讀完最影響購(gòu)買決策的信息(價(jià)格和余票)后,就相當(dāng)于已經(jīng)完成對(duì)該車票全部信息的閱讀迈嘹,有助于引導(dǎo)用戶完成購(gòu)買決策削彬,進(jìn)入確認(rèn)訂單頁面全庸。

5.點(diǎn)擊「發(fā)時(shí)排序」,訂單按發(fā)車時(shí)間從晚到早排序(默認(rèn)是從早到晚)融痛,標(biāo)簽文案變?yōu)椤赴l(fā)時(shí)從晚到早」壶笼,二次點(diǎn)擊則訂單按發(fā)車時(shí)間從早到晚排序,標(biāo)簽文案變?yōu)椤赴l(fā)時(shí)從早到晚」雁刷;「耗時(shí)排序」與「價(jià)格排序」機(jī)制同上覆劈。

6.點(diǎn)擊「篩選」,可對(duì)車票列表進(jìn)行高級(jí)篩選(如上圖3)安券,由于信息密度大墩崩,所以采用打勾式的checkbox氓英。

7.一般情況下侯勉,列車時(shí)刻表(途經(jīng)站點(diǎn))對(duì)用戶選擇哪趟列車的決策影響不大,優(yōu)先級(jí)不高铝阐,且展開列表的形式會(huì)影響頁面關(guān)鍵信息框架(車票列表)的穩(wěn)定度址貌,打破框架給人的既定印象。所以將其放到「確認(rèn)訂單」頁面更加合理徘键。

五练对、確認(rèn)訂單

確認(rèn)訂單頁

1.新方案把「起始到達(dá)時(shí)間」突出,弱化「起始終點(diǎn)車站」吹害。因?yàn)椤钙鹗冀K點(diǎn)車站」在最開始檢索車票前就已經(jīng)確認(rèn)螟凭,而「起始到達(dá)時(shí)間」是上一步剛剛選擇的,需要再次確認(rèn)它呀,所以優(yōu)先級(jí)應(yīng)該更高螺男。

2.「時(shí)刻表」查看按鈕放在「起始終點(diǎn)車站」連接線中間位置,更加符合邏輯纵穿,也更貼近用戶心理模型下隧。

3.點(diǎn)擊「時(shí)刻表」查看按鈕后彈出modal dialog(如上圖3)顯示details。詳情視圖的信息按照路線/時(shí)間軸排列谓媒。

4.原設(shè)計(jì)中座席的選擇視圖為類宮格式淆院,用戶的閱讀視線為從左到右,考慮到手機(jī)端的點(diǎn)擊熱區(qū)分布句惯,新方案改為列表視圖土辩。

5.一般來說,使用12306賬號(hào)登錄時(shí)抢野,賬號(hào)就已經(jīng)綁定了已添加乘客的信息脯燃,所以應(yīng)默認(rèn)顯示最近兩位乘客的信息(超出兩位的隱藏)以供選擇。

6.底部操作欄顯示已選乘客人數(shù)蒙保、合計(jì)價(jià)格與提交訂單的按鈕辕棚,此欄默認(rèn)置底,不隨頁面滾動(dòng)而收縮。

六逝嚎、總結(jié)

至此扁瓢,針對(duì)「鐵路12306」App的核心功能——「訂票」在交互上的重設(shè)計(jì)就基本完成,其中一個(gè)重要的設(shè)計(jì)原則如下:

一個(gè)重視效率的任務(wù)流程應(yīng)該把關(guān)鍵的信息與操作有秩序地整合补君,而其他次要信息則盡量不打斷流程引几,影響流暢度。

另外挽铁,此篇文章主要是介紹一個(gè)大致的思路與理念伟桅,僅代表個(gè)人觀點(diǎn),很多細(xì)節(jié)還沒有進(jìn)行設(shè)計(jì)與規(guī)范叽掘,也未涉及視覺設(shè)計(jì)的部分楣铁。最后歡迎各位業(yè)內(nèi)業(yè)外人士一起交流討論,發(fā)表您的看法或意見更扁,感謝各位的閱讀盖腕,謝謝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末浓镜,一起剝皮案震驚了整個(gè)濱河市溃列,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌膛薛,老刑警劉巖听隐,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異哄啄,居然都是意外死亡雅任,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門增淹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來椿访,“玉大人,你說我怎么就攤上這事虑润〕擅担” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵拳喻,是天一觀的道長(zhǎng)哭当。 經(jīng)常有香客問我,道長(zhǎng)冗澈,這世上最難降的妖魔是什么钦勘? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮亚亲,結(jié)果婚禮上彻采,老公的妹妹穿的比我還像新娘腐缤。我一直安慰自己,他們只是感情好肛响,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布岭粤。 她就那樣靜靜地躺著,像睡著了一般特笋。 火紅的嫁衣襯著肌膚如雪剃浇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天猎物,我揣著相機(jī)與錄音虎囚,去河邊找鬼。 笑死蔫磨,一個(gè)胖子當(dāng)著我的面吹牛淘讥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播质帅,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼适揉,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼留攒!你這毒婦竟也來了煤惩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤炼邀,失蹤者是張志新(化名)和其女友劉穎魄揉,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拭宁,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡洛退,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杰标。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兵怯。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖腔剂,靈堂內(nèi)的尸體忽然破棺而出媒区,到底是詐尸還是另有隱情,我是刑警寧澤掸犬,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布袜漩,位于F島的核電站,受9級(jí)特大地震影響湾碎,放射性物質(zhì)發(fā)生泄漏宙攻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一介褥、第九天 我趴在偏房一處隱蔽的房頂上張望座掘。 院中可真熱鬧递惋,春花似錦、人聲如沸溢陪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嬉愧。三九已至贩挣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間没酣,已是汗流浹背王财。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留裕便,地道東北人绒净。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像偿衰,于是被迫代替她去往敵國(guó)和親挂疆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一下翎、產(chǎn)品概述 1.體驗(yàn)環(huán)境 體驗(yàn)機(jī)型:華為榮耀6 plus 安卓版本:4.4.2 體驗(yàn)版本:2.92 體驗(yàn)時(shí)間:2...
    Juanial閱讀 10,984評(píng)論 0 14
  • 說明:對(duì)比分析 鐵路12306 和 智行火車票 兩個(gè)APP(其實(shí)還有一個(gè) 高鐵管家 缤言,但因?yàn)楦哞F管家的訂票流程大部...
    _Ammy閱讀 4,660評(píng)論 10 23
  • 導(dǎo)語 早上給父親定火車票,不想開電腦就在手機(jī)下了攜程app來訂火車票视事。打開攜程app進(jìn)行搜索查詢車票胆萧,因?yàn)橹皼]有...
    佳佳a(bǔ)pple閱讀 5,886評(píng)論 0 6
  • 小時(shí)候 調(diào)皮搗蛋愛惹事 總愛纏著她要糖吃 后來青春期 我固執(zhí)任性不聽話 媽媽更固執(zhí) 我爭(zhēng)不過她只能乖乖聽話 生氣吵...
    臭脾氣小姐閱讀 203評(píng)論 0 0
  • 一:大拇指是涂抹粉底的最佳工具,所以親愛的們盡早改變用食指中指無名指抹粉底的習(xí)慣俐东。而且大拇指的效果好過上粉底用的海...
    小尋小美閱讀 459評(píng)論 0 1