App Design

AirTrack

工具: Figma, Android Studio

为什么做这个应用?

* 飞行爱好者会记录自己的航班

* 现有App太复杂,UI老旧 ❌

* 输入流程繁琐 ❌

* 过多信息展示 ❌

市场产品调研

User Flow

围绕最常见的记录动作,用户从导航栏进入新增页面,到填写航班信息并在历史记录中回看结果的完整过程。

Step 01

点击导航栏

用户从底部导航进入添加航班记录页面。

Step 02

进入 Add 页面

系统展示新增表单,页面聚焦单次录入任务,减少多余信息干扰,让用户明确下一步就是补全航班资料。

Step 03

输入航班号与起降机场

用户先填写航班号和起降机场。

Step 04

输入起飞落地日期与时间

继续补充起飞和落地的日期与时间,完整记录本次航程。

Step 05

添加记录

确认信息无误后点击'Add',系统将本次航班保存到本地历史中,并反馈添加成功状态。

Step 06

查看历史记录

用户点击导航栏进入主页,再点击'View History' 即可查看刚刚添加的航班,完成从录入到回顾的闭环。

UI展示

AirTrack 首页界面截图

首页概览

集中展示飞行记录、航程统计与关键入口。

AirTrack 添加记录界面截图

添加页面

用清晰表单承载航班号、机场与时间输入。

AirTrack 历史记录界面截图

历史记录

按行程卡片回看已保存的飞行记录。

AirTrack 行程卡片组件

行程卡片

把航班、日期与航线信息压缩成可快速浏览的模块。

设计原则

配色规范

主色: #2851C9

背景色: #F5F5F5

表面色: #FCFFFFFF

文本色: #000000

错误色: #FF4B4B

字体规范

主字体: Sora

副字体: Inter 系列

图标

设计组件

行程卡片

输入框

设计反思

当前版本主要聚焦于本地端核心体验的实现,暂未接入后端服务, 因此数据同步、跨设备访问与备份恢复能力仍有进一步拓展空间。同时,由于项目由个人独立完成, 尚未进行大规模用户可用性测试,后续仍需要通过真实用户反馈来验证交互流程与功能设计的有效性。 在未来迭代中,计划引入云端同步与数据备份机制, 以降低本地数据丢失风险,并提升多设备使用场景下的连续性体验。 此外,也将结合用户测试与行为反馈,持续优化信息架构、操作流程与界面细节, 使产品更加稳定、易用且贴近真实使用需求。