「铁路12306」App Redesign for Intera
设计背景
由于春运规模的庞大，抢车票大战几乎成为每年年尾准时上演的重头戏。移动端设备由于其丰富的使用场景及更加便捷友好的交互方式，愈加成为各大产品首要考虑的平台。作为拥有「纯正皇族血统」的订票平台，12306 的移动端产品「铁路12306」一经推出，便引发吐槽无数。系统稳定性差，卡顿频繁，加载缓慢，易崩溃闪退等。当今扁平化、配色活泼的视觉风格大行其道时，其UI看起来依旧像是iOS6以前的产物。交互层面上，任务流程与页面逻辑基本是照搬Web端的思路，并没有针对移动设备的特性与用户场景的多变性做出针对性设计。
而后，产品在14年12月推出了2.0版本，重新设计UI，优化性能，虽然整体品质仍乏善可陈，但至少让其从「老古董」焕发成「刚踏入社会的毛头小子」，有那么一点「年轻面貌」与「强健体魄」，虽涉世未深，亟待提高，但至少有些许潜力可言，也让人稍微感受到政府系产品并不是高高在上而是会注重用户体验的。此次Redesign主要针对iOS版「铁路12306」2.11的核心功能——「订票」进行交互层面上的优化设计，目标是让功能模块的信息架构愈加合理化，让用户更加便捷顺畅地完成订票任务，提升产品的用户体验。
产品定位
显而易见地，「铁路12306」是一款为国人提供在线订购火车票功能的工具型产品。就如产品Splash Screen上的slogan「便捷购票，就在12306」所说，作为一款工具型产品，又有春运抢票这种特殊的场景，「产品效率」在设计中必定是一个需要紧紧围绕的关键点。
订票
一、车票查询首页
根据现实中的具体业务与逻辑习惯，订购一张车票一般都有一个相对固定的流程，即最先确定出发地与目的地，接着确定出发时间，然后再根据车型、席别、耗时、票价、余票量（这几个顺序可变）等因素来选择车票，最终确认订单、完成订票流程。
车票预订首页
如上图1，「铁路12306」的车票查询首页给出了诸多检索的条件供用户选择，有些非必填的条件则给出了默认选项，如出发时间默认00:00-24:00，席别默认不限，车型默认全部，同时还提供添加乘客的功能。在此页面，新方案将出发时间、席别、车型的选项和添加乘客功能直接砍掉，增加只查高铁/动车选项，将学生票选项改为iOS上常用的checkbox控件...重设计思考主要有以下几点：
1.只要给出「起始终点站」和「出发日期」两个必要检索条件，就可以检索出一定数量（一般是十几种）以内的特定车票。在大多数场景下，我们需要尽可能快地让用户看到具体车票的情况，即让用户尽快完成检索达到车票列表页面，让用户在检索前填写或选择大量选项只会增加其焦虑感，就如在很多情况下用户不愿意去填写超长表单一个道理。
2.用户首先需要知道「起始终点站」和「出发日期」对应的车票余量，才会去考虑出发时间、车型、席别、价格等具体因素。所以在用户未知车票余量情况时，对这些因素进行选择意义不大。
3.虽然有些非必填的条件给出了默认选项，但依照用户从上到下的视觉扫描习惯，页面上存在的元素必定会在某个时间点成为用户的视焦，用户需要花时间对其进行辨识、思考、甚至是试操作，这无疑会增加用户的时间精力成本，降低效率，所以与第1、2点结合，这些选项可直接砍掉。
4.乘客的选择/添加一般是在确认选择具体车票之后，即确认订单时，放在车票检索前意义不大。
5.保留「学生票」选项是因为学生票与普通票在乘车时间上有差别，学生票一般是12月1号至3月31号和6月1号至9月30号，如果在车票检索结果出来后再切换乘车日期的话会很麻烦，破坏任务流程的流畅度，不如在一开始就给此次车票检索定性。且考虑到很少学生用户了解学生票的相关说明，故增加了「学生票说明」的入口。
6.页面只有「只查学生票」和「只查高铁动车」两个复选项，并没有构成长列表（空间充足），所以应根据平台规范选择相应的复选框控件。
二、车站选择
车站选择页
如上图1，「铁路12306」车站选择页使用「最近常用」、「热点车站」、「车站列表」三个顶Tab来实现视图的切换，重新设计的页面将「起始终点车站」置于页面顶部，并将输入框与搜索结合，既可在下方list中进行点选，也可点击输入框进行车站搜索；「热门城市」采用方块排布的呈现方式，屏幕右边缘有首字母快速定位条。
1.将「起始终点车站」置于页面顶部的好处是用户可以在当前页面对车站进行多次更改，而不需要来回切换页面。
2.热门车站数量有限，只需占用部分屏幕空间，采用方块排布对空间的利用率更高，点选更直观便捷。
3.由于车票查询首页已经有「最近常用路线」可选，所以此页面的「最近常用车站」优先级不高，可以去除。
三、选择出发日期
选择出发日期页
如上图1，「铁路12306」选择出发日期页面采用web端较常见的calendar控件，这种形式的控件在iOS7之后的移动端已经很难看到了，信息的可预见性差，需要频繁点击切换，没有充分发挥移动端设备交互丰富、感官直接的天生优势。
1.由订票业务可知，车票的预售期一般为60天，60天外不可购买，也就是说我们只需要在某三个月份里面进行日期选择，页面也只需给出三个月的日历表，这块信息内容的框架是稳定的。所以重设计方案采用现在比较流行的类似feed流的排布，月份之间的关联性较强，信息内容更直观，通过swipe手势来查看前后月份的日历表。
2.给出农历日期及重要节日，满足不同用户在不同场景下的需求。
3.「今天」、「已选日期」、「不可选日期」做不同状态的视觉区分（如上图2）
四、车票信息列表
车票信息列表页
「铁路12306」属于webapp，内部功能都是通过web实现，这也是其性能差，不稳定的原因之一。webapp适用于数据量大，加载频繁的内容，但显示效果较差，某些视觉、动效实现效果一般。原产品的车票信息列表视图信息较多，留白较少，排布效果一般，显得杂乱拥挤，信息无重点，层级不明显，展开列表还可以查看列车时刻表。重设计的列表视图将信息重新进行归类、排布、区分：
1.将发车时间、终点站到达时间归于从左到右顺序的第一区块，在页面最左侧形成一条虚拟的从上到下的时间轴，并通过大字号和颜色突出发车时间的优先级，这样用户可以快速定位到自己理想的乘车时间。
2.第二区块为车型（列车号）与全程耗时，此部分对于用户重要性一般（只需对D/G/T这些字母进行识别），但按照信息的逻辑顺序，可以把其排在第二区块。
3.第三区块为起始站和终点站，通过引导线图形的引导，增强信息可读性、易读性。
4.最后区块一般是最重要的信息，影响着订单成功率或转化率，所以把价格和车票余量信息置于此区块内。这样用户阅读完最影响购买决策的信息（价格和余票）后，就相当于已经完成对该车票全部信息的阅读，有助于引导用户完成购买决策，进入确认订单页面。
5.点击「发时排序」，订单按发车时间从晚到早排序（默认是从早到晚），标签文案变为「发时从晚到早」，二次点击则订单按发车时间从早到晚排序，标签文案变为「发时从早到晚」；「耗时排序」与「价格排序」机制同上。
6.点击「筛选」，可对车票列表进行高级筛选（如上图3），由于信息密度大，所以采用打勾式的checkbox。
7.一般情况下，列车时刻表（途经站点）对用户选择哪趟列车的决策影响不大，优先级不高，且展开列表的形式会影响页面关键信息框架（车票列表）的稳定度，打破框架给人的既定印象。所以将其放到「确认订单」页面更加合理。
五、确认订单
确认订单页
1.新方案把「起始到达时间」突出，弱化「起始终点车站」。因为「起始终点车站」在最开始检索车票前就已经确认，而「起始到达时间」是上一步刚刚选择的，需要再次确认，所以优先级应该更高。
2.「时刻表」查看按钮放在「起始终点车站」连接线中间位置，更加符合逻辑，也更贴近用户心理模型。
3.点击「时刻表」查看按钮后弹出modal dialog（如上图3）显示details。详情视图的信息按照路线/时间轴排列。
4.原设计中座席的选择视图为类宫格式，用户的阅读视线为从左到右，考虑到手机端的点击热区分布，新方案改为列表视图。
5.一般来说，使用12306账号登录时，账号就已经绑定了已添加乘客的信息，所以应默认显示最近两位乘客的信息（超出两位的隐藏）以供选择。
6.底部操作栏显示已选乘客人数、合计价格与提交订单的按钮，此栏默认置底，不随页面滚动而收缩。
六、总结
至此，针对「铁路12306」App的核心功能——「订票」在交互上的重设计就基本完成，其中一个重要的设计原则如下：
一个重视效率的任务流程应该把关键的信息与操作有秩序地整合，而其他次要信息则尽量不打断流程，影响流畅度。
另外，此篇文章主要是介绍一个大致的思路与理念，仅代表个人观点，很多细节还没有进行设计与规范，也未涉及视觉设计的部分。最后欢迎各位业内业外人士一起交流讨论，发表您的看法或意见，感谢各位的阅读，谢谢。
