1.2　界面设计

开发者需要根据上述功能描述来设计用户界面，这是创作软件产品的重要环节。总体思路是，首先根据功能划分大的区域，然后针对每个区域考虑具体组件的选择与设置。

1.2.1　功能区划分

就《水果配对》而言，用户界面被划分为上下两个区域，如图 1-1 所示，屏幕的顶部称为提示区，用来提示用户游戏得分及游戏剩余时间。屏幕的其余部分称为操作区，是用户与游戏进行交互的区域。

1.2.2　界面布局

在 App Inventor 中，布局组件用来实现用户界面上的区域划分。现在进入 App Inventor 设计视图，依照上述功能区的划分，完成页面布局。

首先在屏幕上放置两个布局组件：上部提示区采用水平布局组件，下部操作区采用表格布局组件，将它们的名称分别修改为提示区及操作区，设置它们的宽、高属性，并将表格布局的行、列属性分别设为 4。然后在提示区中放置 3 个标签和 1 个数字滑动条，在操作区的 16 个单元格内依次放入 16 个按钮，最终的结果如图 1-2 所示，组件的命名及属性的具体设置见表 1-1。

图 1-2　设计游戏的用户界面

表 1-1　组件的命名及属性设置

1.2.3　素材文件

有些应用中需要使用一些图片或音视频素材，这些素材文件需要上传到项目中。在《水果配对》游戏中，共用到了 10 张图片，其中正面图片 8 张，背面图片 1 张，用于产品发布的图标图片 1 张（菠萝的卡通画，ananas.jpg）。图片的外观及规格见表 1-2。图片上传后的结果如图 1-2 所示。

表 1-2　图片规格（大小：80×80，单位：像素）