内容型APP的展示形式，无外乎就是列表和卡片的组合展示。如何设计出恰当的展示形式，是设计的关键。下面我重点总结下旅游平台的展示，以“美团旅行”为例，谈谈内容型APP的几点设计方式。

“美团旅行”首页的内容可分为“特卖专区”、“旅行研究所”、“周末去哪儿/国内好去处/海外精选”、“精选目的地”和“猜你喜欢”五个模块，我会同别的APP对标，分析其优劣，并进行优化。

1.特卖专区

特卖汇应该是美团旅行的特色服务，包括限时抢购和主题折扣。我想，美团应该希望把特卖汇里面的主要内容都展示出来。就是如上图显示的三块内容。但是，这三块内容的排列显得略混乱。

想象一下用户看到“特卖汇”的时候，第一眼应该是被图片吸引，其次是“特卖汇”三个字，当看到“两天一夜”和“限时抢购”，会困惑这三者之间的关系。那么我们来理理这三块的逻辑关系，在具体针对每一块设计。

进入第二页，可以看到“特卖汇”包括了“限时抢购”和“主题折扣”，不难猜出“特卖汇”与“限时抢购”和“主题折扣”是包含关系，“限时抢购”与“主题折扣”是并列关系：

根据上面简单的逻辑分析，我将特卖汇的结构大致排列了一下：

“美团旅行” VS “携程”、“途牛”、“淘宝”

如果要说“限时抢购”最能抓住用户眼球的地方，可能就是倒计时了。因为人的注意力最容易被动态的事物吸引。下面比较几大平台“限时抢购”的设计：

（1）携程虽然将“限时抢购”的“限时”飙红加粗，并没有在第一时间内，产生用户心理冲击，让用户有点击的冲动。

（2）再看看淘宝和途牛，深谙此道。用户第一眼就会注意到倒计时，出于好奇，一定会点击进去看看。

综合上述分析，“限时抢购”可以采用途牛和淘宝这种方式设计——直接将时间放在首页，使用户产生紧迫感。

理清楚了逻辑和设计的细节，我对特卖专区这一块做了重新设计：

2.旅行研究所

（1）排版优化

“美团旅行”VS“马蜂窝”

我个人对“旅行研究所”的理解，是分享吃喝玩乐的地方，类似于攻略性质的，以博客文章为主。在排版上还可以优化，让用户一眼就能明白，这一块主要有哪些内容。可以对比马蜂窝的攻略排版方式：

（1）马蜂窝可以看到马蜂窝的“每日蜂首”也是分为两个模块，一个是可以横向滑动的每日文章精选，一个是推荐文章，不用点击“查看更多”，就可以很清楚知道这一块的主要内容。

（2）美团旅行美团的“旅行研究所”，同样分成了两块，“周末去哪儿”专栏和推荐文章。当用户看到“周末去哪儿”的时候，可能以为“旅行研究所”中只有跟“周末去哪儿”相关的内容，如果图片和标题不够吸引力人，很容易让用户失去进入二级页面查看更多的兴趣。

根据以上分析，我们可以将“旅行研究所”中几个主要的模块放在上面，可以像马蜂窝那样，以左右滑动的形式展示更多内容。

综合以上分析，对这个模块我做了如下设计：

（2）交互动效优化

设想一下使用场景：当用户看到“2017最适合私奔的18个地方，去过3个忍不住想结婚”的标题，被吸引后会点击。那么这个时候用户的诉求是希望看这篇文章讲的具体内容。但是，进去看到的是很多文章列表，已经找不到想看的那篇文章了。

“美团旅行”VS “飞猪旅行”

可以比较飞猪旅行的内容在页面之间的切换时如何做的：

点击文章之后，跳转到二级页面，将展示的文章显示在第一条。

再看看美团旅行：

点击想看的文章，跳转到二级页面后找不到了。出现了断层。

“美图旅行” VS “Airbnb”

动效方面，点击跳转到二级页面时，页面从右往左移出来，这总交互方式是否是最优呢？

我们可以看看Airbnb的设计：

从一级页跳转到二级页的时候，用户明显可以看到页面切换时，内容的变换轨迹。这种交互让人感动。针对以上分析，我做了如下优化：

3.周末去哪儿

可以看到，这一块叠加了很多块内容，横向的tab下面又包括了产品列表。在操作动作方面比较复杂：用户左右滑动，可以看到某一个tab下面的产品列表。如果用户注意到了上面的tab，需要点击，才能看到该tab下面对应的产品列表。

“美团” VS “今日头条”、“APP STORE”

我们知道，在手机端tab最好的交互效果是滑动，而不是点击。可以看看“今日头条”的tab切换，用户使用时仅仅靠滑动会感觉很方便。

还可以看看App store，在界面中也同样很好地实现了滑动产品列表展示：

综合上述分析，我将“周末去哪儿”这块作了重新设计：

4.精选目的地

关于精选目的地，我将照片替换成了手绘图片，视觉上可能会更好：

5.猜你喜欢

（1）排版优化

“美团旅行” VS “携程”、“MEDIUM”

可以看到，美团旅行的“猜你喜欢”用的是列表形式展示。列表式排版有很多卡片式无法匹及的优点。但是，如果所有的内容全部使用的列表式，时间长了，视觉上是否会疲劳呢？因此需要增加一些变化元素，让用户在视觉上有所缓解。

我们来看看携程的排列方式：

可以看到携程在“猜你喜欢”这个模块中添加了新的模块，比如“北京精选玩法”。我们暂不评价他的逻辑是否合理，但是这种增加新的排列方式，确实很能在视觉上提升体验。

再看看国外一个博客网站——medium，他们在面对全部都是同类型的内容时，式如何处理的：

可以看到，他们在列表的方式中穿插了卡片，以列表为主，与卡片结合的方式；每放几个列表内容之后，放一个卡片形式的内容，再放几个列表式的。这样有很多好处，除了视觉上减少单一模式的枯燥，可能还有些商业价值。

针对上面的分析，我作了如下优化：

（2）细节优化

“美团旅行” VS “淘宝”、“携程”

列表的优势除了可以提高浏览效率，可以一屏展示更多内容，还可以放更多与产品相关的细节。所以，细节在列表类设计时需要注意。

我们可以比较“美团旅行”、“淘宝”、“携程”这三者，对细节是如何处理的：

（1）美团旅行产品名和价格的排列位置比较好，但是消费人数的位置不统一，用户在阅读时，对于同一个位置出现不同类型信息，会感到困惑

（2）携程信息位置一致，但是较重要的“价格”被放到了右下角，用户在浏览信息时，视线迂回，不太理想

（3）淘宝信息很一致，主次分明，非常清晰

根据以上对比，我们在设计时，既要保证信息的一致性，又要使得用户第一时间注意到重要信息。那么，当信息较多，而空间较狭小时，我们需要将信息重要性做个排列：

产品名 > 价格 > 消费人数、评分 > 标签 > 距离（对于所有产品而言，周边游的产品除外）

我们可以根据重要性，排列这些信息：

根据以上的结构图，我重新设计了列表的细节：

总结：以上就是针对内容型APP排版方式的几个设计方式，基本上就是列表和卡片排版方式的综合运用。至于什么时候该采取什么样的形式，我们应该具体问题具体分析。产品对标，场景分解，注重细节。