产品文档 / 历史记录与验收范围以文中日期为准
压缩解压缩 iOS App UI/UX 设计文档
文档版本:v1.0
设计目标:让用户快速完成压缩文件任务,并在每一步都清楚文件在哪里、正在做什么、下一步能做什么。
1. 设计定位
产品不是一个综合工具箱,而是一个可信赖的压缩文件工作台。界面遵循 Apple Files 的文件管理习惯,同时补充 RAR、7z、密码、批量任务和归档预览能力。
设计原则
- 任务优先:打开、解压、创建压缩包是首页最重要的三件事。
- 位置透明:每个文件都显示当前位置,保存位置由用户明确选择。
- 状态可见:进度、速度、空间、失败原因和输出结果都可见。
- 一次理解:避免专业术语,复杂选项通过渐进式展示提供。
- 可撤销:删除、移动、解压和压缩尽量支持取消、恢复或重试。
- 原生融合:使用系统导航、分享、文件选择、预览和权限模式。
- 安静可信:不使用广告、不制造“手机中毒”恐慌、不强制注册。
2. 信息架构
底部 Tab 固定为三项:
- 文件:最近、本机、iCloud Drive、其他位置、收藏。
- 任务:进行中、已完成、失败、任务详情。
- 设置:文件处理、隐私与安全、通知、外观与辅助功能、关于。
“最近”属于文件首页的内容,不单独占用一个 Tab。用户从分享面板打开文件时,直接进入归档详情页,跳过首页。
3. 导航与首页
3.1 文件首页
顶部包括页面标题“文件”、搜索按钮和更多按钮。更多菜单提供排序、选择、导入设置。
主体包括最近使用横向区域(最多显示 5 个条目)、常用方案快捷入口和位置列表(本机、iCloud Drive、最近导入、收藏)。空状态显示“打开压缩包”和“创建压缩包”两个主按钮。
首次使用不弹出多页教程。可以提供一个可跳过的单页提示:“从分享面板打开 ZIP/RAR,或从这里选择文件”。
3.2 重复任务与用户回访
压缩工具的粘性来自下次能更快完成同类任务,而不是增加与归档无关的内容:
- 最近区域支持继续查看上次输出位置和结果,不重复执行任务。
- 用户可保存“照片分享”“工作资料”等常用方案,保存格式、压缩级别、目标位置和冲突策略。
- 密码不进入常用方案;若用户明确保存密码,必须经 Keychain 管理并单独提示。
- 任务中心保留最近历史,可从完成记录重新打开输出目录或再次使用相同设置。
- 支持系统 Shortcuts 调用打开压缩包、创建 ZIP 和查看任务等动作。
- 收藏、历史和常用方案都可在设置中清除,数据本地保存。
3.3 文件列表
每行包含文件类型徽标、文件名、大小和修改时间、当前位置或云端状态、加密或下载中标记。默认使用列表视图,确保长文件名和路径可读;可切换紧凑网格视图。
- 点击:打开文件或归档详情。
- 长按:预览、分享、重命名、移动、复制、删除、加入收藏。
- 左滑:分享和更多操作。
- 右上角“选择”:进入批量选择模式。
4. 归档详情页
4.1 页面结构
顶部导航提供返回、分享和更多操作。归档摘要显示格式图标、完整文件名、格式、压缩大小、条目数量和加密状态。主操作为醒目的“解压到…”,次操作为“选择”。
下面依次是归档内搜索、类型筛选(全部、文件、图片、文档、音视频)和目录列表。每条目录或文件显示类型图标、名称、大小和选中状态。
顶部主按钮“解压到…”保持高可见度。用户通常打开压缩包就是为了取出内容,不应先进入隐藏菜单。
4.2 目录浏览
- 使用面包屑展示当前目录。
- 目录行显示条目数量或展开箭头。
- 文件行显示大小、类型和加密状态。
- 选中目录时,默认选择该目录全部内容。
- 搜索结果显示完整相对路径,防止同名文件混淆。
- 对超大目录使用虚拟列表和增量加载。
4.3 预览
预览页底部提供分享、导出、在其他 App 中打开、上一个/下一个。预览只读,不在本产品中编辑 PDF、图片、视频或音频,保持产品边界清晰。
5. 创建压缩包流程
5.1 选择文件
使用系统文件选择器或 App 内多选列表。顶部显示已选数量、总大小和清除选择。选择文件夹时显示目录结构预览,不把文件夹自动展开成平铺列表。
5.2 压缩设置页
默认只展示压缩包名称、保存位置、是否设置密码。点击“更多选项”后展示格式(ZIP/7z)、压缩级别(平衡/更小体积)、AES-256 加密和分卷设置。
术语说明使用简短辅助文案,例如:“更小体积会更慢,适合归档或网络传输”。
5.3 完成页
完成后展示生成文件名和位置、压缩前后大小、节省空间比例,以及“打开”“分享”“在 Files 中查看”。不自动打开第三方 App,避免用户失去当前任务上下文。
6. 解压流程
6.1 目标位置面板
标题:“解压到哪里?”
首选项按顺序为:
- 与压缩包相同的位置。
- 本机或当前文件夹。
- iCloud Drive。
- 其他位置。
次级选项包括保留目录结构(默认开启)、遇到同名文件时询问/替换/保留两份/跳过、完成后打开文件夹。
6.2 密码输入
密码页只在确认归档需要密码后出现。页面包含锁图标、“请输入此压缩包的密码”、显示/隐藏密码、使用已保存密码、取消和解锁。
错误提示:“密码不正确,请重新输入。”不要显示技术堆栈或误导性的“文件损坏”。连续失败后允许重新选择压缩包。
6.3 进度页面
进度页面不是阻塞式全屏弹窗。用户可返回文件页,任务继续在任务 Tab 中执行。
任务卡片显示任务类型和文件名、百分比和环形进度、已处理文件数/总数、当前速度和预计剩余时间、暂停和取消。
大任务不使用跳动或频繁变化的动画,优先保证稳定和可读。
7. 任务中心
任务 Tab 分为进行中、已完成、失败。失败任务行直接显示可执行动作:“重新输入密码”“选择缺少的分卷”“释放空间后重试”“查看失败文件”。
任务详情中显示源位置和目标位置,用户可以点击路径跳转到对应文件夹。
8. 冲突、删除和错误交互
8.1 重名文件
统一冲突面板显示发生冲突的文件名,提供替换现有文件、保留两个文件、跳过此文件三个选项,并提供“对本次任务的所有冲突使用此选择”。默认不替换,防止误覆盖。
8.2 空间不足
文案示例:
需要约 1.8 GB 空间,但当前位置只剩 620 MB。
请选择其他位置或释放空间后重试。
按钮:“选择其他位置”“取消”。
8.3 文件损坏或格式不支持
文案示例:
无法读取这个压缩包。文件可能未下载完成、已损坏,或使用了当前版本不支持的压缩算法。
按钮:“重新下载”“重试”“查看支持格式”。不要只显示“未知错误”。
8.4 删除
- 普通删除进入回收站并显示撤销条。
- 清空回收站属于不可恢复操作,使用系统确认样式。
- 删除云端文件时明确显示“这会从云端位置删除”。
9. 视觉系统
9.1 色彩
- 主色使用系统蓝或品牌蓝,用于主操作和链接。
- 成功使用绿色,警告使用橙色,失败使用红色,信息使用灰蓝色。
- 颜色只作为辅助,配合图标和文字。
- 深色模式使用系统语义色,不直接硬编码黑白。
9.2 字体和间距
- 使用 San Francisco 和系统中文字体。
- 正文跟随 Dynamic Type。
- 页面左右边距 16–20pt。
- 列表行高度至少 56pt,关键按钮触控区域至少 44pt。
- 文件名可换行或横向滚动,不强制截断到无法区分。
9.3 图标
使用 SF Symbols 和少量自定义文件类型图标。文件类型图标必须配合文字,避免用户只靠颜色猜测格式。
10. iPad 体验
- 支持纵向和横向布局。
- 横屏使用三栏或双栏:位置、文件列表、归档内容。
- 支持从 Files 或其他 App 拖入。
- 支持 Command+A、Command+C、Command+V、空格预览、Delete 删除。
- 支持多窗口打开不同压缩包。
- 任务在侧栏显示,不遮住文件内容。
- 不使用只适配 iPhone 的底部大按钮布局。
11. 可访问性和国际化
- VoiceOver 朗读文件名、格式、大小、加密状态和操作结果。
- 多选框有明确的“已选择/未选择”状态。
- 支持 Dynamic Type 到辅助功能更大字体。
- 动画可通过 Reduce Motion 关闭。
- 支持英文、简体中文、繁体中文、日文,后续可扩展 RTL。
- 日期、大小、路径和数字使用系统 Locale 格式化。
12. 微文案规范
使用具体、可操作、少技术术语的文案:
| 场景 | 推荐文案 |
|---|---|
| 导入 | 打开压缩包 |
| 创建 | 创建压缩包 |
| 解压 | 解压到… |
| 处理中 | 正在解压… |
| 完成 | 已解压到“下载” |
| 密码错误 | 密码不正确,请重新输入 |
| 空间不足 | 可用空间不足,请选择其他位置 |
| 文件损坏 | 无法读取,文件可能未下载完成或已损坏 |
| 无权限 | 无法访问此位置,请在 Files 中选择其他位置 |
避免使用“立即清理”“设备感染病毒”“优化速度”等制造焦虑的表达。
13. 设计验收
- 测试用户从分享面板导入 ZIP 后,能在 3 个主要动作内开始解压。
- 用户始终能看到源位置和目标位置。
- 任何长任务都有进度、取消和结果摘要。
- 错误页提供至少一个可执行的下一步。
- iPad 横屏、深色模式、Dynamic Type 和 VoiceOver 通过验收。
- 不出现遮挡按钮、不可关闭弹窗或诱导订阅界面。
14. HTML 交互原型
可直接打开 app-prototype.html 体验主要流程:打开归档、筛选与多选、选择解压位置、任务进度、创建压缩包、密码设置、深色模式和任务结果。原型使用模拟数据,所有状态仅保留在当前页面,不读取或上传设备文件。
15. 原生验收记录
首页、创建入口、任务 Tab、设置 Tab 和归档详情使用 SwiftUI 原生控件实现,主按钮具备 44pt 以上触控区域,文件名使用截断和多行策略避免遮挡。视觉验收使用 iPhone 14 Simulator 截图进行,确认底部 Tab 不遮挡首页内容;运行日志发现并修复了不存在的 plus.square.on.folder SF Symbol。自动化 UI 测试受当前模拟器 Accessibility 服务超时影响,需在稳定的 Xcode 测试环境重跑。