寫在前面：這篇文章投稿到優(yōu)設網時，由于審稿的編輯同學對我的背景信息不了解滓技，因此在發(fā)表時將原文標題《美團APP門票詳情頁商品預訂模塊的改版分析》改為了《美團實戰(zhàn)案例哩牍！專業(yè)大廠設計師如何做門票詳情頁改版？》令漂。在此說明一下膝昆，我并不在美團工作丸边，也不是大廠設計師。開始看到上面這個標題時荚孵，嚇了一大跳妹窖，也感到很恐慌，于是趕緊聯(lián)系優(yōu)設網對標題進行了修改∈找叮現(xiàn)已修改為《如何做好門票詳情頁改版骄呼？我深度分析了美團的設計》。感謝優(yōu)設網編輯部的程遠同學幫忙及時修改標題判没。
對于門票詳情頁蜓萄，商品預訂模塊一直都是最為重要的部分。用戶通過與這個模塊的交互澄峰，完成對商品的瀏覽嫉沽、比較與選擇等一系列行為。本文將基于美團APP門票詳情頁商品預訂模塊的改版俏竞，分析其具體改動點绸硕，并對其中的設計亮點進行提取、歸納和學習魂毁。
在正式分析之前臣咖，先對一些名詞進行說明，便于后文的統(tǒng)一描述漱牵。對這些名詞的理解主要來源于自己的工作經驗。如有問題疚漆，歡迎指出酣胀。
產品：一個景區(qū)對應的是一個產品。比如娶聘，「上海歡樂谷」是一個產品闻镶。
商品：產品下面具體可售賣的是商品。比如丸升，「上海歡樂谷1日成人票」是一個商品铆农。
品類：指的是產品分類，比如門票狡耻、酒店墩剖、簽證等。
規(guī)格：對于景區(qū)而言夷狰，規(guī)格可分為門票岭皂、景區(qū)內項目、餐飲等這些（較粗的粒度分類）沼头。而對于門票商品而言爷绘，規(guī)格又可分為1日票书劝、2日票、日場票土至、夜場票购对、2次票等這些（較細的粒度分類），包括但不僅限于時間這一維度陶因。
票種：指的是商品適用人群對應的種類骡苞，如成人票、兒童票坑赡、老人票等烙如。
商品屬性：除去規(guī)格和票種這2個屬性外，與商品相關的其他屬性毅否，包括商品渠道來源（是否為官方）亚铁、退改政策、最早可訂時間螟加、是否需換票徘溢、優(yōu)惠促銷等。
對比版本的信息如下捆探。
改版前：v9.12.401然爆。
改版后：v10.7.20。
在這期間黍图，美團對門票詳情頁也許還有過若干次地改版和迭代曾雕，但未能依次進行關注。本次僅選取以上2個版本進行分析助被。
改動點列舉及分析
1剖张、商品的聚合方式
改版前：規(guī)格>票種>票種>商品名稱>商品屬性（共5層）。
改版后：品類>商品屬性>規(guī)格>商品名稱>商品屬性（共5層）揩环。
2搔弄、規(guī)格
改版前：較細的粒度分類：1日票、2日票…等丰滑。
改版后：較粗的粒度分類：門票顾犹、多景點聯(lián)票、景區(qū)內項目…等褒墨。具體是1日還是2日炫刷，1次還是2次這種較細粒度的規(guī)格信息，被整合在了商品名稱中貌亭。
3柬唯、票種
改版前：很看重票種信息，不僅支持對票種進行篩選圃庭，下面對應的列表也是以票種進行聚合锄奢。
改版后：票種信息被整合到商品名稱中失晴。
4、商品名稱
改版前：景區(qū)+規(guī)格+票種拘央。
改版后：票種+規(guī)格涂屁。
5、商品屬性
改版前：僅展示在商品名稱下方灰伟。
改版后：商品列表的頂部增加商品屬性的標簽篩選拆又。展示在商品名稱下方的屬性中，增加了1個「余票信息」的屬性栏账。
改版后的設計亮點
1帖族、提升篩選效率
將篩選內容由票種改為商品屬性
改版前，將票種作為標簽進行篩選挡爵，下方的商品列表同樣是以票種進行聚合竖般，而商品名稱中仍然具有票種信息，這樣不僅存在信息重復的問題茶鹃，也并沒有充分利用標簽篩選的優(yōu)勢涣雕。而且，除少數超大型景區(qū)外（比如：上海迪士尼度假區(qū)闭翩、廣東長隆度假區(qū)挣郭、歡樂谷等），大多數景區(qū)下的規(guī)格和票種數量都是較為有限的疗韵，很多中小型景區(qū)都只有成人票這1個票種兑障。相比而言，商品屬性的信息更為多樣蕉汪，像最早可訂時間旺垒、退改政策、是否為官方肤无、是否需換票這4個屬性信息，是大多數門票商品都具備的骇钦，對應的組合方式也更為豐富宛渐。美團將其設為可多選的方式，更為充分地利用了標簽篩選所具備的優(yōu)勢眯搭。
外露篩選條件和結果的數量
如上圖所示窥翩，通過外露篩選條件和結果的數量，讓用戶明確地知道：已經對多少屬性進行了篩選鳞仙，篩選后會有多少結果寇蚊。同時，在篩選后結果為0個時棍好，讓用戶可及時調整篩選條件仗岸，而不必在返回到無結果的商品列表后再進行調整允耿，降低了用戶的操作成本。這樣設計符合尼爾森十大可用性原則中“系統(tǒng)狀態(tài)的可見性”這一條扒怖。
支持選擇出游日期
對于一些景區(qū)较锡，周末和工作日的票價存在區(qū)別。另外盗痒，有些門票的出游日期只能在某一段特定的日期區(qū)間中進行選擇蚂蕴。在上述這兩種情況下，支持篩選出游日期對用戶就比較有幫助--用戶不必在進入到填單頁后才發(fā)現(xiàn)沒有合適的日期可選擇俯邓，節(jié)約了操作成本骡楼。
2、降低閱讀成本
字號整體調大
如上圖所示稽鞭，商品預訂模塊的字號在整體上進行了調大鸟整，在閱讀上輕松省力了許多。
票種信息被整合到商品名稱中
將票種信息整合到商品名稱中川慌，同時對商品名稱的字段進行簡化（去掉了景區(qū)這一重復字段）吃嘿，并以較大的字號展示，能更進一步降低閱讀成本梦重，幫助用戶快速定位并找到自己所需的門票商品兑燥。
3、強化品質感
頂部的商品屬性標簽琴拧，除了進行篩選外降瞳，還可幫助強化其品質感。這樣的方式其實是在間接地告訴用戶：美團平臺上售賣的商品有些是景區(qū)直營（官方）的蚓胸，可以隨買隨用挣饥、隨時退，同時還有優(yōu)惠沛膳。另外扔枫，當商品同時符合「隨買隨用」、「10秒出票」锹安、「無需換票」這3個條件時短荐，就會被打上“閃入園”的系列標簽。這樣設計同樣是為了打造其品質感叹哭，告訴用戶這個商品的出票是多么快忍宋，同時不用換票就可入園等。
4风罩、降低用戶的疑惑與猶豫
改版后糠排，在顯示銷量字段的基礎上，美團增加了游客購買比例超升，這樣充分地抓住了用戶的從眾心理：既然這么多比例的游客都會選擇購買入宦，應該是有品質保證的哺徊。除此之外，美團還引入了「余票信息」的字段云石。筆者在分析改版時唉工，恰逢五一假期前预皇，有些商品就帶有“五一余票有限”的字段痊土，并且在文字顏色上用到了醒目的紅色。這樣其實是在制造一種商品數量已經所剩不多的稀缺性父能，同時也是在告訴用戶：這個商品很搶手宽菜，不抓緊時間預訂可能就沒有啦谣膳。以上這兩種方法，都有助于降低用戶的疑惑與猶豫铅乡，從而提升購買轉化率继谚。
補充探討
商品屬性的標簽篩選適合于所有的場景么？
未必阵幸。
讓我們比較一下花履，用戶對「票種」、「規(guī)格」挚赊、「商品屬性」這3個信息進行決策時成本的高低诡壁。用戶對于自己應該買哪個票種最為明確。一般而言荠割，當一個景區(qū)同時存在成人票妹卿、兒童票和老人票時，兒童票和老人票的票價會便宜一點蔑鹦。由于條件限制夺克，成人為自己購票時，不會去購買兒童票和老人票嚎朽；而符合條件的兒童和老人也不會花更高的價錢購買成人票铺纽。例外的情況是親子票。比如：用戶可能會去比較「2張成人票+1張兒童票」與「1張親子票(2大1小)」的價格哪個更實惠哟忍。但總體而言室囊，其決策成本都相對較低。
相比于「票種」魁索，「規(guī)格」的決策成本要略高一點。比如：有些用戶已經計劃好要購買1日票盼铁，但是在進入到門票詳情頁時粗蔚，發(fā)現(xiàn)2日票、月卡以及年卡的價格平均下來似乎更為實惠饶火，但是對游玩日期有著不同的限制鹏控。這個決策成本就高于票種致扯。
而「商品屬性」的決策成本是3個信息中最高的，因為它包括了最早可訂時間当辐、退改政策抖僵、是否需換票、優(yōu)惠促銷等一系列的維度缘揪。但耍群，這一點的前提是，在確定票種和規(guī)格的情況下找筝，有數量較多的不同商品可選擇蹈垢。什么意思呢？我們不妨來比較一下美團和飛豬的門票詳情頁袖裕。
在美團上瀏覽了多個景區(qū)的門票詳情頁后曹抬，筆者發(fā)現(xiàn)：同一個票種和規(guī)格下，美團上面對應的商品數量大多為1個急鳄，少數為2個谤民。數量為2個的情況往往是由于其中1個最早可訂今日而另1個最早可訂明日。如上圖所示疾宏，以上海歡樂谷這一景點為例张足，美團的成人票一共才2個商品，而飛豬的成人票多達25個灾锯。盡管兩家都是在做平臺兢榨，但美團似乎對不同供應商的同類商品進行了挑選，只選出最優(yōu)的那個（邏輯可能是優(yōu)先景區(qū)直營顺饮，其次是選取低價）吵聪，而飛豬則是把全部供應商的商品一股腦兒放出來，讓用戶自己比較兼雄，在諸如出票時間吟逝、最早可訂時間、退改政策等屬性維度上千差萬別赦肋。因此块攒，美團現(xiàn)有的篩選方式，如果放在飛豬這種多供應商多商品接入的模式下佃乘，發(fā)揮的作用還會大很多囱井。
正是由于這一點，當某個景區(qū)下的總商品數量很少時趣避，美團在頂部就不會展示標簽篩選庞呕。因為對于寥寥數個商品，篩選功能很難發(fā)揮作用。
總結
1住练、設計標簽篩選時地啰，如果存在多個維度，可優(yōu)先考慮用更多元化的維度讲逛，這樣更能發(fā)揮出標簽篩選的優(yōu)勢亏吝；
2、將篩選條件和結果的數量都外露出來盏混，有助于提升系統(tǒng)狀態(tài)的可見性蔚鸥，降低用戶的操作成本；
3括饶、如需降低閱讀成本株茶，可考慮將字號調大，或者對重復冗余的信息進行去除和簡化图焰；
4启盛、標簽篩選除了發(fā)揮其本身的篩選作用，也可用作強化品質感技羔；
5僵闯、通過抓住從眾心、制造稀缺感藤滥，有助于降低用戶的疑惑與猶豫鳖粟；
6、盡管有些功能設計得非常好拙绊，但是不一定適合所有的場景向图。在設計的過程中需要具體考慮。當狀態(tài)或數量發(fā)生變化時标沪，之前的功能形式可能就無法發(fā)揮優(yōu)勢榄攀。
寫在最后
本文主要來源于筆者自己的見解，不代表任何公司或組織金句。感謝科科給出的建議檩赢。
