---
# System prepended metadata

title: 小組作業(三) 報告格式_新竹公車何時來

---

# 小組作業(三) 報告格式_新竹公車何時來
### 成員：吳孟儒(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