---
title: 20200811 Astro camp 產品設計 Workshop
tags: Astro Camp, Workshop, UI/UX
---
---
# 20200811 Astro camp 產品設計 Workshop
時間：8/11(二) 10:30 ~ 16:30
講者：Debby

#### 時程：

* **找出產品的核心功能**
上午 10:30~12:30

* **幫忙你快速地設計出產品**
下午：13:30 ~ 16:30

---
<br>

## 要做什麼樣的產品？

1. 你們常用個工具或網站
2. 你們是因為什麼困難或需求，所以才用這個網站？

## 製作人物誌(客群分析)
人物誌是描述一個使用者的樣貌，透過著樣貌去規劃出產品的功能。
創造出來的人物誌通常會經過使用者調查越來越接近真實的，也有可能同一個產品有數個人物誌。(先以自己的生活經驗出發，想像一個跟自己差不多的人！)
詳細的人物參考：[人物誌](https://reurl.cc/6lVdjb)

這次的人物誌應包含：
1. 姓名 (大眾名即可)：欣怡
2. 性別：女
3. 年齡：20
5. 背景(職業)：大學生
6. 她/他遇到的困難：

## 撰寫使用者故事

### 句型：
### 身為 (使用者)，我想要 (需求)，以便/這樣我可以 (價值)。

**注意事項：**

1. 請將**使用者、需求、價值**請務必都帶入。
2. 請勿撰寫**太抽象**的需求 -> 需求不明確會導致開發者無法有基準驗收。
3. 將大範圍的使用者故事在盡量多拆細項描述。-> 確保需求和功能不會漏做。

例如：

1. 身為新手工程師宜芳，我想要存放、編輯程式碼片段，以便我可以紀錄常用的程式碼。
2. 身為新手工程師宜芳，我想要將這些程式碼都同步到 GitHub 上，這樣我就能將程式碼分享給其他人。
3. 身為新手工程師宜芳，我想要讓其他人對我的程式碼留言或回饋，這樣我才能知道我的程式碼是否有錯誤。
4. 身為新手工程師宜芳，我想要將這些程式碼依照語言、專案等分類，以便我可以更快速的找我要的程式碼。

<br>

## 製作 Functional Map
Functional Map 是將**使用者故事提取出功能**的規劃圖，
這份文件的目的是為了確認 **功能、資料結構**，和頁面沒有關係。

#### 請試著標出下例**功能**：
1. 身為新手工程師宜芳，我想要將這些程式碼**依照語言、專案等分類**，以便我可以更快速的找到我要的程式碼。
2. 身為新手工程師宜芳，我也想要可以**追蹤**或看到別人的程式碼，這樣我就能看看大大們的程式碼是怎麼寫的。
3. 身為新手工程師宜芳，我想要團隊的人都可以**共同存取和維護**一整個資料夾，這樣我就能知道團隊常用的程式碼有哪些、或是規範有哪些。
4. 身為新手工程師宜芳，我想要可以**搜尋**這些程式碼，以便我可以更快速的找到我要的程式碼。

#### 請試著繪製以下描述的 Fuctional Map :
1. 身為新手工程師宜芳，我想要**存放、編輯**程式碼片段，以便我可以紀錄常用的程式碼。

<br>
<br>

詳細的 Functional Map 請參考：
[初學者的 Functional Map ・嫁給 RD 的 UI Designer](https://blog.akanelee.me/posts/168560-functional-map/)

## Flow Chat 說明

在上面 Functional Map 時可能會發現有些流程需要進行流程判斷，這部分可以和團隊或和助教詢問是不是有哪個流程需要留意的。

<br>

------

## UI Flow / 網站架構

UI Flow 是將前面的功能再已頁面來進行排列，這時候可能有些細節的功能就不用再寫進 UI Flow 內，這邊要確認的是主要的功能，在頁面間的安排。

## 如何繪製 Wireframe
Wireframe 的目的是為了確認這些功能在頁面的位置，並且檢視還有哪些**觸發規則、狀態**需要考慮的。

1. 哪些行為觸發時會有什麼回饋？
1. 滑鼠滑到按鈕時會有什麼效果？
2. 行為執行成功或失敗時會有什麼樣的回饋？ 又會是以什麼樣的形式呈現？

3. 狀態，資料載入時有可能會有什麼問題？
1. **理想狀態**：理想上資料呈現的頁面。
2. 空白狀態：資料未載入時的狀態。
3. **極限狀態**：當資料超過或小於設定時會呈現的狀態。
4. **錯誤狀態**：因各種原因(人為或系統等)造成出錯時的狀態。
5. 局部狀態：預先導覽的狀態。
6. 載入狀態：當資料載入時的狀態。

## 設計常見的問題
> 非設計背景或初學者在設計產品時可能會遇到的問題。

### 如何配色？
可以先選定一個主色，再選擇一個灰階色當作輔色，這樣能獲得簡潔的畫面以及突出的品牌識別。

### 什麼資訊對使用者來說是重要的？
1. 實心按鈕 vs 空心按鈕
2. 不同功能或層級下的按鈕呈現方式。
3. icon 的閱讀性。
4. 語言的統一性。

<br>

## 設計工具分享 Figma

請先 **[下載 Figma](https://www.figma.com/)**

- 示範文件下載：[產品設計 Workshop 示範檔 - For 學員](https://reurl.cc/Ez811g)

> 請將示範檔複製，以便操作。

- [Figma Bootstrap Grid Templates](https://reurl.cc/e8vdzb)
- [figmafreebie](https://www.figmafreebies.com/)

### 其他素材資源分享：
[免費素材資源 (from mika)](https://hackmd.io/6zdFa6t5Q6Co4xSXupd0Ag)

---
以上，謝謝大家參與這次的 Workshop ，期待你們可以一起創造出厲害、有趣的產品或網站。

如對上述設計有問題，歡迎在 flowdock 上詢問我。

另對功能發想想要確認都歡迎和助教或是和你們的組員討論，大家加油！