作为一名资深APP UI设计师,请根据以下详细的产品需求和设计规范,为一款中文的“显化应用 (Manifestation App)”创建一套完整的UI界面设计方案,并最终生成一个包含所有设计页面的、符合技术规格的**单一HTML文件**。
## 1. 应用概念与核心功能
* **应用名称:** (暂定) MindBloom / Aura / ManifestMe (选择一个或保留占位符)
* **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标、记录感恩,从而更好地实践吸引力法则,显化理想生活。
* **核心模块与功能:**
* **启动页 (Splash Screen):** 应用加载时的品牌展示,采用**大胆的孟菲斯风格几何图形组合与撞色**。
* **主页/仪表盘 (Home/Dashboard):**
* 显示问候语和用户昵称。
* 展示“今日意图”或随机一条用户收藏的肯定语。
* 关键目标摘要卡片(如1-2个核心目标),卡片设计运用**不对称布局、几何图案和鲜明色彩**。
* 快速访问入口按钮(如“添加新目标”、“查看肯定语”、“记录感恩”),按钮形状可以是**基础几何形(圆、方、三角)或带有锯齿/波浪边缘**。
* (可选) 一个小的感恩摘要或可视化提醒。
* **目标设定与管理 (Goals):**
* **目标列表页:** 以卡片形式展示所有目标,卡片背景或装饰采用**孟菲斯图案(如波点、条纹、锯齿线)**,布局活泼。
* **目标详情页:**
* 目标名称、描述、设定的截止日期(若有)。
* 关联的肯定语列表。
* 关联的愿景板图片展示区域。
* **进度追踪模块:**
* 包含一个**动态折线图**,线条可以**粗犷、颜色鲜明**,数据点使用**醒目的几何形状标记**。图表加载时使用 `stroke-dasharray` 动画。
* 手动添加进度记录的入口。
* **创建/编辑目标表单页:**
* 输入目标名称(必填)。
* 输入目标详细描述(多行文本)。
* 选择目标分类(可选,如事业、健康等)。
* 上传关联图片(用于愿景板/目标)。
* 设定截止日期(日期选择器概念)。
* 表单采用**粗线条边框或色块背景**,形状明确,可加入**小的几何图形装饰**。
* **肯定语 (Affirmations):**
* **肯定语列表页:** 展示应用内置或用户自定义/收藏的肯定语列表。列表项之间用**粗线条或几何图案**分隔。
* **肯定语详情/练习页 (可选):** 单独展示一条肯定语,背景使用**大胆的孟菲斯风格抽象图案或撞色**。
* **感恩日记 (Gratitude Journal):**
* **日记列表页:** 按日期展示过往的感恩记录条目摘要。
* **添加/查看日记页:** 用于输入/编辑当日的感恩内容(至少3条),查看单条详情。页面装饰采用**随机散落的小几何图形或波浪线**。
* **愿景板 (Vision Board):**
* 展示用户上传和排版的图片、文字,形成可视化看板。元素布局**自由、非对称**,可加入**孟菲斯风格的贴纸或边框**。
* **设置 (Settings):**
* 账户信息(昵称、头像)。
* 通知提醒设置。
* 外观主题(虽然我们定义了,但可以放个入口概念)。
* 关于/帮助。
* **主要导航:**
* 使用**底部标签栏 (Bottom Tab Bar)**,包含5个主要入口:主页、目标、肯定语、日记/愿景板 (合并或取舍)、设置。图标需为**简洁、几何化的孟菲斯风格图标**。
## 2. 新视觉风格 (孟菲斯风格 Memphis Design)
* **核心元素风格:**
* **大胆几何与图案:** 界面设计充斥着**鲜明的几何形状(圆形、方形、三角形、半圆形等)**的**随机、非对称组合**。广泛运用**孟菲斯经典图案**,如**波浪线 (Squiggles)、锯齿线 (Zigzags)、粗条纹、密集点阵、以及可能的豹纹或水磨石 (Terrazzo) 纹理**。这些元素作为背景、装饰或UI控件的一部分。
* **玩味与反功能:** 设计强调**视觉趣味和个性**,形式不必严格服务于功能。允许出现纯粹的装饰性元素。
* **背景与层级:**
* **纯色或图案背景:** 整体页面背景可以是大胆的**纯色块(亮粉、亮黄、亮蓝、黑、白等)**,或者直接使用**重复的孟菲斯图案**。
* **扁平化层级:** 主要通过**明确的色块边界、粗线条轮廓**来区分层级。避免使用柔和的阴影或渐变,追求**图形化、扁平的堆叠感**。可以使用**硬边缘阴影 (Hard Drop Shadows)** 制造图形感。
* **配色方案:**
* **高饱和度与撞色:** 使用**高饱和度的、明亮的色彩**,并进行**大胆的撞色搭配**(如粉配绿、黄配蓝、黑白与亮色组合)。**粉彩与霓虹色**的结合也很常见。**黑色和白色**常作为重要的平衡色或图案基础色。
* **主导色:** 鲜明的粉色 (`#FF6B6B`)、黄色 (`#FFD93D`)、蓝色 (`#6BCB77` 或 `#4D96FF`)、薄荷绿 (`#98D8AA`) 等。
* **背景色:** 白色 (`#FFFFFF`)、黑色 (`#000000`) 或上述大胆纯色之一。
* **主文字:** **黑色 (`#000000`) 或白色 (`#FFFFFF`)**,取决于背景色,确保**极高的对比度**。
* **次要文字/提示文字:** 使用对比度稍低的灰色 (`#555555` 或 `#AAAAAA`),或者使用主导色中的一种。
* **强调色/交互色:** 选择一种**非常醒目且与周围元素形成强烈对比**的颜色(可以是上面未列出的亮色,如亮橙 `#FFA500` 或亮紫 `#AF7AC5`)。
* **几何感字体排版:**
* 字体:
* **标题/关键标签:** 使用**粗体、几何感强的无衬线字体** (如 `Montserrat Bold`, `Poppins ExtraBold`) 或具有80年代复古感的**装饰性字体**(需注意可读性)。
* **正文:** 选用清晰的**几何无衬线体** (如 `Poppins Regular`)。
* 显示:文字显示为中文。
* 层级:
* 大标题: `34px` Bold/Black, `#000000` 或 `#FFFFFF`。
* 卡片标题/重要标签: `22px` Bold, `#000000` 或 `#FFFFFF`。
* 正文/列表项: `16px` Medium, `#000000` 或 `#FFFFFF` (确保对比度)。
* 小字号/说明文字: `14px` Regular, (对比度稍低的颜色)。
* 排版: 文字布局也可能**不拘一格,与几何图形穿插**。
* **表单优化:**
* 输入框 (``, `
THE END