曲奇和烘焙品牌的網站，常常停在「好看的食物照片 + 商品列表」。照片很誘人，但顧客真正要做的決定其實是：選哪個口味？買多大一盒？送給誰？如果網站不幫忙，訪客很容易在一排相似的商品之間猶豫，最後甚麼都沒買。
這篇拆解 Foundax 案例庫中的 HALF 半塊。它是一個虛構的曲奇與烘焙禮盒品牌，主張是「快樂，分你半塊」。它的做法是：用一塊被掰開的曲奇做首屏，把「分享」變成整個網站的主線，再用一個裝盒互動幫訪客選好配搭和大小。
烘焙網站難在哪裏
- 照片同質化。 曲奇微距大家都有，很難只靠照片被記住。
- 選擇太多。 口味、配搭、盒子大小組合起來，商品列表很快變得冗長。
- 送禮場景說不清。 禮盒適合送給誰、甚麼場合，往往只寫在商品描述中。
- 食品資訊必須準確。 配料和致敏原不能被設計「藏」起來。
所以半塊的設計目標是：用一個令人會心微笑的品牌動作建立記憶，再把選口味、選配搭、選大小變成一個簡單的裝盒過程。
設計概念：一半給你，一半給我
品牌名稱「半塊」和首屏動作是同一件事：捲動時，同一塊曲奇從中間掰開，左右兩半分別移開，旁邊寫着「一半給你，一半給我」。之後每一章都圍繞「分享」展開：選一口自己喜歡的，在廚房裏認真焗好，留半塊給想見的人，最後裝一盒帶去見面。
視覺語言：番茄紅大字與忌廉黃
半塊的視覺很直接：番茄紅的超大字標、忌廉黃底色、曲奇微距，再用開心果綠和可可啡區分章節。捲動字條「一半給你 ✳ 一半給我」讓頁面多了一點俏皮。
- 忌廉黃
#F3DC82首屏與收尾的底色 - 番茄紅
#B93427超大字標、按鈕與分享章節 - 開心果綠
#C4D39B裝盒章節的底色 - 可可啡
#38251F廚房章節底色與內文 - 忌廉白
#FBF3DD口味章節與閱讀區域
| 用途 | 字體 | 原因 |
|---|---|---|
| 英文展示字 | Fraunces | 圓潤、有個性的襯線字，大字號下像手工烘焙一樣溫暖 |
| 小字與介面 | Manrope | 清楚的無襯線字，讓價錢和選項一目了然 |
| 中文 | 蘋方、微軟雅黑 | 系統字體，載入快，與英文展示字配搭乾淨 |
四個招牌時刻
掰開
快樂，分你半塊
捲動時，首屏的曲奇從中間掰開，左右兩半移向兩邊，品牌主張不用解釋就被看懂。
口味
今天，偏愛哪一口
海鹽朱古力、開心果白朱古力、莓果牛油三個口味，切換時圖片、背景色和說明一起變。
分享
留半塊，給想見的人
下午三點的自己、鄰座的新朋友、總說只吃一口的人，用具體的人代替抽象的「送禮」。
裝盒
好心情，裝好了
先挑一份配搭，再選 6 塊或 12 塊，禮盒預覽、組合說明和價錢同步更新。
六幕頁面分鏡
01
首屏：快樂，分你半塊
番茄紅的超大 HALF 字標後面，是一整塊朱古力曲奇，左下是品牌主張和「裝一盒快樂」入口。
02
掰開：一半給你，一半給我
向下捲動，曲奇從中間掰開，兩半分開，底部的紅色字條開始捲動，品牌名稱的含義一目了然。
03
口味：今天，偏愛哪一口
切換三種口味，大幅曲奇圖、背景和風味說明一起變化；配料和致敏原提示緊貼在口味下方。
04
廚房：邊緣要脆，心要軟
可可啡底色配焗盤照片，講焦香牛油和大塊朱古力，用「不必整整齊齊，好吃就很可愛」建立親切感。
05
裝盒：好心情，裝好了
選擇配搭和大小，左側的禮盒預覽即時更新塊數和口味組合，右側顯示價錢和「查看這盒，繼續選購」。
06
收尾：下次見面，帶上半塊
忌廉黃底色和超大字標收束頁面，「不必盛大，剛好有你」把分享的情緒留到最後。
裝盒互動：把選擇變簡單
半塊的商品其實是三種配搭乘以兩種大小，一共六個禮盒。如果直接排成商品列表，訪客要在六張相似的卡片之間比較；裝盒互動把它拆成兩個問題：「想要甚麼配搭？」「要多大一盒？」每回答一個，禮盒預覽就更新一次，最後才進入對應的商品頁。
食品資訊要放在看得見的地方
口味區下方寫着配料含小麥、奶、蛋與果仁，完整配料見商品詳情，不把致敏原資訊藏在頁尾或摺疊中。案例中的曲奇和場景圖由 Foundax 團隊用圖像生成工具製作，不作為真實工藝、配料或食品資歷的證明；正式上線時，配料、致敏原和保質期都要以真實商品資料為準。
由體驗到下單
六個禮盒都是 Foundax 中的真實商品，裝盒區的按鈕進入對應商品頁，價錢、庫存和售罄狀態來自商品資料，之後接上購物袋、結帳、訂單和售後。開啟「減少動態效果」時，掰開的分鏡和入場動畫都會取消，內容和購買入口完整保留，這也符合 W3C WCAG 2.2 對動畫可關閉的建議。想了解這部分功能，可以看 Foundax 功能介紹。
可以直接借鏡的清單
- 找一個和品牌名稱一致的動作做首屏，例如「掰開」。
- 用具體的人代替抽象的「送禮」，讓分享場景更真實。
- 把「配搭 × 大小」這類組合拆成幾步簡單的選擇，配一個即時預覽。
- 配料和致敏原放在口味旁邊，不藏起來。
- 用兩三種明確的顏色區分章節，讓長頁面有節奏。
- 食物照片和工藝描述都要以真實資料為準。
常見問題
商品組合很多，怎樣避免商品頁太亂？
用一個裝盒或配置互動代替長列表。先問配搭，再問大小，最後才進入具體商品，訪客每一步只需要作一個簡單的決定。
食品網站需要特別注意甚麼？
配料、致敏原、保質期和儲存方式要準確、容易找到。設計可以有趣，但這些資訊不能為了版面被省略或隱藏。
半塊是真實品牌嗎？
不是。HALF 半塊是 Foundax 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 半塊案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。