# 小組作業(三) 報告格式_新竹公車何時來 ### 成員:吳孟儒(408636552) ### 報告影片: https://drive.google.com/file/d/1iL6A6yyhHkHnoiX7xVUCUBwNEN-CB2e3/view?usp=sharing ### Figma專案網址: https://www.figma.com/file/owf9Zi8ztoD89vuVRSskR7/%E6%96%B0%E7%AB%B9%E5%85%AC%E8%BB%8A%E4%BD%95%E6%99%82%E4%BE%86?node-id=25%3A92 ### App名稱:新竹公車何時來 ### 動機/緣由:原有的介面設計過於花俏,且主要針對公車做查詢而非路線,路線時間安排上不直覺。此外也提供許多項目查詢功能,都一口氣排列在首頁上,視覺上不舒適。 ### 設計 #### 原始App圖 ![](https://i.imgur.com/EOHbTNa.jpg) ![](https://i.imgur.com/eNEXTlv.jpg) ![](https://i.imgur.com/qm0HfeN.jpg) #### Flow Chart https://www.figma.com/file/owf9Zi8ztoD89vuVRSskR7/%E6%96%B0%E7%AB%B9%E5%85%AC%E8%BB%8A%E4%BD%95%E6%99%82%E4%BE%86?node-id=0%3A1 ![](https://i.imgur.com/elMcTYp.png) ![](https://i.imgur.com/RNLxJkB.png) ![](https://i.imgur.com/8jL7qN9.png) #### Wireframe (手繪草圖) ![](https://i.imgur.com/eCJHxkt.png) #### Wireframe (Figma) https://www.figma.com/file/owf9Zi8ztoD89vuVRSskR7/%E6%96%B0%E7%AB%B9%E5%85%AC%E8%BB%8A%E4%BD%95%E6%99%82%E4%BE%86?node-id=25%3A92 #### Prototype https://www.figma.com/file/owf9Zi8ztoD89vuVRSskR7/%E6%96%B0%E7%AB%B9%E5%85%AC%E8%BB%8A%E4%BD%95%E6%99%82%E4%BE%86?node-id=25%3A92 ##### 風格: 簡約乾淨,底下主控制面板,主要列出常用項目,其餘更細與零碎的功能至於上方右側的選單裡。 ##### 配色: 以萊姆綠![](https://i.imgur.com/6knTttc.png)為基底 通知訊息等輔色用![](https://i.imgur.com/pXkA5Qh.png) 控制面板灰色![](https://i.imgur.com/fapgWDx.png) 按鈕用白色![](https://i.imgur.com/SIv5JTI.png) ##### 文字: 歡迎:64 顯示所在位置標題:39.73 輸入資料的區塊:16 選擇、訊息與按鈕:20 群組:32 ##### 圖標: 採用較為樸素的圖標 ![](https://i.imgur.com/Lo0WvCR.png) ##### 影像/照片(如果有) ##### 佈局: 將較零碎的功能收納至選單隱藏。 功能列控制面板放置較主要的功能,而非原先零碎的功能。 ##### 元件: 框線、鍵盤、按鈕、地圖、表單、動畫、連接外部等元件 ### 參考來源: 新竹公車何時來APP https://www.figma.com/community/file/1033538748068965786