你是一位资深APP UI设计师,现需根据以下产品需求创建UI方案,最终生成HTML完整代码:
## 产品需求:
* **应用类型:** 中文“显化应用 (Manifestation App)”。
* **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标,实践吸引力法则。
* **需要包含的核心页面:**
1. 启动页 (Splash Screen) - **必须使用大型3D插画**
2. 主页/仪表盘 (Home/Dashboard)
3. 目标列表页 (Goals)
4. 目标详情页 (Goal Detail)
5. 创建/编辑目标页 (Add/Edit Goal)
6. 肯定语列表页 (Affirmations)
7. 感恩日记页 (Gratitude Journal)
8. 愿景板 (Vision Board)
9. 设置页 (Settings)
## 技术规格:
* **输出格式:** 单个完整的HTML文件。
* **布局:** 每行为**4个**横向排列的页面预览,可以有多行。
* **画板尺寸:** 375x812px (带1px灰色描边模拟手机边框)。
* **画板背景色 (重要):** **必须**使用一个**温暖、柔和的大地色/陶土色**作为UI的统一背景,例如**浅赤陶色 (`#E6D5C7`)**、**米棕色 (`#D3C4B3`)** 或 **淡土黄色 (`#F0E5D8`)**。
* **必须包含:**
* **矢量图标系统:** 使用``在HTML顶部定义所有图标,**图标必须是3D黏土风格**。
* **动态折线图:** 在目标详情页,使用SVG ``和CSS `stroke-dasharray` 动画实现。
* **卡片悬浮效果:** 使用CSS `box-shadow` 模拟黏土元素的浮起感。
* **图片占位:** 使用`
`标签外链Unsplash (`source.unsplash.com`),并使用**特定主题的URL**(如 `source.unsplash.com/400x300/?pottery,desert,sand`)以确保内容与土色系主题相关。
## 新视觉风格:大地黏土风 (Earthen Claymorphism)
### 1. 视觉特性
* **1.1 光影效果 (核心原则):**
* **形态由光影雕刻:** 所有元素的立体形态**完全由光影雕刻而成**。
* **双重阴影 (Bevel & Emboss):**
* **外阴影 (Outer Shadow):** 模拟元素“浮起”。
* **内阴影 (Inner Shadow):** 模拟元素“凹陷”。
* **光源方向统一:** 严格设定光源来自**左上角**。
* **柔和过渡:** 所有阴影和高光必须有足够的模糊半径,创造出平滑、柔软的过渡。
* **1.2 色彩搭配与哲学 (大地色系):**
* **主导色系:** 整个UI沉浸在**统一的、温暖的“大地/陶土”色系**中,营造出原始、质朴、亲切的感觉。
* **背景色与元素色 (不可违背的规则):**
* UI统一背景色已在技术规格中定义为一个**温暖的浅土色**。
* **所有需要呈现黏土效果的组件(如按钮、卡片、输入框背景)的颜色,必须与UI统一背景色完全相同**。这是实现柔软、一体化材质感的关键。
* **点缀色 (创意发挥区):**
* 点缀色也必须源于**大地色系**,但可以选择**更深或更饱和**的同类色,用于增强对比和视觉焦点。
* **应用范围:** 严格限定在**3D插画和3D图标**、**文本高亮**、**功能性指示**(如进度条、开关激活状态)等。
* **推荐色谱:** **深赤陶色 (`#C39B7B`)**, **赭石色 (`#B07D62`)**, **暖白色 (`#FAF3E9`)** (可用于高光或点缀)。
* **1.3 材质感:**
* **柔软质感:** 元素看起来像柔软的陶土,温暖而有触感。
* **无缝形态:** 元素边缘必须**高度圆润**。
### 2. 元素设计(黏土可爱立体元素)
* **2.1 按钮:** 浮起(Convex)与凹陷(Concave)设计。背景色**必须**与页面背景色相同。交互时阴影反转。
* **2.2 输入框:** 凹陷设计。背景色**必须**与页面背景色相同。
* **2.3 卡片:** 清晰的外阴影浮起效果。背景色**必须**与页面背景色相同。
* **2.4 图标与插画:** 核心视觉焦点。必须是圆润饱满的3D黏土风格,其颜色**应使用更深或更饱和的大地色点缀色**,以在同色系中脱颖而出。
* **2.5 数据可视化:** 带有黏土质感的立体图表,颜色使用大地色系中的点缀色。
### 3. 文字设计
* **3.1 字体 (关键要求):**
* **字体选择:** 必须选择一款**“可爱”风格**的字体。优先考虑**笔画圆润、结构略带手写感**的中文字体。如果找不到合适的特定字体,则使用**圆体 (如 `YuanTi`)** 或其他结构非常圆润的无衬线字体(如 `Nunito`)。
* **权重:** 使用`Regular`或`Medium`权重,避免过于尖锐或纤细。
* **3.2 字体颜色:**
* **主文字:** 使用**深棕色 (`#5D4037`)** 或**深褐色 (`#4E3B31`)**,与大地色背景形成柔和而清晰的对比。
### 4. 动效设计
* **4.1 按钮交互:** 平滑、有弹性的阴影反转动画。
* **4.2 加载动画:** 3D黏土风格的加载指示器。
### 5. 布局设计
* **5.1 模块化布局:** 使用卡片式设计。
* **5.2 留白充足:** 突出黏土元素。
THE END