创意预览图

iPhone17手机竖屏界面,非遗油纸伞寓意卡片图鉴页,国风浅青米白风格,卡片左右滑动瀑布流布局,展示五张油纸伞吉祥寓意卡片,每张卡片带有传统纹样,界面整体简洁国风留白,带有交互按钮设计

用户头像

LKOTR

2026.05.26
新中式国风茶饮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通用点缀山茶花、茶枝、小卷轴、木纹、水墨云雾。
新中式日常穿搭APP创新点及页面设计(精简版) 一、核心创新点 1. 技术驱动 - AI数字分身试衣:1张正面照生成虚拟形象,支持立领、盘扣等元素服饰360°试穿,模拟面料与纹样质感,适配通勤等场景展示姿态。 - 场景化AI搭配:输入场景、气温、肤色,自动匹配中式元素穿搭方案,支持一键替换元素。 - 元素识别溯源:拍照识别中式元素,匹配同款并溯源历史工艺,强化文化属性。 2. 内容社交 - Z世代共创社区:鼓励发布传统元素现代改造作品,发起混搭挑战,优质作品可获设计师联名机会。 - 场景穿搭剧本库:按通勤、休闲、社交分类,提供剧情化穿搭指南,配套文字与视频演示。 - 非遗互动课堂:联动传承人推出短视频课程,用户学习打卡解锁限定穿搭标签。 3. 商业实用 - 个性化定制:支持选择中式元素、面料、版型,可视化跟踪制作进度。 - 环保面料认证:标注天然面料环保等级与溯源,优先推荐GRS认证产品。 - 穿搭灵感日历:按季节节日生成方案,支持添加至手机日历提醒。 二、一至三级页面设计(共30张) 1. 一级页面(3张) - 首页:场景切换tab+AI搭配悬浮按钮+个性化推荐流,卡片标注核心元素,支持快速试穿。 - 社区页:共创挑战轮播+多维度筛选栏+作品推荐流,标注元素组合标签。 - 我的页:数字分身管理+穿搭收藏+定制订单跟踪,关联非遗学习进度与限定标签。 2. 二级页面(9张) 含AI搭配需求页、场景穿搭专题页、新品首发页、共创挑战详情页、元素标签专题页、用户个人主页、数字分身管理页、定制订单页、非遗课堂页,核心承载功能落地,实现从入口到细分需求的衔接。 3. 三级页面(18张) 覆盖AI搭配方案详情、单品替换、分享页,6个细分场景穿搭剧本详情,作品详情、仿搭列表、挑战提交、评论互动页,及定制需求提交、设计稿确认、非遗课程详情、打卡详情页,深化细节体验,完成“需求-方案-体验-转化”全链路。 三、核心亮点总结 精准匹配Z世代文化认同与实用需求,以AI降低穿搭门槛,用共创社区强化社交;融合非遗与元素溯源,通过定制与单品推荐实现商业闭环;全流程围绕三大场景设计,提升体验连贯性与实用性。新中式日常穿搭APP创新点及页面设计(精简版)
一、核心创新点
1. 技术驱动

- AI数字分身试衣:1张正面照生成虚拟形象,支持立领、盘扣等元素服饰360°试穿,模拟面料与纹样质感,适配通勤等场景展示姿态。

- 场景化AI搭配:输入场景、气温、肤色,自动匹配中式元素穿搭方案,支持一键替换元素。

- 元素识别溯源:拍照识别中式元素,匹配同款并溯源历史工艺,强化文化属性。

2. 内容社交

- Z世代共创社区:鼓励发布传统元素现代改造作品,发起混搭挑战,优质作品可获设计师联名机会。

- 场景穿搭剧本库:按通勤、休闲、社交分类,提供剧情化穿搭指南,配套文字与视频演示。

- 非遗互动课堂:联动传承人推出短视频课程,用户学习打卡解锁限定穿搭标签。

3. 商业实用

- 个性化定制:支持选择中式元素、面料、版型,可视化跟踪制作进度。

- 环保面料认证:标注天然面料环保等级与溯源,优先推荐GRS认证产品。

- 穿搭灵感日历:按季节节日生成方案,支持添加至手机日历提醒。

二、一至三级页面设计(共30张)

1. 一级页面(3张)

- 首页:场景切换tab+AI搭配悬浮按钮+个性化推荐流,卡片标注核心元素,支持快速试穿。

- 社区页:共创挑战轮播+多维度筛选栏+作品推荐流,标注元素组合标签。

- 我的页:数字分身管理+穿搭收藏+定制订单跟踪,关联非遗学习进度与限定标签。

2. 二级页面(9张)

含AI搭配需求页、场景穿搭专题页、新品首发页、共创挑战详情页、元素标签专题页、用户个人主页、数字分身管理页、定制订单页、非遗课堂页,核心承载功能落地,实现从入口到细分需求的衔接。

3. 三级页面(18张)

覆盖AI搭配方案详情、单品替换、分享页,6个细分场景穿搭剧本详情,作品详情、仿搭列表、挑战提交、评论互动页,及定制需求提交、设计稿确认、非遗课程详情、打卡详情页,深化细节体验,完成“需求-方案-体验-转化”全链路。

三、核心亮点总结

精准匹配Z世代文化认同与实用需求,以AI降低穿搭门槛,用共创社区强化社交;融合非遗与元素溯源,通过定制与单品推荐实现商业闭环;全流程围绕三大场景设计,提升体验连贯性与实用性。