「铁路12306」App Redesign for Interaction

设计背景

由于春运规模的庞大,抢车票大战几乎成为每年年尾准时上演的重头戏。移动端设备由于其丰富的使用场景及更加便捷友好的交互方式,愈加成为各大产品首要考虑的平台。作为拥有「纯正皇族血统」的订票平台,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的核心功能——「订票」在交互上的重设计就基本完成,其中一个重要的设计原则如下:

一个重视效率的任务流程应该把关键的信息与操作有秩序地整合,而其他次要信息则尽量不打断流程,影响流畅度。

另外,此篇文章主要是介绍一个大致的思路与理念,仅代表个人观点,很多细节还没有进行设计与规范,也未涉及视觉设计的部分。最后欢迎各位业内业外人士一起交流讨论,发表您的看法或意见,感谢各位的阅读,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 一、产品概述 1.体验环境 体验机型:华为荣耀6 plus 安卓版本:4.4.2 体验版本:2.92 体验时间:2...
    Juanial阅读 10,231评论 0 14
  • 说明:对比分析 铁路12306 和 智行火车票 两个APP(其实还有一个 高铁管家 ,但因为高铁管家的订票流程大部...
    _Ammy阅读 4,492评论 10 23
  • 导语 早上给父亲定火车票,不想开电脑就在手机下了携程app来订火车票。打开携程app进行搜索查询车票,因为之前没有...
    佳佳apple阅读 5,776评论 0 6
  • 小时候 调皮捣蛋爱惹事 总爱缠着她要糖吃 后来青春期 我固执任性不听话 妈妈更固执 我争不过她只能乖乖听话 生气吵...
    臭脾气小姐阅读 196评论 0 0
  • 一:大拇指是涂抹粉底的最佳工具,所以亲爱的们尽早改变用食指中指无名指抹粉底的习惯。而且大拇指的效果好过上粉底用的海...
    小寻小美阅读 449评论 0 1