UI设计-教学教案

《PhotoshopCC移动UI设计案例教程（全彩慕课版）》配套教学教案第1讲课时内容初识移动UI设计授课时间180分钟课时4教学目标认识移动UI设计。认识App。教学重点认识移动UI设计。教学难点了解App的设计流程。教学设计1、教学思路：（1）通过认识移动UI设计了解UI设计的相关概念、移动UI设计的概念、特点、原则、常用软件和学习方法；（2）通过认识App了解App的基本概念、操作平台、设计流程和基本分类。2、教学手段：（1）通过资料了解移动UI和App的概念；（2）通过实例界面等图片深入了解移动UI和App。教学内容讨论问题：1、移动UI设计的常用软件有哪些？2、App的设计流程有哪些步骤？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1认识移动UI设计1.1.1UI设计的相关概念1.1.2移动UI设计的概念1.1.3移动UI设计的特点1.1.4移动UI设计的原则1.1.5移动UI设计的常用软件1.1.6移动UI设计学习方法1.2认识App1.2.1App的基本概念1.2.2App的操作平台1.2.3App的设计流程1.2.4App的基本分类小结1、了解移动UI设计。2、了解App。第2讲课时内容移动UI设计规范授课时间180分钟课时4教学目标熟练掌握iOS系统的设计规范。熟练掌握Android系统的设计规范。教学重点掌握iOS及Android系统的设计尺寸。掌握iOS及Android系统的界面结构。掌握iOS及Android系统的图标规范。掌握iOS及Android系统的字体规范。教学难点掌握iOS及Android系统的基本布局。教学设计1、教学思路：（1）通过资料及实例图片讲解，掌握iOS系统的设计规范；（2）通过资料及实例图片讲解，掌握Android系统的设计规范。2、教学手段：（1）通过总述了解iOS及Android系统的基本概念；（2）通过分类解析深入学习iOS及Android系统的设计尺寸及单位、界面结构、基本布局、图标规范和文字规范。教学内容讨论问题：1、iOS系统的界面结构有哪几部分组成？2、iOS及Android系统的图标包括哪几种分类？内容大纲：具体可结合本项目的PPT课件进行配合讲解。2.1iOS系统设计规范2.1.1iOS设计尺寸及单位2.1.2iOS界面结构2.1.3iOS基本布局2.1.4iOS图标规范2.1.5iOS文字规范2.2Android系统设计规范2.2.1Android设计尺寸及单位2.2.2Android界面结构2.2.3Android基本布局2.2.4Android图标规范2.2.5Android文字规范小结1.了解并掌握iOS及Android系统的设计尺寸及单位。2.了解并掌握iOS及Android系统的界面结构。3.了解并掌握iOS及Android系统的基本布局。4.了解并掌握iOS及Android系统的图标规范。5.了解并掌握iOS及Android系统的文字规范。第3讲课时内容iOS系统界面设计授课时间360分钟课时8教学目标了解栏的概念、分类和设计规范。了解视图的概念、分类和设计规范。了解控件的概念、分类和设计规范。熟练掌握iOS系统界面设计的方法和规范。教学重点熟练掌握栏的应用和设计规范。教学难点掌握按钮的概念和分类。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握制作旅游类APP首页、旅游类APP相册页、旅游类APP登机牌页、旅游类APP酒店列表页和旅游类APP美食筛选页的方法和技巧；（2）再通过相关的解析掌握栏、视图和控件的概念、分类和设计规范；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的iOS系统界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、视图有哪几种分类？2、按钮的概念是什么？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1栏3.1.1课堂案例——制作旅游类APP首页3.1.2状态栏3.1.3导航栏3.1.4搜索栏3.1.5标签栏3.1.6工具栏3.2视图3.2.1课堂案例——制作旅游类APP相册页3.2.2操作列表3.2.3活动视图3.2.4警告窗3.2.5集合视图3.2.6图像视图3.2.7地图视图3.2.8页面浏览控制器3.2.9课堂案例——制作旅游类APP登机牌页3.2.10弹出框3.2.11滚动视图3.2.12分屏视图3.2.13表单视图3.2.14文字视图3.2.15网络视图3.3控件3.3.1课堂案例——制作旅游类APP酒店列表页3.3.2按钮3.3.3编辑菜单3.3.4标签3.3.5页面控件3.3.6选择器3.3.7进度指示器3.3.8刷新3.3.9分段控件3.3.10课堂案例——制作旅游类APP美食筛选页3.3.11滑块3.3.12步进器3.3.13开关3.3.14文本框3.4课堂练习——制作旅游类APP酒店详情页3.5课后习题——制作旅游类APP预约美食页小结1、了解并熟练掌握栏、视图和控件的概念。2、了解并熟练掌握栏、视图和控件的分类。3、了解并熟练掌握栏、视图和控件的设计规范。4、熟练掌握iOS系统界面设计的方法和规范。作业3.4课堂练习——制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。3.5课后习题——制作旅游类APP预约美食页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。第4讲课时内容Android系统界面设计授课时间360分钟课时8教学目标了解栏的概念、分类和设计规范。了解组件的概念、分类和设计规范。熟练掌握Android系统界面设计的方法和规范。教学重点掌握组件的多种分类。教学难点熟练掌握栏的设计规范。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握制作医疗类APP闪屏页、医疗类APP首页、医疗类APP医生列表页、医疗类APP医生介绍页、医疗类APP医生筛选页和医疗类APP预约页的方法；（2）再通过相关的解析掌握栏和组件的概念、分类和设计规范；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的Android系统界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、底部应用栏有哪些组成部分？2、悬浮按钮的尺寸有哪些规范？内容大纲：具体可结合本项目的PPT课件进行配合讲解。4.1栏4.1.1课堂案例——制作医疗类APP闪屏页4.1.2状态栏4.1.3系统导航栏4.2组件4.2.1课堂案例——制作医疗类APP首页4.2.2底部应用栏4.2.3顶部应用栏4.2.4背板4.2.5横幅4.2.6底部导航4.2.7课堂案例——制作医疗类APP医生列表页4.2.8按钮4.2.9悬浮动作按钮4.2.10卡片4.2.11纸片4.2.12数据表4.2.13课堂案例——制作医疗类APP医生介绍页4.2.14对话框4.2.15分割线4.2.16图片组4.2.17列表4.2.18菜单4.2.19抽屉式导航4.2.20状态指引4.2.21课堂案例——制作医疗类APP医生筛选页4.2.22选择控件4.2.23底部面板4.2.24侧面板4.2.25滑块4.2.26底部提示栏4.2.27课堂案例——制作医疗类APP预约页4.2.28选项卡4.2.29文字框4.2.30提示4.3课堂练习——制作医疗类APP输入信息页4.4课后习题——制作医疗类APP帮助支持页小结1、了解并熟练掌握栏和组件的概念。2、了解并熟练掌握栏和组件的分类。3、了解并熟练掌握栏和组件的设计规范。4、熟练掌握Android系统界面设计的方法和规范。作业4.3课堂练习——制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。4.4课后习题——制作医疗类APP帮助支持页使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。第5讲课时内容App界面设计实战授课时间360分钟课时8教学目标了解闪屏页的概念和分类。了解引导页的概念和分类。了解首页的概念和分类。了解个人中心页、详情页和注册登录页的概念。熟练掌握App界面设计的方法和规范。教学重点了解App界面的类型与组成部分。教学难点掌握App界面设计的方法和规范。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握制作美食到家App的方法；（2）再通过相关的解析掌握闪屏页、引导页、首页、个人中心页、详情页和注册登录页的概念和分类；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟练掌握App界面设计的方法和规范；（2）通过相关的解析深入学习App界面的分类和概念。3、教学资料及要求：在网上找一些不同类型的App界面进行临摹，来加深学员对知识点的理解并提高实际应用能力。教学内容讨论问题：1、品牌推广型闪屏页的概念是什么？2、综合型首页由哪几部分组成？内容大纲：具体可结合本项目的PPT课件进行配合讲解。5.1闪屏页5.1.1品牌推广型5.1.2活动广告型5.1.3节日关怀型5.2引导页5.2.1功能说明型5.2.2产品推广型5.2.3搞笑卖萌型5.3首页5.3.1列表型5.3.2网格型5.3.3卡片型5.3.4综合型5.4个人中心页5.5详情页5.6注册登录页5.7课堂案例——制作美食到家App5.8课堂练习——制作DelicacyAPP5.9课后习题——制作美食来了APP小结1、了解闪屏页、引导页、首页、个人中心页、详情页和注册登录页的分类和概念。2、熟练掌握App界面设计的规范。作业5.8课堂练习——制作DelicacyApp使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。5.9课后习题——制作美食来了App使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。