恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Yandex Metro vs 广州地铁#交互#对比分析
0.0°
2017-03-20 原创文章 经验/观点 举报 1611 8 11 3

从任务流程角度分析两个地铁app的差异在哪里

之前去莫斯科出差,一开始对毛子的地铁比较怕,第一是因为地铁年代久远,车开起来都是哐当哐当的,第二是线网比较复杂,第三是语言不通。放一张图你们感受下。 


莫斯科地铁线网图

综合起来说就是怕坐丢,不过去了当地发现Yandex有一个地铁app,下了后用了一下,发现很好用,很自然的就想到跟我们广州自己的地铁app做一个对比。 


第一印象


首页对比

“广州地铁”首页上有banner,有入口,有新闻,有底部导航,与其说是一个坐地铁查地铁的工具,它更像是一个广州地铁的宣传平台。 “Yandex Metro”一进去就只有线网图、起始点的输入框以设置和买票按钮,其就是一个工具。


视觉风格上“Yandex Metro”更简洁直观,而“广州地铁”则会流露国家事业单位app那种特有的外包风。 


Core Action


作为地铁app,其的core action就应该是:查询地铁线路。 而要完成这一任务的流程中会涉及到很多环节:

任务流程

查看线网图 → 选择起点终点 → 搜索路线 → 反馈路线(系统)/选择合适路线 → 查看路线详情


使用场景


首先明确在什么样的场景下会用这类型的APP。 


就拿我自己举例,我第一次去莫斯科,不熟悉莫斯科的地铁,所以我要用来查线路。但这是否意味着只有对这个城市地铁不熟悉的人才会用呢?不一定。


再换个例子,我经常在广州,一般也很少广州地铁app的,因为我常去的路线我都清楚,但是偶尔去个不常去的地方,还是要看一下怎样换乘的(虽然都是直接百度地图就能满足这种需求,这里忽略掉这种使用场景)。


所以准确的来说,当需要查询不熟悉的地铁线路的时候,就可能会用到这种地铁app。 


那么从core action的角度去看,显然“Yandex Metro”的使用体验会更加纯粹,用户在第一个页面就可以开始主任务流程的操作。而“广州地铁”在查询地铁线路之外增加了很多其他的便民功能,这样做虽然更加人性化,也增加了app的使用场景,但用户在首页看不到任何线网图的信息,只能通过顶部的起始点输入框去进行第二步操作-选择起点终点,这样一定程度上会影响用户体验,是不符合用户的心理预期的。 


所以这里仅仅将“广州地铁“线网图功能和“Yandex Metro”进行对比。 


查看线网图 → 选择起点终点

Image title

从页面可以看出,两个app的任务流程在页面的表达上是不一样的。


“Yandex Metro”是让用户先看到线网图,再进行起始点的输入,而“广州地铁”则是相反。


从用户认知顺序的角度来说,地铁线网图应该是用户第一时间像关注了解的信息,而筛选起始点这种输入操作行为并非所有用户的首选,这也就是为什么在广州地铁大的换乘站,线网图前面总是站满了人。 所以“Yandex Metro”这种布局设计是相对合理的,而“广州地铁”这样设计我猜很大原因是希望和外部首页的交互统一,即输入操作都在顶部标题栏完成。 


但是二者都有一个设计不好的地方

起始点选择

二者线网图上的所有站点都是可点击并快速设置起点终点的,但是这个功能并没有相关的交互引导或视觉引导,属于隐藏功能。出于职业角度,我在用新的app的时候都会这里点点那里戳戳,但这不代表所有的人都会发现这个功能,或者第一次使用时就发现这个功能。因此这里比较适合在用户首次进入这个页面时给其一个引导浮层引导其去发现这个隐藏功能。


而在这个隐藏功能的设计上,“广州地铁”是在当前选中站点的上方直接弹出浮层,而“Yandex Metro”则是以当前选中站点为中心弹出浮层,同时会显示当前选中站点的名称。


当站点名称在站点图标上方时,“广州地铁”的这种设计就会造成浮层把站点名称遮住,而“Yandex Metro”的这种设计无论在什么情况下,用户在换出浮层后都能知道选中的是哪个站点,显然这样的设计更加合理,体验也更好。 


搜索路线


当用户浏览完线网图,需要去输入起始点信息的时候,就会接触到输入框,这里可以发现二者在输入框的交互上也有所不同。 

搜索框对比

首先是输入框本身,可以看到“广州地铁”是通过图标和文案来告知用户在此输入。而“Yandex Metro”除了文案之外,还有一个可点击的list图标,也就是说它的输入框是有两种输入方式的。 


点击后发现,二者的输入交互都是选择跳转到新的输入页面,这里应该是考虑到用户精准输入站点名称的成本较高,需要给用户快速简单的筛选方式,并且考虑到站点的数量太多,所以就需要用新的页面去承载这些用于筛选的信息和功能。


区别就在于,“Yandex Metro”拆成了两个页面,而“广州地铁”就只有一个。

广州地铁-输入页面

“广州地铁”的输入页分为按车站和按出口地标两种内容输入方式,除了输入框外,就直接是附近的站点以及按线路序号进行快速选择的列表。 

Yandex Metro-输入页面

“Yandex Metro”的两个输入页,一个键盘输入,一个是列表筛选。输入页上除了输入框,还有用户收藏、最近使用记录以及附近站点三栏列表信息。这些信息是用于匹配用户在键盘输入情况下,可能是去输入收藏、历史、附近站点的场景。而其点击list图标进入的这个list页面,没有任何输入功能,只有筛选功能,并且有上下两个导航。 


评价输入功能的好坏,就是看输入的效率谁更高


从使用场景来说,当用户进行输入操作,那么必定是搜索某条路线,而无论其所在地是起点还是终点,都有很大可能是在找其当前位置附近的地铁站,因此附近站点这个信息是有存在价值的。而用户收藏、最近使用记录这些信息,从实际角度考虑,一般人坐地铁坐过一次这条路线,那么下次再坐都应该知道了,真正需要用到收藏和历史的场景非常少。 因此在这点上,“Yandex Metro”的输入页面设计的收藏和历史列表会有些多余。


而对于那些不喜欢键盘输入的懒用户来说,他们需要的是能够快速找到他们想要的站点,因此就需要筛选功能。 


“Yandex Metro”提供的筛选思路是通过字母表和线路序号两种排列方式展示所有站点信息,筛选的交互同iOS通讯录的交互一样,即通过屏幕右侧的字母数字列表快速锚点定位。这样的好处是,无论是按字母表还是按线路序号,用户只需要切换segment控件即可,不会产生二次跳转。缺点则是线路信息在页面中的存在感较低,仅仅是通过颜色和小标题去区分。 


“广州地铁”则是完全按照线路去对站点进行分类,想去几号线的站就去几号线里面找。这样的好处是,线路列表给用户的感知度很强烈,这样能使用户在进行筛选操作时目的感更强,不容易出错。缺点则是需要产生二次跳转,无法快速在线路之间进行切换,而且不知道是不是版本还没更新,目前广州地铁每条线路上的所有站点都有一个对应的序号,但在app里面还是显示当前线路的序号。 


综合来说,考虑到俄语也是由字母构成,因此“Yandex Metro”通过字母以及序号排序的筛选方式是比较符合其本国人的语言习惯的,但这种操作方式误操作的几率太大,并不适合中国人(iOS自带的通讯录和微信的通讯录让我好头疼,锤子通讯录我觉得才是符合中国人语言习惯的),特别是当某个字母表或者线路下面的站点太多,其实找起来也不方便。“广州地铁”提供的筛选方式虽然会产生二次跳转,但是这种方式直接简单,检索的成功率很高,相对来说会比较适合国人使用。 


反馈路线(系统)/选择合适路线 → 查看线路详情


在搜索结果的页面呈现上,二者的对比就非常明显了。 

广州地铁-搜索结果&路线详情


“广州地铁”是在线路图上用位置icon标记线路上的每一个站点,上部支持耗时最短和换乘最短路线的切换,下部点击或上滑是展开线路详情。 

Yandex Metro-搜索结果&路线详情

“Yandex Metro”会将当前线路放大至屏幕合适区域,同时弱化其他所有无关站点,只突出当前线路的站点信息,同时页面底部会有当前线路的预览。底部的预览信息支持左右滑动切换路线,点击或上滑展开线路详情,可以查看沿路站点以及换乘站。 


对比来说,“Yandex Metro”的设计对用户来说非常直观,在结果状态去除无关信息的做法有助于用户专注于结果,避免用户被无关信息干扰而影响对结果信息的阅读。而“广州地铁”的设计就显得有些随意,这样做相当于是在页面原有的信息上增加了等同数量的icon,使页面更加复杂,位置icon在部分情况下甚至会遮住站点的名称,这种体验对用户来说是非常差的,并且其只能提供两种路线,用户可选择的路线少,这可能是因为目前广州地铁的线网并不复杂,但目前已经有七八条在建过规划中,以后的线路组合是会越来越多,因此这种设计显然是不合理的。 


总结


总的来说,“Yandex Metro”在体验上还是明显好过于“广州地铁”的,这也是大型互联网公司产品和政府+外包公司组合产出的产品的区别所在,无论是视觉风格还是交互反馈,甚至到微动效上,都能看出Yandex在细节上的打磨是很用心的,各位可以自己下载体验一下,国内可下无需代理。 



Image title

更新:2017-03-20

收藏

8人已收藏

线框BOY

小交互一枚,欢迎关注“线框BOY”(Wireframe-Boy)

  • 8

    作品

  • 463

    粉丝

  • 2

    关注

  • Dolphin Free Wifi-demo整理
  • 用Principle制作页面滚动、跳转进阶效果
  • 用Principle制作卡片左右划动动效
  • 怎样设计一个优惠信息卡片(长文)
相关标签

    猜你喜欢

      2017-03-20 原创文章 经验/观点 举报 1611 8 11 3

      Yandex Metro vs 广州地铁#交互#对比分析

      0.0°

      你确定要举报Yandex Metro vs 广州地铁#交互#对比分析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      8
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录