設(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ā)表您的看法或意見更扁，感謝各位的閱讀盖腕，謝謝。
