---
# System prepended metadata

title: 光光餐盒 - 需求分析

---

# 光光餐盒 - 需求分析


# User Story

> （ 某個頁面下 ）身為一個 (使用者/工程師) 我可以做 (某個) 動作 ，以達到 (某個) 目的。


簡單來說明:

* 網頁頁面的功能
* 使用此網頁的身分
* 做甚麼動作
* 想要達成的目的


範例如下:

在"登入頁面"身為一個 "使用者" 我可以做 "登入帳號" 的動作，以達到 操作帳戶內容 的目的 


# 首頁


![](https://i.imgur.com/DmwjmTa.jpg)


## Navbar區域

### LOGO ![](https://i.imgur.com/cfiHqwq.png)


* 使用者 做點擊的動作後 可以達到 回到首頁 的目的


### 關於光光

* 使用者 做點擊的動作後 可以達到去到 ABOUT 的目的


### 最新消息

* 使用者 做點擊的動作後 可以達到去到 最新消息頁面查看近期活動/媒體報導 的目的


### 餐盒產品

* 使用者 做點擊的動作後 可以達到去到 商品頁面挑選商品 的目的



### 新鮮百貨

* 使用者 做點擊的動作後 可以達到去到 商品頁面挑選商品 的目的


### 美好生活

* 使用者 做點擊的動作後 可以達到去到 BLOG觀看食物相關文章 的目的


### 會員中心 ![](https://i.imgur.com/6cKtk1L.png)


* 使用者 做點擊的動作後 可以達到去到 會員中心查看訂單/修改個私人資訊 的目的

### 購物車 ![](https://i.imgur.com/wsBDvF6.png)

* 使用者 做點擊的動作後 可以達到去到 購物車結帳 的目的


## Slide區域


![](https://i.imgur.com/aaRm4bc.jpg)



* 使用者 做點擊紅框的動作後 可以達到 切換投影片/去到商品頁面、BOLG頁面 的目的



## 右下角fixed區域

![](https://i.imgur.com/sKsQMTe.png)


* 使用者 做點擊的動作後 可以達到 切換至商品選購頁面/ 跳轉至LINE連結頁面 的目的


## 介紹區域(連接到關於光光)

![](https://i.imgur.com/eCVZ3LZ.jpg)


* 使用者 做點擊read more後 可以達到 關於光光頁面 的目的


## 兩個產品的大圖連結區域、Footer區域

![](https://i.imgur.com/6HFWpcz.jpg)



* 使用者 做點選大圖標示後 可以達到 商品頁面 的目的


* 使用者 做點選Footer區域 可以達到 以下頁面的資訊

1. 關於光光
2. 媒體報導
3. 商品頁面跳轉
4. BLOG頁面跳轉
5. 購物須知
6. 產品QA
7. 會員專區
8. 社群
9. 聯繫資訊(電話地址營業時間等)




# 關於光光

## 故事區域一

![](https://i.imgur.com/xipLj5J.png)


![](https://i.imgur.com/ftYryu4.png)

## 故事區域二

![](https://i.imgur.com/7ueFww5.jpg)


## 故事區域三

![](https://i.imgur.com/7Wa2Utb.jpg)




## 超連結區域

![](https://i.imgur.com/ijGwWEW.jpg)

* 使用者 做點選大圖標示後 可以達到 以下 的目的
1. 跳轉商品頁面
2. 104人力招募頁面
3. LINE連結跳轉頁面
4. BLOG文章跳轉頁面


---


# 會員登入頁面

![](https://i.imgur.com/1nYmYpx.png)


* 使用者 輸入帳號密碼 可以達到 以下 的目的
1. 登入會員進入會員專區
3. 查看訂單進度
4. 會員資料維護
5. 密碼變更

## 會員專區

![](https://i.imgur.com/mUyFu3U.png)

![](https://i.imgur.com/4McLAK1.png)

![](https://i.imgur.com/w6SqhVb.png)


## 註冊頁面

![](https://i.imgur.com/RtYCoVO.png)

* 使用者 輸入基本資料 可以達到 使用會員專區功能 的目的


# 商品區域

![](https://i.imgur.com/DN7zvB7.jpg)

* 使用者 點擊商品 可以達到 進去商品頁面觀看資訊/放入購物車 的目的

![](https://i.imgur.com/dXNjRHZ.jpg)


![](https://i.imgur.com/nJoOjSy.jpg)


## 商品介紹

![](https://i.imgur.com/js3II0Y.jpg)

* 使用者 點擊商品 可以達到 進去商品頁面觀看資訊/放入購物車 的目的


# 購物車

![](https://i.imgur.com/ZpCFT8N.png)

![](https://i.imgur.com/v8p5Fa7.png)

* 使用者 輸入購買數量/運送地址/付款資訊 可以達到 購買商品 的目的



# 最新消息

![](https://i.imgur.com/l9pgndS.jpg)

* 使用者 點擊 分類標籤 可以達到 分類文章/觀看文章 的目的


# BLOG

![](https://i.imgur.com/e6Z1G6k.jpg)

* 使用者 點擊 分類標籤 可以達到 分類文章/觀看文章 的目的
