---
# System prepended metadata

title: SiteMap - 購物/會員 (NAV)
tags: [SiteMap]

---

# SiteMap - 購物/會員 (NAV)

###### tags: `SiteMap`



:::success
LIMO
:::

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

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

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



參考設計(: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/)
![](https://i.imgur.com/hzzHCcT.png)
<br>
HOVER//SOMETHING
![](https://i.imgur.com/P8pdlaX.png)
![](https://i.imgur.com/hT98BiE.png)

<br>
HOVER//NOTHING//[link](https://www.toddsnyder.com/?cjevent=89fe53e4b78811eb8023855b0a180510&utm_source=cj&utm_content=100039162&utm_term=13897870)
![](https://i.imgur.com/nfyfKEa.png)
![](https://i.imgur.com/yz4TwYO.png)
<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/)

![](https://i.imgur.com/DyRgTr2.png)
<br>
![](https://i.imgur.com/KnWopI2.png)
<br>

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

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

      - 補充 -

|效果表|
|-|

|  |圖示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)

![](https://i.imgur.com/UwD1HQ8.png)
<br>
![](https://i.imgur.com/zahqvB1.png)
<br>
![](https://i.imgur.com/W15JzjY.png)


其餘參考介面
![](https://i.imgur.com/h1Wvuxf.png)
![](https://i.imgur.com/n2COU10.png)
![](https://i.imgur.com/XfhPeC6.png)


### 4. 登入頁面方向

送養系統
(CRUD)

認養紀錄
(僅提供資訊)


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

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