Logo
Section 1 / 6

项目:迷你机甲用户界面原型设计

参考原始界面截图与草图,规划迷你机甲应用的UI布局

导入

项目:迷你机甲用户界面原型设计

参考原始界面截图与草图,规划迷你机甲应用的UI布局

让我们先来看一下原始 MekHQ 用户界面的一些截图。首先,这是显示飞行员列表以及当前选中飞行员详细信息的界面:

MekHQ 飞行员列表与详情界面
MekHQ 飞行员列表与详情界面

接下来是“单位编制表”部分,以树形结构展示单位中的各个子单位,并且右侧同样配有详情区域:

MekHQ 单位编制表树形界面
MekHQ 单位编制表树形界面

这为我们提供了大致的 UI 布局思路:顶部为标签栏,大多数标签页左侧包含某种列表,右侧则为当前选中项的详情框。

以下是我们的 UI 的一些初步草图。首先是“单位信息”界面,展示我们正在编辑的虚构军事单位的基本描述属性:

Project Mini-Mek:单位信息界面草图
Project Mini-Mek:单位信息界面草图

其次是“飞行员”界面,列出分配给该单位的飞行员:

Project Mini-Mek:飞行员界面草图
Project Mini-Mek:飞行员界面草图

第三是“机甲”界面,列出分配给该单位的战斗机械:

Project Mini-Mek:机甲界面草图
Project Mini-Mek:机甲界面草图

最后是“单位编制表”界面,展示每位飞行员及其机甲所归属的“小队”分组:

Project Mini-Mek:单位编制表界面草图
Project Mini-Mek:单位编制表界面草图

我们将使用这些草图来指导 Project Mini-Mek 用户界面的开发。

简介

创建初始项目