# 0415 數位產品設計
###### tags: `講座`
## 要做什麼產品？
- 觀察自己喜歡的產品
### 如何抓重點？
1. 將一個簡單的功能做好，再發展出其他延伸功能
### 範例
#### 打字對戰遊戲
發想
↓
核心功能？
↓
如何差異化？ → 對戰模式
如何更有趣？ → 遊戲化
什麼技術可以挑戰？ → WebSocket
↓
Highlight
↓
延伸功能
尋找缺少的

---
#### 外送平台

決定題目
↓
使用角色 站方 平台方 外送員 使用者
↓
功能 審核店家/外送員 行銷活動 平台維護 店家資訊編輯 上下架產品
↓
核心功能
↓
開發優先順序


---

### 建立使用者故事
- 規劃使用者或要解決的問題
- 大架構：==身為(使用者)，我想要(需求)，以便我可以(價值/達到什麼目的)==
- 決定角色
- 針對功能先做大分類
- 針對不同族群再細分 => 建立人物誌(會遇到的困難)
- 思考需求與期望
- 思考相對應功能
- 制定相對應的規格（檔案格式、關鍵字、相關基準）
- 思考功能開發先後順序
- 誰需要？需要什麼功能？為什麼需要這個功能？（他能夠幫助使用者嗎？）
- 盡量描寫最後可被驗收的範圍
- 建立兩週內可以開發的項目

#### 編寫重點
* 需求具體明確、範圍合適（拆分小範圍）、對使用者或客戶有價值
* 不要抽象、不明確的需求，導致開發者無法有驗收基準
* 不要範圍過大
* 錯誤 -> 我想要一個商城網站
* 較精準 -> 想要上下架的功能、可以看到照片的平台
* 對使用者或客戶沒價值
* 錯誤：我想要前端使用React、只能使用jpg
* 思考對使用者是否真的有價值
* 思考功能是否有替代方案

---

## Functional Map 功能地圖
### 定義功能與資料間的關係
- 找出功能需要哪些資料來源？
- 誰負責產出這些資料？（取用哪邊的API或是誰提供？）
- 沒有的資料，該如何解決？（取消？或替代方案？）
* 直接列出該功能所需：
* 細部功能
* 所需資料



## Flow Chart 功能流程
### 什麼時候需要畫？
- 資料狀態變更的時候、複雜判斷
- 例如：註冊/登入流程、加入購物車、資料狀態等
- 什麼時候觸發？如何觸發？觸發後會有什麼回饋？
* 例：
* 課程上架
* 結帳流程
* 活動報名
* 商品購買流程

- 方形：動作、狀態
- 菱形：判斷
- 橢圓形：起點、終點
- 功能流程圖表通常沒有標準答案，會多人去畫，再一起檢視和討論


## UI Flow 網路架構
主要功能在頁面間的安排

* 將前面的功能已頁面來進行排列
* 細節功能可以不用寫進UI Flow內
* UI Flow 確認的是主要功能在頁面間的安排
* [講師範例](https://whimsical.com/ui-flow-MeazUCwf6zAEUVjxedwMYZ)

#### ⚠️ 如果是要復刻某個網頁，務必「==畫出網站架構==」，確認哪些頁面、流程是你們的主力開發。擁有共同目標，挑出要刻的功能。

需求太過模糊？ => 需要具體些
功能很有趣？ => 再去研究

可以先花一點時間大概整理，再隨開發流程適時回頭修改
發想期盡量發想，可能可以找出不同於復刻網站的功能

### ＊ 統整步驟：
1. 核心功能 - Functional Map
2. 功能流程 - Flow Chart
3. 網站架構 - UI Flow

---

## Wireframe 線框稿

1. 確認功能在頁面上的位置
2. 檢視還有哪些觸發規則、狀態需要考慮
* [講師範例](https://whimsical.com/wireframe-5yLDTQN7zi3SRQFMDJqe8t)

## 觸發時的回饋
1. 分析網頁上有哪些觸發行為
2. 觸發會造成什麼樣的結果（回饋）或行為？
3. ==點擊按鈕==時會跳出什麼訊息？會跳轉到哪一頁或區塊？
4. ==行為執行成功或失敗==時會有什麼樣的回饋？又會是以什麼樣的形式呈現？

### 手動觸發
1. 單一動作（配合手勢、按鈕 e.g.點擊或滑動）
2. 兩種狀態（開或關）
3. 多種狀態（一組按鈕or鍵盤）
4. 範圍狀態（音量、裁切範圍）

### 系統觸發
1. 錯誤（提示使用者如何進行下一步）
2. 新載入資料 ( API資料、軟體更新、地理位置、連結網路後的裝置或應用程式資料等 )
3. 連續觸發（定期更新、定期追蹤地理位置、時間或狀態）
4. 其他使用者（其他使用者做了某件事觸發）

### 資料狀態
資料載入時會有哪些狀態：
1. ==理想狀態==：理想上資料呈現的頁面
2. 空白狀態：資料未載入時的狀態
3. ==極限狀態==：當資料超過或小於設定時會呈現的狀態
4. ==錯誤狀態==：因各種原因（人為或系統等）造成出錯時的狀態
5. 局部狀態：預先導覽的狀態（例：Google搜尋時顯示、還沒進到書籍本頁的局部畫面）
6. 載入狀態：當資料載入時的狀態

## 如何配色

1. 選主色（建議只選一種）
2. 選輔色(較常使用灰階色)
3. 套用


* [範例：Line Pay](https://pay.line.me/portal/tw/main)

### 使用上
- 讓使用者專注在使用上，不要讓太多顏色干擾使用者
- 在關鍵按鈕上用主色
- 在其他地方用輔色
- 想炫砲畫面的話就不要選擇單一色彩

### 什麼資訊對使用者來說是重要的？
- 關鍵按鈕
- 主要功能 - 實心按鈕 vs 次要功能 - 空心或反灰按鈕
- 登入 vs. 註冊
- 如果獲取新使用者是重要的 => 註冊要用實心強調
- 儲存 vs. 刪除
- 儲存通常會用實心，刪除會用空心 + 警告色
- 新增文件 vs. 建立加密文件


- 分析
- 功能
- 當下情境
- 當下需求
- 功能的層級
- icon 的意義要清楚，或是再加文字補充
- 語言要統一，不要中英文交錯
- 狀態要明確
- 追蹤 vs 已追蹤
- 輸入反饋須即時顯示

* 可參考：[Ant Design](https://ant.design/docs/spec/data-entry-cn)
* [網站佈景主題參考](https://themeforest.net/category/site-templates)
* [網站佈景主題參考](https://coderthemes.com/hyper/saas/dashboard-analytics.html)
* [網站佈景主題參考](https://themes.getbootstrap.com/)

## 超連結
- [課程大綱](https://www.notion.so/7th-fded1e278f694ff2a32a852e72027ad4)
- [Ant Design](https://ant.design/index-cn)
- [網站佈景主題參考](https://themeforest.net/category/site-templates)
- [Dastone](https://mannatthemes.com/dastone-1/default/demo-navy.html)
- [設計素材 / 網站設計 / 資源工具分享](https://hackmd.io/@debbylin/Sygn7Pz2w)