Android 项目实战——博学谷 教案 第2章 界面设计.doc

博学谷——让IT教学更简单，让IT学习更有效 PAGE 12 PAGE 18 黑马程序员 《Android项目实战-博学谷（第2版）》 教学设计 课程名称： 授课年级： 授课学期： 教师姓名： 年 月 课题名称 第2章 界面设计 计划课时 10课时 教学引入 博学谷界面设计是整个项目的开端，界面的美观与舒适是用户体验的重要因素。在开发项目之前，通常会先制作项目的原型图来模拟项目的交互过程，体验项目在使用过程中是否符合用户的需求。由于博学谷项目中的界面比较多，为了不使本章内容过多，所以我们将以欢迎界面、课程界面和习题界面为例来讲解界面的原型图设计内容，并且这几个界面也包含了博学谷项目中大部分界面的设计思路。 教学目标 使学生掌握Axure RP 9.0工具的使用，能够独立设计项目界面 使学生掌握欢迎界面的设计思路，能够独立设计欢迎界面 使学生掌握课程界面的设计思路，能够独立设计课程界面 使学生掌握动态面板的组合使用，能够独立设计广告轮播图效果 使学生掌握习题界面的设计思路，能够独立设计习题界面 教学重点 制作广告栏 添加课程界面中章节图片的交互事件 添加欢迎界面载入时的交互事件 添加选项的交互事件 添加习题列表条目的交互事件 在课程界面中添加“习题”按钮的交互事件 在习题界面中添加“课程”按钮的交互事件 教学难点 制作广告栏 添加课程界面中章节图片的交互事件 添加欢迎界面载入时的交互事件 添加选项的交互事件 添加习题列表条目的交互事件 在课程界面中添加“习题”按钮的交互事件 在习题界面中添加“课程”按钮的交互事件 教学方式 课堂教学以PPT讲授为主，并结合多媒体进行教学 教 学 过 程 第一课时 （欢迎界面、制作课程界面的标题栏、制作广告栏、制作视频列表标题） 一、复习巩固 教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。 二、通过直接引入的方式导入新课 界面设计是整个项目的开端，界面的美观与舒适是用户体验的重要因素，接下来首先介绍欢迎界面的制作，然后再依次介绍课程界面的标题栏、广告栏和视频列表标题的制作。 三、新课讲解 知识点1-欢迎界面 教师展示PPT，讲解欢迎界面。 一般情况下，我们在制作原型图时，会使用Axure RP工具，该工具是设计界面原型图常用的工具。 在应用程序启动时，会首先进入欢迎界面，欢迎界面包括手机外框、系统状态栏、欢迎界面背景图片、版本号信息。为了使用相对美观一些的手机外壳，我们使用了mobilephoneshell.rplib元件库。 欢迎界面的制作具体步骤如下所示。 步骤1： 打开Axure RP 9工具后，会默认有一个创建好的页面，将该页面命名为“Splash”，也就是欢迎页面（界面）。单击工具左下角元件选项卡下的“”，将元件库mobilephoneshell.rplib导入到工具中，接着在元件库中将手机竖版外框元件拖入工作区域中。 步骤2： 从工具的左下角元件库中将系统状态栏拖入工作区域中。 步骤3： 拖入图片元件用于设置欢迎界面背景图片，设置图片元件宽高。 步骤4： 双击图片元件，将欢迎界面的背景图片导入到图片元件中，然后将图片元件移入手机边框中。 步骤5： 在欢迎界面中需要展示版本号信息，版本号信息可以通过文本标签实现，将文本标签元件拖入工作区域中，双击文本标签编辑文本，将文本设置为“V2.0”，并将文本颜色设置为白色，设置完成后将文本标签元件放置在欢迎界面的中间位置。 知识点2-制作课程界面的标题栏 教师展示PPT，讲解制作课程界面的标题栏。 制作课程界面的标题栏具体步骤如下所示。 步骤1： 在Axure RP工具中的页面选项卡中选中Splash页面，右击选择“添加(A)”?“下方添加页面（A）”选项，创建一个名为Course的页面，该页面就是课程页面。在课程页面中首先放入手机外框与系统状态栏，将屏幕的填充颜色设置为白色，然后将文本标签拖入工作区，用于制作标题栏部分，设置其宽高分别为360px与50px。 步骤2： 将标题栏文本标签的背景颜色设为蓝色，文本内容设置为“博学谷课程”，字号设置为20px，文本颜色设置为白色，文本的位置在水平方向和垂直方向居中。 知识点3-制作广告栏 教师展示PPT，讲解制作广告栏。 广告栏主要用于展示广告图片，并且能够每隔几秒自动切换到下一张图片，这种效果需要通过动态面板来实现。 在Axure RP工具中制作广告栏的具体步骤如下所示。 步骤1： 首先拖入一个图片元件，用于显示广告图片，并将图片元件的宽高分别设置为360px与180px。 步骤2： 双击图片