前端工程師後端之旅(2) - 從畫面拆解，到整理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



Step2. 列出 User Story

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

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

1. 商品 & 商品類別 ：

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


![](https://i.imgur.com/YuAGv2c.png =400x250)

2. 文章 & 文章類別 :

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



3. 購物車

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



4. 聯絡我們表單

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



5. 前台登入

• 使用者可以登入前台
• 使用者可以登入後台

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

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

7. 文章及文章類別管理

• 使用者可以新增文章
• 使用者可以刪除文章
• 使用者可以瀏覽文章內容
• 使用者可以瀏覽所有文章

8. 後台圖片上傳 + HTML編輯器

• 使用者可以在編輯器內上傳圖片

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

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

根據這些畫面去設計出網站路由並且做SEO優化處理