创意预览图

国风非遗探店H5页面,极简国风地图肌理底纹,淡雅山水意境,页面排版工坊地址、线下门店信息,点缀古建、稻田、远山淡影元素,云雾轻柔飘动质感。整体营造产地溯源、非遗工坊沉浸式氛围,版面清晰整洁、国风雅致、

用户头像

GD538159264

2026.05.28
新中式国风茶饮APP首页UI设计,参考左侧布局和右侧国潮青绿山水风格,整体新国潮水墨国风,主打春茶时令原叶新中式奶茶,采用国风手绘加传统国画青绿山水风格,走东方茶文化古风路线。色彩规范:主色茶绿#527A59,辅色米宣纸#F8F5E6,点缀茶汤黄#F9D89C,重色木棕#8C5F3B,留白瓷白#FFFFFF,全页面低饱和国画莫兰迪色系,禁用高饱和荧光色。 首页结构,严格按布局: 1.顶部主题Banner区首屏大图:左上角悬空手绘紫砂茶壶,壶口倾倒茶汤,茶汤蜿蜒化作河流贯穿画面,背景是青绿水墨山水、云雾、江南徽派仿古庭院茶铺木构飞檐古建筑,左右两侧点缀山茶花、黄蕊茉莉花、茶树枝叶,Banner竖排文案:主标题“春茶百味”,副标小字“东方茶饮花香风味”,画风:水彩水墨晕染加工笔花卉,新国潮手绘,线条柔和。 2.登录权益卡片区Banner下方通栏卡片:圆角宣纸边框加细仿古描边中式圆角,左侧文案“欢迎贵宾光临|登录可领取贵宾好礼”,右侧深墨绿圆角按钮“立即登录”白字,卡片底色米宣纸色。 3.双功能入口区左右等分两宫格卡片:左框【门店自取】配手绘中式小茶铺古建筑插画,下方英文小字COLLECTION;右框【外卖点单】配古风骑马驿卒信使手绘插画,下方英文小字TAKEOUT;两个卡片统一仿古圆角宣纸边框,米白底,图标全手绘不用扁平化图标。 4.卷轴活动Banner区双入口下方通栏:外形仿古左右木轴卷轴造型两端实木卷轴头,画面卷轴纸面加左右山茶花插画加右侧一杯成品奶茶手绘,居中文案主标题“春茶品质甄选”,副标题“请查收春日福利”。 5.底部Tab导航固定全局底部,4个导航项,全部中式手绘图标加中文文字:首页古风小房子图标,点单仿古单据卷轴图标,取茶中式青瓷茶壶图标,我的古风简约人形头像图标,导航底色主色茶绿色,选中图标加深棕色调。 通用UI组件规范:所有卡片边框圆角加细棕色仿古描边,底色优先米宣纸色,杜绝纯白纯黑;主按钮墨绿底白字圆角,辅助按钮宣纸底棕字细边框;大标题国风书法楷体宋体,正文常规细宋体,拒绝粗黑体卡通字体;全APP通用点缀山茶花、茶枝、小卷轴、木纹、水墨云雾。新中式国风茶饮APP首页UI设计,参考左侧布局和右侧国潮青绿山水风格,整体新国潮水墨国风,主打春茶时令原叶新中式奶茶,采用国风手绘加传统国画青绿山水风格,走东方茶文化古风路线。色彩规范:主色茶绿#527A59,辅色米宣纸#F8F5E6,点缀茶汤黄#F9D89C,重色木棕#8C5F3B,留白瓷白#FFFFFF,全页面低饱和国画莫兰迪色系,禁用高饱和荧光色。
首页结构,严格按布局:
1.顶部主题Banner区首屏大图:左上角悬空手绘紫砂茶壶,壶口倾倒茶汤,茶汤蜿蜒化作河流贯穿画面,背景是青绿水墨山水、云雾、江南徽派仿古庭院茶铺木构飞檐古建筑,左右两侧点缀山茶花、黄蕊茉莉花、茶树枝叶,Banner竖排文案:主标题“春茶百味”,副标小字“东方茶饮花香风味”,画风:水彩水墨晕染加工笔花卉,新国潮手绘,线条柔和。
2.登录权益卡片区Banner下方通栏卡片:圆角宣纸边框加细仿古描边中式圆角,左侧文案“欢迎贵宾光临|登录可领取贵宾好礼”,右侧深墨绿圆角按钮“立即登录”白字,卡片底色米宣纸色。
3.双功能入口区左右等分两宫格卡片:左框【门店自取】配手绘中式小茶铺古建筑插画,下方英文小字COLLECTION;右框【外卖点单】配古风骑马驿卒信使手绘插画,下方英文小字TAKEOUT;两个卡片统一仿古圆角宣纸边框,米白底,图标全手绘不用扁平化图标。
4.卷轴活动Banner区双入口下方通栏:外形仿古左右木轴卷轴造型两端实木卷轴头,画面卷轴纸面加左右山茶花插画加右侧一杯成品奶茶手绘,居中文案主标题“春茶品质甄选”,副标题“请查收春日福利”。
5.底部Tab导航固定全局底部,4个导航项,全部中式手绘图标加中文文字:首页古风小房子图标,点单仿古单据卷轴图标,取茶中式青瓷茶壶图标,我的古风简约人形头像图标,导航底色主色茶绿色,选中图标加深棕色调。
通用UI组件规范:所有卡片边框圆角加细棕色仿古描边,底色优先米宣纸色,杜绝纯白纯黑;主按钮墨绿底白字圆角,辅助按钮宣纸底棕字细边框;大标题国风书法楷体宋体,正文常规细宋体,拒绝粗黑体卡通字体;全APP通用点缀山茶花、茶枝、小卷轴、木纹、水墨云雾。