01 / HERO
會轉的真瓶子
瓶型描自官方去背照，玻璃與醬油用真實折射率，在 Blender Cycles 算好光影。網頁端只做瓶標合成，所以能跟著滑鼠轉、轉半圈換一支產品，每多一支產品只多一張瓶標貼圖。
3D Direction / 3D 方向
質感，來自真的光。
上一版用幾百顆即時運算的原料粒子，熱鬧但不夠沉穩。這一版沒有粒子特效，三段 3D 各有一個明確的任務。
02 / BREW
一鏡到底的釀造
黃豆、麥子、鹽用物理模擬真的倒成一堆，放在石桌上由攝影機滑過去，背後掛著印章紅的圓日。204 格算圖由捲動播放，手機不必即時運算 3D。
03 / MIRROR
一片會反應的醬油
唯一全即時運算的段落。液面是一張波動方程式，滑鼠就是滴下去的那一滴，倒影裡的標題字跟著晃。沒有粒子，只有倒影。
第一版
- 700 多顆即時運算的原料粒子
- 程式畫的瓶標，比例不準
- Three.js 約 500 KB，手機要降粒子
- 紅底、明體、圓角，走親切路線
第二版
- 主視覺只有四組原料，每一組都細修過
- 官方瓶型與瓶標，光影由光線追蹤算出
- 不再依賴 Three.js；不支援時自動換靜態圖
- 黑底、大圓、超粗字、硬邊框，走海報路線
01
參考站的做法
黑底上一顆大圓
近黑底色搭一顆發光的紅圓，瓶子站在圓前面，第一眼就是一張海報。
金蘭的轉譯
印章就是那顆圓
金蘭的品牌資產本來就是紅色圓印章。開場一滴醬油落下、暈開成這枚印章，主視覺就站在它前面，換產品時圓的顏色跟著換。
02
參考站的做法
品牌字壓在瓶子後面
手寫的 JANG! 大字墊在瓶子後方，被遮住一部分也認得出來。
金蘭的轉譯
「金蘭」印章字墊在瓶後
把官方印章描成向量，米色大字藏在瓶子後面。瓶標上也有同一個印章，前後呼應。
03
參考站的做法
木刻感的粗標題
Anton 超粗窄體全大寫，短句大字就是品牌語氣。
金蘭的轉譯
Noto Sans TC Black 壓窄
中文沒有對應的窄體，用最粗字重水平壓到 90%，再配 Anton 數字與 Archivo 寬體英文小標。主視覺和印譜的標語改成直書，這是英文站做不到的排法；抒情段落留給明體。
04
參考站的做法
品質四連發的堆疊卡
捲動時四張滿版色卡一張疊一張，每張只講一件事。
金蘭的轉譯
四枚印，蓋在同一張紙上
百分百純釀造、374 項檢驗、連續十年 iTQi、全台首家 GMP——都是官網現有的事實。做成一頁「金蘭印譜」，捲動一段就蓋下一枚印，內文也跟著直書。
05
參考站的做法
跑馬燈與硬邊框
一條紅色跑馬燈、一排 2px 黑框卡片，像貨架也像報紙。
金蘭的轉譯
紅紙菜牌
跑馬燈換成小吃店牆上的紅紙條：沾一滴、滷一鍋、炒一盤，捲動時會輕輕晃。七大品類用硬邊框卡片收進橫向貨架。
06
參考站的做法
合照配購買列
左邊三瓶合照墊一個空心大字，右邊標語下面排購買選項。
金蘭的轉譯
一個寫得很大的「三」
「先從這三瓶開始」的三直接寫成舞台，照筆順寫完三筆，瓶子才落到第三筆上，購買資訊像價籤一樣掛在架子下面。
07
參考站的做法
大字收尾
頁尾一個滿版紅色 JANG!，看完網站只記得這個名字。
金蘭的轉譯
印章＋KIMLAN
頁尾把印章和英文名放到滿版，最後一眼還是金蘭。
Design System / 設計系統
五個顏色，四種字。
品牌色
醬油黑
#100A06主底色印章紅
#C30D38大圓・色塊（Logo 紅 #EA0D44 壓深）黃豆米
#F4E6CF淺底色・大字燙金
#E7B458小標・數字・高光炭火橘
#DF5A1C烤肉醬品類字體
台灣人的對味
標題｜Noto Sans TC Black 900，水平壓 90%1936 — 2026
數字｜Anton一世人都對味
抒情段落｜Noto Serif TC BlackBrewed, not blended / 釀的
小標｜Archivo Expanded 800，字距 .2emInformation Architecture / 資訊架構
好找，也好買。
現行選單
- 關於金蘭
- 金蘭產品
- 廚藝學院
- 金蘭知識+
- 購物商城
改版選單
- 產品系列大選單直接看七大品類
- 料理食譜
- 品牌故事新增 90 年大事記
- 純釀造原料、工法、品質數據
- 金蘭知識+
- 線上購物常駐右上角
| 項目 | 現行 | 改版提案 |
|---|---|---|
| 產品分類 | 健康／經典／美味系列、經典醬菜、商用商品，再細分 10 個子系列 | 醬油、有機・薄鹽、油膏・素蠔油、烤肉醬、風味醬料、辣醬、醬菜罐頭（7 大品類） |
| 多容量品項 | 同品項不同容量各自一頁（45 個產品頁） | 合併為一頁、可切換容量（40 個產品頁），舊網址自動帶到對應容量 |
| 找產品 | 依系列瀏覽 | 品類＋「我想用來 炒／滷／沾／拌…」用途篩選＋全站搜尋 |
| 食譜 | 64 道食譜，依台菜廚房／大廚私房菜／快速上菜分類 | 再加上主食材、20 分鐘內篩選與搜尋；食材可勾選；首頁放大食譜版面 |
| 首頁主視覺 | 活動 Banner 輪播 | 三支代表產品輪播，品牌主張常駐；活動的位置待定（本原型尚未製作） |
Prototype / 原型
原型頁面一覽。
以下頁面皆可點擊操作，產品與食譜資料取自現行官網。
Next Steps / 接下來
接下來。
- 確認方向
主視覺印章大字、字體與首頁節奏定案。
- 補齊原始檔
向金蘭取得瓶標向量檔與 Logo 原檔。現在的瓶標由官網照片展開，放大仍略軟，換成原稿就會非常銳利。
- 內容校對
製程、大事記、認證與文案（含本版新寫的標語）由金蘭確認。
- 開發串接
沿用現行會員、發票登錄與購物網，產品／食譜改由後台資料驅動。