UI設計

Hi BUS! 全台公車動態時刻查詢應用服務

RWD
The F2E 3rd
Hi BUS! 全台公車動態時刻查詢應用服務的封面圖片
擔任角色
擔任角色
UI 設計師
執行時間
執行時間
2021.11 (1個月)
負責項目
負責項目
前期調查|流程規劃|UI設計
參賽動機
參賽動機

希望藉由競賽參與提升 UI/UX 設計經驗並學習協作開發實務,我與 1 名前端工程師報名參加由六角學院舉辦的「第三屆 The F2E 前端 & UI 修煉精神時光屋」團體組競賽。

第三屆 The F2E 前端 & UI 修煉精神時光屋 活動 Banner
競賽介紹
競賽介紹

「The F2E 前端 & UI 修煉精神時光屋」是一個提供給 UI 設計師與前端工程師自我挑戰的平台,今年 2021 年舉辦到第 3 屆,總共有 4 道題目,今年為提升活動趣味性,針對第三道主題「全台公車動態時刻查詢應用服務」邀請評審審核作品。
總共分成 UI 個人組、前端個人組與團體組,僅限 Web 瀏覽器應用來開發,並須使用到 TDX 的 API 服務,每一週公布新的題目細項,依照賽程提交作品。

The F2E 前端 & UI 修煉精神時光屋競賽網址:https://hi-bus.tinycloud.tw/

第三屆 The F2E 前端 & UI 修煉精神時光屋 活動說明
設計理念
設計理念

Hi BUS! 揮揮手搭乘公車開啟您的旅途!
「揮手搭乘公車」是在台灣的生活中經常看見的景象,我們透過這樣的情境延伸設計出 Hi BUS! 的 Logo,希望為我們的用戶帶來美好的體驗。

主頁以明顯的搜尋框協助用戶方便進行搜尋,也能透過導覽列「我的最愛」及「附近站牌」的功能快速查找公車動態資訊。

整體色系以深藍色為主色、並以淺灰色為輔色,傳達沈穩、專業且安全的公車系統形象。導覽列下方透過流動漸層,呈現公車正在行駛中的意象。

Hi BUS! 全台公車動態時刻查詢應用服務 設計理念:各裝置瀏覽,快速查詢,附近站牌,收藏最愛
設計流程
設計流程

我們主要以第三道主題「全台公車動態時刻查詢應用服務」進行設計開發。由於題目龐大賽程緊湊,在主辦方提供 User stroy 前我們就先針對題目名稱進行研究調查。

Hi BUS! 全台公車動態時刻查詢應用服務 設計流程:1.探索 2.定義 3.執行
03 執行階段
1. 資料蒐集
  • 蒐集相關風格與類似競品視覺當作參考。
2. 製作 Wireframe
  • 一同擬定 Flow,繪製 Wireframe 確認方向及想法。
Hi BUS! 全台公車動態時刻查詢應用服務 Wireframe
3. 制定 Design System
  • 整體色系以深藍色為主色、並以淺灰色為輔色,傳達沈穩、專業且安全的公車系統形象。導覽列下方透過流動漸層,呈現公車正在行駛中的意象。
    制定規範好色彩計畫級字型字級,並將常用元素制定成元件,除了可以加速作業,同時審視是否風格一致,期望使用者於產品中擁有一致且良好的體驗。
Hi BUS! 全台公車動態時刻查詢應用服務 Design System: 顏色, 字型
Hi BUS! 全台公車動態時刻查詢應用服務 Design System: Icon, button, status
4. Logo / Illustration
  • Hi BUS! 揮揮手搭乘公車開啟您的旅途!
    「揮手搭乘公車」是在台灣的生活中經常看見的景象,我們透過這樣的情境延伸設計出 Hi BUS! 的 Logo,希望為我們的用戶帶來美好的體驗。
Hi BUS! 全台公車動態時刻查詢應用服務 Logo 繪製
5. 設計 Mockup
  • 按照設計系統,將 Wireframe 精稿,審視每一張頁面流程及風格是否一致。
Hi BUS! 全台公車動態時刻查詢應用服務 設計Mockup
  • 導覽列下方透過藍綠色流動漸層,呈現公車正在行駛中的意象。
    背景以台灣特色建築淡淡的線條做裝飾,下方有一台小公車 Gif 動畫作為點綴,使頁面更加活潑。
Hi BUS! 全台公車動態時刻查詢應用服務 Layout 說明:主畫面設計
Hi BUS! 全台公車動態時刻查詢應用服務 Layout 說明:公車動態更新
6. 延伸RWD頁面
  • 以 Web 設計為主,製作完所有頁面後,接著繪製其他裝置 UI 視覺。
Hi BUS! 全台公車動態時刻查詢應用服務 Layout 說明: RWD 設計
7. 副功能
  • 主功能設計完成後進行其他功能介面設計,並審視是否符合 User stroy
副功能介面設計-常用站牌收藏至我的最愛
副功能介面設計-附近站牌查詢與站點位置標記
評審點評與競賽心得ㄋ
評審點評與競賽心得

很高興與工程師夥伴榮獲「團體組第 1 名」,感謝工程師夥伴扛起所有前端任務,將全台公車路線 (錯綜複雜的) API 串接好,讓網頁使用起來順暢。

過去沒有 UI 設計的實戰經驗,透過這次的競賽我們設定目標,希望於時間內做完預計產出功能以及操作流暢。 我們提前著手規劃並制定時程,由於只有一位工程師,必須要預留更多時間串 API、切版、製作 RWD...,以及包容新手 UI 設計師。

這次題目「全台公車動態時刻查詢應用服務」,可以做很多功能,但競賽時間有限,我們參考競品後決議先產出最重要的「搜尋公車路線及動態」,接著延伸製作「我的最愛」及「附近站牌」副功能。

很感謝六角學院舉辦的競賽,讓我擁有與工程師一同執行專案的機會,此外也提供許多額外資源,評審老師也給予很棒的建議,透過這次的比賽經驗讓我獲益良多。

Designed by Joyce
Developed by Josh

The F2E 前端 & UI 修煉精神時光屋 評審評比投票結果
評審小水(互動設計師)與 Leo (Angular Taiwan 傳教士)對作品的評語
< 回作品列表