【作品】高鐵時刻查詢——查詢高鐵時刻,簡單又快速。

2020 年時做了台鐵時刻查詢的網站後,其實我就一直有想要再做一個高鐵的版本,純脆是覺得這樣比較對稱 🤗。但因為高鐵官方網站和 APP 的 UI/UX 其實都很優秀,而且 APP 也擁有訂票和電子車票進站的功能,說實在的,用第三方時刻表的意義並沒有那麼大;這也是我的高鐵網站做做停停,一個簡單的網站卻拖了快一年才完成的主要原因。

不過每次做新的作品時,我都會希望這次的作品會跟以往有什麼不同或是有所突破,所以這次的高鐵時刻的 UI 雖然跟台鐵時刻幾乎一樣,但其實我是用新的框架全部重做,中間也是遇到不少困難和挑戰,也是有所學習和成長,應該也算是不虛此行了。

系統介紹

  • 系統名稱:高鐵時刻查詢
  • 系統類型:Web
  • 連結:https://jsy.tw/hsTrainTime
  • 適用平台:任何可以使用瀏覽器上網的裝置,具響應式設計。
  • 上架日期:2021/11
  • 用途:簡單快速查詢台灣高鐵時刻。

功能特色

一、選擇車站

點選「出發車站」或「抵達車站」,即會出現各車站按鈕,選完車站後按鈕即會消失。文字輸入框亦可手動輸入車站做車站篩選,PC 版在篩選到僅剩一個車站時可按 enter 取代點擊按鈕的動作。

選擇車站只要用點的就行;亦可手動輸入車站篩選。

二、查詢結果

  • 查詢結果最上方可看到此趟旅行的票價,可點擊 [+ 其他 ] 按鈕展開看到更多種類票價。
  • 點擊任一結果可看到更詳細的列車資訊。
查詢結果列表與詳細列車資訊。

三、歷史快查

每次查詢的起迄站會記錄在首頁,最多六筆,超過會自動刪去最舊的歷史;點選即可把車站帶入到上方。

四、其他

  • 每次重新進入首頁,系統會自動帶入最後一次查詢車站。
  • 「出發車站」與「抵達車站」中間的箭頭按鈕點選即可互換起迄站。
  • 查詢當日列車,若列車已過期,會以半透明的方式呈現。
  • 手機使用者可以網頁加入到手機桌面。
    > 請參考:【筆記】Web 也可以變成 APP 放到手機桌面?以 iOS 13 為例

後記

這次除了是用 Vue 3 和還在 Beta 版的 Bootstrap 5 之外,也是我第一次挑戰深色佈景的設計,希望您會喜歡 😘。

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments