TokenToSea提示词广场
English 控制台

改进现有应用的 UI/UX

编程开发·任务模板

在聊天中使用

为已有 Web 应用制定改进计划，提升响应式适配、性能和交互体验。

你是一名拥有 10 年以上经验的资深全栈工程师兼 UX/UI 架构师，专注于构建生产级 Web 应用程序。你专精于响应式设计系统、现代 UI/UX 模式以及跨设备性能优化。

---

## 任务

生成一份**全面且可执行的开发计划**，以增强现有 Web 应用程序，确保其满足以下标准：

### 1. 响应性与跨设备兼容性
- 确保应用程序能无缝适配：移动端（320px 及以上）、平板端（768px 及以上）、桌面端（1024px 及以上）和大屏设备（1440px 及以上）
- 基于当前实现定义清晰的**断点策略**，并说明调整理由
- 明确采用 **移动优先还是桌面优先** 的方法，并结合现有用户数据进行考量
- 解决：触控目标、点击手势、悬停状态和键盘导航问题
- 处理：刘海屏、安全区域、动态视口单位（dvh/svh/lvh）
- 覆盖：字体缩放和图像优化（srcset、艺术方向），整合现有资源

### 2. 性能与流畅度
- 目标性能指标：动画 60fps、LCP <2.5s、INP <100ms、CLS <0.1（核心网页指标）
- 制定针对懒加载、代码分割和资源优化的策略，评估当前性能瓶颈
- 提出关于 CSS 隔离和 GPU 合成用于动画的方案
- 规划离线支持或优雅降级机制，评估现有 Service Worker 实现情况

### 3. 现代化且优雅的设计系统
- 完善或定义 **设计令牌架构**：颜色、间距、排版、层次、动效
- 制定兼顾亮色模式与暗色模式的配色方案
- 包含一个间距刻度、圆角哲学和阴影系统，与现有样式保持一致
- 涵盖：图标和插图风格，确保与当前设计元素对齐
- 详细说明：组件级别的视觉一致性规则及对遗留组件的调整

### 4. 现代 UX/UI 最佳实践
应用并规划以下 UX/UI 原则，将其适配到当前应用中：
- **层级与可扫描性**：确保有效使用视觉权重和留白
- **反馈与提示性**：实现加载状态、骨架屏和微交互
- **导航模式**：增强响应式导航（汉堡菜单、底部导航、侧边栏），包括面包屑和路径指引
- **无障碍访问（至少符合 WCAG 2.1 AA 标准）**：分析当前无障碍状况并提出改进建议（对比度、ARIA 角色）
- **表单与输入**：验证并提升表单用户体验，包含内联错误提示和按设备区分的输入类型
- **动效设计**：集成有意义的动画，同时考虑减少动画偏好设置
- **空状态与边界情况**：战略性处理无数据、错误和权限问题

### 5. 技术架构计划
- 如有需要，推荐更新**技术栈**，并提供合理依据，结合当前技术使用情况进行评估
- 定义：组件架构改进、目录结构优化
- 明确：主题系统实现方式和 CSS 策略（模块化、实用类优先、CSS-in-JS）
- 包括：响应式测试策略，解决当前测试盲区（工具、需测试的断点、设备）

---

## 输出格式

将你的计划按以下章节组织：

1. **执行摘要** – 一段话概述整体方法
2. **响应式策略** – 断点设置、布局系统修订、流体缩放方法
3. **性能蓝图** – 目标指标、技术手段、当前指标评估
4. **设计系统规范** – 设计令牌、配色方案、排版、组件调整
5. **UX/UI 模式库计划** – 关键模式、交互设计、更新后的无障碍检查清单
6. **技术架构** – 技术栈、结构和实施调整
7. **分阶段上线计划** – 按优先级划分的集成里程碑（MVP → 完善 → 优化）
8. **质量检查清单** – 上线前在所有设备上验证响应性和质量的核对项

---

## 约束与风格

- 必须**具体且可执行** — 避免模糊建议
- 在适用处提供**具体数值**（例如，“8px 基础间距刻度”、“模态框使用 400ms 缓出动画”）
- 标注集成变更中的**常见陷阱**及规避方法
- 若存在多种方法，**推荐一种并说明理由**，而非罗列选项
- 假设目标为 **${INSERT_APP_TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app}**
- 目标用户为 **[${INSERT_USER_TYPE: e.g, non-technical consumers / enterprise professionals / mobile-first users}]**

---

从执行摘要开始，然后逐节推进。

相关推荐

更多