在這個章節，我會說明我如何理解整個網站，並將其拆成很多一小部分功能，並整理出User Story。若對網站實作成果有興趣可參考這裏。
文章大綱：
- 什麼是User Story
- 用sketch整理網站的Flow
- 根據這些畫面列出 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
Step2. 列出 User Story
目標網站是標準的購物網站，先分出頁面在一個一個列出可能的情境利用User Story 來描述以下的功能：
- 商品 & 商品分類
- 文章 & 文章分類
- 購物車
- 聯絡我們（留言）
- 後台商品（類別）管理
- 後台文章（類別）管理
- 後台圖片上傳 + HTML編輯器
1. 商品 & 商品類別 ：
- 使用者可以進到類別列表
- 使用者可以進入商品資訊頁並將商品加入購物車
- 使用者將商品加入購物車之後會有Flash Message回饋
2. 文章 & 文章類別 :
- 使用者可以瀏覽某類別的文章列表
- 使用者可以瀏覽文章詳細內容
3. 購物車
- 使用者可以新增/刪減商品
- 使用者可以結帳
4. 聯絡我們表單
- 使用者可以留下資料跟訊息並送出
5. 前台登入
- 使用者可以登入前台
- 使用者可以登入後台
6. 後台商品（類別）管理
- 使用者可以新增商品
- 使用者可以刪除商品
- 使用者可以瀏覽商品細節
- 使用者可以瀏覽所有商品
7. 文章及文章類別管理
- 使用者可以新增文章
- 使用者可以刪除文章
- 使用者可以瀏覽文章內容
- 使用者可以瀏覽所有文章
8. 後台圖片上傳 + HTML編輯器
- 使用者可以在編輯器內上傳圖片
檔案上傳是蠻常見的後台需求，但也是比較複雜的一項功能，要同時顧及到檔案類型限制、大小限制，以及如何讓上架流程更順暢，要讓使用者在編輯器內圖片上傳則需要javascript輔助。
（技術細節請見這裏)
在理解畫面，且整理好User Story之後，接下來我會說明如何進行下一步：
