快電商 vs Life8 手機版 UX/UI 動線對比
男裝機能短 T · 含完整購買流程實測 · 純體驗評估 (不含年齡層 / 轉換推論)
概覽與商品選擇
本輪商品：
- 快電商：冰磁透涼除臭 V 領短 T NT$ 330 （狀態：#售完備貨期較長，可下單）
- Life8：輕量圓領 曼巴棉短袖上衣 (No. 11750) NT.399（原價 NT.590，專區 6 折起）
快電商此商品標記「#售完備貨期較長」，實測仍可完整走完「加入購物車 → 進購物車頁」動線 (第六節完整實測)。
一、大頁面對比 (首頁)
頂部只有極簡 nav bar (漢堡 + 快電商 C2C Buy logo + 購物車 + 登入)。其下一列米色 banner「加入快電商 C2C BUY 建立你的商店 免費試用」屬招商邀請。
主 hero 是「New Arrivals 當日新品 任選 97 折 12:00-23:59」灰卡搭大信封形象攝影，大留白、無彈窗。往下開始「新品上市 NEW」商品格線。整體節奏乾淨。
頂部 nav bar (漢堡 + 搜尋 + Life8 logo + 購物車角標 + 會員 icon)。其下為子品牌館橫向 tab (Life8 / ALLWEARS / WILDMEET / EVENLESS / K:CODE 五個)，再接次分類 (所有商品 / 服飾 / 鞋款 / 配件)。
主 hero 為大幅 K-pop 團體形象攝影 (10 位男模坐/立/躺於工業風空間，浮動小 icon 點綴)，配「SIDE(B)」品牌 collection 大字浮水印。整體走潮流時尚形象路線，無彈窗、無促銷 popup。
進入「星氏工坊 中秋折扣專區」品牌館，展示食品類商品 (工坊實餡蛋捲 12 入 NT$ 470、御風飲燉雞精 6 入 NT$ 1,500 → NT$ 899)。整體卡片式格線、白底、劃線折扣清楚。
此處揭露一項資訊:快電商是綜合電商 (服飾、食品、家用等品類並存)，首頁向下逐段呈現不同品牌館。
K-pop 團體形象攝影延伸至下段 (SIDE(B) collection 的多幅代言影像 + 藍天雲彩襯底「NO PLANS CLUB IN VERSE」slogan)。持續以大幅潮流影像營造品牌氛圍，未見商品格線或促銷 tile 直接曝光。
Life8 首頁走「品牌形象 → 引導點進子品牌館 / 分類」路線，非「一頁看完所有促銷」型。
| 項目 | 快電商 | Life8 |
|---|---|---|
| Hero 型式 | 單一形象攝影 (信封主視覺) | K-pop 團體代言形象攝影 |
| 首頁定位 | 多品牌館入口聚合 | 子品牌館 (sub-brand) 並列 |
| 品類寬度 | 綜合 (服飾、食品、家用等) | 服飾聚焦 |
| 促銷曝光密度 | 低 (品牌館內部才有折扣) | 低 (首頁走品牌形象，非促銷曝光) |
| 底部 sticky nav | 無 | 無 (首頁模式) |
二、商品頁對比 (男裝機能短 T)
內容順序 (由上而下)
- Nav bar (漢堡 + Logo + 購物車 + 登入)
- 大幅男模半身情境攝影 (深藍 V 領 T + 淺灰背景 + 左側三個功能 icon:冰感 7°C / 抗菌 / 排汗透濕)
- Tag 標籤:#冰磁系列 #售完備貨期較長
- 商品名:冰磁透涼除臭 V 領短 T
- 價格:NT$ 330 (無劃線、無折扣)
- Bottom sticky:分享 / 收藏 / 購買 (圓角膠囊黑底 CTA)
內容順序 (由上而下)
- Nav bar (漢堡 + 搜尋 + Life8 logo + 購物車角標 + 會員 icon)
- 子品牌館橫向 tab (Life8 / ALLWEARS / WILDMEET / EVENLESS / K:CODE)
- 次分類 tab (所有商品 / 服飾 / 鞋款 / 配件)
- 大幅商品照 (黑色 T 背面平舖攝影，淺灰底)
- 商品編號:No. 11750 (灰字)
- 商品名:輕量圓領 曼巴棉短袖上衣
- 價格:NT.590 劃線 → NT.399 (紅字)
- 促銷 badge:專區6折起 (紅底白字)
- 無底部 sticky CTA (需捲動至變體區點按鈕)
顏色變體以 mini 商品照 + 中文色名並列展示，共 8 色 (淺綠 / 水藍 / 粉 / 燕麥 / 深灰 / 霧藍 / 丈青 / 黑)，各色皆用實體商品照呈現，讓使用者一次看完全部色系。
其下接大幅「冰磁除臭」情境形象照 (背景大字浮水印 + 商品淺色特寫)。此段以完整色系陳列 + 品牌視覺氛圍建立商品印象。
Life8 商品頁相對短，此段 (y=800) 已到變體選擇 + 商品資訊區塊。變體區塊:5 個色方塊 chip (米白/黑/白/深灰/灰，選中黑色有粗框) + 4 個尺寸 chip (S 劃斜線售完/M/L/XL) + 選中色名紅字「黑色」 + 數量步進器 (- / 數字 / +) + 主 CTA 全寬黑底按鈕，文字為「請選擇尺寸」(未選尺寸時的提示狀態)。
下接「商品資訊」摺疊區:原價 1,180、材質、產地、洗滌說明。無技術規格數據 (如 Q-MAX、SGS 等認證) 展示。
| 項目 | 快電商 | Life8 |
|---|---|---|
| 商品頁 docH (實測) | 14,486 px | 約 3,500 px (估) |
| 頁面結構 | 情境攝影 + 色系全展 + 布料機能特寫 + 底部 sticky CTA | 商品攝影 + 變體 + 商品資訊 + 尺寸表 + 試穿報告 |
| 內容策略 | 視覺氛圍主導 (情境攝影多) | 資訊主導 (變體 + 規格 + 試穿分享) |
三、UI 章:視覺層對比
| 元素 | 快電商 | Life8 |
|---|---|---|
| Nav 層數 | 1 排 (漢堡 + Logo + 購物車 + 登入) | 3 排 (主 nav + 子品牌館 tab + 次分類 tab) |
| 頂部 banner | 1 排米色招商 banner (首頁才有，商品頁無) | 無 fixed 促銷 banner (只有商品頁靜態 badge) |
| 底部 sticky bar | 4 icon (分享 / 收藏 / 購物車 / 購買，商品頁才有) | 無 sticky bar (商品頁 CTA 為頁面內 inline 按鈕) |
| 首屏被 chrome 佔用 | ~10% | ~25-30% (三排 nav/tab) |
| 顏色 | 快電商 | Life8 |
|---|---|---|
| 主色調 | 米白、灰、黑 (品牌質感) | 黑、白、紅 (簡潔 + 促銷點綴) |
| 促銷紅字 | 不使用 (價格用純黑) | 中度使用 (劃線價 + 「專區6折起」+ 「符合優惠」) |
| 價格呈現 | NT$ 330 (無劃線折扣) | NT.590 劃線 → NT.399 (紅字現價) |
| badge 樣式 | #hashtag 標籤 (低調) | 「專區6折起」紅底白字方形 badge |
| 屬性 | 快電商「購買」 | Life8「加入購物車」 |
|---|---|---|
| 位置 | 底部 sticky bar (右下) | 商品頁內 inline (變體區塊下方) |
| 形狀 | 圓角膠囊 | 全寬矩形 (100% 寬) |
| 底色 | 黑 | 黑 (兩個 state 皆黑底，僅文字變化) |
| 文字 | 白 · 「購買」 | 白 · 「請選擇尺寸」→「加入購物車」(依變體選擇動態變化) |
| 寬度 | 約 40% 螢幕寬 | ~95% 螢幕寬 (含 padding) |
| 其他 sticky | 分享 / 收藏 / 購物車 | 無 sticky |
快電商
以「情境攝影 + 中文直排字」為核心。模特照為主，冰塊、實驗室、實境等背景搭配色彩鮮明的商品。文案短、視覺留白多。
Life8
以「K-pop 團體代言形象 + 商品平舖攝影」為核心。首頁大幅團體代言影像 (SIDE(B) collection)，商品頁為單品乾淨背景平舖攝影，無情境模特照。訴求「潮流品牌認同」。
- 快電商走「單品情境攝影 + 品牌質感留白」 — 精品電商調性
- Life8 走「團體代言潮流形象 + 子品牌館分層 + 專區折扣」 — 潮流品牌調性 + 折扣管理明確
兩者在色彩克制度、chrome 密度、CTA 擺放上有具體差異，反映各自的品牌定位與客群設定。
四、UX 章:行為層對比
| 面向 | 快電商 | Life8 |
|---|---|---|
| 主要 nav | 漢堡選單 (所有分類收在裡面) | 頂部 nav + 子品牌館 tab (5 選項) + 次分類 tab (4 選項) |
| 首頁組織 | 多品牌館入口聚合 (跨品類) | 子品牌館 (sub-brand) 並列 + 潮流形象 |
| 商品品類寬度 | 綜合 (服飾、食品、家用等) | 服飾聚焦 (含配件/鞋款) |
| 底部 sticky nav | 無 | 無 (首頁模式) |
| 層級關係顯示 | 靠漢堡展開才知道分類 | 頂部 tab 明示子品牌 + 分類，層級可見 |
快電商
情境攝影 → 商品名/tag → 價格 → 顏色變體 → 內容區塊 (規格、細節、模特情境) → 底部 sticky「購買」按鈕。
變體選擇需點「購買」按鈕後於 bottom sheet modal 內完成 (第六節有完整實測)。
Life8
商品照 → 商品編號 + 商品名 → 劃線價 → 「專區6折起」badge → (捲動) 顏色 chip + 尺寸 chip → 選中色名 + 現貨狀態 → 數量步進器 → CTA (「請選擇尺寸」→「加入購物車」) → 商品資訊/尺寸表/試穿報告摺疊區。
變體選擇在商品頁上直接完成 (inline)，選完尺寸後 CTA 從 disabled 變 enabled 提示可加購。
| 面向 | 快電商 | Life8 |
|---|---|---|
| 底部 sticky CTA | 商品頁常駐 (「購買」) | 無 sticky (CTA 為頁面內 inline) |
| CTA 狀態 | 單一狀態 (常態可點) | 文字依變體選擇動態變化:「請選擇尺寸」→「加入購物車」 |
| 行為 | 點按開啟 bottom sheet modal | 直接加入購物車 (inline 變體已選) |
| 下單流程可完整走完 | 可 (含購物車頁優惠加購) | 可 (含購物車頁 mini-cart + 下一步) |
快電商
本商品頁無劃線價、無倒數計時、無 fixed 促銷 banner，僅 tag (#冰磁系列) + 狀態 tag (#售完備貨期較長)。促銷 (如購物車頁的優惠加購活動) 放在後段流程而非商品頁。
Life8
商品頁 fold 內即有劃線折扣 (NT.590 → NT.399) + 「專區6折起」badge;購物車頁再標「符合優惠」「專區6折起」重申。促銷資訊分佈於商品頁 + 購物車頁兩層，強度中等 (較快電商積極、較 A 版 OneBoy 克制)。
快電商
商品頁 docH 約 14,486 px，內容以「情境攝影 + 色系全展 + 布料機能特寫」為主，圖文交錯，情境攝影多。
Life8
商品頁 docH 約 3,500 px (估) — 約快電商的 1/4。內容為「商品平舖攝影 + 變體 + 商品資訊 + 尺寸表 + 試穿報告」，走型錄式簡潔結構。
- 快電商:先看情境 → 打開 modal 選變體 → 短情境足以決策
- Life8:先看價格與折扣 → inline 選變體 → 資訊區確認材質/尺寸表
Life8 特色是「CTA 狀態帶引導」 + 短頁面 + 結構化折扣管理，形成明確的「有目標型」購物動線;快電商特色是「情境優先 + modal 集中決策」，屬「被打動型」購物動線。
五、綜合觀察
| 面向 | 快電商 | Life8 |
|---|---|---|
| 設計語彙 | 單品情境攝影、大留白、品牌質感 | K-pop 團體代言潮流形象、子品牌館並列 |
| 首頁組織 | 綜合電商 (品牌館入口聚合) | 子品牌 (sub-brand) 並列 + 潮流形象 |
| 商品品類 | 綜合 (服飾 + 食品 + 家用) | 服飾聚焦 (含配件/鞋款) |
| 促銷曝光密度 | 低 (商品頁近無促銷，優惠加購放購物車頁) | 中 (劃線折扣 + 「專區6折起」badge + 購物車頁「符合優惠」) |
| 頂部 chrome | 1 排 nav (簡潔) | 3 排 (nav + 子品牌 tab + 次分類 tab) |
| 變體選擇位置 | 點 CTA 後 bottom sheet modal 內 | 商品頁 inline (捲動可見) |
| CTA 位置 | 底部 sticky 圓角膠囊 | 頁面內 inline 全寬 (依變體選擇動態 enable) |
| 加入後反饋 | Bottom bar toast + 「前往購物車」CTA | Mini card 從畫面上方降下 + 「前往結帳」CTA |
| 購物車頁擋登入 | 不擋 (未登入完整可看) | 不擋 (未登入完整可看) |
| 商品頁 docH | 約 14,486 px | 約 3,500 px 估 (1/4 快電商) |
觀察附註
- 快電商此次商品狀態為「#售完備貨期較長」，實測仍可完整走完「加入購物車 → 進購物車頁」動線，購物車頁載入「結帳商品符合的活動」優惠加購清單。金流頁未實測。
- Life8 商品有明確的「S 尺寸售完 (斜線標示) / M/L/XL 現貨」變體狀態顯示;選 M 現貨可完整走完動線至購物車頁。
- Life8 加入購物車後有 mini card 從畫面上方降下 (顯示商品/顏色/尺寸/數量/價 + 「前往結帳」CTA)，屬強反饋型，與快電商的 bottom bar toast 屬同類型設計，皆有明確「下一步引導」。
- 兩平台購物車頁皆不擋登入牆，未登入即可完整檢視購物車、優惠、結帳 CTA。這是本輪對比與 A 版 OneBoy 最大的相似點:Life8 與快電商在後段動線設計理念相近。
- Life8 首頁與商品頁皆無 fixed 促銷 banner。促銷 (「專區6折起」) 以 inline badge 呈現，不會滾動常駐擋畫面。
六、使用者角度 (含購買流程實測)
情境:一位使用者「想找一件男裝短袖 T 恤」，從打開網站到抵達商品頁的最短動線。
快電商
- 首頁 hero「New Arrivals」
- 往下捲動經過多個品牌館 (工坊食品等) 才會遇到服飾館
- 或點左上漢堡選單 → 展開分類清單 → 選「服飾」→ 選「男裝」→ 選商品
觀察:分類 nav 收進漢堡選單，首頁靠品牌館並列引導。若使用者不熟平台結構，需靠捲動探索或先開漢堡。
Life8
- 首頁頂部即見子品牌館 tab (Life8 / ALLWEARS / WILDMEET / EVENLESS / K:CODE) + 次分類 tab (所有商品 / 服飾 / 鞋款 / 配件)
- 點次分類「服飾」→ 商品列表 → 選商品 (2-3 步)
- 或直接從首頁形象攝影底下的品牌 collection 進入
觀察:分類架構在頂部永遠可見 (不用開漢堡)，「服飾/鞋款/配件」一目瞭然。子品牌 tab 讓使用者可精準選擇想逛的子品牌 (例如只看 WILDMEET 的機能戶外系列)。
| 面向 | 快電商 | Life8 |
|---|---|---|
| 最短路徑步驟 | 3-4 步 (含開漢堡或捲動找品牌館) | 2-3 步 (頂部 tab 直達) |
| 分類 nav 曝光 | 收進漢堡選單 | 頂部三排 tab 常駐 (子品牌 + 分類) |
| 首頁對目標商品的引導 | 需捲動找服飾館 | 頂部次分類 tab 直達，無需捲動 |
| 迷路後回頭 | 需再開漢堡或回頂 | 頂部 tab 常駐可隨時切 |
| 子品牌差異化 | 無 sub-brand 概念 | 5 個 sub-brand 明確分工 (基本款 / 戶外 / 設計 / 進階) |
情境:一位使用者從商品頁「按下 CTA → 選變體 → 完成加入購物車 → 進入購物車頁」的完整動線。以下為實際跑一次的截圖。
點底部「購買」sticky CTA → 從畫面下方浮出 bottom sheet modal:上方 mini 商品照 + 商品名/價/分類，中段「顏色」10 色 chip (含燕麥、粉、丈青、黑等)，下段「尺寸」6 chip (S/M 現貨 + L/XL/2XL 售完標示 + 3XL/4XL 現貨) 明確標「(售完)」badge，「* 剩餘 7 件」庫存提示，底部數量 + / - 步進器 + 全寬「加入購物車」按鈕。
捲動至變體區 (y≈700) → inline 變體選擇:5 色方塊 chip (米白/黑/白/深灰/灰，選中黑色有粗框) + 4 尺寸 chip (S 斜線售完 / M / L / XL) + 選中色名紅字「黑色 / 現貨」+ 數量步進器變 1。CTA 為全寬黑底按鈕，文字從「請選擇尺寸」(未選時提示) 變「加入購物車」(選完可加購)，透過 label 改變引導動線;點按行為在兩個 state 皆會回應。
畫面底部彈出明確 bottom bar toast:「已 加入購物車 · 您可以立即查看購物車並開始結帳」+ 全寬「前往購物車」CTA 按鈕。給使用者強反饋 + 下一步引導。
畫面上方降下 mini card:商品縮圖 + 商品名 + 顏色/尺寸/數量 + 單價 NT.399 + 明顯「前往結賬」CTA。同時右上角購物車 icon 出現角標「1」。屬強反饋 + 下一步引導，與快電商同類型 UX 設計 (只是 toast 出現位置在上方而非下方)。
點「前往購物車」直達購物車頁 (未登入)。頁面內容:「您希望訂單配送至何處?台灣/海外」二選一 → 「您購物車中的項目」逐項顯示 (含商品圖、名、變體「丈青 / S」、單價 NT$ 330、數量 +/-、刪除 icon)，最下「結帳商品符合的活動」列出優惠加購清單，底部「總計 NT$ 330 + 結帳」sticky CTA。未登入即完整可見與可操作。
點右上購物車 icon → 直接進入購物車頁 (未登入)。頁面內容:頂部子品牌館 tab + 次分類 tab 常駐，商品縮圖 + 商品名 + 顏色/尺寸 + 單價 NT.399 (劃線 NT.590) + 數量下拉 + 「符合優惠」紅字 + 「專區6折起」badge，底部「共計 1 件 / 總金額 NT$ 399 元」+ 「繼續購物」+ 「下一步」CTA。未登入即完整可見與可操作。
| 面向 | 快電商 | Life8 |
|---|---|---|
| 變體選擇 UI | bottom sheet modal (集中決策) | inline 變體區 + 動態 CTA 狀態 |
| 變體選擇資訊完整度 | 高 (含庫存數 + sold-out disabled) | 高 (斜線售完 + 選中色名旁「現貨」) |
| 加入購物車後反饋 | 底部 toast bar + 「前往購物車」CTA | 上方 mini card + 「前往結帳」CTA |
| 「下一步引導」明確度 | 明確 (bar CTA) | 明確 (mini card CTA) |
| 未登入可否看購物車 | 可 (完整清單 + 優惠 + 結帳) | 可 (完整清單 + 優惠 + 下一步) |
| 加入到抵達購物車頁步驟 | 3 步 (CTA → modal 選 → 加入 → toast 點前往) | 3 步 (捲動選變體 → CTA 加入 → mini card 點前往結帳) |
| 結帳頁 → 金流 | 未實測 | 未實測 |
| 面向 | 較順 (使用者角度) | 備註 |
|---|---|---|
| 快速找到商品 | Life8 | 頂部三排 tab 常駐 (子品牌 + 分類);快電商需開漢堡或捲動 |
| fold 內看到變體資訊 | 相當 | 兩者皆需捲動至變體區 (快電商需開 modal, Life8 為 inline) |
| CTA 狀態引導 | Life8 | 「請選擇尺寸」→「加入購物車」明確;快電商 CTA 固定文字 |
| 加入購物車後反饋 | 相當 | 兩者皆有主動 toast/card + 下一步 CTA |
| 進購物車頁不擋登入 | 相當 | 兩者皆未登入可看完整購物車 |
| 結帳頁 → 金流 | 未實測 | 下一輪可補實測 |
| 視覺舒適度 (主觀) | 因人而異 | 快電商偏品牌質感、Life8 偏潮流形象，取決於個人偏好 |
- Life8 前段較有結構:頂部三排 tab (子品牌 + 分類) 讓「找什麼」的動線一眼可見;CTA 動態狀態 帶著使用者的動線引導。
- 快電商後段內容較豐富:購物車頁的「優惠加購」清單提供延伸購物機會;Life8 購物車頁的「符合優惠」以 badge 標示，較不主動誘發加購。
兩者加入購物車後的反饋強度、購物車頁不擋登入兩點皆相當，屬「不打斷購物意圖」派系的相同做法。適合的使用者類型:Life8 適合已對品牌熟悉、想精準找子品牌商品的使用者;快電商適合探索多品類 + 想在購物車追加優惠的使用者。
邊界條件:結帳金流頁兩邊皆未實測，不含在此判定;主觀視覺偏好不含在此判定。