本文作者基于大眾點(diǎn)評、攜程旅行APP中酒店的“篩選”功能進(jìn)行相應(yīng)的對比分析，希望通過此文能夠給各位帶來一些啟發(fā)。

引言

在正式進(jìn)行“篩選”功能對比之前，我想我們首先要考慮和解答以下問題：

一、關(guān)于用戶

1、用戶使用“篩選”功能的需求或者想要達(dá)到的目的是什么？

可以更精準(zhǔn)、快速、高效地找到自己期望獲得的產(chǎn)品

2、用戶使用“篩選”功能的場景或流程是什么？相對應(yīng)的行為有哪些？

二、關(guān)于產(chǎn)品

1、設(shè)計(jì)產(chǎn)品“篩選”功能的目標(biāo)是什么？

一方面是幫助用戶解決“精準(zhǔn)高效地找到產(chǎn)品”的需求；另一方面是提高用戶體驗(yàn)，讓用戶對產(chǎn)品產(chǎn)生粘性，積累用戶，從而獲得更大的轉(zhuǎn)化價(jià)值。

2、如何實(shí)現(xiàn)上述目標(biāo)？

實(shí)現(xiàn)上述目標(biāo)，需要我們從用戶的角度出發(fā)，對產(chǎn)品進(jìn)行設(shè)計(jì)。諾曼在其《設(shè)計(jì)心理學(xué)》一書中指出，用戶的認(rèn)知包括三個(gè)層面：

• 本能層面，和視覺有關(guān)，需要在產(chǎn)品的界面、樣式、視覺效果上提升用戶體驗(yàn)；
• 行為層面，和交互、用戶的操作有關(guān)，需要我們在產(chǎn)品操作的流程、操作成本、操作反饋上做到簡化、高效；
• 反思層面，這與用戶更深的思考和認(rèn)知有關(guān)，前面兩個(gè)層次是否做好，決定著用戶是否會(huì)思考將來繼續(xù)使用該產(chǎn)品或者向他人推薦該產(chǎn)品。

因此，若能對有關(guān)用戶認(rèn)知的三個(gè)層面進(jìn)行了解，并以此作為產(chǎn)品功能設(shè)計(jì)的參考，這對我們設(shè)計(jì)出更好的產(chǎn)品很有幫助。

正文

基于對以上問題的思考和回答，接下來，讓我們進(jìn)入正文，來看大眾點(diǎn)評、攜程旅行APP中酒店版塊的“篩選”功能是如何設(shè)計(jì)的，他們?yōu)橛脩糇隽四男┕ぷ?，是否能夠很好地解決用戶需求，并為用戶帶來很好的體驗(yàn)。

本文將按照三個(gè)關(guān)鍵的用戶篩選流程，“篩選前、篩選中、篩選后”來作為行文結(jié)構(gòu)，此外，在每一個(gè)關(guān)鍵流程中，我們又將會(huì)從“主要功能點(diǎn)”、“UI樣式與交互”這兩大部分進(jìn)行對比和分析。

最后，通過對比和分析，本文希望能夠?yàn)榇蟊婞c(diǎn)評APP中酒店版塊“篩選”功能的設(shè)計(jì)提出一些改進(jìn)的建議。

注：競品分析版本

一、篩選前

用戶在進(jìn)入大眾點(diǎn)評、攜程旅行APP進(jìn)行酒店預(yù)訂時(shí)，首先面對的問題是如何找到酒店預(yù)訂的入口，接著才會(huì)面對使用“篩選”功能的問題。

在有關(guān)酒店預(yù)訂入口方面，如下圖一黑色標(biāo)注，大眾點(diǎn)評、攜程旅行都將其放在了APP首頁，較為明顯的位置。用戶很容易找到并可以點(diǎn)擊進(jìn)入。兩者在視覺和用戶操作上，都有較好的體驗(yàn)。

圖一

當(dāng)用戶點(diǎn)擊“酒店”，則正式進(jìn)入酒店預(yù)訂、搜索、篩選界面，如下圖二紅框部分：

圖二

通過圖二（左），我們可以看出，大眾點(diǎn)評在地址選擇、日期選擇、搜索框、篩選維度等功能點(diǎn)的布局上，更加有次序、也更加清楚和明了。用戶很容易讀懂，并可以進(jìn)行下一步的操作。

相比于大眾點(diǎn)評，攜程在這一功能界面上，就相對比較復(fù)雜和繁瑣。用戶需要花費(fèi)較多的時(shí)間和認(rèn)知成本，來確定并區(qū)分哪一塊屬于哪一個(gè)功能點(diǎn)。此外，有大又有小的字體、不一致的布局，會(huì)給用戶帶來困擾。

實(shí)際上，攜程如此設(shè)計(jì)，是希望方便用戶可以在此界面有一個(gè)對酒店的初步篩選，因?yàn)辄c(diǎn)擊上圖的“查詢”按鈕以后，它會(huì)跳到另一個(gè)界面（如下圖三），下圖三的界面和大眾點(diǎn)評一開始就跳轉(zhuǎn)進(jìn)入的界面相似。但是，從用戶的角度來說，像大眾點(diǎn)評APP這樣，直接跳轉(zhuǎn)進(jìn)入篩選界面，會(huì)更加方便、明了。對用戶來說，不需要在攜程上多跳轉(zhuǎn)一個(gè)頁面。

圖三

二、篩選中

1、篩選維度、篩選項(xiàng)對比

結(jié)合上文圖二、圖三，我們可以看到大眾點(diǎn)評、攜程在酒店“篩選”功能上，主要包括以下篩選維度：

從上表中，我們看不出兩者在篩選維度上的顯著差異，因此我們通過結(jié)構(gòu)圖來進(jìn)行更進(jìn)一步的對比，尋找其中的差異，如下圖四、圖五：

圖四：大眾點(diǎn)評酒店“篩選維度”

圖五：攜程酒店“篩選維度”

基于以上圖四、圖五，我們可以做以下對比和分析：

（1）智能排序

在智能排序方面，大眾點(diǎn)評與攜程旅行功能點(diǎn)基本一致，只是文字表達(dá)上的差異。

（2）星級價(jià)格

在星級/價(jià)格方面，大眾點(diǎn)評使用“經(jīng)濟(jì)型”，而攜程采用“二星及以下/經(jīng)濟(jì)”的描述，基本上沒有篩選項(xiàng)上的差異。對于價(jià)格也是如此。

（3）全城/位置距離

在有關(guān)這一篩選維度上，大眾點(diǎn)評與攜程旅行存在兩個(gè)顯著的差異：

移動(dòng)互聯(lián)網(wǎng)時(shí)代，會(huì)有更多的用戶，傾向于不做規(guī)劃，到達(dá)當(dāng)?shù)匾院笤龠M(jìn)行酒店的預(yù)訂，而這其中，基于自己所處的位置，選擇距離自己在一定范圍內(nèi)的酒店，就成為了用戶預(yù)訂酒店的一個(gè)重要決策點(diǎn)。像筆者這樣的用戶，就常常會(huì)基于酒店和自己具體的距離來選擇酒店。因此，若能夠增加一個(gè)“距離”篩選項(xiàng)，來告訴用戶酒店距自己有多遠(yuǎn)，會(huì)受到用戶歡迎。

我們可以看到，大眾點(diǎn)評還沒有“距離”這樣的篩選項(xiàng)功能，而攜程有。

此外，攜程有更為豐富的熱門地標(biāo)，對地標(biāo)的分類也更加詳細(xì)和細(xì)致，一定程度上在于攜程擁有更多的酒店資源。在此方面，大眾點(diǎn)評可以慢慢發(fā)展和積累。

（4）篩選

作為以上三個(gè)篩選維度的補(bǔ)充，此處的“篩選”維度中的篩選項(xiàng)，更多的是被隱藏起來。此維度中的一些篩選項(xiàng)，對于用戶來說，使用頻率不是很高，也不是用戶進(jìn)行決策和篩選的很重要的參考。但有些篩選項(xiàng)具有的話，會(huì)是對用戶的一種驚喜。

不過，大眾點(diǎn)評與攜程旅行在此維度上的“篩選項(xiàng)”還是具有較大的差異：

首先，對于“特色”、“品牌”、“服務(wù)”、“公司服務(wù)”這幾個(gè)篩選項(xiàng)來說，由于酒店資源上的差距，大眾點(diǎn)評在此些方面的豐富程度和多樣化程度上，需要進(jìn)一步發(fā)展。

其次，對于“床型早餐”、“支付方式”這兩個(gè)篩選項(xiàng)來說，大眾點(diǎn)評可以在其“篩選”維度中增加，但不是必須具有的功能點(diǎn)。

最后，對于“點(diǎn)評”這一篩選項(xiàng)，作為以“用戶點(diǎn)評”起家的大眾點(diǎn)評，需要給予這一篩選項(xiàng)重視，如果可以納入進(jìn)來，或者將其放在更為突出的“篩選”維度上，對于其他使用的用戶將是一個(gè)重要的參考。這也可以更加突出大眾點(diǎn)評產(chǎn)品本身的特色。

2、UI樣式與交互對比

（1）全城/位置距離

圖六

首先，對于選中相應(yīng)的篩選維度之后，“全城”、“位置距離”字體的顯示，大眾點(diǎn)評沒有變化，攜程進(jìn)行了顏色和高亮的變化。對于用戶來說，后者更具有區(qū)分度。點(diǎn)評可以作為參考，字體顏色可以變?yōu)槌壬⒏吡溜@示。

其次，對于篩選項(xiàng)的呈現(xiàn)，點(diǎn)評選擇某一篩選項(xiàng)，比如“熱門”之后，被選中的狀態(tài)顯示不明顯，并且與其他未被選中的篩選項(xiàng)區(qū)分度不高，用戶在選擇和辨別時(shí)會(huì)有困難。攜程在此方面的處理，用戶體驗(yàn)更好一些。比如當(dāng)“商業(yè)區(qū)”被選中時(shí)，其顏色會(huì)變化，并高亮顯示，其他的篩選項(xiàng)則是處于灰色狀態(tài)，用戶很容易辨別。

最后，對于“清空”和“確定”的設(shè)置，大眾點(diǎn)評在該篩選維度下沒有進(jìn)行設(shè)置，應(yīng)該是為了降低用戶的操作成本，簡化交互的流程。但這帶來另一個(gè)問題是，當(dāng)用戶想要回到最初篩選的起點(diǎn)時(shí)，用戶會(huì)發(fā)現(xiàn)自己在這一篩選維度下回不去了。

（2）星級/價(jià)格

圖七

首先，點(diǎn)評的“星級/價(jià)格”字體，在篩選時(shí)，沒有顏色的變化和高亮顯示，若有同于攜程的顏色變化和高亮，用戶體驗(yàn)會(huì)更好。

其次，對于價(jià)格和星級布局的問題，用戶對價(jià)格的概念、重視程度往往會(huì)重于對星級的程度。所以，將價(jià)格布局在上，將星級布局在下，會(huì)更有利于用戶進(jìn)行快速地篩選。對于攜程在價(jià)格布局處，增加價(jià)格選擇的“滑塊”這一功能，筆者操作起來的體驗(yàn)并不是很好，需要費(fèi)時(shí)間調(diào)整。對于價(jià)格選擇的問題，筆者認(rèn)為加入“價(jià)格輸入框”會(huì)更好一些。如下圖八紅框處，淘寶APP上的價(jià)格輸入框，可以作為借鑒：

圖八

最后，從界面布局次序和設(shè)計(jì)元素的一致性來看，大眾點(diǎn)評要優(yōu)于攜程。我們可以從上圖7中，視覺層面，感受到大眾點(diǎn)評的界面更加簡約、并且和諧一致；然而攜程沒有展現(xiàn)其簡約及一致性。

（3）智能排序

關(guān)于此篩選維度的對比，大眾點(diǎn)評和攜程沒有太大的UI樣式與交互差異。如下圖九：不過，還是有兩點(diǎn)可以指出：一是，從設(shè)計(jì)的協(xié)調(diào)一致上來說，字?jǐn)?shù)的一致、和諧，大眾點(diǎn)評要優(yōu)于攜程。二是，從使用更易被用戶理解的“箭頭”符號(hào)上，可以看出攜程的用心。

大眾點(diǎn)評可以考慮將“到”字，都改為更易解讀的箭頭符號(hào)。

圖九

（4）篩選

在“篩選”這一維度上，大眾點(diǎn)評與攜程旅行采取了完全不同的UI樣式與交互方式。如下圖十：

圖十

可能是由于自身“服務(wù)”、“品牌”、“特色”所包含的內(nèi)容有限，大眾點(diǎn)評在“篩選”這一維度，采用了標(biāo)簽式的布局，并努力實(shí)現(xiàn)布局的整齊，給用戶帶來一致、簡潔的體驗(yàn)。在其布局中，有“查看更多”的提示圖標(biāo)，但是其發(fā)揮的作用并不是很明顯，一定程度上會(huì)給用戶帶來混淆。用戶不知道點(diǎn)擊圖標(biāo)以后可以查看更多。

改進(jìn)的一些建議：可以考慮增加前文提到的“點(diǎn)評”、“支付方式”、“床型早餐”等等篩選項(xiàng)到“篩選”這一維度中，從而可以變化呈現(xiàn)的方式。

若保持呈現(xiàn)方式不變，可以考慮在“查看更多”圖標(biāo)的旁邊，添加“更多或全部”兩個(gè)字，便于用戶理解和操作。以下圖十一，紅色標(biāo)注部分，可以作為借鑒：

圖十一

3、對大眾點(diǎn)評改進(jìn)的建議（基于“篩選中”的分析）

（1）功能篩選項(xiàng)上

• 非常需要增加的：

“距離”這一篩選項(xiàng)，便于用戶查找在其一定距離范圍內(nèi)的酒店；

“點(diǎn)評”這一篩選項(xiàng)，便于用戶參考其他用戶的評價(jià)，并且突出大眾點(diǎn)評產(chǎn)品的特色。

• 可有可無，但有會(huì)更好的：

“支付方式”、“房型早餐”等篩選項(xiàng)

• 有待逐漸發(fā)展、完善、豐富的：

隨著大眾點(diǎn)評酒店資源的增多，其可以逐漸開展更多的“服務(wù)”、“品牌”、“特色”、“熱門地標(biāo)”等。

（2）UI樣式與交互設(shè)計(jì)上

• 篩選完成后，各個(gè)篩選維度上漢字的顏色和高亮變化設(shè)計(jì)。
• 在“全城”這一維度下，被選中篩選項(xiàng)與未被選中篩選項(xiàng)，設(shè)計(jì)顏色和高亮來區(qū)分。
• “在全城”這一維度下，添加“清空”、“確定”這一設(shè)置，便于用戶回到初始狀態(tài)；或者直接添加一個(gè)“全城”篩選項(xiàng)在“全城”這一維度下，用戶直接點(diǎn)擊“全城”，就可以回到全城初始狀態(tài)。
• 在“星級/價(jià)格”這一維度下，考慮將價(jià)格的布局，整體移到上面，而星級移到下面。此外，也可以添加一個(gè)“價(jià)格輸入框”，更靈活地滿足用戶對價(jià)格的篩選。
• 在“智能排序”這一維度下，考慮將“到”這一字，換成箭頭符號(hào)。更易于用戶獲取和處理信息，提升篩選的效率。
• 在“篩選”這一維度下，在查看更多的圖標(biāo)旁邊，輔助以“更多或全部”的漢字。

三、篩選后

用戶在選擇相應(yīng)的篩選項(xiàng)，進(jìn)行篩選后，“篩選”功能要能夠及時(shí)、準(zhǔn)確地呈現(xiàn)“篩選結(jié)果”給用戶。及時(shí)地結(jié)果反饋，會(huì)給使用篩選功能的用戶帶來很好的體驗(yàn)，也能夠指導(dǎo)用戶接下來進(jìn)一步的操作行為：開始選擇產(chǎn)品或者更改條件重新篩選。

篩選結(jié)果主要分為兩類：一是成功篩選到用戶希望篩選到的相應(yīng)產(chǎn)品；二是根據(jù)用戶的篩選條件，沒有篩選到符合期望的產(chǎn)品。

對于第二種結(jié)果，就涉及到“篩選”功能如何去提醒用戶、并指導(dǎo)用戶更改篩選條件，重新進(jìn)行篩選。本文接下來也主要是對比“沒有篩選到符合期望的產(chǎn)品”這一反饋結(jié)果。如下圖十二：

圖十二

對于大眾點(diǎn)評來說，“沒有篩選到符合條件的產(chǎn)品”的反饋，無論是從文字還是從人物圖標(biāo)的角度，都能夠給用戶情感化的支持，會(huì)讓用戶感到很親切，從而有助于減輕用戶篩選不到結(jié)果的失望。然而，攜程旅行的反饋，從文字的角度來說，就顯得有些冷漠，像是在吩咐用戶需要做什么，給用戶一種高高在上的感覺，使用戶不易接近。

此外，對于篩選不到結(jié)果以后，給用戶其他推薦的“推薦語”中，“您可能對以下酒店感興趣”讓用戶同樣可以感受到大眾點(diǎn)評的親切，而“以下酒店滿足您的部分要求”就會(huì)讓用戶感覺到攜程旅行的疏遠(yuǎn)。

最后，對于用戶要返回重新篩選，攜程旅行在“反饋結(jié)果”中，呈現(xiàn)可以直接刪除的篩選項(xiàng)或篩選條件，很大程度上方便了用戶。用戶不需要再次點(diǎn)開篩選維度進(jìn)行重置或清空，然后再更改篩選條件。用戶可以在反饋結(jié)果的界面，直接選擇刪除、清空一些篩選項(xiàng)。這一點(diǎn)對于大眾點(diǎn)評來說，可以作為一個(gè)借鑒。

總結(jié)

本文筆者基于大眾點(diǎn)評、攜程旅行APP中酒店的“篩選”功能，對用戶使用“篩選”功能時(shí)的流程，包括篩序前、篩選中、篩選后，以及每一個(gè)流程中涉及的篩選功能點(diǎn)、UI樣式與交互進(jìn)行了對比和分析，并通過對比和分析，提出了大眾點(diǎn)評酒店“篩選”功能的一些改進(jìn)建議。其中的分析不乏有很多不足之處。相關(guān)的建議也僅代表我個(gè)人的想法。希望這篇文章能夠帶來價(jià)值。

本文由 @Peter Du 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議