【终极版】显化应用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链接。所有视觉图像必须通过内联的...代码生成。
实现策略:
在区域，除了定义图标，还要定义多个大型的、可复用的插画。
在页面中通过来引用这些插画，并可对其进行缩放和定位。
对于独特的、不可复用的插画，直接在页面结构中编写其代码。
铁律: 视觉的丰富性完全依赖于SVG的创造力。
THE END
