旅游攻略APP排名前四的首页设计分析，携程、蚂蜂窝等都有

依据艾瑞网给出的数据表明，在用户品牌认知度方面，排名前四的是，基于行业影响力发展壮大起来的综合企业而有的攻略社区携程攻略、去哪儿攻略，在使用情况方面，排名前四的是，多年UGC积累的垂直企业蚂蜂窝，以及以出境攻略为主导的垂直企业穷游网。

此外，截止到2016年6月3日，于App Store旅游类别免费栏目的排名里面，除去电商票务、打车用车、短租住房以及一些别的应用，仅看专注于旅游攻略的应用，排名在前四位的同样是这四个应用，排名依次为，去哪儿攻略排第11位，携程攻略排第20位，蚂蜂窝排第21位，穷游网排第47位。

情况并非是，这几款产品首页设计的优秀程度，和它们的市场排名是一样的，其市场排名背后，存在资本、运营、市场积累等诸多方面的因素影响，然而，作为行业领跑者，他们产品的首页如此设计，必然是经过了资深产品团队的考量，并且经过了多次迭代，才以如今的设计呈现出来，对它们展开比较分析，相信会有不少收获，对于以后工作的开展，也能够有所帮助。

到此为止，能够确定被选择的首页分析对象是，携程攻略，是去哪儿攻略，是蚂蜂窝，是穷游网。

3. 产品首页分析3.1 携程攻略

3.1.1 首页展示

3.1.2 首页信息架构

3.1.3 产品定位及设计分析

有着这样一个极具特色醒目标语，它是，能够邂逅另一种别样全新世面样子，其中，关键重点词汇为，邂逅不相同别样形态。

先是瞧瞧产品的骨架底部tab，挑选用舵式设计，着重凸显“写游记”，目的在于引领用户去分享，提升UGC产出比率，这对于旅游攻略类产品来讲有着重大意义。接着除去首页以及我的，剩下的“微游记”契合“遇见”的定位，“口袋攻略”同样契合旅游攻略的主题。

再来瞧首页布局，首页的第二屏，有着“本月该去这里”的目的地推荐，还有“看看别人怎么玩”的游记推荐，一则是以景点作为切入角度，一则是以人物作为切入角度，然而其目的都是助力用户发觉更多有意思的旅游胜地，再度跟“遇见”形成呼应 。首页第一屏有的信息是滚动banner，还有目的地模块，也有票务模块，以及口袋攻略推荐。其中，重点是落在目的地模块，采用了留白的方式，还有大图标这一方式，并且通过字体加粗等方式，把用户视线聚集在该那里，引导用户找出所在之地的目的地以及周边的游玩项目，以此与slogan所强调的“遇见”相互呼应 。那么接下来，是出于商业需求以及着眼于方便用户的票务方面的模块，之后残留保留下来的首屏区域位置，产品团队选用了口袋攻略推荐模块，（这其中的某部分是携程搞的攻略里头比较亮亮眼的地方亮点点，要是有兴趣的人呢则人可以去瞅一瞅看一看）各个层面的攻略封面图片，采用的是类似书本视觉那种给到人专业性，令人可信的感觉色彩以及视觉设定或者那种风格化设计，跟其PGC的定位是相契合搭配融入的 。

在视觉方面，所采用的是天蓝色跟白色的搭配，这与携程旅行票务业务那种深蓝色给人造成的专业沉稳之感不一样，攻略里天蓝色所带来的感觉显得更为清新、轻快些，且更贴近于旅游、出行还有攻略的主题，与此同时，整个首页的视觉设计也跟目标用户的审美相契合。

到此能够确证，产品的定位是遇见以及发现，其所涵盖的信息，除去问答之外，基本上满足了用户的需要，在视觉方面同样达成了用户的审美要求。

3.2 去哪儿攻略

3.2.1首页展示

3.2.2 首页信息架构

3.2.3产品定位及设计分析

以聪明为特性的用于旅行的指引手册，才是你所需要的，才是你最该拥有的，才是你最值得信赖的指南 。

一开始是底部的tab哦，它采用的也是舵式设计呢，把写游记的按钮突显出来，以此去引导用户生成UGC。除去首页以及我的部分，剩下的是“发现”和“问答”，这里面“问答”在某种程度上是契合了“指南”的主题的。

跟着对首页布局予以查看，首页的第一屏涵盖了多数信息，第二屏里仅仅有游记模块，第一屏的顶部竟然不存在banner，这略微让人感到意外，思索设计思路是在首屏展示尽可能多的信息，顶部导航栏有目的地定位、目的地搜索、目的地足迹、签到。紧接着便是攻略模块，借助处于两行位置的八个图标，将目的地的吃、住处、出行方式、游玩项目，购物途径、娱乐途径聪游榜（当地游玩闪光点）、旅人须知（攻略具体细节）接入其中，这八个图标于整个页面里色泽鲜明，属于想要凸显的关键要点，然而遗憾的是，颜色的配比、分布并无规律，图标数量过多略微显得拥挤、杂乱，反倒致使用户没办法迅速寻觅到想要知晓信息的入口，是不是稍微有点主次颠倒了呢？

紧随其后的是票务模块，它以表格的形式予以呈现，如此便规避了与攻略模块的雷同情况，然而采用表格进行展示，并且其配色为灰色，这就等同于使这个模块被弱化了，对于一个具备商业转化功能的模块而言，这样的设计，依个人之见，是不太明智的。

再往下的是呈现当地游玩特色主打内容的聪游榜模块，此模块与“指南”主题相互呼应，第二屏那里是具备标签分类以及筛选功能的瀑布流式当地游记模块，借助这些功能方便用户获取自身感兴趣的信息 。

总体来讲，产品的定位主要基调设定成了“指南”，给人的那种感觉是打算去打造成工具类型的旅游攻略产品，然而首页里头对于“指南”的主题虽说已经有所体现，可遗憾的是依旧还不够突出，在功能这一方面基本上能够满足用户的需求，而在模块布局以及视觉设计这两方面还有着能够进行改善的空间。

3.3 蚂蜂窝

3.3.1首页展示

3.3.2 首页信息架构

3.3.3产品定位及设计分析

Slogan：蚂蜂窝自由行。关键词为“自由行”。

首先，来瞧一瞧tab，底部的tab运用的是标签导航这种设计方式，并且其仅仅只有3个标签，在除掉首页以及我的之后，留下来的便是“目的地”，如此一来显得简单明晰，然而呢，像这样进行设计的话，便会使得首页信息内容有所增多，极有可能会给用户造成一种产生拥挤混乱感觉的不太好的体验。

来看首页的布局，从顶部往下，先是顶部固定的banner，接着是搜索框，然后是目的地搜索历史，到这里已经占据了第一屏一半的空间，剩下的下半部分空间主要是攻略票务模块，该模块因留白较多，不太让人感觉拥挤，相反能很好地聚焦用户视线，不过颜色分布会略显混乱，要是能更有规律地分布，想必视觉效果会更佳。

第二屏之中，存在一篇精选游记推荐，还有一元旅游产品夺宝模块，其中，游记模块运用大图跟简洁的游记信息进行组合，之后是大片留白，进而给人一种清新的感觉，而夺宝模块采用鲜红色的大按钮以及进度条，在此处考虑是为了聚焦用户视线，以此提高商业转化。

第三屏，其所包含的信息量是比较少的，仅仅存在着“嗡嗡”这样的图片推荐模块，对于那上边用户自己喜欢的嗡嗡情形，用户能够去进行点赞操作。与此同时，图片是带有定位方面信息的。针对用户感兴趣的图片或者地区，用户是可以进入到嗡嗡详情展示页面的情形之下，进而与作者展开互动的。

“嗡嗡”的旅游达人推荐模块，处于第四屏，还有热门目的地推荐票务模块。达人模块是左右滑动的方式，因如此这般，能于屏内展现更多内容，并且不会让人觉着页面冗长、拥挤。热门目的地模块呢，在推荐目的地之际，融合了票务功能，进而增强了商业盈利的可能性。

屏幕的第五个，提供有关适合假期旅游目的地的推荐，是按照未来半年的时间跨度，以6个月为单位均匀划分，每个月设置一个频道，从时间维度出发进行，通过这样的方式来推荐，显得特别有人性化，让用户能更顺利地找到符合自身的旅游目的地。

整体而言，首页之中，尽管信息量较为大，然而设计是合理的，故而并没有那种拥挤混乱的感受，只是或许由于没有像携程以及去哪儿那般强大的票务支持的缘故，所以蚂蜂窝的商业元素相对来讲多一些，视觉这一方面，给人的感觉比较清新，契合旅游产品的风格，还符合目标用户的审美，功能这一方面，同样能够满足用户的需求。就产品定位“自由行”而言，更多需借由内容予以呈现，从被推荐的游记，到夺宝性质的旅游产品，再到热门的目的地，皆是和自由行有关联的优质内容，想必运营团队着实花费了不少精力，故而整个首页都具备贴合产品定位的情况。

3.4 穷游网

3.4.1首页展示

3.4.2首页信息架构

3.4.3产品定位及设计分析

Slogan：出境游，尽在穷游APP。关键词为“出境游”。

开始先去看一下底部的tab，从中把首页推荐以及我的这两项去除掉，剩余下来的部分是“目的地”和“社区”，由此能够看出社区在穷游的战略布局里所具有的重要意义。接下来是首页的布局情况，第一屏的顶部位置是滚动的banner，紧挨着它的是攻略票务模块，然而这个模块和其他几款攻略产品相比较而言，频道分类的数量比较少，仅仅只有4个频道，其中2个频道是和攻略有关的，另外2个频道是和票务有关的，其功能相对较为简单。再其次是“发现下一站”，它会推荐一些有意思的地方以及实用的tips。

第二屏当中，仅仅存在抢特价折扣这一个模块，还有一个专题大图，另外加上4个折扣旅游产品。因为穷游这种情况，并没有像携程又或者去哪儿那般颇具规模的票务业务，所以商业模块于首页里占据整个第二屏，这也就并非难以理解的事情了。

处于第三屏以及后续部分的，全都是以列表形式排列的游记推荐，总共推荐五十篇，每一次加载十篇，像这样进行分批加载的设计，一方面能够减少用户那些不必要的流量浪费，另一方面还能够提高加载速度。

从总体上来进行观察，穷游的首页信息架构是相对比较简单一些的，它把那种旅游攻略产品功能众多、让人看得眼花缭乱的感觉给降低了，然而实际上却是有更多的模块被隐藏在了二级甚至三级页面当中，像这样的设计对于那些需要用到这些模块的用户而言会使操作步骤有所增加，得跳转到更深层次的页面才行，进而降低了用户体验。所以就首页这一方面来讲是没有满足基本的用户需求的，可是整个产品却是能够满足的。其次在视觉这个层面上来说，由于展示的图片过多并且布局中留白较少，致使让人感觉页面较为拥挤。另外，产品定位的“出境游”，是借助内容来反向体现的，banner展示、发现小贴士、折扣产品、游记推荐等，都是和出境游相关的，不存在与境内游相关的信息呈现，由此可见，产品确实是专门致力于出境游市场 。

4. 总结

进行这4款应用首页的分析之后，我们能够归纳出一些旅游攻略产品首页设计方面的经验 。

在首页中通常包含的模块有：

标识旗帜，确定位置，查找栏，前往地点（查找）过往经历，票务，方法策略，前往地点推荐，旅行记录推荐，旅游行家推荐，旅游物品推荐。这些部分能大致符合用户的要求，然而依据各自产品的定位差异会对其中某些部分进行选择或舍弃。另外，首页中的模块，通常会与 tab 的频道，在内容方面，形成互补。要是首页中的推荐内容，是无差别推荐，那么 tab 通常会有定位目的地的频道。而倘若首页是按照定位目的地来推荐内容，那么 tab 则会有专门的频道，用来使用户发现其他的旅游信息。

排版方面：

自上而下通常分为4个部分：

横幅，确定位置，有一个在最上方、跟着页面移动的搜索栏，指向的目标是搜索过去票务攻略，还有按游记推举的目的地，依旅游达人推选的目的地，基于旅游产品推选的目的地 。

视觉方面：

多选用鲜明且亮丽的色彩，给人带来清新之又愉悦的感受，契合旅游的主题，还符合目标用户的审美，其次运用留白的方式来聚焦视线，与此同时减少页面的拥挤感。

不可否认，这几款产品，在某些架构方面，存在趋同现象，然而，对于用户而言，即便嘴上讲不出，心里却也是能够分清的，自由行的情况下，会前往蚂蜂窝，经济型出境游时，会选择穷游，涉及票务路线相关的，会上携程去哪儿，这一切，都与产品定位、信息架构、内容运营紧密相连，唯有用心做好这些，才会在用户脑海中留下印象，进而赢得细分的市场。

5. 我是PM

有这么一家处于互联网旅游行业中上等水平的公司，积累用户和内容于网站多年，还有各类酒店、机票合作渠道，App 端刚上线，其口号是“XX，让旅游计划更轻松！”总结之后我试着设计了一个旅游攻略产品首页的 demo，经由路线、攻略、景点推荐评分、游记推荐以及出行酒店机票组合，去契合让旅游计划更轻松的定位。

当点击搜索框之时，便会展开搜索页面，随后输入关键字，进而提供候选选项，这些候选选项会被进行分类，诸如地区、景点、酒店、机票、路线、攻略、游记、社区问答等等，并且依据关键字类型，候选项会呈现出相应的不同。

‘当地景点’的模块，是按照人气从高到低向左到右进行排列的，并可以经用户左右滑动来查看，人气评分是依据用户自行打分所计算得出的结果 。

“精选游记”模块的推荐按不同地区有着不一样的更新周期，且这个更新周期是不同的，对此团队内部应先对旅游地区进行分级，比如说：一级是热门地区，更新周期为三天一次，二级属于次热门地区，更新周期是一周一次，三级为普通旅游地区，更新周期是两周一次，而在实际操作的时候运营团队是根据实际情况来设定的。

下面是首页demo：

后记

感激阅读，鉴于自身水平有限，视野也有限情况下，此处文本存在不妥当之处，还期望各位能予以指点，还请尽情地去批评，狠狠地拍砖，拍得力度越大，那便是对我越大的助力，笔者必然会虚心接纳，多谢 。

那位名为kor的作者，姓小何，其QQ序号有的是411814246，微信的也是此序号，连QQ邮箱同样是411814246 。目前正处于求职状态之中，若有跟产品专员亦或是助理相关的工作，希望相关方面能予以联系 。

继续浏览有关 旅游攻略首页设计分析 的文章