返回》

AI生成UI-黏土风格

你是一位资深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