茶叶网站常常陷在两种极端里：一种堆满产地、工艺和等级术语，新手看完更不知道怎么选；另一种只有几张漂亮的茶园照片和一个价格。顾客真正想知道的其实很简单：这款茶是什么味道？适合什么时候喝？买回去怎么泡？
这篇拆解 Foundax 案例库里的 YEXU 野序。它是一个虚构的日常原叶茶品牌，有山芽绿茶、云白白茶、日暖红茶三款茶。它的做法是：用山野摄影建立品牌感，再把「选茶」和「泡茶」直接做成网页上的交互。
茶叶网站难在哪
- 风味很难说清。 「嫩栗香」「回甘」这类词，对新手没有参照。
- 门槛感强。 太多仪式和术语，会让想试试的人望而却步。
- 泡法决定体验。 同一款茶，水温和时间不对，味道就差很多，但泡法往往只写在包装背面。
- 产地故事容易空泛。 茶园照片很美，却和「我该买哪款」没有关系。
所以野序的设计目标是：把喝茶讲得轻松一点：先帮访客选出今天想喝的那一口，再教他好好泡一杯。
设计概念：把山野，留在日常
品牌主张是「一叶，一水，一刻」：不为喝茶多做一套仪式，只在日常里为自己多留片刻。首屏是一杯在自然侧光里的茶汤，而不是茶园全景，先把画面落在「你手边的这一杯」；山野摄影放在第二幕，负责讲茶的来处。
视觉语言：苔绿、米白与一枚朱红
整体是温暖的米白纸色，文字用深苔绿，朱红只用在关键按钮和小印章式的标记上。三款茶各有自己的茶汤色，切换茶款时，风味图表和冲泡插画跟着换色。
- 米白纸色
#F5F2E9页面底色 - 深苔绿
#28362A标题、正文与主按钮 - 朱红
#A43725关键按钮与印章式标记 - 山芽茶汤
#87974C绿茶的风味与冲泡配色 - 云白茶汤
#BD963B白茶的风味与冲泡配色 - 日暖茶汤
#A85D29红茶的风味与冲泡配色
| 用途 | 字体 | 为什么 |
|---|---|---|
| 标题 | 思源宋体、宋体 | 带书卷气的宋体，适合慢下来的语气 |
| 正文与界面 | 苹方、微软雅黑 | 配方数字、价格和按钮需要清楚易读 |
四个招牌时刻
山野
茶的来处
大幅山野摄影随滚动连续推进，文案在画面里交接，讲「从一片叶，到你的一杯茶」。
选茶
今天，想喝什么
三款茶并排陈列，点选后显示一句性格描述、风味关键词和「鲜明、轻柔、轻盈」这类强弱刻度。
泡法
就按你的口味来
选择热泡或冷泡、拖动浓淡，茶叶克数、水量和水温随之变化。
计时
让时间，泡出一点甜
「12 秒看一泡」加速演示整个过程，「真实计时」按实际时间倒数，泡茶时可以直接用。
六幕页面分镜
01
首屏：把山野，留在日常
侧光里的一杯茶汤和几片茶叶，标题和一个「寻找你的那一口」入口。画面先落在日常的一杯，而不是遥远的茶园。
02
山野：山野有序，日子有茶
晨雾里的茶园随滚动推进，文案在画面里交接。它讲来处和氛围，但不当作产地证明。
03
选茶：今天，想喝什么
三个茶罐错落陈列，各自配一句性格：清鲜、柔和、醇甜。点选一款，下方的风味描述和刻度随之切换。
04
泡法：就按你的口味来
倒茶的照片旁是配方面板：热泡或冷泡、浓淡滑杆，以及 3 g、200 ml、85 °C 这样具体的数字。
05
计时：让时间，泡出一点甜
杯子插画跟着计时慢慢变色。演示模式 12 秒看完一泡，真实计时则陪你泡好手里这一杯。
06
选购：把喜欢的，带回家
三款茶可以切换，日常罐和分享装两种选择，价格和「查看并选购」按钮紧挨着，进入商品页完成购买。
诚实地写风味和泡法
风味因人而异，所以页面在风味刻度下写明「风味描述供选茶参考，每个人的感受都不同」；冷泡配方旁也写了清洁容器、全程冷藏、及时饮用的提示。案例中的配方是演示示例，商家接入时用自己的真实参数替换即可。
山野摄影只负责氛围，不当作产地证明；案例图片由 Foundax 团队用图像生成工具制作，品牌字和关键中文由页面文字排版，而不是烧进图片里。
从体验到下单
三款茶的日常罐和分享装都是 Foundax 里的真实商品，选购区的价格和图片来自商品数据，加购、优惠、结账、订单和售后都使用平台原生能力；配方偏好只是体验状态，不会写进订单。开启「减少动态效果」时，页面保留完整内容，只去掉入场和滚动动画，这也符合 W3C WCAG 2.2 对动画可关闭的建议。想了解这部分功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 首屏落在「手边的一杯」，产地故事放在第二幕。
- 用一句性格加几个关键词描述风味，再配一个强弱刻度。
- 把泡法做成可调整的配方，而不是包装背面的一行小字。
- 给计时器一个快速演示模式，让访客在几秒内看懂整个过程。
- 风味、配方和产地照片都要写明它们的边界。
- 体验之后马上接上规格选择和选购入口。
常见问题
茶叶网站一定要做冲泡工具吗？
不一定，但泡法是影响体验最大的因素之一。即使不做交互，也建议在每款茶的页面写清楚茶叶量、水量、水温和时间。
冷泡配方可以直接用吗？
案例中的冷泡配方是演示示例。正式网站应该使用商家自己验证过的参数，并写清卫生和保存提示。
野序是真实品牌吗？
不是。YEXU 野序是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 野序案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。