本页目录

产品文档 / 历史记录与验收范围以文中日期为准

压缩解压缩 iOS App UI/UX 设计文档

文档版本:v1.0
设计目标:让用户快速完成压缩文件任务,并在每一步都清楚文件在哪里、正在做什么、下一步能做什么。

1. 设计定位

产品不是一个综合工具箱,而是一个可信赖的压缩文件工作台。界面遵循 Apple Files 的文件管理习惯,同时补充 RAR、7z、密码、批量任务和归档预览能力。

设计原则

  1. 任务优先:打开、解压、创建压缩包是首页最重要的三件事。
  2. 位置透明:每个文件都显示当前位置,保存位置由用户明确选择。
  3. 状态可见:进度、速度、空间、失败原因和输出结果都可见。
  4. 一次理解:避免专业术语,复杂选项通过渐进式展示提供。
  5. 可撤销:删除、移动、解压和压缩尽量支持取消、恢复或重试。
  6. 原生融合:使用系统导航、分享、文件选择、预览和权限模式。
  7. 安静可信:不使用广告、不制造“手机中毒”恐慌、不强制注册。

2. 信息架构

底部 Tab 固定为三项:

“最近”属于文件首页的内容,不单独占用一个 Tab。用户从分享面板打开文件时,直接进入归档详情页,跳过首页。

3. 导航与首页

3.1 文件首页

顶部包括页面标题“文件”、搜索按钮和更多按钮。更多菜单提供排序、选择、导入设置。

主体包括最近使用横向区域(最多显示 5 个条目)、常用方案快捷入口和位置列表(本机、iCloud Drive、最近导入、收藏)。空状态显示“打开压缩包”和“创建压缩包”两个主按钮。

首次使用不弹出多页教程。可以提供一个可跳过的单页提示:“从分享面板打开 ZIP/RAR,或从这里选择文件”。

3.2 重复任务与用户回访

压缩工具的粘性来自下次能更快完成同类任务,而不是增加与归档无关的内容:

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 目标位置面板

标题:“解压到哪里?”

首选项按顺序为:

  1. 与压缩包相同的位置。
  2. 本机或当前文件夹。
  3. iCloud Drive。
  4. 其他位置。

次级选项包括保留目录结构(默认开启)、遇到同名文件时询问/替换/保留两份/跳过、完成后打开文件夹。

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 字体和间距

9.3 图标

使用 SF Symbols 和少量自定义文件类型图标。文件类型图标必须配合文字,避免用户只靠颜色猜测格式。

10. iPad 体验

11. 可访问性和国际化

12. 微文案规范

使用具体、可操作、少技术术语的文案:

场景 推荐文案
导入 打开压缩包
创建 创建压缩包
解压 解压到…
处理中 正在解压…
完成 已解压到“下载”
密码错误 密码不正确,请重新输入
空间不足 可用空间不足,请选择其他位置
文件损坏 无法读取,文件可能未下载完成或已损坏
无权限 无法访问此位置,请在 Files 中选择其他位置

避免使用“立即清理”“设备感染病毒”“优化速度”等制造焦虑的表达。

13. 设计验收

  1. 测试用户从分享面板导入 ZIP 后,能在 3 个主要动作内开始解压。
  2. 用户始终能看到源位置和目标位置。
  3. 任何长任务都有进度、取消和结果摘要。
  4. 错误页提供至少一个可执行的下一步。
  5. iPad 横屏、深色模式、Dynamic Type 和 VoiceOver 通过验收。
  6. 不出现遮挡按钮、不可关闭弹窗或诱导订阅界面。

14. HTML 交互原型

可直接打开 app-prototype.html 体验主要流程:打开归档、筛选与多选、选择解压位置、任务进度、创建压缩包、密码设置、深色模式和任务结果。原型使用模拟数据,所有状态仅保留在当前页面,不读取或上传设备文件。

15. 原生验收记录

首页、创建入口、任务 Tab、设置 Tab 和归档详情使用 SwiftUI 原生控件实现,主按钮具备 44pt 以上触控区域,文件名使用截断和多行策略避免遮挡。视觉验收使用 iPhone 14 Simulator 截图进行,确认底部 Tab 不遮挡首页内容;运行日志发现并修复了不存在的 plus.square.on.folder SF Symbol。自动化 UI 测试受当前模拟器 Accessibility 服务超时影响,需在稳定的 Xcode 测试环境重跑。