竞品分析

天巡旅行

天巡的app整体年轻化，在同类型产品中与众不同，跳脱出传统的旅游app框架，页面也是各种炫技动效不断，当然某些动效其实并没有什么意义可言，对用户来说纯粹是浪费时间。下图是它的价格柱状图表（左：单程。右：往返）。

它的每日价格柱形条相对较宽，大于最小可点击范围（44px），当用户点击下面柱形条，顶部黑色区域即时显示日期和对应的价格。最低价用虚线标注，方便用户对比价格。

优点：1. 选择日期在顶部着重显示，对用户点击柱形条查看价格的行为来说是强提示。

          2. 对于没有显示价格的柱形条，设计上才用半圆＋搜索icon, 简单易懂。

          3. 手势左右滚动柱形条可以查看更多时间的价格。

          4. 点击区域较大，误操作机率小。

          5. 周六，周日突出显示，区别于工作日，方便用户选择合适的时间出行。

          6. 往返选择时分开显示图表， 在用户体验上很直观明了。

缺点：1. 用户无法点击最低价的黑色小图标来迅速找到最低价的日期，而需要手动左右翻滚才能找到，使用起来有些浪费时间。

          2. 柱形条比较宽，因此很难在一个界面中看出整体的价格走势。（这是pm的想法，我觉得没必要让用户在柱形图看出价格趋势，因为价格趋势图有可以做更直观的价格走势图表，像阿里旅游就有，同一个页面想要表达的东西太多太杂，反而不能达到预期）

阿里旅行

（左图：机票价格列表；右图：价格矩形图表）手势下滑展开矩形图表。和天巡的差别在于：他的横向细线对应显示的是当前用户选中的价格。整个图表中不提示用户最低价，只用红色表明比当前价格更低的价格。

优点：1. 图表利用手势嵌入价格列表页面，功能上增加了低价日历，让用户可以直观的去根据价格或者日期的需求选择机票。

          2. 深色底图配合柱形图表，视觉上效果佳，而且配合嵌入式的场景，恰到好处。

缺点：1. 最低价格需要用户自己寻找，并没有用红色柱形图标示。

设计成果

视觉第一稿

问题：1. 单程和往返的的btn点击感略弱。 

          2. 柱状图的色彩和 ctrip蓝色系不匹配。

          3. 往返机票时，停留时间滑动条在非原生app上实现是否能达到预期效果有待考证。

视觉第二稿

A 将滑动条置于机票卡片和图表之上，暗示用户它可以控制它下方的内容。

B 将滑动条改为可点选的展示方式，避免了滑动效果在非原生app上实现的成果达到预期。

ps：红色为最低价提示。黄色为点击状态。

顶部的单程和往返标签按钮点击状态弱，并没有解决。

视觉第三稿

目前最终确认的视觉稿如下，从携程“发现低价板块”搜索地点，出现浮层（新手引导）在“价格趋势图表”之上。

1. 为了增强单程/往返的点击感，将它置于头部，并强化按钮的设计形态。

2. 将滑动条置于价格卡片和柱状图表之上，暗示用户它的可操作和控制性。

3. 将价格颜色加深，与携程主流程价格列表页面的价格颜色相呼应，防止用户跳转页面之后感到迷茫。

4. 红色最低价线连接最低价格图形按钮，点击即可迅速滑动到最低价的日期柱条。

5. 柱形条相对于阿里旅游和天巡更密，在满足最小点击区域的前提下，用户在一屏内可以查看到更多天数的信息，并能更直观的展现出整体的价格趋势。

有待优化问题：

1. 主流程价格列表和趋势图表来回切换的按钮不够显著，用户恐难以主动学习来回切换操作。

2. 机票卡片主要凸显的第一层级信息应该是时间，但现在卡片信息过于平均，没有很好的区分层级。

3. 我个人比较喜欢第二稿的点选停留时间，然而pm觉得滑条效果更好。

～