宠物用品网站最常见的样子，是一个分类齐全的货架：窝垫、牵引、玩具、食碗，每类几十个商品。对养宠的人来说，它能用，但不太「可爱」；而让人愿意停下来、愿意买的，往往是「这个好像很适合我家那只」的那一刻。
这篇拆解 Foundax 案例库里的毛茸日常 FLOOF DAYS。它是一个虚构的萌系宠物用品店，只有三件日常好物：云朵抱抱窝、开溜胸背牵引组和胡萝卜玩心组。它的做法是：请比熊奶盖、金毛布丁、柴犬麻薯三只狗狗当主角，每只狗狗带出一种日常和一件心头好。
宠物用品网站难在哪
- 货架式分类缺少情感。 商品很全，却很难让人产生「这是给我家孩子的」感觉。
- 尺寸最容易买错。 窝太小、胸背太紧，是宠物用品退换的常见原因。
- 品种不等于尺寸。 同是柴犬，体型和习惯也可能差很多。
- 可爱容易变得廉价。 卡通元素用多了，品牌就失去质感。
所以毛茸日常的设计目标是：用三只有性格的狗狗建立亲近感，用它们的日常推荐商品，同时把尺寸和挑选提醒说清楚。
设计概念：三个毛朋友，三种可爱日常
三只狗狗各有一种性格：奶盖是「软萌贴贴派」，最喜欢软软的角落；布丁是「出门撒欢派」，一听见出门尾巴先动；麻薯是「有点主见派」，喜欢自己挑玩具。每只狗狗对应一件心头好，也对应一种场景：睡觉、出门、玩耍。访客不需要先看商品分类，只要找到和自家狗狗最像的那一只。
视觉语言：奶油底色与线笔涂鸦
页面用温暖的奶油白和黄油黄，三只狗狗各有一个主题色：奶盖配淡紫，布丁配薄荷绿，麻薯配暖杏。手绘线笔小狗涂鸦点缀在按钮和章节角落，让「可爱」停留在细节里，而不是铺满整个页面。
- 奶油白
#FFFDF5页面底色 - 黄油黄
#F9EFB3首屏、导航与贴纸 - 淡紫
#E9E1F3奶盖与云朵抱抱窝的主题色 - 薄荷绿
#D7E7B2布丁与胸背牵引组的主题色 - 深橄榄
#383B2C标题、正文与线笔涂鸦
| 用途 | 字体 | 为什么 |
|---|---|---|
| 展示标题 | Arial Rounded MT Bold 等圆体 | 圆润的粗体有亲切感，适合「好日子，要一起摇尾巴」这样的语气 |
| 正文与界面 | Avenir Next、苹方 | 干净易读，让商品尺寸和价格清楚 |
四个招牌时刻
合影
好日子，要一起摇尾巴
首屏是三只狗狗的合影，「含狗量 100%」的贴纸和名字标签，让人第一眼就笑出来。
认识
三个毛朋友，三种可爱日常
点选奶盖、布丁或麻薯，照片、性格描述、幸福清单和心头好商品一起切换，页面主题色也跟着变。
挑选
它的喜欢，我们认真挑
商品可以按「呼噜时间、出门撒欢、玩心不减」这类日常场景筛选，而不是按商品类型。
量一量
先量一量，再好好宠它
独立的挑选指南页，教你怎么量睡窝、胸围和玩具尺寸，提醒品种只是灵感。
六幕页面分镜
01
首屏：好日子，要一起摇尾巴
黄油黄背景上，比熊、金毛、柴犬并排坐好，名字标签和贴纸让品牌的温度一下子出来。
02
奶盖：今天的安排，做一朵小云
选中比熊奶盖，淡紫色的卡片里是她窝在云朵抱抱窝里的照片、幸福清单和这件心头好。
03
布丁：快乐很简单，再多跑一会儿
切换到金毛布丁，卡片变成薄荷绿，主角换成草地上的开溜胸背牵引组。
04
麻薯：小小的脑袋，大大的主意
切换到柴犬麻薯，卡片变成暖杏色，主角是胡萝卜玩具和陶瓷食碗。
05
好物：它的喜欢，我们认真挑
三件商品配各自的主题色背景，可以按日常场景筛选，卡片上写清颜色、尺寸和价格。
06
指南：先量一量，再好好宠它
独立的挑选指南页：睡窝看躺卧长度，胸背量胸围，玩具看体型和玩耍习惯。
把尺寸说清楚，比可爱更重要
宠物用品最容易买错的是尺寸，所以毛茸日常在两个地方反复提醒：狗狗卡片下方写着「品种只是灵感，挑选时请以狗狗的实际尺寸和习惯为准」；挑选指南页则给出具体的测量方法，例如软尺绕过前腿后方、胸部最宽的位置量胸围，牵引组的胸围调节范围是 65–85cm。
照片也在帮忙判断大小：狗狗和商品同框，比单独的商品图更容易看出比例。Baymard Institute 的研究发现，42% 的用户会通过商品图判断商品的整体大小，所以「有狗狗参照」的照片很有价值，但最终仍要以测量为准。案例中的狗狗和商品图片由 Foundax 团队用图像生成工具制作。
从喜欢到下单
三件商品都是 Foundax 里的真实商品，颜色和尺寸写在商品规格里，点选后进入原生商品页、购物袋、结账和订单。狗狗选择器使用真正的按钮和选中状态，读屏软件能读出当前选中的是哪一只，这与 W3C WCAG 2.2 对可操作控件的要求一致。想了解这部分功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 用几个有性格的角色串起商品，让访客找到「和我家那只最像的」。
- 每个角色对应一种日常场景和一件主推商品。
- 用场景筛选（睡觉、出门、玩耍）代替商品类型分类。
- 尺寸提醒放在选择旁边，再配一个独立的测量指南。
- 可爱元素留在细节里：涂鸦、贴纸、主题色，而不是铺满页面。
- 角色照片和商品同框，帮助访客判断比例。
常见问题
商品很少，适合用角色来讲故事吗？
很适合。角色让每件商品都有使用场景，三件商品配三只狗狗，比一个空荡荡的货架更有吸引力。
宠物用品网站怎么减少尺寸退换？
在商品旁写清尺寸和调节范围，提供测量方法，并提醒品种只是参考。毛茸日常还单独做了一页挑选指南。
毛茸日常是真实品牌吗？
不是。毛茸日常 FLOOF DAYS 是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 毛茸日常案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。