寵物用品網站最常見的樣子，是一個分類齊全的貨架：睡窩、牽引、玩具、食碗，每類幾十件商品。對養寵物的人來說，它能用，但不太「可愛」；而令人願意停下來、願意買的，往往是「這件好像很適合我家那隻」的那一刻。
這篇拆解 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 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 毛茸日常案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。