你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
应用类型：显化应用
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用标签外链unsplash
## 新视觉风格：轻拟物设计（Neumorphism）
1. 视觉特性
1.1 光影效果
双重阴影：
外阴影（Outer Shadow）：模拟元素“浮起”的效果，通常使用浅色背景下的深灰色阴影。
内阴影（Inner Shadow）：模拟元素“凹陷”的效果，常用于输入框、按钮等。
光源方向统一：
通常光源从左上角照射，确保所有元素的阴影方向一致。
柔和过渡：
阴影和高光的边缘模糊处理，避免生硬的对比，增强自然感。
1.2 色彩搭配
背景颜色：
以浅色为主（如白色、浅灰、淡蓝），营造干净、柔和的视觉效果。
元素颜色：
元素通常使用与背景相近的颜色，保持整体统一感。
点缀颜色：
使用少量高饱和度颜色（如橙色、红色、蓝色）突出关键信息或交互按钮。
渐变色：
在某些情况下，使用单色渐变为背景或元素添加微妙的立体感。
1.3 材质感
柔和的质感：
元素看起来像是“软塑料”或“橡胶”材质，带有一定的触感。
半透明效果：
某些区域（如卡片或浮层）可以使用半透明设计，增强层次感。
2. 元素设计
2.1 按钮
浮起按钮：
通过外阴影让按钮看起来从背景中“浮起”，适合主要交互。
凹陷按钮：
通过内阴影让按钮看起来“嵌入”背景，适合被动状态或次要功能。
交互反馈：
按下按钮时，阴影变化模拟按钮被按下的物理反馈。
2.2 输入框
凹陷设计：
输入框通常采用内阴影，模拟“嵌入”效果。
圆角边框：
边角圆润，与整体风格一致。
占位符文字：
使用浅灰色文字，柔和且不突兀。
2.3 卡片
模块化布局：
卡片式设计分区清晰，适合展示复杂信息。
浮起效果：
卡片通过外阴影与背景分离，增强层次感。
渐变装饰：
某些卡片可能使用渐变或光影装饰，增加视觉吸引力。
2.4 图标
极简设计：
图标线条简洁，通常与背景融为一体。
立体感：
图标通过光影处理，呈现浮起或凹陷效果。
一致性：
图标风格与文字、按钮保持一致，避免风格冲突。
2.5 数据可视化
立体图表：
饼图、柱状图等数据可视化元素通常带有光影效果，增强空间感。
柔和渐变：
数据图表的颜色使用渐变或低饱和度色彩，避免刺眼。
动态效果：
数据加载或更新时，使用缓慢的动画过渡，提升科技感。
3. 文字设计
3.1 字体
无衬线字体：
使用现代化的无衬线字体（如Roboto、SF Pro），增强简洁和科技感。
轻量化字体：
以Light或Regular权重为主，避免厚重感。
3.2 字体颜色
柔和对比：
文字颜色通常为深灰色或浅灰色，与背景形成柔和对比。
点缀文字：
重要文字或数字使用点缀色（如橙色、蓝色）突出显示。
渐变文字：
在标题或装饰性文字中，可能使用渐变效果。
3.3 排版
标题与正文区分：
标题字体较大且稍粗，正文字体较小且轻薄。
留白充足：
文字与其他元素之间保持足够的间距，避免界面拥挤。
4. 动效设计
4.1 按钮交互
点击按钮时，阴影和高光动态变化，模拟按压效果。
4.2 加载动画
使用柔和的渐变或光影移动，避免生硬的加载效果。
4.3 数据动态更新
数据变化时，数字滚动或图表缓慢过渡，增强科技感。
5. 布局设计
5.1 模块化布局
界面分区清晰，常用卡片式设计展示信息。
5.2 留白设计
界面中留白充足，突出主要内容，避免信息过载。
5.3 响应式设计
界面适配不同屏幕尺寸，确保在手机、平板和桌面端都有良好的体验。
THE END
