背包、袋類網站常見的問題，是商品被拆成一堆互不相關的圖片：白底正面圖、側面圖、幾張模特兒圖，再加一張容量規格表。訪客看到了背包，卻想像不到它在自己生活中怎樣用：上班裝得下甚麼？週末出門背着是甚麼樣子？
這篇拆解 Foundax 案例庫中的 FOLDWILD 折野。它是一個面向城市通勤和週末輕戶外的虛構機能袋品牌，主角是一個 24L 的捲口背包。它的做法是：讓同一個背包由街角走到林道，再停在海岸，頁面跟着它移動。
背包網站難在哪裏
- 用途要靠想像。 白底圖說明了造型，說明不了它在通勤和出行中怎樣用。
- 容量很抽象。 「24L」對大部分人沒有畫面，到底能裝下幾樣東西？
- 結構細節分散。 捲口、扣具、背帶、面料，散落在不同圖片中，難以形成整體印象。
- 配色選擇欠缺場景。 同一個背包換了顏色，訪客很難判斷哪個更適合自己。
所以折野的設計目標是：先讓訪客記住這個背包的輪廓，再理解它怎樣裝、怎樣背，最後選好顏色帶它出發。
設計概念：一件商品，走過整段旅程
首頁前半段是一段連續場景：同一個背包保持同樣的角度和身份，背景由城市石階換到林道，再拉闊到海岸，每次換場帶出一句用途文案。商品移動、場景接力、收納展開，是三次清楚可感的變化。
前半段負責建立記憶，後半段交還正常的瀏覽和選購節奏。訪客也可以隨時按「直接選購」跳過敘事。
視覺語言：明亮、俐落，有戶外的空氣
頁面以淺色為主，讓背包的輪廓和織物質感清楚可見。螢光檸檬黃用在章節底色和關鍵動作上，深墨藍負責文字和結構。城市用筆直的邊線，林道用斜向的層次，海岸以寬闊的水平線收束。
- 粉筆白
#F1F2E9主底色，讓背包輪廓清楚 - 深墨藍
#173D49文字、按鈕與結構線 - 螢光檸檬黃
#E4EC76收納章節底色與關鍵動作 - 海霧綠
#A6C2BE場景輔助色 - 石板灰
#52696D次要文字
| 用途 | 字體 | 原因 |
|---|---|---|
| 英文標題 | Barlow Condensed 600–700 | 窄體大字、短句，和商品錯位構圖，留出完整的背包輪廓 |
| 中文 | 清楚有力的系統黑體 | 中文單獨排版，不機械套用英文斷行 |
四個招牌時刻
換場
同一個背包，三個地方
背包保持同一個角度，背景由街角換到林道再到海岸，前後景以不同速度移動，向上捲回也能回到對應構圖。
展開
今天，帶甚麼出門
背包停在中央，筆記簿、水壺、收納袋和薄外套圍繞它展開，說明能裝下甚麼。
切換
通勤或短途
「日常通勤」和「短途出走」兩種收納照片與清單可以切換，配件連結直接進入商品頁。
細看
每一面都有理由
捲口與扣具、背帶、面料拉鏈三張近景，每張只解釋一個看得見的結構。
六幕頁面分鏡
01
首屏：把日常，背遠一點
海灣藍背包立在城市石階旁，佔據右側主視線，左側是大標題和兩個入口：「跟它出發」進入故事，「直接選購」跳到選購區。
02
林道：讓路，變長一點
向下捲動，同一個背包沒有換圖，背景換成林道。商品的連續性讓訪客記住它的輪廓，場景負責講用途。
03
收納：今天，帶甚麼出門
檸檬黃底色上，隨身物件圍繞背包展開。筆記簿、水壺和外套也是現成的比例尺，幫訪客直觀判斷 24L 有多大。
04
通勤：日常的東西，各就各位
真實裝載的照片解釋物品放在哪裏，可以切換到短途清單。這裏只展示用途，不做容量計算。
05
細節：每一面都有理由
三張織物近景分別講捲口扣具、背帶和拉鏈。防水等級、承重這類數據，要等有真實資料後才寫。
06
選購：選好顏色，就出發
主打背包佔大幅，三種配色、價錢和按鈕緊貼在一起，點選後進入預選了該配色的商品頁。
商品圖怎樣撐起連續敘事
要讓一個背包「旅行」，商品圖必須身份一致：捲口、中央扣具、前袋、接縫和肩帶在每張圖中都一樣。折野先鎖定一張主背包圖，之後所有角度、特寫和場景都以它為參照製作；場景圖的光向也和商品一致，避免「剪圖貼上去」的感覺。案例中的圖片由 Foundax 團隊用圖像生成工具按這個方法製作。
商家換成自己的商品時，只要準備一張去背的商品圖和幾張場景圖，同樣的連續敘事就能成立。
由體驗到下單
三種配色在 Foundax 中是背包的商品規格，選購區的按鈕會打開預選了該配色的商品頁；岔路 2 斜孭袋和隨行收納袋作為配件單獨加入購物車，優惠、結帳、訂單、物流和售後都使用平台原生功能。想了解這部分功能，可以看 Foundax 功能介紹。
開啟「減少動態效果」時，每一幕都顯示完整的靜態畫面，購買入口始終可用，這也符合 W3C WCAG 2.2 對動畫可關閉的建議。Baymard Institute 的研究則提醒，42% 的用戶會透過商品圖判斷商品大小，這正是收納章節擺出日常物件的原因。
可以直接借鏡的清單
- 用同一張商品圖貫穿多個場景，讓訪客先記住輪廓。
- 用場景講用途：通勤、短途、週末，各配一句具體文案。
- 把容量變成「能裝下甚麼」，用日常物件代替數字。
- 細節圖一張只講一個結構，規格沒有資料就不寫。
- 敘事再長，也要給訪客一個隨時「直接選購」的出口。
- 配色選擇要帶進商品頁，不讓訪客重新選擇。
常見問題
沒有拍攝團隊，能做出這種連續場景嗎？
可以。關鍵是一張身份清楚、去背乾淨的商品圖，以及幾張光向一致的場景圖。商品圖保持不變，只換背景，就能形成連續的旅程感。
敘事太長，會不會影響轉化？
折野的長敘事只在首頁前半段，首屏就提供「直接選購」入口，後半段回到正常的瀏覽和選購節奏。想買的人隨時可以跳過。
折野是真實品牌嗎？
不是。FOLDWILD 折野是 Foundax 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 折野案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。