check2check vs OneBoy 手機版 UX/UI 動線對比

頂部 nav bar (漢堡 + Logo「CHECK 2 CHECK」+ 搜尋 + 購物車)。其下深灰色 fixed promo bar「指定內著 3件$399/6件$699 立即搶」，再下為 3 個主分類 tab (C2C 雨衣 / 機能褲 / 機能服裝)。

主 hero 為極鋒雨衣 collection 形象攝影 (女模穿粉黑撞色雨衣 + 城市夜景 + 「極鋒雨衣 鈦粉拼黑 新色登場」+ 3 個 SGS 認證 icon「SGS 高規防水 10000mmH2O / SGS 檢驗 無重金屬 / SGS 檢驗 無甲醛」+「限量發售中 →」按鈕 + carousel 5 dot)。

hero 下方為 4 個功能按鈕 (優惠活動 / 全館滿千免運 / 會員福利 / LINE新好友領50)，再下接 YouTube 品牌影片 (男模穿雨衣戶外情境)。

頂部雙層 nav (ONE BOY 主站 tab 與 ONE BOY HOME tab 並列切換 + 主 nav 列，漢堡 + Logo + 購物車 + 搜尋)。進站即彈出 「99購物節」promo popup (可 x close)，配「全館單筆消費 滿 1999 折 199 / BVIP 黑卡會員再享 85 折」+ 品牌代言人「孫淑媚」+ 「SHOP NOW」CTA。

其下依序為「冰鋒 T 恤 限時 3 件 $990」(多款指定商品·可任意混搭)、男內褲大促 任三件 $660、內著大促 SKIN collection 任三件 $990 等促銷 tile，2 欄格線塞滿促銷資訊。底部 sticky bar 6 個 tab (首頁 / 分類 / 穿搭 / 門市 / Q&A / 會員)。

此段為商品格網 (2 欄):每格顯示商品照 + 商品名 + 多入優惠標 (紅底「多入優惠」badge) + 單件價格。實測可見:冰磁 T 3.0 ($450, 3件1190)、冰磁口袋工作褲 2件1180 ($690)、冰磁錐形水洗牛仔褲 2件1480 ($790)、極機能冰磁長褲 3.0 2件1200 ($690) (本輪比較商品)、+ 男 T + 短褲等，每格右上有機能 icon (抗菌 / 涼感 / 負離子 / 透氣 / 極身)。

c2check 首頁整體 docH 只有 3,297 px，是本輪三家中最短。內容組織:hero 品牌形象 → 4 功能按鈕 → YouTube 影片 → 商品格網。

99購物節 popup 仍在首屏區塊內 (因未 close 前擋住底層)，其下延續冰鋒 T 恤 3件$990 促銷 tile、男內褲大促 3件$660 (限時五日)、內著大促 SKIN collection 3件$990 (限時五日)，底部露出「CLEARANCE SALE for SHORTS 限時!冰鋒短褲」段落。

整站首頁走「促銷 tile 密鋪」路線。底部 sticky bar 全程常駐 6 tab。OneBoy 首頁 docH 約 22,517 px，是 c2check 的 6.8 倍。

內容順序 (由上而下)

1. Nav bar (漢堡 + Logo + 搜尋 + 購物車)
2. fixed promo bar「指定內著 3件$399/6件$699 立即搶」
3. 主分類 tab (C2C 雨衣 / 機能褲 / 機能服裝)
4. 麵包屑:首頁 > 下身 > 休閒長褲 > 極機能冰磁長褲 3.0．2件1200
5. 大幅商品情境攝影 (女模穿深灰長褲 + 藍色透氣循環系統箭頭圖示 + 「透氣循環系統」文字 + 「冰磁長褲 3.0」大字浮水印)
6. 商品編號:CB0026109
7. 商品名:極機能冰磁長褲 3.0．2件1200
8. 價格:NT.690 (紅字)
9. 多入優惠標:2件1200 (橙紅字)

fold 內無變體 chip、無底部 sticky CTA (sticky bar 商品頁下段才出現)。

內容順序 (由上而下)

1. 雙層 nav (ONE BOY / ONE BOY HOME tabs + 主 nav)
2. Promo banner 疊在頂部「99購物節 全館滿$1999 折$199　冰鋒 T 恤 三件$990」 (滾動時常駐;此為別品項優惠，非本商品促銷)
3. Hero 大幅商品照 (灰色機能長褲懸浮於藍色水面) + 大字「冰感 A 級 透氣冰鋒褲」+「速乾防曬｜高效透濕」+ 三個功能 icon「50 UV / 冰結晶 / 高效透濕」+「MEN 男款 綠灰色」色彩 chip + 「KEEPING UP WITH ONE BOY FOR NEW CONCEPTS OF DAILY WEAR」slogan + carousel 3 dot
4. 商品名:冰感 A 級速乾防曬機能吸濕排汗透氣冰鋒褲　貨號 262608
5. 限時優惠 badge:「冰鋒褲 任選兩件 $1,400」(紅底白字)
6. 尺寸 chip inline:M / L / XL / 2XL / 3XL / 4XL (6 選項)
7. 價格:NT$1380 劃線 → NT$770 (紅字)
8. 顏色選擇提示:請選擇顏色 · 男款-綠灰色
9. Bottom sticky:首頁 / 客服 / 購物車 / 加入購物車 (黑底白字滿寬按鈕)

大幅情境攝影 (男模穿冰藍 T 恤 + 深灰機能長褲，藍色透氣循環系統箭頭圖示 + 「透氣循環系統 / 後膝隱藏式透氣孔 / 快速排除熱氣與濕氣」文案)。

下段接「Q-MAX 0.39 冰感親膚再進化」大字 + 「為肌膚找回瞬間的沁涼感」小字，配一張冰晶特寫褲子的形象照。底部 sticky bar 開始出現 (收藏 + 加入購物車 + 客服)。

頂部 promo banner 仍常駐。內文主體為完整尺寸表:先男生 (尺寸 M-4XL，欄位:全長 / 腰寬 / 臀寬 / 大腿寬 / 褲檔長 / 褲口寬，以公分為單位)，再女生 (尺寸 S-2XL 同欄位)。上方 microcopy「* 尺寸僅供參考，因應每人的體態、穿衣習慣皆有不同，若骨架、肩胸、臀圍較大者，可選擇大一個尺碼」。

此段以規格明細建立信任，並直接讓使用者判斷尺寸適配。

此段為變體選擇 + SIZE GUIDE 區:6 色 chip 以 mini 商品照展示 (淺卡其 / 霧藍 / 深藍 / 淺灰 / 深灰 / 黑，色名以 chip 標籤呈現)。下接紅字標題「- SIZE GUIDE -」+ 男/女兩張尺寸熱區對照矩陣圖 (以身高 × 體重矩陣列示 M/L/XL/2XL 對應區間;女:身高 150-180 × 體重 40-80;男:身高 155-185 × 體重 45-85)，每格對應建議尺寸。

底部 sticky bar 依然常駐 (收藏 / 加入購物車 / 客服)。此區資訊密度中高，重點在幫使用者精準選色 + 選尺寸。

此段為機能訴求 + 冰晶特寫:上段深藍底文字「賦予肌膚瞬冰觸感，讓空氣在步履間目由穿梭 / 同時將 UPF 50+ 原紗防曬技術無縫織入纖維 / 維持高效透濕的同時，為肌膚築起輕盈冰感防護網 / 阻擋 99% 以上紫外線，重塑酷暑下的極致涼感」。

下段大字「瞬間冰感 Q-MAX 值 0.466」 + 小字「經 SGS 檢測 是一般市售產品的將近 4 倍涼 / 常規 Q-MAX 值:0.466，法規 Q-MAX 值:0.216」。底部大幅冰晶纖維特寫照。

check2check

首頁 hero 為 K-pop 感 collection 大幅代言攝影 (極鋒雨衣女模夜景);商品頁為情境模特照 (女模穿褲走路 + 男模冰藍 T 情境) + 冰晶特寫。文案短、視覺留白多。

OneBoy

商品頁為大幅商品獨拍 (褲子懸浮於藍水面) + 材質特寫 (冰晶纖維) + 詳細功能文案。攝影訴求「規格 + 認證」，非情境模特。

check2check

麵包屑 → 情境攝影 → 商品名 → 價格 → 情境模特 (透氣循環系統) → Q-MAX 0.39 → 6 色 chip + SIZE GUIDE (y≈5000) → 底部 sticky「加入購物車」。

變體選擇 chip 在頁面下段，需捲動才能看到;若使用者直接點底部 sticky CTA 未選變體，會觸發 alert「請先選擇款式」保護機制。

OneBoy

promo banner → hero 商品照 + 冰感 A 級文案 + 3 icon + 男款色 chip → 商品名 + 貨號 → 限時優惠 badge (兩件$1400) → inline 尺寸 chip (M-4XL) → 價格 → 顏色選擇提示 → 中段完整尺寸表 → UPF50+ + Q-MAX 0.466 + 冰晶特寫 → 底部 sticky「加入購物車」。

變體選擇在商品頁 fold 內直接可見，點 CTA 觸發顏色浮層再次確認選色，再加入購物車。

check2check

頂部有 fixed promo bar (「指定內著多入」跨品項優惠) 常駐;商品頁本身以「2件1200」多入優惠標 + 價格 NT.690 呈現，無劃線折扣。促銷資訊分為「跨品項 fixed 活動」與「單品多入標」兩層。

OneBoy

promo banner 在頂部 fixed 常駐 (「99購物節 全館滿$1999 折$199 / 冰鋒 T 恤三件$990」，跟本商品無直接關係的別品項優惠);商品頁自身另有「冰鋒褲 任選兩件 $1,400」限時優惠 badge + 劃線折扣 (NT$1380 → NT$770)。促銷資訊多層並存、視覺強烈。

check2check

商品頁 docH 約 18,038 px，內容:情境攝影 → Q-MAX 0.39 → 6 色 chip + SIZE GUIDE (熱區矩陣)。走「情境 + 選變體」結構。

OneBoy

商品頁 docH 約 21,478 px (約 1.19× check2check)，內容:商品獨拍 → 尺寸表 (男/女) → UPF50+ + Q-MAX 0.466 + 冰晶特寫。走「規格 + 認證」結構。

check2check

1. 首頁 hero「極鋒雨衣」collection
2. 點頂部主分類 tab「機能褲」→ 商品列表 → 選商品 (2-3 步)
3. 或從首頁往下捲動至商品格網 (2 欄，含極機能冰磁長褲 3.0) → 直接點商品 tile

觀察:頂部三個主分類 tab (雨衣/機能褲/機能服裝) 直接曝光，「機能褲」在 tab 內明確可見;首頁往下捲動也可直接看到目標商品格網。品類聚焦讓分類架構單純。

OneBoy

1. 首頁進站即見「99購物節」popup + 冰鋒 T 恤/內褲/內著等促銷 tile
2. 若目標商品「冰鋒褲」在 tile 內曝光可直接點;否則走底部 sticky「分類」→ 男/女裝 → 褲類 → 商品
3. 備用路徑:底部 sticky bar 6 tab 全站常駐

觀察:目標商品是否曝光取決於首頁 tile 排列 (實測 fold 內見到冰鋒 T 恤 + 男內褲 + 內著大促，未見「冰鋒褲」單獨 tile);底部 sticky bar 6 tab 全站常駐，任何時候可跳分類。

點底部「加入購物車」sticky CTA (未捲動到頁尾選變體) → 頁面中央彈出原生 alert dialog:「請先選擇款式」。使用者被阻止誤加購，需回頁面下段先選色/size 才能繼續。

此保護機制搭配 check2check「變體選擇不在 fold 內」的動線設計。

OneBoy 因 fold 內已 inline 選過尺寸 (M)/顏色，點底部「加入購物車」→ 從畫面下方浮出顏色選擇浮層:上方商品縮圖 + 價格 (NT$770, 劃線 NT$1380, 紅色「限時優惠 冰鋒褲 任選兩件$1,400」badge)。中段 8 色橫向可捲動色卡 (男款-米白色 / 男款-隕石藍 / 女款-深紫灰 / 女款-紫褐灰 / 男款-綠灰色 / 男款-黑色 / 女款-米白色 / 女款-綠灰色，選中「男款-綠灰色」有黑框)。下段尺寸 chip (M/L/XL/2XL/3XL/4XL, 全部標「-現貨」)，底部「加入購物車」全寬按鈕。

本輪自動化在頁面色 chip 區的選中動作未觸發 SPA 選中狀態 (event dispatch 未生效)，因此 modal 內完整選色 + 選 size + 加入的截圖本輪無法自動產出。

已觀察到的 UX 行為:點 CTA 會開 bottom sheet modal，modal 內顯示 mini 商品照 + 6 色方塊 chip + 4 個 size chip (M/L/XL/2XL) + 數量步進器 + 「加入購物車」「立即購買」兩鍵並列。

此圖顯示上方彈出「CHECK! 友好物，獨享私密優惠 加社群」LINE 社群邀請通知條 (加入購物車 flow 中的 side effect)。

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

直接開 /cart URL 進入購物車頁 (未登入即可看)。頁面內容:頂部 nav + fixed promo bar + 主分類 tab 常駐;4 段訂購流程進度條「商品明細 → 訂單試算 → 收件資訊 → 訂單完成」;排列模式切換 (列表模式 / 大圖模式);空車狀態顯示「尚未選購任何商品」;下方加購推薦區 列出 5 個「加$99購買 (原價 XXX 元) ... 請選擇款式 +」商品讓使用者順便加購;底部「取消」CTA。

因本輪自動化 modal 內選色未觸發成功，購物車實際是空的，但頁面本身未登入即完整可見，這跟 Round 2 A 版快電商行為一致 (皆不擋登入牆)。

點右上購物車 icon → 被導向會員登入頁 (帳號密碼欄 + 「登入會員」按鈕 + 「LINE 登入 / FACEBOOK 登入」快速登入)。未登入無法直接進購物車頁。使用者若剛加入商品，此處需先做登入決策才能繼續。這跟 Round 2 A 版 (vs 快電商) 觀察到的 OneBoy 行為一致。

加入商品後直接進購物車頁 (未擋登入)。頁面顯示4 段訂購進度條 (商品明細 → 金額試算 → 收件資訊 → 結帳完成) + 商品清單 (含商品編號 CB0026107, NT$450, +/- 數量步進器) + 加購推薦下方數個「加$XXX 購買 (原價 XXX 元)」商品列。底部並列兩鍵 CTA「取消」+「開始結帳」。

加入商品後回到商品頁，右上購物車 icon 角標由 0 變為 1 (再加會變 3)。畫面本身無 toast、無提示條、無「前往購物車」CTA;使用者需自行注意角標並點擊才能到購物車頁。這跟 Round 2 A 版觀察一致。

按「開始結帳」→ 進入登入牆頁面。內容順序:上方 3 個社群登入按鈕 (Facebook / Google / LINE 各一整寬按鈕) → 「--- 或 ---」分隔 → 「雲端小幫手帳號」E-mail + 密碼 + 「登入」按鈕 + 「忘記密碼？加入會員」links → 底部小字連結「訪客結帳 以訪客身分進行購物」。訪客結帳可用但視覺上被淡化 (小字、無 button style)。

加入購物車後點購物車 icon → 直接被導向登入牆。內容:「會員登入 / 加入會員」tab 切換 → 帳號 + 密碼 + 記住帳號 checkbox → 「我同意 ONE BOY 服務條款與隱私權政策」checkbox (需勾才可登入) → 「登入會員」button → 底部「快速登入結帳」LINE + FACEBOOK 兩個社群登入。整頁無訪客結帳選項;使用者必須註冊會員或用社群帳號登入才能繼續。