快電商 vs OneBoy 手機版 UX/UI 動線對比

頂部只有極簡 nav bar (漢堡 + 快電商 C2C Buy logo + 購物車 + 登入)。其下一列米色 banner「加入快電商 C2C BUY 建立你的商店　免費試用」屬招商邀請。

主 hero 是「New Arrivals 當日新品 任選 97 折 12:00-23:59」灰卡搭大信封形象攝影，大留白、無彈窗。往下開始「新品上市 NEW」商品格線。整體節奏乾淨。

頂部雙層 nav (ONE BOY 主站 tab 與 ONE BOY HOME tab 並列切換 + 主 nav 列，漢堡 + Logo + 購物車紅色角標 + 搜尋)。進站即彈出「99購物節」促銷卡片 (可 x close，實測為 inline block 非 fixed overlay)，配「全館單筆消費滿 1999 折 199」促銷字。

其下依序為冰鋒 T 恤 3 件 $990、男內褲大促 3 件 $660、內著大促 3 件 $990 等促銷 tile，2 欄格線塞滿促銷資訊。底部 sticky bar 6 個 tab (首頁 / 分類 / 穿搭 / 門市 / Q&A / 會員)。

進入「星氏工坊 中秋折扣專區」品牌館，展示食品類商品 (工坊實餡蛋捲 12 入 NT$ 470、御風飲燉雞精 6 入 NT$ 1,500 → NT$ 899)。整體卡片式格線、白底、劃線折扣清楚。

此處揭露一項資訊:快電商是綜合電商 (服飾、食品、家用等品類並存)，首頁向下逐段呈現不同品牌館。

99購物節卡片仍在首屏區塊內 (因整段促銷 tile 落在此位置)，繼續呈現冰鋒 T 恤、男內褲大促、內著大促、CLEARANCE SALE、限時冰鋒短褲等服飾聚焦促銷。

整站商品品類集中在服飾。底部 sticky bar 全程常駐。

內容順序 (由上而下)

1. Nav bar (漢堡 + Logo + 購物車 + 登入)
2. 大幅男模半身情境攝影 (深藍 V 領 T + 淺灰背景 + 左側三個功能 icon:冰感 7°C / 抗菌 / 排汗透濕)
3. Tag 標籤:#冰磁系列　#售完備貨期較長
4. 商品名:冰磁透涼除臭 V 領短 T
5. 價格:NT$ 330 (無劃線、無折扣)
6. Bottom sticky:分享 / 收藏 / 購買 (圓角膠囊黑底 CTA)

內容順序 (由上而下)

1. 雙層 nav (ONE BOY / ONE BOY HOME tabs + 主 nav)
2. Promo banner 疊在頂部「99購物節 全館滿 1999 折 199　冰鋒 T 恤限時 3 件 $990」 (滾動時常駐)
3. Hero 文案「厚，比薄還涼 ONE BOY 冰棉 T」+ 商品照 + 三個功能 icon (透氣 / 涼感 / 防曬 UPF50) + 「MEN 男款 燕麥米」色彩 chip
4. 商品名:UPF50+ 防曬冰感 A+ 級高透濕祕魯棉冰棉 T 恤　貨號 262609
5. 限時優惠:冰鋒 T 恤｜限時 3 件 $990
6. 尺寸 chip inline:M / L / XL / 2XL / 3XL / 4XL (6 選項)
7. 價格:NT$790 劃線 → NT$550
8. 顏色選擇:請選擇顏色 (男款·燕麥米)
9. Bottom sticky:首頁 / 客服 / 購物車 / 加入購物車 (黑底白字滿寬按鈕)

顏色變體以 mini 商品照 + 中文色名並列展示，共 8 色 (淺綠 / 水藍 / 粉 / 燕麥 / 深灰 / 霧藍 / 丈青 / 黑)，各色皆用實體商品照呈現，讓使用者一次看完全部色系。

其下接大幅「冰磁除臭」情境形象照 (背景大字浮水印 + 商品淺色特寫)。此段以完整色系陳列 + 品牌視覺氛圍建立商品印象。

頂部 promo banner 仍常駐。內文為技術規格區塊「瞬間冰感 Q-MAX 值 0.392」+「經 SGS 檢測已大於 Q-MAX 涼感標準值 0.13，是一般市售涼感產品的 3 倍涼」，配一張 T-shirt 漂在水面的形象照。

此段以數據 + 認證建立商品可信度。

白色蜂窩布料紋理特寫，上疊三個「排汗超透氣」箭頭圖示，下接刺青男模用手拉扯衣料展示彈性 + 藍色排汗箭頭。以布料機能特寫 + 情境示範強化「透氣 / 彈性」訴求。

「輕盈透氣　告別黏膩與悶熱感，接觸肌膚時能帶走體表熱氣」+ 大特寫布料紋理照。以功能訴求 + 材質特寫延續商品說服。

快電商

以「情境攝影 + 中文直排字」為核心。模特照為主，冰塊、草地、網球場等情境背景搭配色彩鮮明的商品。文案短、視覺留白多。

OneBoy

以「產品特寫 + 功能標題 + 認證數據」為核心。商品懸浮於藍色水面、布料紋理特寫、Q-MAX 檢測數據等，訴求「涼感效能可驗證」。

快電商

情境攝影 → 商品名/tag → 價格 → 顏色變體 → 內容區塊 (規格、細節、模特情境) → 底部 sticky「購買」按鈕。

變體選擇需點「購買」按鈕後於 bottom sheet modal 內完成 (第六節有完整實測)。

OneBoy

hero 文案 + 商品圖 → 商品名 + 貨號 → 限時優惠 tag → inline 尺寸 chip → 價格 → inline 顏色 chip → 內容區塊 (規格、認證、特寫、模特情境) → 底部 sticky「加入購物車」按鈕。

變體選擇在商品頁上直接完成，點 CTA 直接加購。

快電商

本商品頁無劃線價、無倒數計時、無 fixed 促銷 banner，僅 tag (#冰磁系列) + 狀態 tag (#售完備貨期較長)。促銷 (如購物車頁的優惠加購活動) 放在後段流程而非商品頁。

OneBoy

promo banner 在商品頁頂部 fixed 常駐 (99購物節、冰鋒 T 恤 3 件 $990);價格劃線折扣 (NT$790 → NT$550);商品名下方獨立「限時優惠」badge。促銷資訊多層並存、視覺強烈。

快電商

商品頁 docH 約 16,341 px，內容以攝影為主 (模特情境 + 直排大字)，文字說明較短。

OneBoy

商品頁 docH 約 24,924 px (約 1.5× 快電商)，內容以「文案 + 認證數據 + 特寫」為主，圖文交錯層疊。

快電商

1. 首頁 hero「New Arrivals」
2. 往下捲動經過多個品牌館 (工坊食品等) 才會遇到服飾館
3. 或點左上漢堡選單 → 展開分類清單 → 選「服飾」→ 選「男裝」→ 選商品

觀察:分類 nav 收進漢堡選單，首頁靠品牌館並列引導。若使用者不熟平台結構，需靠捲動探索或先開漢堡。

OneBoy

1. 首頁一進站即見「冰鋒 T 恤 3件 $990」促銷 tile
2. 點 tile 直接跳商品頁
3. 備用路徑:底部 sticky「分類」tab (全站常駐) → 男裝 → 商品

觀察:目標商品在首頁 tile 內直接曝光。底部 sticky bar 6 tab 全站常駐，任何時候可跳分類、穿搭，減少「回到首頁再找」的認知負擔。

點底部「購買」sticky CTA → 從畫面下方浮出 bottom sheet modal:上方 mini 商品照 + 商品名/價/分類，中段「顏色」10 色 chip (含燕麥、粉、丈青、黑等)，下段「尺寸」6 chip (S/M 現貨 + L/XL/2XL 售完標示 + 3XL/4XL 現貨) 明確標「(售完)」badge，「* 剩餘 7 件」庫存提示，底部數量 + / - 步進器 + 全寬「加入購物車」按鈕。

點 fold 內尺寸 chip「M」→ 顏色 chip「男款-燕麥米」→ 點底部「加入購物車」→ 從畫面下方浮出顏色選擇浮層:上方商品縮圖 + 價格 (NT$550, 劃線 NT$790, 紅色限時優惠 badge)，中段 10 色橫向可捲動色卡 (含「男款-墨藍色/棕咖色/深灰藍/…」，選中「男款-燕麥米」有黑框)，下段尺寸 chip (M-4XL, 全部標「-現貨」)，底部「加入購物車」全寬按鈕。

畫面底部彈出明確 bottom bar toast:「已 加入購物車 · 您可以立即查看有購物車並開始結帳」+ 全寬「前往購物車」CTA 按鈕。給使用者強反饋 + 下一步引導。

回到商品頁 (畫面幾乎與加入前一致)，無 toast、無彈窗、無下一步引導。唯一變化:右上角購物車 icon 出現紅色角標「1」。使用者需自己注意到角標並主動點擊才能進購物車。

點「前往購物車」直達購物車頁 (未登入)。頁面內容:「您希望訂單配送至何處?台灣/海外」二選一 → 「您購物車中的項目」逐項顯示 (含商品圖、名、變體「丈青 / S」、單價 NT$ 330、數量 +/-、刪除 icon)，最下「結帳商品符合的活動」列出優惠加購清單，底部「總計 NT$ 330 + 結帳」sticky CTA。未登入即完整可見與可操作。

點右上購物車 icon → 被導向會員登入頁 (帳號密碼欄 + 「登入會員」按鈕 + 「LINE 登入 / FACEBOOK 登入」快速登入)。未登入無法直接進購物車頁。使用者若剛加入商品，此處需先做登入決策才能繼續。