一、組件介紹

交通票，我們日常中最常見的是火車票和飛機票，在 App 的組件設計中，這兩種票同樣可以從現實中的實體車票/登機牌通過精簡和抽象而來。

更多組件介紹：

這兩種交通方式有一個顯著的共性：都是點對點的一次性交通，所以設計上頗有些相似之處，這里我就將兩者合并解釋。

此外，因為這類卡片的使用場景極為單一，只有在出售火車票、飛機票的 App 頁面中才會出現，所以使用場景就不必過多解釋了。

二、設計要點

1. 交通票卡片的字段

交通票卡片中的字段是相對固定的，因為本身的信息就比較有限，可以進行自由更改的字段更是幾乎沒有，所以我這里可以直接列出幾乎所有字段。

其中，火車票的字段應直接參看 12306，12306 是火車票唯一的出票方，它的信息是最準確的，其余 App 中的火車票多以 12306 為準。

出發站+出發時間：最重要的信息之一。

到達站+到達時間：最重要的信息之一。

票價：在卡片中多只會展示最低的票價，進入詳情之后才會展示各等座位不同的票價。

列車號（列車型）：車型中只有復興號才會特別標出。

全程時長：列車的全程時長大都比較長，所以不能只看出發和到達時間，還需要給出明確的全程時長。

各等座位余票情況：余票情況是列車中重要的信息，無票、僅剩 5 張以內和余票充足各有不同的信息展示。

飛機票的信息與火車票大同小異，有區別的字段在于：

1. 航司：Logo 和航司簡稱，不同航司的服務質量有別，所以卡片中需要特別標出航司信息。
2. 優惠信息：與火車票不同的是，飛機票價格浮動較大，所以會有價格的優惠信息。
3. 航班號（機型）：所有航班的機型都需要給出，機型的大小也需要標識。
4. 全程時長（可能展示）：大多數航班飛行時間較短，不需要給出全程時長，但轉機的情況例外。

2. 交通票卡片的布局方法

交通卡片的布局只需分兩步走，第一行為主體信息，在這一行里我們要排下最重要的：出發時間+出發站/航站樓、到達時間+到達站/航站樓和價格。一般來說，為了對齊的美觀，我們會為左右兩側的信息各自做左/右對齊。此外，全程時長和列車車次等信息還可以分布在中間箭頭的上下、價格優惠信息也可以做到價格下方。

需要注意的是，在火車票中，出發站是始發站還是經停站、到達站是終點站還是經停站，是需要標識出來的，因為始發站和經停站列車的檢票時間不同，這為乘客提供了檢票的時間預期。

做完上面的第一行之后，接下來就進行第二行的排版，第二行主要是一些次要信息，比如火車票中的余票情況，飛機票中的飛行航班信息、機型等，都做到這一行。

飛機票中還能將航司的 logo 放置在第一行的左側，用來強調航司信息。

上面的兩行就是交通卡片的主體信息，如果還有其他運營信息則可以另外分出一個區域做在第三行，其他零碎的標簽信息也可以做在卡片的左上側。

3. 往返票卡片設計

前面所講的都是單程票的布局情況，而往返票——主要是飛機票——則有所不同。

因往返票需要在一屏內同時選擇去程和返程，所以大多數 App 會做成兩列，因此卡片的寬度只能砍半，這種情況下就無法放下所有信息了，需要提出最為關鍵的信息進行展示：

第一行：出發時間+出發航站樓、到達時間+到達航站樓

第二行：航司+機型、票價

而返程票則會在價格下方額外增加一行：比分開訂減少 xxx，這是為了突出往返票一同購買的價格優勢，促使消費者下單。

4. 換乘票卡片設計

換乘票或中轉機票，需要在一張卡片內同時塞進兩程的信息，所以設計上也會與單程的有所不同，主要區別在于換乘票需要給出換乘站的站點和換乘時間，如果是火車票的話還需要列出兩程各自的余票信息。

注：飛機票下方的航班信息只展示了第一程的信息，也可以類比火車票分別列出兩程信息。

5. 不一樣的卡片樣式

①Flighty

Flighty 不是一個購買飛機票的 App，它是一個航班跟蹤 App，所以航班信息的展示有所不同，著重于展示登機信息，例如：還有多少時間登機、延誤時間、出發地和到達地等。

三、樣式拓展

這里還額外收集了一些交通票卡片的線上案例，也可以作為設計時的參考：

結尾

交通票卡片的組件就簡單介紹到這，大家還有哪些想看得組件都可以留言告訴我們。

歡迎關注作者的微信公眾號：「超人的電話亭」