《UI视觉设计案例教程》教案 第3章 App 界面设计.docx
PAGE8
PAGE8
PAGE7
PAGE7
课题
App界面设计
课时
8课时（360min）
教学目标
知识目标：
（1）了解App的基本界面
（2）了解App的界面组成
（3）了解App常见的导航形式
（4）了解常见移动设备的操作系统
（5）了解App界面设计的规范
（6）掌握音乐App界面的设计技巧和一般制作方法
素质目标：
加强实践练习，不断培养自身的专业技能，为个人的长远发展打下坚实的基础
教学重难点
教学重点：App的基本界面和界面组成，App常见的导航形式，常见移动设备的操作系统，App界面设计的规范
教学难点：音乐App界面的设计技巧和一般制作方法
教学方法
问答法、讨论法、讲授法、多媒体展示法
教学用具
电脑、投影仪、多媒体课件、教材、APP
教学过程
主要教学内容及步骤
考勤
【教师】使用APP进行签到
【学生】按照老师要求签到
问题导入
【教师】提出问题
App的界面有哪些组成部分？
【学生】聆听、思考、主动回答问题
传授新知
【教师】总结学生的回答、引入新的知识点，讲解App的基本界面和界面组成，常见的导航形式，常见移动设备操作系统，以及App界面设计的规范等知识
3.1App基础知识
App是Application的缩写，是指运行在手机系统上的应用程序，它可以为用户提供诸多便捷，实现随时随地购物、浏览网页、社交、学习和游戏等。
根据App的功能和特点，可将其划分为不同种类，具体包括影音娱乐类、购物类、生活服务类（如地图、天气、日历等）、社交类、教育学习类和游戏类等。
3.1.1App的基本界面
一个完整的App通常包括开屏页、首页、注册登录页、详情页和个人中心页等。由于功能和内容不同，这些页面的布局也有所区别，下面依次简单介绍。
1．开屏页
开屏页是用户启动App后第一个看到的页面，对于产品本身来说，具有渲染品牌氛围和彰显个性的重要作用。根据展示方式的不同，常见的开屏页有启动页、闪屏页和引导页三种类型。
1）启动页
【教师】通过多媒体展示“图像型背景”图片（详见教材），并讲解新知
启动页是App每次冷启动（启动未在后台运行的App）时展示给用户的一个静态过渡画面，目的是缓解用户等待打开App时产生的焦虑情绪。
【教师】通过多媒体展示“全历史App启动页”图片（详见教材），并讲解新知
……（详见教材）
2）闪屏
【教师】通过多媒体展示“网易云音乐App闪屏（静态图片）和新浪微博App闪屏（动画）”图片（详见教材），并讲解新知
闪屏是App启动时的一个过渡画面（可以是静态图片，也可以是动画），其展示时间可控，且拥有一定的交互功能（如用户可点击图像跳转到对应的承载页，或点击“跳过”按钮进入首页等），常作为营销活动、商业广告的载体在启动页后展示。
3）引导页
【教师】通过多媒体展示“PixivApp引导页”图片（详见教材），并讲解新知
引导页是用户安装或更新App后，首次启动时展示的多个页面，主要用于介绍App的核心功能、用法、使用场景或新增功能等。
……（详见教材）
2．首页
【教师】通过多媒体展示“京东App首页”图片（详见教材），并讲解新知
首页是App关键内容的汇总页面，一般包括搜索栏、Banner、金刚区等版块，用户可通过点击进入对应栏目或页面。
3．注册登录页
【教师】通过多媒体展示“网易严选App的注册登录页”图片（详见教材），并讲解新知
注册登录页是App的必要页面之一，该页的布局比较简洁，一般包括产品Logo、账号和密码输入框、第三方登录图标等。
4．详情页
【教师】通过多媒体展示“得物App详情页（部分）”图片（详见教材），并讲解新知
详情页主要指购物类App中展示商品详细信息的页面，一般包括商品图片、名称、价格、商品介绍和详情图等内容，常以列表或卡片形式布局。
需要注意的是，该页内容较多，通常一屏内无法完全显示，设计时可适当调整页面高度。
5．个人中心页
【教师】通过多媒体展示“咸鱼App‘我的’页面”图片（详见教材），并讲解新知
个人中心页是供用户查看和设置个人信息的页面。该页面常见布局有两种：一种是将各功能分类展示，让用户能通过分类标题快速找到所需功能。
【教师】通过多媒体展示“支付宝App‘我的’页面”图片（详见教材），并讲解新知
还有一种是采用列表形式进行布局，将各功能逐一列出来，这样会让页面效果更加清爽，功能分布更具条理。
3.1.2App的界面组成
App界面的重要组成元素是栏和内容视图。
1．栏
栏是界面中重要的交互区域，一般包括状态栏、导航栏和标签栏三种，用户可通过栏内信息了解页面的当前状态，通过功能图标和控制按钮完成返回、切换和展开等操作。
【教师】通过多媒体展示“基础页面构成”图片（详见教材），并讲解新知
为iOS系统和Androi