国潮设计方法论 · speci
配色 / 字体 / 纹样 / 版式 / 插画 / 动效 / 避坑 —— 可直接落地1 · 配色 —— 一主色 + 大留白 + 哑光金，不是满屏大红大金
国潮配色脱胎于年画与矿物颜料：大面积纯色平涂 + 高饱和撞色 + 金作点睛。但高级国潮要克制饱和面积——靠"一主色 + 大量留白 + 金线"取胜。铁律：金用哑光古铜金 #C8A86B，绝不用纯亮金 #FFD700(一秒变廉价)；纯黑纯白都换成带温度的墨色/宣纸色。
落地配色公式(餐厅站)：
- 方案 A 雅致水墨(最不翻车)：宣纸底
#F5F1E8+ 墨色正文#4A4266+ 朱红点睛#FF4C00+ 极少金线#C8A86B - 方案 B 浓墨重彩(年画/火锅川菜)：岱赭大底
#9E3A26+ 藤黄#FFB61E+ 月白文字 + 石青#2E59A7撞色块 - 方案 C 青绿山水(茶饮/素食/淮扬)：竹青
#789262+ 石青石绿 + 赭石，留白多
色卡资源：zhongguose.com(中国色) · WEB骇客中国传统色速查表 · MikuTools 中国传统色
2 · 字体 —— 宋体当主角传书卷气，书法只点睛 ≤4 字
东方感主要靠宋体的横细竖粗 + 三角字脚传达。最稳组合：宋体标题 + 黑体正文/英文。
| 字体 | 气质 | 用途 |
|---|---|---|
| 思源宋体 Source Han Serif | 优雅文学·泛CJK 7字重 | 正文+标题主力，最安全开源可商用 |
| 方正清刻本悦宋 | 古籍刻本味 | 标题/诗句/品牌名(气质天花板·需授权) |
| 汉仪文黑 / 站酷高端黑 | 现代国潮·硬朗 | 潮流向标题、导航 |
| 仓耳渔阳体 / 站酷酷黑 | 厚重海报感 | 大标题 hero |
| 楷体 / 毛笔书法体 | 手写文化感 | ⚠️ 只用于落款/印章/单字，严禁正文 |
- 英文搭配：用 Cormorant Garamond / EB Garamond / Playfair Display 等优雅衬线呼应宋体衬角；忌用 Arial 等粗无衬线配宋体(洋土撞车)
- 字号拉开层级 + 标题加
letter-spacing:0.1em营造题字的舒朗；竖排标题用宋体最出气韵
3 · 纹样 —— 配角：低透明度铺底 / 边框 / 角花，绝不抢主体
| 纹样 | 寓意 | 网页用法 |
|---|---|---|
| 回纹 | 绵延不断 | 卡片/页脚边框线、分隔带、按钮描边(最实用) |
| 祥云纹 | 祥瑞 | hero角落装饰、转场动效元素、章节分隔 |
| 缠枝纹 | 连绵 | 侧边竖向装饰条、长背景纹理 |
| 冰裂纹 | 冷感几何 | 半透明背景肌理、图片蒙版(高级冷感) |
| 海水江崖 | 江山永固 | 页脚 footer 底纹(经典收尾)、滚动视差层 |
| 青花纹 / 如意纹 | 瓷韵 / 称心 | 整体视觉母题 / 图标、卡片圆角造型 |
- 纹样矢量化(SVG)做 background 平铺或 mask，可随主题变色、缩放不糊；透明度压到 5%–15% 作底纹
- 内联 SVG 用 base64 编码，不要 utf8 内联(Chrome 不渲染含实体的 utf8 SVG——实测坑)
- 一个页面主纹样只选 1 种 + 最多 1 个辅助，多了即乱
4 · 版式 —— 计白当黑：高级感 70% 来自敢留白
- 竖排文字：
writing-mode:vertical-rl+text-orientation:upright，只用于标题/诗句/品牌名/侧栏，正文严禁竖排 - 卷轴式横向叙事：横向滚动(scroll-snap / GSAP ScrollTrigger pin)模拟展开手卷，一段段揭示菜品故事——国潮站最有记忆点的结构
- 印章/落款点缀：朱红方章(品牌名/"鲜""味"单字)放标题右下或图角。落款规则：不与正文平齐，要参差、整体上靠(照书画规范做立刻地道)
- 网格 + 破格：底层规整栅格保秩序，刻意让 1–2 个元素溢出/旋转/出血——这是"高级 vs 模板"的分水岭
- 分隔用线不用块：章节间用细回纹线 / 单根朱红细线，比色块分区雅
5 · 插画 —— 按调性选 1 种，别混；配色跟全站色板锁死
| 风格 | 适配场景 |
|---|---|
| 工笔风(精细勾线渲染) | 高端礼盒/包装感、宴席菜单封面 |
| 写意/水墨晕染 | 茶饮、素食、文人调性 hero |
| 新国潮(红黄绿撞色·祥云仙鹤) | 火锅/喜庆/年节主题 |
| 敦煌风(飞天藻井) | 西域菜、特色主题店 |
| 青绿山水(矿物色) | 高端淮扬/江南菜 |
| 新国风插画(传统+几何) | 年轻化品牌、潮牌餐饮 |
餐厅站优先 水墨晕染做氛围底 + 工笔/写意做单道招牌菜插画，真实菜品摄影 + 国风插画点缀最稳。水墨肌理可用 SVG feTurbulence 滤镜生成。
6 · 动效 —— 慢、柔、有"气"，缓动用 ease-out，≤3 个标志动效
- 水墨扩散转场：SVG mask + 墨迹形状做遮罩，GSAP 控 mask scale 让墨点晕开揭示下一屏
- 卷轴展开：元素从中轴
scaleX向两侧展开(模拟画卷打开)，配 ScrollTrigger 滚动驱动 - 毛笔书写：SVG 路径 +
stroke-dasharray/ GSAP DrawSVG，让标题像被毛笔写出来 - 滚动叙事 scrollytelling：ScrollTrigger pin + scrub，餐厅故事/招牌菜随滚动逐段揭示
- 微交互：按钮 hover 朱红印章"盖下"、图片 hover 墨色边框晕开、卡片入场渐显+轻微上浮
- 技术栈 GSAP + ScrollTrigger(本环境有对应 skill)；务必加
prefers-reduced-motion兜底
7 · 避坑 —— 高级国潮 vs 廉价中国风
国潮翻车根因：借表皮不借原理。只贴红金 + 龙凤 + 书法字 ≠ 国潮，那是"贴标签"。
#FFD700 + 满屏大红 → 一秒土。改哑光古铜金 + 大留白「高级国潮」自检清单：
🏆 国际获奖 · 东方美学
18 站 · Awwwards / FWA / CSSDA 获奖的东方/新中式/和风站，海外多可访问可截图，动效叙事最强
365days PROJECT in 2024
🌐 可访问366幅真实毛笔水墨+金箔画在和纸上扫描入站，纯黑白，Three.js画廊。真笔触墨韵非CSS伪造，日历即画廊
德正乌龙茶 Dejeng Oolong Tea
🌐 可访问奶油白#F7F5F2+墨蓝#2A5290，留白与冥想式排版。茶室/餐厅最直接的静谧参照
可不可熟成红茶 KEBUKE (台湾)
🌐 可访问红茶带你穿越青春，大图+视差+插画，Vue+GSAP，墨黑底优雅，文化讲故事唤起记忆
HOME TO ALL 我们也可以这样生活
🌐 可访问繁体中文文化展，非常规导航，青/珊瑚/金三色，SVG+GSAP编辑式叙事
DANZAN
🌐 可访问武士/东亚街头，高对比正红#e10000+明黄，劈砍交互+横向滚动，东方武者美学现代演绎
The Chinese Lives of Uli Sigg
🌐 可访问中国当代艺术题材纪录片，极简推广站(风格偏现代)
45R Indigo Story (日)
🌐 可访问★最高参考：绘卷emaki母题，整个故事像传统画卷连续展开，靛蓝/丹宁+手绘插画。卷轴叙事可直接移植国潮传承品牌
知覧·想い入れ HAMADA TEA (日)
🌐 可访问鹿儿岛知覧茶，纯白极简菜单+WebGL，摄影/插画为主，留白与产品至上
The Shift (Garden Eight·日)
🌐 可访问黑/朱红/白三色，斜向+横向滚动编排(WebGL+GSAP)，沉静克制
Saisei Architecture (日)
🌐 可访问深褐#1E1005+米白#FBF0DA大地色，细腻视差=静谧。暖墨褐+和纸米白=纯黑白外的方案
Yamauchi No.10 Family Office (日)
🌐 可访问横扫各奖，极简结构+优雅页面转场，借转场工艺与结构克制，不借表皮
鈴門 清酒 Kumano Kodo (日)
🌐 可访问纯黑白，大背景图+留白+质感纹理，日式极简对产品的敬意，负空间优先
王者荣耀·古琴 Who is playing the Guqin
🇨🇳 国内站一件国乐器(古琴)串起整页 scroll story，Three.js+GSAP，仅一抹青绿#49c5b6 点缀，雅而不俗。中国侧硬核东方获奖最佳范本
洋河酒虚拟展厅 YANGHE Virtual Space
🇨🇳 国内站白酒酒厂做成3D可漫游展厅，鎏金#bb9b5b+墨蓝#46779e，把匠艺/原产地故事做成沉浸场景
大话西游 品牌页(网易)
🇨🇳 国内站中式神话IP，黛绿#a6c09c+明黄#f7e84c，插画+GLSL着色器全屏沉浸，让神话活起来
Celebrating Chinese New Year 2015
🇨🇳 国内站极简黑+灰#9C9C9C东方克制，实时WebGL烟花作节庆母题，一个招牌交互撑全场
🛍️ 国潮品牌官网
23 站 · 茶饮/美妆/潮牌/食品/生活方式 —— 国货潮流品牌的官方/电商站
闻献 DOCUMENTS
🌐 可访问自创BOLD-ZEN禅酷，极致黑白+水泥灰，硬朗禅意，当代艺术画廊式排版，东方禅×当代极简反差
🍵 国潮餐饮 · 茶饮
22 站 · 新中式餐厅/茶馆/点心品牌站 —— 最贴合餐厅建站的国潮参照
THE CULT 日餐
🌐 可访问和风×动漫，东方氛围+强动效。海外获奖级动效+沉浸式叙事+东方氛围现代化表达
Hotarutei 萤亭
🌐 可访问老建筑改造叙事，和风侘寂，滚动叙事。老店百年历史用滚动叙事讲+侘寂留白美学
YAMA MATCHA
🌐 可访问抹茶绿+东方极简，产品仪式感。单一主色(抹茶绿)+仪式感产品摄影+东方极简电商
Mott 32 卅二公馆
🌐 可访问★最值得借鉴：工业风混东方，暗金+水墨摄影，全屏菜品大图，多城市切换。深色hero+衬线中文混排+多门店分站，菜品当艺术品拍
煮叶 TEASURE (原研哉设计)
🌐 可访问★原研哉操刀：极致留白，东方极简，器物美学。日式极简×中国茶标杆，统一VI系统(作品集可看全套)
🏛️ 文博 · 文化数字体验
16 站 · 故宫/敦煌/博物馆数字站 —— 卷轴叙事、deep-zoom、传统色的源头
China Online Museum
🌐 可访问书画/卷轴/青铜陶瓷分类+英文克制版式。手卷(handscroll)横向连续阅读的解释+高清图，海外秒开
Google Arts & Culture · China
🌐 可访问名画deep-zoom+故事化卷轴叙事+超清。全球标杆的文物zoom/story交互范式，海外可截图研究
🎨 东方风设计工作室
17 站 · 做新中式/东方/和风见长的工作室与作品集，高水准借鉴源
Garden Eight
🌐 可访问less but better日式精炼+微动效+编辑感。Three.js/WebGL日式留白
