项目性质
基于霸王茶姬品牌形象完成的非官方网站课程概念设计。
TEAVERSE
— CHAGEE
02
项目概览
以“新中式”为核心视觉方向，将东方茶文化、品牌故事与现代网页体验结合，完成从视觉概念、信息架构到高保真交互原型的设计输出。
我的角色
信息层级梳理、视觉方向、界面设计、基础组件与 Figma 高保真交互原型。
设计目标
延续东方茶文化表达，同时帮助用户更清晰地了解品牌、浏览产品并建立联系。
03
设计挑战
- 01
把品牌视觉转化为网页语言
避免直接堆叠传统纹样，在东方意象与现代网页阅读之间找到平衡。
- 02
让品牌内容与产品信息共存
建立清晰层级，让文化叙事不影响实际浏览效率。
- 03
保持多页面体验一致
通过导航、字体、色彩、组件与页脚连接不同功能页面。
04
信息架构
网站围绕“了解品牌 → 浏览产品 → 深入故事 → 获取资讯或建立联系”的路径展开。
HOME第一印象→PRODUCTS浏览产品→ABOUT品牌故事→MEDIA / CONTACT资讯与沟通
05
视觉方向
新中式的现代转译
没有将网站设计成传统元素的集合，而是通过低饱和自然色、纵向栅格、大图与留白建立东方氛围。编辑感衬线标题与清晰无衬线正文，在品牌叙事和实际阅读之间保持平衡。
深橄榄绿暖橙红米白色浅茶绿
06
核心页面
01 / HOME
建立品牌第一印象
以产品主视觉为中心，再依次连接品牌简介、产品系列与门店空间。
02 / ABOUT
传递文化与品牌价值
通过图文交错、细节摄影和米白留白，降低长内容的阅读压力。
07
Prototype
原型包含顶部导航、页面标题、按钮与状态、产品信息卡片、社交图标、联系表单和页脚等可复用组件，以统一多个页面的浏览体验。
08 / 项目反思
这个项目让我认识到，品牌网站不仅需要“看起来符合品牌”，也要帮助用户高效完成信息浏览。视觉风格、内容结构和交互体验需要共同服务于品牌表达。