饼干和烘焙品牌的网站，常常停在「好看的食物照片 + 商品列表」。照片很诱人，但顾客真正要做的决定其实是：选哪个口味？买多大一盒？送给谁？如果网站不帮忙，访客很容易在一排相似的商品里犹豫，最后什么都没买。
这篇拆解 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 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 半块案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。