自行車道地圖資訊整合網
關於作品
此作品是參加的 2021 The F2E 精神時光屋的 UI 作品，以臺灣共享單車與自行車道整合為主題，結合交通部「運輸資料流通服務平臺」(TDX) Open API 設計出查詢 Youbike 租借與自行車道的網站
執行時間:
1 Week
扮演角色:
UX: 網頁流程與頁面設計
UI: Wireframe、精稿
確定流程
此由官方提供
我是從外縣市來的旅客，興趣是騎自行車，在旅行時喜歡找附近的自行車路線 ，並租借 YouBike 去兜風，但有個小困擾是，在地的自行車路線跟 YouBike 都 沒有做整合服務，都得讓我花上一番功夫才能行動，希望有人能幫幫我！
此由官方提供
1. 我可以透過網站上的地圖服務，觀看離自己最近的 YouBike 租借站位點
2. 我可以透過網站上的地圖服務，能看到每個 YouBike 租借站位點，目前的租
借狀況(可租借車數/可歸還車數)
3. 我可以用圖文列表模式，搜尋各市區的腳踏車路線列表，點擊路線後，會顯
示對應的路線圖
4. 我能透過 PC 網站瀏覽，也能透過 Mobile 來瀏覽介面
透過情境模擬了解，使用者希望能在旅途中搜尋到"YouBike狀況"與"自行車路線地圖"，來解決必須"透過不同網站查詢"的痛點。
加入使用者故事訂定的目標是
1. Youbike及時租借狀況與列表
2.自行車道地圖路線與列表
3.定位功能
4.響應式平台
5.車道周圍餐廳及景點(結合API的圖資)
1.首頁
畫面僅提供Youbike關鍵字與縣市搜尋，避免其他資訊干擾使用者使用操作，當在外出遊時，開啟行動版網頁就能直接搜尋單車位置與狀況。
由情境模擬得知，使用者的操作流程是，旅行中途 → 尋找車道 → 租借Youbike，
如果先 搜尋車道再前往車道，抵達到自行車道時 Youbike可能會無單車的狀況發生。
所以讓使用者先得知 Youbike 站點狀況再尋找自行車道會更方便。
2.自行車頁
提供站點名稱並分類 1.0 與 2.0 並清楚知道目前各站點的狀況。
行動版會顯示搜尋列表，使用者點擊「顯示地圖」列表收起並展開地圖。「顯示列表」則展開列表資訊。
預設隱藏搜尋框，點選 icon 顯示以確保整體地圖可視性
3.搜尋車道
畫面顯示車道圖資，顯示車道大致範圍，進階篩選能依照短、中、長程，車道是否為單向、雙向。
選定車道後顯示附近景點與餐廳，讓使用者能好好規劃旅程。
在此作品中，有用到好幾支API，需要確認元件上的欄位和資料該如何呈現。 元件的標註如何能更清楚的呈現，透過參考其他設計師的整理方式，整理元件和交付內容。 使用 figma 上的 comment 功能與工程師溝通，而此次也很高興工程師有順利的完成作品。
完成作品連結
工程師: 詠銓
(TDX) Open API 於2022年更新，作品 api 功能已失效
