# SiteMap - 購物/會員 (NAV)

###### tags: `SiteMap`

:::success
LIMO
:::


[link](https://www.itoki.jp/special/akimiru/)


參考設計(:eyes: LIMO自己要看的):
https://dribbble.com/tags/organic_shop
https://www.esquire.com/style/mens-fashion/g20686368/best-cheap-online-clothing-stores-for-men/

### 1. 購物車頁面(nav)參考
- 購物車圖示
- 顯示於畫面右上方
- HOVER效果展開(提供資訊)

---
加入購物車//[lativ](https://www.lativ.com.tw/)
<br>
HOVER//SOMETHING

<br>
HOVER//NOTHING//[link](https://www.toddsnyder.com/?cjevent=89fe53e4b78811eb8023855b0a180510&utm_source=cj&utm_content=100039162&utm_term=13897870)
<br>

### 2. 商品頁面(nav)參考
- 購物頁面圖示
- 可預選商品分流
- HOVER效果展開(主要分流)
- 展開清單(細節分類)
- 圖文顯示/置入廣告(皆為跳轉畫面)

---
選擇商品分類//[link1](https://www.everlane.com/?utm_source=pepperjam&utm_medium=2-112671&utm_campaign=120661&clickId=3574094376) [link2](https://www.asos.com/us/men/)

<br>
<br>


選擇身分分類//[link](https://shop.maoup.com.tw/?utm_source=maoup&utm_medium=menu)

- 補充 -

|效果表|
|-|

| |圖示HOVER顯示|點擊加入購物車|
|-|-|-|
|尚未購物|購物車目前沒東西|\|
|已選購者|購物車<br>(商品+基礎細節+數量)|上方顯示<br>加入資訊小卡|
| | | 顯示數秒後消失(提示加入成功) |

- 購物流程
- 購物歷程
- 點擊連結至商品頁面- 選擇目標商品- 加入購物車
- 跳轉購物車清單- 修改購物車- 選擇結帳方式
- 確認商品及付款方式
- 登入- 再確認(若已登入則省略)- 完成訂單(提示
- 購物後行為
- 確認已下訂單- 確認訂單進度 - 訂單完成確認(收到貨款)
- 存入歷史紀錄

### 3. 登入頁面(nav)參考
- 登入頁面圖示
- 放置於最右側(購物車之前)
- 以純文字為主之按鍵
- 具有標誌性底色
---
上方NAV簡潔分層//[link1](https://www.popdaily.com.tw/) [link2](https://www.toy-people.com/) [link3](https://www.farfetch.com/tw/checkout/basket.aspx)

<br>
<br>

其餘參考介面

### 4. 登入頁面方向

送養系統
(CRUD)

認養紀錄
(僅提供資訊)

購物紀錄
(來自購物流程)

留言板系統
(表單對話 1V1)