显化应用UI设计简报 (纯手绘艺术风格) ## 【你的角色】你是一位将代码作为画笔的数字艺术家。你的任务是创造一款中文“显化应用”的UI原型，它本身就是一件独一无二的、充满灵魂的手绘艺术品。忘掉所有摄影素材，我们从零开始，用矢量图形绘制整个世界。 ## 【核心产出】一个单一、完全自包含的HTML文件。它必须是前端与艺术完美融合的典范，所有视觉元素——包括每一幅插画——都由内嵌的CSS和SVG代码生成。【宏大愿景：“流动的墨水画卷”】想象打开一本艺术家的私人日记：纸页有温度，墨迹有灵魂，每一页都充满了生命力。这就是我们要创造的体验。它是有机、感性、不完美，但因此而无比真诚和强大。 ## 【视觉与艺术指导】【关键升级】纯手绘插画世界 (A Purely Illustrated World):** 放弃摄影: 严禁使用任何外部图片链接（如Picsum、Unsplash）。所有视觉内容，从启动页的巨幅插画到愿景板的“图片”，全部必须使用内联SVG代码在HTML中直接绘制。 SVG插画风格: 大型插画 (启动页/背景): 创作风格鲜明、构图大胆的抽象或具象插画。使用多层构建，线条模拟笔刷的粗细变化和飞白，填充使用带有纹理或渐变的颜色，模拟水彩晕染或墨迹渗透的效果。内容占位图 (愿景板/目标图): 为每个图片区域创建内容不同、风格统一的SVG占位插画。例如：一幅是山峦与星空，一幅是抽象的能量流，一幅是生长的植物。它们应是简化但意境深远的简笔画。装饰性涂鸦: 在UI的角落、标题旁、分割线处，散布小巧的SVG涂鸦（如星辰、叶片、螺旋线、能量符号），增强手作感。触感与生命力 (Tactile & Organic Interface): 背景质感: 主背景为带有精细纹理的米白色 (#F8F4EC)。元素形态: 卡片、按钮等拥有手绘的不规则轮廓。使用CSS border模拟墨水线条，border-radius赋予不对称的圆角。浓郁的大地色盘 (A Rich, Earthy Palette): 主导色调: 深蓝 (#2A3A68)、陶土橙 (#FF8C42)、森林绿 (#5F7A3C)。文字颜色: 暖棕色 (#4E3B31)。能量之火花: 唯一的高亮色，如明亮黄 (#FFD700) 或活力青 (#4CC9F0)，用于交互状态和图表线条。会说话的字体 (Expressive Typography): 标题: 采用极具风格的艺术字体或粗黑体。正文: 保证可读性的宋体或黑体。语言: 全部为中文。 ## 【核心页面与关键特性】【关键升级】底部导航栏 (Bottom Navigation Bar): 设计理念: 它不是一个简单的工具条，而是应用的“画板底座”。视觉形态: 不规则轮廓: 整个导航栏的顶部边缘应是一条平缓起伏、不完全水平的曲线，模拟手绘的横线或地平线。可以使用一个横跨底部的SVG 来实现。质感: 背景填充使用带有纸张纹理或轻微水彩污渍的效果。图标交互: 默认状态: 图标为简单的线性手绘风格。选中状态: 图标切换为**“填充+描边”的样式，或者被一个不规则的、像墨水滴或水彩笔触的色块**包裹。图标本身可以有一个轻微的、俏皮的形变动画（如跳动一下或旋转一个小角度）。图标下方的文字标签加粗或变为高亮色。其他页面: 遵循之前的设计要求，但所有图片替换为内联SVG手绘插画。启动页: 展示最大、最复杂的SVG英雄插画。目标详情页: 动态SVG折线图的线条必须有手绘抖动感。愿景板: 图片网格现在是SVG插画的画廊，每幅SVG都应有独特的构图和主题。 ## 【不容妥协的技术蓝图】最终产物: 单一HTML文件。布局与画板: 横向排列，每行6个，375x812px画板。每一张图必须都有底部导航栏。 SVG图标系统: 强制要求使用技术。图标本身必须是手绘风格。【核心技术挑战】纯SVG插画实现: 强制要求: HTML文件中不允许出现任何标签或外部background-image链接。所有视觉图像必须通过内联的代码生成。实现策略: 在