本文作者基于大众点评、携程旅行APP中酒店的“筛选”功能进行相应的对比分析，希望通过此文能够给各位带来一些启发。

引言

在正式进行“筛选”功能对比之前，我想我们首先要考虑和解答以下问题：

一、关于用户

1、用户使用“筛选”功能的需求或者想要达到的目的是什么？

可以更精准、快速、高效地找到自己期望获得的产品

2、用户使用“筛选”功能的场景或流程是什么？相对应的行为有哪些？

二、关于产品

1、设计产品“筛选”功能的目标是什么？

一方面是帮助用户解决“精准高效地找到产品”的需求；另一方面是提高用户体验，让用户对产品产生粘性，积累用户，从而获得更大的转化价值。

2、如何实现上述目标？

实现上述目标，需要我们从用户的角度出发，对产品进行设计。诺曼在其《设计心理学》一书中指出，用户的认知包括三个层面：

• 本能层面，和视觉有关，需要在产品的界面、样式、视觉效果上提升用户体验；
• 行为层面，和交互、用户的操作有关，需要我们在产品操作的流程、操作成本、操作反馈上做到简化、高效；
• 反思层面，这与用户更深的思考和认知有关，前面两个层次是否做好，决定着用户是否会思考将来继续使用该产品或者向他人推荐该产品。

因此，若能对有关用户认知的三个层面进行了解，并以此作为产品功能设计的参考，这对我们设计出更好的产品很有帮助。

正文

基于对以上问题的思考和回答，接下来，让我们进入正文，来看大众点评、携程旅行APP中酒店版块的“筛选”功能是如何设计的，他们为用户做了哪些工作，是否能够很好地解决用户需求，并为用户带来很好的体验。

本文将按照三个关键的用户筛选流程，“筛选前、筛选中、筛选后”来作为行文结构，此外，在每一个关键流程中，我们又将会从“主要功能点”、“UI样式与交互”这两大部分进行对比和分析。

最后，通过对比和分析，本文希望能够为大众点评APP中酒店版块“筛选”功能的设计提出一些改进的建议。

注：竞品分析版本

一、筛选前

用户在进入大众点评、携程旅行APP进行酒店预订时，首先面对的问题是如何找到酒店预订的入口，接着才会面对使用“筛选”功能的问题。

在有关酒店预订入口方面，如下图一黑色标注，大众点评、携程旅行都将其放在了APP首页，较为明显的位置。用户很容易找到并可以点击进入。两者在视觉和用户操作上，都有较好的体验。

图一

当用户点击“酒店”，则正式进入酒店预订、搜索、筛选界面，如下图二红框部分：

图二

通过图二（左），我们可以看出，大众点评在地址选择、日期选择、搜索框、筛选维度等功能点的布局上，更加有次序、也更加清楚和明了。用户很容易读懂，并可以进行下一步的操作。

相比于大众点评，携程在这一功能界面上，就相对比较复杂和繁琐。用户需要花费较多的时间和认知成本，来确定并区分哪一块属于哪一个功能点。此外，有大又有小的字体、不一致的布局，会给用户带来困扰。

实际上，携程如此设计，是希望方便用户可以在此界面有一个对酒店的初步筛选，因为点击上图的“查询”按钮以后，它会跳到另一个界面（如下图三），下图三的界面和大众点评一开始就跳转进入的界面相似。但是，从用户的角度来说，像大众点评APP这样，直接跳转进入筛选界面，会更加方便、明了。对用户来说，不需要在携程上多跳转一个页面。

图三

二、筛选中

1、筛选维度、筛选项对比

结合上文图二、图三，我们可以看到大众点评、携程在酒店“筛选”功能上，主要包括以下筛选维度：

从上表中，我们看不出两者在筛选维度上的显著差异，因此我们通过结构图来进行更进一步的对比，寻找其中的差异，如下图四、图五：

图四：大众点评酒店“筛选维度”

图五：携程酒店“筛选维度”

基于以上图四、图五，我们可以做以下对比和分析：

（1）智能排序

在智能排序方面，大众点评与携程旅行功能点基本一致，只是文字表达上的差异。

（2）星级价格

在星级/价格方面，大众点评使用“经济型”，而携程采用“二星及以下/经济”的描述，基本上没有筛选项上的差异。对于价格也是如此。

（3）全城/位置距离

在有关这一筛选维度上，大众点评与携程旅行存在两个显著的差异：

移动互联网时代，会有更多的用户，倾向于不做规划，到达当地以后再进行酒店的预订，而这其中，基于自己所处的位置，选择距离自己在一定范围内的酒店，就成为了用户预订酒店的一个重要决策点。像笔者这样的用户，就常常会基于酒店和自己具体的距离来选择酒店。因此，若能够增加一个“距离”筛选项，来告诉用户酒店距自己有多远，会受到用户欢迎。

我们可以看到，大众点评还没有“距离”这样的筛选项功能，而携程有。

此外，携程有更为丰富的热门地标，对地标的分类也更加详细和细致，一定程度上在于携程拥有更多的酒店资源。在此方面，大众点评可以慢慢发展和积累。

（4）筛选

作为以上三个筛选维度的补充，此处的“筛选”维度中的筛选项，更多的是被隐藏起来。此维度中的一些筛选项，对于用户来说，使用频率不是很高，也不是用户进行决策和筛选的很重要的参考。但有些筛选项具有的话，会是对用户的一种惊喜。

不过，大众点评与携程旅行在此维度上的“筛选项”还是具有较大的差异：

首先，对于“特色”、“品牌”、“服务”、“公司服务”这几个筛选项来说，由于酒店资源上的差距，大众点评在此些方面的丰富程度和多样化程度上，需要进一步发展。

其次，对于“床型早餐”、“支付方式”这两个筛选项来说，大众点评可以在其“筛选”维度中增加，但不是必须具有的功能点。

最后，对于“点评”这一筛选项，作为以“用户点评”起家的大众点评，需要给予这一筛选项重视，如果可以纳入进来，或者将其放在更为突出的“筛选”维度上，对于其他使用的用户将是一个重要的参考。这也可以更加突出大众点评产品本身的特色。

2、UI样式与交互对比

（1）全城/位置距离

图六

首先，对于选中相应的筛选维度之后，“全城”、“位置距离”字体的显示，大众点评没有变化，携程进行了颜色和高亮的变化。对于用户来说，后者更具有区分度。点评可以作为参考，字体颜色可以变为橙色，并高亮显示。

其次，对于筛选项的呈现，点评选择某一筛选项，比如“热门”之后，被选中的状态显示不明显，并且与其他未被选中的筛选项区分度不高，用户在选择和辨别时会有困难。携程在此方面的处理，用户体验更好一些。比如当“商业区”被选中时，其颜色会变化，并高亮显示，其他的筛选项则是处于灰色状态，用户很容易辨别。

最后，对于“清空”和“确定”的设置，大众点评在该筛选维度下没有进行设置，应该是为了降低用户的操作成本，简化交互的流程。但这带来另一个问题是，当用户想要回到最初筛选的起点时，用户会发现自己在这一筛选维度下回不去了。

（2）星级/价格

图七

首先，点评的“星级/价格”字体，在筛选时，没有颜色的变化和高亮显示，若有同于携程的颜色变化和高亮，用户体验会更好。

其次，对于价格和星级布局的问题，用户对价格的概念、重视程度往往会重于对星级的程度。所以，将价格布局在上，将星级布局在下，会更有利于用户进行快速地筛选。对于携程在价格布局处，增加价格选择的“滑块”这一功能，笔者操作起来的体验并不是很好，需要费时间调整。对于价格选择的问题，笔者认为加入“价格输入框”会更好一些。如下图八红框处，淘宝APP上的价格输入框，可以作为借鉴：

图八

最后，从界面布局次序和设计元素的一致性来看，大众点评要优于携程。我们可以从上图7中，视觉层面，感受到大众点评的界面更加简约、并且和谐一致；然而携程没有展现其简约及一致性。

（3）智能排序

关于此筛选维度的对比，大众点评和携程没有太大的UI样式与交互差异。如下图九：不过，还是有两点可以指出：一是，从设计的协调一致上来说，字数的一致、和谐，大众点评要优于携程。二是，从使用更易被用户理解的“箭头”符号上，可以看出携程的用心。

大众点评可以考虑将“到”字，都改为更易解读的箭头符号。

图九

（4）筛选

在“筛选”这一维度上，大众点评与携程旅行采取了完全不同的UI样式与交互方式。如下图十：

图十

可能是由于自身“服务”、“品牌”、“特色”所包含的内容有限，大众点评在“筛选”这一维度，采用了标签式的布局，并努力实现布局的整齐，给用户带来一致、简洁的体验。在其布局中，有“查看更多”的提示图标，但是其发挥的作用并不是很明显，一定程度上会给用户带来混淆。用户不知道点击图标以后可以查看更多。

改进的一些建议：可以考虑增加前文提到的“点评”、“支付方式”、“床型早餐”等等筛选项到“筛选”这一维度中，从而可以变化呈现的方式。

若保持呈现方式不变，可以考虑在“查看更多”图标的旁边，添加“更多或全部”两个字，便于用户理解和操作。以下图十一，红色标注部分，可以作为借鉴：

图十一

3、对大众点评改进的建议（基于“筛选中”的分析）

（1）功能筛选项上

• 非常需要增加的：

“距离”这一筛选项，便于用户查找在其一定距离范围内的酒店；

“点评”这一筛选项，便于用户参考其他用户的评价，并且突出大众点评产品的特色。

• 可有可无，但有会更好的：

“支付方式”、“房型早餐”等筛选项

• 有待逐渐发展、完善、丰富的：

随着大众点评酒店资源的增多，其可以逐渐开展更多的“服务”、“品牌”、“特色”、“热门地标”等。

（2）UI样式与交互设计上

• 筛选完成后，各个筛选维度上汉字的颜色和高亮变化设计。
• 在“全城”这一维度下，被选中筛选项与未被选中筛选项，设计颜色和高亮来区分。
• “在全城”这一维度下，添加“清空”、“确定”这一设置，便于用户回到初始状态；或者直接添加一个“全城”筛选项在“全城”这一维度下，用户直接点击“全城”，就可以回到全城初始状态。
• 在“星级/价格”这一维度下，考虑将价格的布局，整体移到上面，而星级移到下面。此外，也可以添加一个“价格输入框”，更灵活地满足用户对价格的筛选。
• 在“智能排序”这一维度下，考虑将“到”这一字，换成箭头符号。更易于用户获取和处理信息，提升筛选的效率。
• 在“筛选”这一维度下，在查看更多的图标旁边，辅助以“更多或全部”的汉字。

三、筛选后

用户在选择相应的筛选项，进行筛选后，“筛选”功能要能够及时、准确地呈现“筛选结果”给用户。及时地结果反馈，会给使用筛选功能的用户带来很好的体验，也能够指导用户接下来进一步的操作行为：开始选择产品或者更改条件重新筛选。

筛选结果主要分为两类：一是成功筛选到用户希望筛选到的相应产品；二是根据用户的筛选条件，没有筛选到符合期望的产品。

对于第二种结果，就涉及到“筛选”功能如何去提醒用户、并指导用户更改筛选条件，重新进行筛选。本文接下来也主要是对比“没有筛选到符合期望的产品”这一反馈结果。如下图十二：

图十二

对于大众点评来说，“没有筛选到符合条件的产品”的反馈，无论是从文字还是从人物图标的角度，都能够给用户情感化的支持，会让用户感到很亲切，从而有助于减轻用户筛选不到结果的失望。然而，携程旅行的反馈，从文字的角度来说，就显得有些冷漠，像是在吩咐用户需要做什么，给用户一种高高在上的感觉，使用户不易接近。

此外，对于筛选不到结果以后，给用户其他推荐的“推荐语”中，“您可能对以下酒店感兴趣”让用户同样可以感受到大众点评的亲切，而“以下酒店满足您的部分要求”就会让用户感觉到携程旅行的疏远。

最后，对于用户要返回重新筛选，携程旅行在“反馈结果”中，呈现可以直接删除的筛选项或筛选条件，很大程度上方便了用户。用户不需要再次点开筛选维度进行重置或清空，然后再更改筛选条件。用户可以在反馈结果的界面，直接选择删除、清空一些筛选项。这一点对于大众点评来说，可以作为一个借鉴。

总结

本文笔者基于大众点评、携程旅行APP中酒店的“筛选”功能，对用户使用“筛选”功能时的流程，包括筛序前、筛选中、筛选后，以及每一个流程中涉及的筛选功能点、UI样式与交互进行了对比和分析，并通过对比和分析，提出了大众点评酒店“筛选”功能的一些改进建议。其中的分析不乏有很多不足之处。相关的建议也仅代表我个人的想法。希望这篇文章能够带来价值。

本文由 @Peter Du 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议