2.1　欢迎界面

在应用程序启动时，会首先进入欢迎界面。欢迎界面包括手机外框、系统状态栏、欢迎界面背景图片、版本号信息和虚拟按键。

在制作原型图时首先需要确定演示的设备，本项目以Nexus 6P作为演示设备，因此先在原型图中放入Nexus 6P的手机外框。在网上有许多开源的移动设备元件库，初学者可自行下载并导入元件库。接下来对欢迎界面的制作进行详细讲解。

步骤1　创建页面，命名为“Splash”，在元件库中将Nexus 6P手机外框图拖入到工作区域，如图2-1所示。

图2-1　放置手机外框

步骤2　从元件库中将系统状态栏拖入到工作区域中，如图2-2所示。

图2-2　放置系统状态栏

由于项目中应用手机外框与系统状态栏的地方很多，因此可以将手机外框与系统状态栏制作成母版，方便后期修改维护，本书不做详细讲解。

步骤3　拖入图片元件用于设置欢迎界面背景图片，设置图片元件的宽和高。图片元件的宽应与手机屏幕宽度一致，而高应为“手机屏幕高度-系统状态栏高度-虚拟按键高度”，其中系统状态栏的高度为，虚拟按键的高度为，因此图片元件的高度为640-24-48=568（640为手机屏幕的高度），即图片元件的宽高为360×568（360为手机屏幕的宽度），如图2-3所示。

图2-3　放置图片元件

步骤4　双击图片元件，将欢迎界面背景图片导入到图片元件，然后将图片元件移入设备边框中，如图2-4所示。

图2-4　导入欢迎图片

步骤5　在欢迎界面中需要展示版本号信息，版本号信息可以通过文本标签实现，将文本标签拖入工作区域，双击文本标签编辑文本，并将文本颜色设置为白色，如图2-5所示。

图2-5　设置版本号

至此，欢迎界面制作完成。需要注意的是，欢迎界面只会在程序开启时展示3秒，便会自动进入课程界面，因此需要为欢迎界面添加交互事件，但是由于课程界面还没创建，因此将该步骤放在制作课程界面中讲解。