프롬프트
用新中式和现代风帮我设计一套非遗糖画的APP界面 包含首页、发现、创作、百科、我的五个大板块，包含、卡片、按钮、金刚区、瓷片区的设计，页面分布以下做一个“糖画非遗文化”手机端 app界面。 它的核心功能是围绕国家级非物质文化遗产“糖画”，构建一个集技艺学习、趣味互动、文化传播与社区交流于一体的综合平台。设计风格既要平衡传统与现代又要设计出能吸引年轻群体的布局设计风格，以下是梳理的“糖画非遗文化”App的完整设计风格指南，基于已实现的界面，提炼出可复用的设计语言，确保温暖、柔光、现代与传统平衡，避免审美疲劳。 一、色彩体系 1. 主色调 - 糖画琥珀色 核心品牌色，用于重要按钮、选中态、强调文字、渐变起点。 象征糖浆加热时的暖金色，传递温度与甜蜜感。 - 糖浆流金色 辅助主色，用于渐变过渡、图标高亮、进度指示。 2. 背景与基底 - 宣纸米白 ` 主背景，模拟手工宣纸质感，柔和护眼。 - 暖灰基底 页面整体底色，轻微泛暖，降低对比度。 - 卡片底色 叠加微阴影 + 边框 干净通透，与暖色背景自然融合。 3. 功能色 - 糖霜淡橙 卡片内插图底纹、占位图底色，营造甜蜜氛围。 - 焦糖棕* 正文标题、次要文字，确保可读性。 - 蜜糖黄 输入框、搜索栏背景，柔光质感。 - 高亮红（微调） 仅用于“热门”“挑战”等少量强调标签。 4. 柔光处理 - 所有色值饱和度控制在 10%~30% 区间（主色除外），大面积使用低饱和度暖灰。 - 阴影： 极浅阴影，增加层次不刺眼。 - 渐变：模拟糖浆流动感。 三、视觉风格 1. 新中式轻拟态 - 圆角为主：用于卡片、按钮、导航栏，模仿糖画边缘圆润感。 - 微质感：卡片、按钮带有轻微内阴影或边框，但无厚重投影，保持“薄”的轻盈感。 - 糖画元素点缀：局部使用糖画小图标作为装饰，非侵入式。 2. 柔光与透气 - 背景与卡片之间保留足够留白 - 卡片内部 padding 宽松（12px–16px），内容不拥挤。 - 所有图片占位符使用暖色渐变或简单 emoji，避免复杂图形造成视觉疲劳。 3. 动态细节 - 按钮点击微缩放（反馈轻柔。 - 底部导航栏毛玻璃效果（`backdrop-filter: blur(12px)`），增加现代感。 四、布局模型 1. 整体框架 - 手机容器固定宽 393px，高度可滚动，模拟真实移动设备。 - 底部固定导航栏（高度约 70px），内容区 padding-bottom 预留空间。 2. 首页布局 - 顶部：今日糖画卡片（通栏宽，渐变背景）。 - 金刚区：4×2 网格，每个入口带 emoji 图标 + 文字，圆角 32px 胶囊状。 - 横向滚动区：课程推荐、流派风采、文创产品、用户投稿，左右滑动，节省纵向空间。 - 间距：模块之间 24px，内部卡片间距 12px。 3. 发现页 - 搜索栏置顶，下方采用 2 列网格快捷入口，覆盖核心功能卡片。 - 混合纵向推荐流（糖画达人、活动）。 4. 百科页 - 顶部横向滚动标签（流派、学堂、匠人、技艺等）。 - 下方分为“推荐匠人”“推荐课程”“推荐作品”三个横向滚动区，保持一致性。 5. 我的页 - 个人资料区圆角卡片头像 + 昵称 + 等级。 - 功能入口采用 3 列网格（或根据内容灵活调整），便于扩展。 6. 创作页 - 中心化布局，大号 emoji + 上传按钮，强调拍照/上传操作，发布后自动跳转糖友圈（发现页）。 五、组件规范 卡片 - 宽 160px（或自适应），圆角 28px，背景白，边框 `1px solid #F6E9DE`。 - 内插图区域高度 100px，圆角 20px，背景 `#FCE9D8`，居中放置 emoji 或简单图形。 按钮 - 主按钮：圆角 44px，背景 `#C2692C`，白色文字，按压变暗。 - 次要按钮：圆角 40px，背景 `#EADBCB`，深色文字。 标签（Tag） - 圆角 40px，背景 `#F5E7DB`，内边距 6px 18px，字号 14px。 输入框 - 背景 `#F5EDE3`，圆角 44px，无边框或细边框，内边距宽松，符合温暖触感。 六、动效与反馈 - 页面切换无复杂过渡，保持快速响应。 - 点击卡片或按钮时，通过 `alert` 模拟跳转（实际开发可替换为路由跳转），同时给出轻提示。 - 发布作品时弹出确认提示，并自动切换至发现页，体现社区互动感。 七、设计意图总结 本设计以“糖画”为核心意象，将传统非遗的温暖感与现代移动端的简洁易用相结合。通过暖色系、大圆角、轻柔阴影和大量留白，营造出温馨、亲切、不易疲劳的视觉体验。字体选择兼顾现代与阅读舒适度，布局上采用卡片式与滚动区平衡信息密度，既满足功能丰富性，又保持界面清爽。整体风格让年轻用户既能感受到传统文化的温度，又能轻松上手互动。 帮我设计出这个app每一张页面 以下是页面内容：先有三张引导页然后设置登陆页面进入到首页。首页底部导航栏有首页、发现、创作、百科、我的五个功能界面。进入首页以后又细分以下的功能界面到次界面包括一下内容 （一）首页 │ ├── 今日糖画卡片 → 今日糖画页 │ ├── 金刚区 │ │ ├── 糖踪地图 → 非遗地图页 │ │ ├── 糖丝挑战 → 15秒挑战页 │ │ ├── 表情工坊 → 表情包工坊页 │ │ ├── 糖画学堂 → 糖画学堂首页（百科标签页） │ │ ├── 流派图谱 → 流派列表页（百科标签页） │ │ ├── 糖趣商店 → 文创商店页 │ │ ├── 糖友圈 → 社区页 │ │ └── 收藏馆 → 收藏馆页（百科标签页） │ ├── 热门课程推荐 → 课程详情页 │ ├── 流派风采 → 流派详情页 │ ├── 精选文创产品 → 商品详情页 │ └── 用户糖画投稿 → 社区作品详情页 │ （二）发现 │ ├── 非遗地图卡片 → 非遗地图页 │ ├── 15秒挑战卡片 → 15秒挑战页 │ ├── 表情工坊卡片 → 表情包工坊页 │ ├── 文创商店卡片 → 文创商店页 │ ├── 流派发现卡片 → 流派列表页 │ ├── 热门挑战排行榜 → 15秒挑战页（榜单） │ └── 附近糖画活动 → 非遗地图页（定位活动） │ （三）创作界面分享糖画作品连接到糖友圈 （四）百科 │ ├── 分类标签 │ │ ├── 糖画流派 → 流派列表页 │ │ ├── 糖画学堂 → 课程列表页 │ │ ├── 匠人 → 匠人列表页 │ │ ├── 技艺 → 技法列表页 │ │ ├── 作品 → 作品网格页 │ │ └── 收藏馆 → 收藏馆作品页 │ ├── 推荐匠人 → 匠人详情页 │ ├── 推荐课程 → 课程详情页 │ └── 推荐作品 → 作品详情页 │ （五）我的 ├── 个人资料 → 编辑资料页 ├── 学习数据 → 我的学习页 ├── 糖画数据 → 我的糖画页（作品集） ├── 我的学习 → 课程进度页 ├── 我的技巧 → 收藏技法页 ├── 我的糖画 → 作品集页 ├── 我的表情包 → 表情包管理页 ├── 我的足迹 → 打卡记录页 ├── 收藏夹 → 收藏内容聚合页 ├── 我的流派偏好 → 偏好设置页 └── 设置与反馈 → 设置页。
