返回》

AI生成UI-孟菲斯风格

作为一名资深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, (对比度稍低的颜色)。 * 排版: 文字布局也可能**不拘一格,与几何图形穿插**。 * **表单优化:** * 输入框 (``, `