對于門票詳情頁，商品預訂模塊一直都是最為重要的部分。用戶通過與這個模塊的交互，完成對商品的瀏覽、比較與選擇等一系列行為。本文將基于美團 APP 門票詳情頁商品預訂模塊的改版，分析其具體改動點，并對其中的設計亮點進行提取、歸納和學習。

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

產品：一個景區對應的是一個產品。比如，「上海歡樂谷」是一個產品。

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

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

規格：對于景區而言，規格可分為門票、景區內項目、餐飲等這些（較粗的粒度分類）。而對于門票商品而言，規格又可分為 1 日票、2 日票、日場票、夜場票、2 次票等這些（較細的粒度分類），包括但不僅限于時間這一維度。

票種：指的是商品適用人群對應的種類，如成人票、兒童票、老人票等。

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

對比版本的信息如下。

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

在這期間，美團對門票詳情頁也許還有過若干次改版和迭代，但未能依次進行關注。本次僅選取以上 2 個版本進行分析。

改動點列舉及分析

1. 商品的聚合方式

△ 商品的聚合方式

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

2. 規格

△ 規格

• 改版前：較細的粒度分類，1 日票、2 日票……等。
• 改版后：較粗的粒度分類，門票、多景點聯票、景區內項目等。具體是 1 日還是 2 日，1 次還是 2 次這種較細粒度的規格信息，被整合在了商品名稱中。

3. 票種

△ 票種

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

4. 商品名稱

△ 商品名稱

• 改版前：景區+規格+票種。
• 改版后：票種+規格。

5. 商品屬性

△ 商品屬性

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

改版后的設計亮點

1. 提升篩選效率

將篩選內容由票種改為商品屬性

△ 將篩選內容由票種改為商品屬性

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

外露篩選條件和結果的數量

△ 外露篩選條件和結果的數量

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

支持選擇出游日期

△ 支持選擇出游日期

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

2. 降低閱讀成本

字號整體調大

△ 字號整體調大

如上圖所示，商品預訂模塊的字號在整體上進行了調大，在閱讀上輕松省力了許多。

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

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

將票種信息整合到商品名稱中，同時對商品名稱的字段進行簡化（去掉了景區這一重復字段），并以較大的字號展示，能更進一步降低閱讀成本，幫助用戶快速定位并找到自己所需的門票商品。

3. 強化品質感

頂部的商品屬性標簽，除了進行篩選外，還可幫助強化其品質感。這樣的方式其實是在間接地告訴用戶：美團平臺上售賣的商品有些是景區直營（官方）的，可以隨買隨用、隨時退，同時還有優惠。另外，當商品同時符合「隨買隨用」、「10 秒出票」、「無需換票」這 3 個條件時，就會被打上「閃入園」的系列標簽。這樣設計同樣是為了打造其品質感，告訴用戶這個商品的出票是多么快，同時不用換票就可入園等。

△ 強化品質感

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

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

△ 降低用戶的疑惑與猶豫

補充探討

商品屬性的標簽篩選適合于所有的場景么？
未必。

△ 決策成本的高低

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

相比于「票種」，「規格」的決策成本要略高一點。比如：有些用戶已經計劃好要購買 1 日票，但是在進入到門票詳情頁時，發現 2 日票、月卡以及年卡的價格平均下來似乎更為實惠，但是對游玩日期有著不同的限制。這個決策成本就高于票種。

而「商品屬性」的決策成本是 3 個信息中最高的，因為它包括了最早可訂時間、退改政策、是否需換票、優惠促銷等一系列的維度。但，這一點的前提是，在確定票種和規格的情況下，有數量較多的不同商品可選擇。什么意思呢？我們不妨來比較一下美團和飛豬的門票詳情頁。

△ 美團和飛豬比較

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

正是由于這一點，當某個景區下的總商品數量很少時，美團在頂部就不會展示標簽篩選。因為對于寥寥數個商品，篩選功能很難發揮作用。

△ 商品數量太少時則不展示標簽篩選

總結

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

寫在最后

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