1. 产品概述
图片快速裁剪工具，帮助运营人员在不同平台提供符合尺寸标准的物料
-
解决不同平台尺寸标准不一致的问题，提高物料制作效率
-
目标用户为运营人员，市场价值在于节省时间成本，提高工作效率
2. 核心功能
2.1 用户角色
| 角色 | 注册方式 | 核心权限 |
|------|---------|---------|
| 普通用户 | 无需注册 | 上传图片、选择尺寸、调整裁剪区域、下载图片 |
2.2 功能模块
- 主页面: 图片上传区域、尺寸选择、尺寸切换、裁剪调整、结果预览、下载功能
2.3 页面详情
| 页面名称 | 模块名称 | 功能描述 |
|---------|---------|---------|
| 主页面 | 图片上传区域 | 支持拖拽上传和点击上传图片，显示上传进度 |
| 主页面 | 尺寸选择 | 预设多个平台尺寸，如微信、微博、抖音等，支持自定义尺寸 |
| 主页面 | 尺寸切换 | 支持在已选择的尺寸之间切换，为每个尺寸独立编辑裁剪区域 |
| 主页面 | 裁剪调整 | 支持拖拽调整裁剪区域，实时预览裁剪效果，每个尺寸有独立的裁剪区域 |
| 主页面 | 结果预览 | 同时显示多个尺寸的裁剪结果预览，每个预览基于对应尺寸的裁剪区域 |
| 主页面 | 下载功能 | 支持单个下载或批量下载所有尺寸的图片 |
3. 核心流程
用户流程：
-
用户访问应用
-
上传图片
-
选择需要的尺寸
-
在尺寸之间切换，为每个尺寸独立调整裁剪区域
-
预览裁剪结果
-
下载裁剪后的图片
4. 用户界面设计
4.1 设计风格
-
主色调：#3b82f6（蓝色）、#10b981（绿色）
-
按钮风格：圆角按钮，有悬停效果
-
字体：Inter，大小14px-20px
-
布局风格：卡片式布局，清晰整洁
-
图标风格：简约线条图标
4.2 页面设计概览
| 页面名称 | 模块名称 | UI元素 |
|---------|---------|-------|
| 主页面 | 图片上传区域 | 居中大区域，虚线边框，拖拽提示文字，上传后显示图片 |
| 主页面 | 尺寸选择 | 水平滚动的尺寸选项卡，选中状态有高亮效果 |
| 主页面 | 尺寸切换 | 水平排列的尺寸按钮，当前编辑的尺寸有高亮显示 |
| 主页面 | 裁剪调整 | 图片上显示裁剪框，可拖拽调整位置和大小，根据当前尺寸自动调整裁剪框比例 |
| 主页面 | 结果预览 | 网格布局的预览卡片，显示每个尺寸的裁剪结果 |
| 主页面 | 下载功能 | 主下载按钮和单个尺寸下载按钮，绿色突出显示 |
4.3 响应式设计
-
桌面优先设计，支持响应式布局
-
在移动设备上调整为垂直布局
-
支持触摸操作，方便在移动设备上调整裁剪区域
4.4 3D场景指引
- 不适用