# 數位產品設計入門
## 講師簡介
[Debby](https://www.debbylin.me/)

## 上課教材
[共編](https://hackmd.io/ZQi6tqc9R2qWZVSposFKVQ)
[8th 數位產品入門教材](https://debby.notion.site/8th-for-3255266a7c05432bbfd4bb41972af6d5)

## 開發流程
開發順序：決定題目 => 使用角色 => 功能 => 核心功能 => 開發優先順序
1. 如何差異化？ex:對戰模式
2. 如何更有趣？ex:遊戲化
3. 什麼樣的技術我們可以挑戰？ex:websocket、Action-Cable
4. 尋找缺少的技術

比較陌生、不知道的技術要在前期就投入
e.g. Action-Cable、共同編輯
先把雛形做出來，最後再刻layout

### 一.人物誌
定義使用者的樣貌，他想要什麼需求，做出來後可以產生什麼價值(打到使用者痛點)
**換位思考，如果我是使用者，我會覺得這個功能有用嗎？**
確認使用者的需求跟期待，到底想幫使用者解決什麼問題
可以列出很多點，最後驗收看有沒有達到需求
- 要很明確
- 縮小範圍
- 寫對使用者有價值的東西

#### 如何做到他提出的需求?
站在不同使用者立場

姓名
性別
年齡
職業
她遇到的困難

造句：
身為...我想...以便...

### 二.使用者故事
把需求變功能，確認需求，為了解決這個需求需要哪些功能？

### 三.使用者故事地圖
1. 先規劃會有哪些階段
2. 把使用者故事列出來的功能做排序放在各階段下
3. 小組要先對核心功能有個共識，做完的可標記起來表示做完
- 可以分成三類功能：
核心功能(基本)、需要有的功能(進階)、加分功能(不會影響產品的運作)
先列出大功能再補足中間流程

### 四.flow chart
類似狀態機，使用者實際在操作時會經歷哪些流程
- when?
資料狀態變更的時候、複雜判斷
什麼時候觸發、如何觸發、觸發後會有什麼回饋
- 用不同圖示表示：
動作、狀態
判斷
起點、終點

在做每個子功能都先畫過一次釐清概念會比較好

### 五.UI flow
網站頁面架構，點超連結後會跑去哪
復刻也要畫，先確認哪些頁面、流程是我們的主力開發
次要頁面可先不用做

### 六.Wireframe
- 確認功能在頁面的位置
- 檢視還有哪些觸發規則、狀態需要考慮的
哪些行為觸發時有什麼回饋？
-- 點擊按鈕：會跳出什麼訊息？會跳到轉到哪一頁或區塊？
-- 行為執行成功或失敗：會有什麼樣的回饋？以什麼樣形式呈現？

---
如果是前後端分離，前端可以開規格給後端
讓他知道我需要哪些資訊

主要的功能畫就好
哪些行為觸發時會有什麼回饋？
通常是用在點擊按鈕會發生什麼事

### 觸發與回饋
網頁上有哪些觸發行為？
會造成什麼結果？

### 資料狀態
理想上資料呈現的狀態
使用者還沒登入的狀態

### 樣板參考
- Vuexy
[https://madewithvuejs.com/vuexy-admin-dashboard]
- HYPER
- METRONIC
[https://keenthemes.com/metronic/]

- 推薦：
- ANT design:用Vue做的
- material ui
- chakra = 免費版 TailwindUI (小網站可用)

### 什麼設計對使用者來說最重要(後期再留意)
- 儲存跟刪除要區分樣式
- 主要功能按鈕加顏色
- 次要功能可能用白色或灰色
- icon意義不明：加文字說明
- 語言統一
- 樣式隨狀態層級改變：換色或變實心

## HackMD
- 復刻專案：除了原本網站的功能以外還想加其他什麼好用的?
- 不同使用者：工程師、研討會共同編輯、站在技術平台方會想要什麼功能?
- 平台方會開什麼樣的權限給使用者，免費跟付費分別要開放哪些功能?
- 編輯完文件如何做分類跟收藏，跟現在的 HackMD 一樣還是有其他功能?

###### tags: `職涯`