產品開發
===
講師：Cat Sun

## 專案開發角色職責

- 一般流程：
PM -> 設計師 -> 工程師

- 當時間不夠：
PM -> 設計師 & 工程師

## 五件前置作業
#### 找到專案的主要目的及核心功能
- 做網站主要目的(目的不同，研究技術和功能設計花費的時間也不同)
- 技術火力展示？嘗試沒有碰過的技術？
- survey要花多少時間，預設時間點，因為整體度最重要
- 多看幾個網站，把需要的功能列出來（會是估時的要件）

- 網站主要的功能：
- 因為時間有限，先挑幾個主要的功能設計開發
- 怎麼找出主要功能? 找出使用者是誰，對網站會有什麼期待
- 參考同類型的網站，思考這些網站把什麼功能做的最顯眼好用
- 了解他人對於使用網站的習慣、流程、偏好
- 列出：
1. 不能沒有的功能
2. 大家提議重複度高的功能
3. 有趣特別的功能

- 找出主要TA
- 人物誌

- 把功能拆成子票，派工誰負責
- 
- Done的功能做測試，測試後發現不同會再做一個新的票，貼上流程的最左邊

---

#### Functional Map

- [miro範例](https://miro.com/welcomeonboard/SXl5TUl0M29lTm5lWkJaSTc5T21US2hVMkMzVHRQZERtZ05yaDQ1V0g3Q1VhelZ0anpUemh6UjNpZTQyZzNSSHwzNDU4NzY0NTcxNTMxNjMwODc5fDI=?share_link_id=244844119783)
- 如果分支太龐大，在有限的時間內可以增減調整

---

#### Flow Chart 操作流程圖


- 比較複雜的功能才會畫出此流程圖

- 抉擇一定是一條線進，兩條線出
- 把龐大的架構拆分步驟，以分辨哪些是不需要的可以刪掉、切UI頁面（確認每個畫面都有抵達的地方）

[miro範例](https://miro.com/app/board/uXjVNIj_Ohc=/)

---

#### UI Flow
- 


---

#### Wireframe 線框草圖
- 不需要配置顏色，但需要詳細
- 內容可以填上去，e.g.商品名稱
- 寫上邏輯

---

## 估時
- 五步個別估時間，再加起來 * 2（溝通時間） = 總共時間
- 每一天：我昨天做了什麼事情、今天預計做什麼事、遇到什麼困難

---

## 提醒
### 重點標示
- 主要與次要元件的設計（我最希望他去做的事），用顯眼的顏色，例如：搜尋、購買
- 配合大多人習慣的網站操作方式、清楚的功能標示、重點標示功能：
- 像是：重點標示清楚，一次做一件事（引導）
- 寫出步驟（第一步、第二步）
- 清楚標示icon（取決於TA是誰）
- 別讓了製作404 & 500頁面

### 設計時應該注意到的資料狀態
可以請設計師提供：
- 理想狀態
- 空白狀態
- 極限狀態（最多幾個字、卡牌數量）
- 錯誤狀態
- 局部資料狀態（如果有幾個沒有填寫，是什麼狀態）
- 載入中狀態

### 製作RWD網站時，不能只考慮一個裝置的版型
- 順序有關係，不同裝置有關聯

### UI guide line
- 可以先把所有顏色都做成css變數