設(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)訂單础钠、完成訂票流程。
如上圖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ā)日期
如上圖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)訂單
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ā)表您的看法或意見更扁,感謝各位的閱讀盖腕,謝謝。