# 前端工程師後端之旅 - 從畫面拆解，到整理User Story

在這個章節，我會說明我如何理解整個網站，並將其拆成很多一小部分功能，並整理出User Story。若對網站實作成果有興趣可參考： http://mujingtsai.site/

文章大綱：

1. 什麼是User Story

2. 用sketch整理網站的Flow

3. 根據這些畫面列出 User Story

## 什麼是 User Story?
我們的階段性目標是寫出一套好理解且容易閱讀的功能需求，這個情況就非常適合User Story，User Story 通常是一段簡短但明確的功能描述，大多是這種句型開頭的：

> （在XXX 頁面 ）身為一個 XXX 我可以做 XXX ，以達到XXX 目的。
>

由於User Story 是以使用者角度為出發點，去描述網站需求，以及某個動作可以為使用者帶來的價值，除了可以避免商業上自我感覺良好的盲點，也非常利於工程部門跟其他非開發人員（如業務、PM、老闆、設計師）等角色的溝通，在這邊整理出來是為了讓自己在之後的階段可以隨時回來確認，確保功能跟需求的一致性。

## Step1. 用sketch整理網站的Flow

網頁截圖進Sketch ，Sketch裡有link功能，
可以記錄頁面點擊事件的先後順序，以此模擬網站的行為，
此處用已經完成的網頁做練習，如果是在開發階段，則使用Wireframe即可（WireFlow）。

目標網站：
https://www.leisurecosmetics.com/

我從首頁開始，試著去點擊每個按鈕，看會導向哪一個頁面，
並拆解成一張一張截圖放進Sketch，做成User Flow

<div class="col-6 dib">

</div>
<div class="col-6 dib">

</div>

<style>
.col-6{
width:48%;
margin: 0 5px;
}
.dib{
display:inline-block;
}
</style>

## Step2. 列出 User Story
目標網站是標準的購物網站，先分出頁面在一個一個列出可能的情境利用User Story 來描述以下的功能：

1. 商品 & 商品分類
2. 文章 & 文章分類
3. 購物車
4. 聯絡我們（留言）
5. 後台商品（類別）管理
6. 後台文章（類別）管理
7. 後台圖片上傳 + HTML編輯器

---

### 1. 商品 & 商品類別 ：

- 使用者可以進到類別列表
- 使用者可以進入商品資訊頁並將商品加入購物車
- 使用者將商品加入購物車之後會有Flash Message回饋

<div class="dib col-6">

</div>
<div class="dib col-6">

</div>

---

### 2. 文章 & 文章類別 :

- 使用者可以瀏覽某類別的文章列表
- 使用者可以瀏覽文章詳細內容

<div class="dib col-6">

</div>
<div class="dib col-6">

</div>

---

### 3. 購物車

- 使用者可以新增/刪減商品
- 使用者可以結帳
>

<div class="dib col-6">

</div>
<div class="dib col-6">

</div>

### 4. 聯絡我們表單

- 使用者可以留下資料跟訊息並送出

<div class="dib col-6">


</div>
<div class="dib col-6">

</div>

### 5. 前台登入
- 使用者可以登入前台
- 使用者可以登入後台

### 6. 後台商品（類別）管理

- 使用者可以新增商品
- 使用者可以刪除商品
- 使用者可以瀏覽商品細節
- 使用者可以瀏覽所有商品

### 7. 文章及文章類別管理
- 使用者可以新增文章
- 使用者可以刪除文章
- 使用者可以瀏覽文章內容
- 使用者可以瀏覽所有文章

## 8. 後台圖片上傳 + HTML編輯器
- 使用者可以在編輯器內上傳圖片

檔案上傳是蠻常見的後台需求，但也是比較複雜的一項功能，要同時顧及到檔案類型限制、大小限制，以及如何讓上架流程更順暢，要讓使用者在編輯器內圖片上傳則需要javascript輔助。
（技術細節[請見這裏](https://hackmd.io/VZjOXjsVSdiHnXQeIw-j_A))

在理解畫面，且整理好User Story之後，接下來我會說明如何進行下一步：

### [根據這些畫面去設計出網站路由並且做SEO優化處理](https://hackmd.io/pNRxW-lkRTqy4B3abgLOxA?both)