對(duì)于門票詳情頁，商品預(yù)訂模塊一直都是最為重要的部分。用戶通過與這個(gè)模塊的交互，完成對(duì)商品的瀏覽、比較與選擇等一系列行為。本文將基于美團(tuán) APP 門票詳情頁商品預(yù)訂模塊的改版，分析其具體改動(dòng)點(diǎn)，并對(duì)其中的設(shè)計(jì)亮點(diǎn)進(jìn)行提取、歸納和學(xué)習(xí)。

在正式分析之前，先對(duì)一些名詞進(jìn)行說明，便于后文的統(tǒng)一描述。對(duì)這些名詞的理解主要來源于自己的工作經(jīng)驗(yàn)。如有問題，歡迎指出。

產(chǎn)品：一個(gè)景區(qū)對(duì)應(yīng)的是一個(gè)產(chǎn)品。比如，「上海歡樂谷」是一個(gè)產(chǎn)品。

商品：產(chǎn)品下面具體可售賣的是商品。比如，「上海歡樂谷 1 日成人票」是一個(gè)商品。

品類：指的是產(chǎn)品分類，比如門票、酒店、簽證等。

規(guī)格：對(duì)于景區(qū)而言，規(guī)格可分為門票、景區(qū)內(nèi)項(xiàng)目、餐飲等這些（較粗的粒度分類）。而對(duì)于門票商品而言，規(guī)格又可分為 1 日票、2 日票、日?qǐng)銎薄⒁箞?chǎng)票、2 次票等這些（較細(xì)的粒度分類），包括但不僅限于時(shí)間這一維度。

票種：指的是商品適用人群對(duì)應(yīng)的種類，如成人票、兒童票、老人票等。

商品屬性：除去規(guī)格和票種這 2 個(gè)屬性外，與商品相關(guān)的其他屬性，包括商品渠道來源（是否為官方）、退改政策、最早可訂時(shí)間、是否需換票、優(yōu)惠促銷等。

對(duì)比版本的信息如下。

• 改版前：v9.12.401。
• 改版后：v10.7.20。

在這期間，美團(tuán)對(duì)門票詳情頁也許還有過若干次改版和迭代，但未能依次進(jìn)行關(guān)注。本次僅選取以上 2 個(gè)版本進(jìn)行分析。

改動(dòng)點(diǎn)列舉及分析

1. 商品的聚合方式

△ 商品的聚合方式

• 改版前：規(guī)格>票種>票種>商品名稱>商品屬性（共 5 層）。
• 改版后：品類>商品屬性>規(guī)格>商品名稱>商品屬性（共 5 層）。

2. 規(guī)格

△ 規(guī)格

• 改版前：較細(xì)的粒度分類，1 日票、2 日票……等。
• 改版后：較粗的粒度分類，門票、多景點(diǎn)聯(lián)票、景區(qū)內(nèi)項(xiàng)目等。具體是 1 日還是 2 日，1 次還是 2 次這種較細(xì)粒度的規(guī)格信息，被整合在了商品名稱中。

3. 票種

△ 票種

• 改版前：很看重票種信息，不僅支持對(duì)票種進(jìn)行篩選，下面對(duì)應(yīng)的列表也是以票種進(jìn)行聚合。
• 改版后：票種信息被整合到商品名稱中。

4. 商品名稱

△ 商品名稱

• 改版前：景區(qū)+規(guī)格+票種。
• 改版后：票種+規(guī)格。

5. 商品屬性

△ 商品屬性

• 改版前：僅展示在商品名稱下方。
• 改版后：商品列表的頂部增加商品屬性的標(biāo)簽篩選。展示在商品名稱下方的屬性中，增加了1 個(gè)「余票信息」的屬性。

改版后的設(shè)計(jì)亮點(diǎn)

1. 提升篩選效率

將篩選內(nèi)容由票種改為商品屬性

△ 將篩選內(nèi)容由票種改為商品屬性

改版前，將票種作為標(biāo)簽進(jìn)行篩選，下方的商品列表同樣是以票種進(jìn)行聚合，而商品名稱中仍然具有票種信息，這樣不僅存在信息重復(fù)的問題，也并沒有充分利用標(biāo)簽篩選的優(yōu)勢(shì)。而且，除少數(shù)超大型景區(qū)外（比如：上海迪士尼度假區(qū)、廣東長(zhǎng)隆度假區(qū)、歡樂谷等），大多數(shù)景區(qū)下的規(guī)格和票種數(shù)量都是較為有限的，很多中小型景區(qū)都只有成人票這 1 個(gè)票種。相比而言，商品屬性的信息更為多樣，像最早可訂時(shí)間、退改政策、是否為官方、是否需換票這 4 個(gè)屬性信息，是大多數(shù)門票商品都具備的，對(duì)應(yīng)的組合方式也更為豐富。美團(tuán)將其設(shè)為可多選的方式，更為充分地利用了標(biāo)簽篩選所具備的優(yōu)勢(shì)。

外露篩選條件和結(jié)果的數(shù)量

△ 外露篩選條件和結(jié)果的數(shù)量

如上圖所示，通過外露篩選條件和結(jié)果的數(shù)量，讓用戶明確地知道：已經(jīng)對(duì)多少屬性進(jìn)行了篩選，篩選后會(huì)有多少結(jié)果。同時(shí)，在篩選后結(jié)果為 0 個(gè)時(shí)，讓用戶可及時(shí)調(diào)整篩選條件，而不必在返回到無結(jié)果的商品列表后再進(jìn)行調(diào)整，降低了用戶的操作成本。這樣設(shè)計(jì)符合尼爾森十大可用性原則中「系統(tǒng)狀態(tài)的可見性」這一條。

支持選擇出游日期

△ 支持選擇出游日期

對(duì)于一些景區(qū)，周末和工作日的票價(jià)存在區(qū)別。另外，有些門票的出游日期只能在某一段特定的日期區(qū)間中進(jìn)行選擇。在上述這兩種情況下，支持篩選出游日期對(duì)用戶就比較有幫助——用戶不必在進(jìn)入到填單頁后才發(fā)現(xiàn)沒有合適的日期可選擇，節(jié)約了操作成本。

2. 降低閱讀成本

字號(hào)整體調(diào)大

△ 字號(hào)整體調(diào)大

如上圖所示，商品預(yù)訂模塊的字號(hào)在整體上進(jìn)行了調(diào)大，在閱讀上輕松省力了許多。

票種信息被整合到商品名稱中

△ 票種信息被整合到商品名稱中

將票種信息整合到商品名稱中，同時(shí)對(duì)商品名稱的字段進(jìn)行簡(jiǎn)化（去掉了景區(qū)這一重復(fù)字段），并以較大的字號(hào)展示，能更進(jìn)一步降低閱讀成本，幫助用戶快速定位并找到自己所需的門票商品。

3. 強(qiáng)化品質(zhì)感

頂部的商品屬性標(biāo)簽，除了進(jìn)行篩選外，還可幫助強(qiáng)化其品質(zhì)感。這樣的方式其實(shí)是在間接地告訴用戶：美團(tuán)平臺(tái)上售賣的商品有些是景區(qū)直營(yíng)（官方）的，可以隨買隨用、隨時(shí)退，同時(shí)還有優(yōu)惠。另外，當(dāng)商品同時(shí)符合「隨買隨用」、「10 秒出票」、「無需換票」這 3 個(gè)條件時(shí)，就會(huì)被打上「閃入園」的系列標(biāo)簽。這樣設(shè)計(jì)同樣是為了打造其品質(zhì)感，告訴用戶這個(gè)商品的出票是多么快，同時(shí)不用換票就可入園等。

△ 強(qiáng)化品質(zhì)感

4. 降低用戶的疑惑與猶豫

改版后，在顯示銷量字段的基礎(chǔ)上，美團(tuán)增加了游客購買比例，這樣充分地抓住了用戶的從眾心理：既然這么多比例的游客都會(huì)選擇購買，應(yīng)該是有品質(zhì)保證的。除此之外，美團(tuán)還引入了「余票信息」的字段。筆者在分析改版時(shí)，恰逢五一假期前，有些商品就帶有「五一余票有限」的字段，并且在文字顏色上用到了醒目的紅色。這樣其實(shí)是在制造一種商品數(shù)量已經(jīng)所剩不多的稀缺性，同時(shí)也是在告訴用戶：這個(gè)商品很搶手，不抓緊時(shí)間預(yù)訂可能就沒有了。以上這兩種方法，都有助于降低用戶的疑惑與猶豫，從而提升購買轉(zhuǎn)化率。

△ 降低用戶的疑惑與猶豫

補(bǔ)充探討

商品屬性的標(biāo)簽篩選適合于所有的場(chǎng)景么？
未必。

△ 決策成本的高低

讓我們比較一下，用戶對(duì)「票種」、「規(guī)格」、「商品屬性」這 3 個(gè)信息進(jìn)行決策時(shí)成本的高低。用戶對(duì)于自己應(yīng)該買哪個(gè)票種最為明確。一般而言，當(dāng)一個(gè)景區(qū)同時(shí)存在成人票、兒童票和老人票時(shí)，兒童票和老人票的票價(jià)會(huì)便宜一點(diǎn)。由于條件限制，成人為自己購票時(shí)，不會(huì)去購買兒童票和老人票；而符合條件的兒童和老人也不會(huì)花更高的價(jià)錢購買成人票。例外的情況是親子票。比如：用戶可能會(huì)去比較「2 張成人票+1 張兒童票」與「1 張親子票( 2大 1 小)」的價(jià)格哪個(gè)更實(shí)惠。但總體而言，其決策成本都相對(duì)較低。

相比于「票種」，「規(guī)格」的決策成本要略高一點(diǎn)。比如：有些用戶已經(jīng)計(jì)劃好要購買 1 日票，但是在進(jìn)入到門票詳情頁時(shí)，發(fā)現(xiàn) 2 日票、月卡以及年卡的價(jià)格平均下來似乎更為實(shí)惠，但是對(duì)游玩日期有著不同的限制。這個(gè)決策成本就高于票種。

而「商品屬性」的決策成本是 3 個(gè)信息中最高的，因?yàn)樗俗钤缈捎啎r(shí)間、退改政策、是否需換票、優(yōu)惠促銷等一系列的維度。但，這一點(diǎn)的前提是，在確定票種和規(guī)格的情況下，有數(shù)量較多的不同商品可選擇。什么意思呢？我們不妨來比較一下美團(tuán)和飛豬的門票詳情頁。

△ 美團(tuán)和飛豬比較

在美團(tuán)上瀏覽了多個(gè)景區(qū)的門票詳情頁后，筆者發(fā)現(xiàn)：同一個(gè)票種和規(guī)格下，美團(tuán)上面對(duì)應(yīng)的商品數(shù)量大多為 1 個(gè)，少數(shù)為 2 個(gè)。數(shù)量為 2 個(gè)的情況往往是由于其中 1 個(gè)最早可訂今日而另 1 個(gè)最早可訂明日。如上圖所示，以上海歡樂谷這一景點(diǎn)為例，美團(tuán)的成人票一共才 2 個(gè)商品，而飛豬的成人票多達(dá) 25 個(gè)。盡管兩家都是在做平臺(tái)，但美團(tuán)似乎對(duì)不同供應(yīng)商的同類商品進(jìn)行了挑選，只選出最優(yōu)的那個(gè)（邏輯可能是優(yōu)先景區(qū)直營(yíng)，其次是選取低價(jià)），而飛豬則是把全部供應(yīng)商的商品一股腦兒放出來，讓用戶自己比較，在諸如出票時(shí)間、最早可訂時(shí)間、退改政策等屬性維度上千差萬別。因此，美團(tuán)現(xiàn)有的篩選方式，如果放在飛豬這種多供應(yīng)商多商品接入的模式下，發(fā)揮的作用還會(huì)大很多。

正是由于這一點(diǎn)，當(dāng)某個(gè)景區(qū)下的總商品數(shù)量很少時(shí)，美團(tuán)在頂部就不會(huì)展示標(biāo)簽篩選。因?yàn)閷?duì)于寥寥數(shù)個(gè)商品，篩選功能很難發(fā)揮作用。

△ 商品數(shù)量太少時(shí)則不展示標(biāo)簽篩選

總結(jié)

• 設(shè)計(jì)標(biāo)簽篩選時(shí)，如果存在多個(gè)維度，可優(yōu)先考慮用更多元化的維度，這樣更能發(fā)揮出標(biāo)簽篩選的優(yōu)勢(shì)；
• 將篩選條件和結(jié)果的數(shù)量都外露出來，有助于提升系統(tǒng)狀態(tài)的可見性，降低用戶的操作成本；
• 如需降低閱讀成本，可考慮將字號(hào)調(diào)大，或者對(duì)重復(fù)冗余的信息進(jìn)行去除和簡(jiǎn)化；
• 標(biāo)簽篩選除了發(fā)揮其本身的篩選作用，也可用作強(qiáng)化品質(zhì)感；
• 通過抓住從眾心、制造稀缺感，有助于降低用戶的疑惑與猶豫；
• 盡管有些功能設(shè)計(jì)得非常好，但是不一定適合所有的場(chǎng)景。在設(shè)計(jì)的過程中需要具體考慮。當(dāng)狀態(tài)或數(shù)量發(fā)生變化時(shí)，之前的功能形式可能就無法發(fā)揮優(yōu)勢(shì)。

寫在最后

本文主要來源于筆者自己的見解，不代表任何公司或組織。感謝科科給出的建議。