UI界面设计与制作（全彩慕课版）—— 教案全套

1、UI界面设计(全彩慕课版)配套教学教案第1讲课时内容初识UI设计授课时间18()分钟 课时4教学目标0 掌握UI设计的基本概念。H掌握UI设计的常用软件。0 了解UI设计的行业发展。0 了解学习UI的正确知识。0 掌握UI设计的制作流程。教学重点0熟练掌握UI设计的基本概念。0 了解并掌握UI设计的常用软件。0 掌握UI设计的行业发展。教学难点了解学习UI的正确知识。教学设计1、教学思路：通过认识UI设计了解UI设计的相关概念、特点、原则、常用软件和学 习方法。2、教学手段：通过软件功能解析深入学习软件功能特点。3、教学资料及要求：根据相关的工具和命令进行简单的练习和操作。教学内容讨论问题：1

2、、UI设计的常用软件有哪些？内容大纲：具体可结合本项目的PPT课件进行配合讲解。UI设计的基本概念UI设计的常用软件UI设计的发展趋势UI设计的学习方法整体学习作品收集项目临摹项目实战UI设计的项目流程UI设计规范与规则单位介绍设计尺寸适配方案设计结构间距规范文字规范图标尺寸图片比例课堂练习-制作电商类App标签栏在Illustrator软件中,使用多种形状工具绘制图标。在Photoshop软件中,使用矩 形工具和属性面板确定参考线位置，使用置入嵌入对象命令置入图标，使用横排文字 工具输入文字。作业口 QA首页分类发现购物车我的课后习题-制作餐饮类App标签栏在Illustrator软件中，使

3、用多种形状工具绘制图标。在Photoshop软件中，使用 矩形工具和属性面板确定参考线位置，使用置入嵌入对象命令置入图标，使用横排文 字工具输入文字。金CPa首页发现订单我的课时内容UI中的页面设计授课时间360分钟课时8教学目标0掌握App的闪屏页制作。0掌握App的引导页制作。0掌握App的首页制作。0 掌握App的个人中心页制作。0 掌握App的详情页制作。0 掌握App的注册登录页制作。教学重点0 了解App的闪屏页制作。0 掌握App的引导页制作方法和技巧。EI掌握App的首页制作方法。教学难点App的个人中心页制作方法和应用技巧。教学设计1、教学思路：（1）通过对课堂案例的讲解掌握

4、制作旅游类App闪屏页、制作旅游类 App引导页、制作旅游类App首页、制作旅游类App个人中心页、制作旅游类App 酒店详情页、制作旅游类App登录页的方法和应用技巧；（2）再通过软件相关功 能的解析深入学习软件功能和制作特色；（3）再通过课堂练习巩固软件功能及页面 设计的方法；（4）最后通过课后习题消化所学软件知识，提高页面设计的设计能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件功能；（2）通过软件功能解 析深入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应 用能力。3、教学资料及要求：在网上或现实生活中找一些页面进行设计，来加深学员对知识点 的理解，拓

5、展实际应用能力。教学内容讨论问题：1、页面设计的特点是什么？2、首页的类型有哪几种？内容大纲：具体可结合本项目的PPT课件进行配合讲解。闪屏页闪屏页的概念闪屏页的类型课堂案例-制作旅游类App闪屏页线面图标的基础设计引导页的概念引导页的类型课堂案例-制作旅游类App引导页首页首页的概念首页的类型课堂案例制作旅游类App首页个人中心页个人中心页的概念课堂案例-制作旅游类App个人中心页详情页详情页的概念课堂案例-制作旅游类App酒店详情页注册登录页注册登录页的概念课堂案例-制作旅游类App登录页课堂练习-制作电商类App页面课后习题-制作餐饮类App页面小结1、掌握App的闪屏页制作。2、掌握A

6、pp的引导页制作。3、掌握App的首页制作。4、掌握App的个人中心页制作。5、掌握App的详情页制作。6、掌握App的注册登录页制作。5.7课堂练习-制作电商类App页面使用圆角矩形工具、矩形工具椭圆工具和直线工具绘制形状，使用置入嵌入对象 命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作 弥散投影，使用横排文字工具输入文字。作业48.9.1MJl” WB京,一本0卫变线20B/H无0satw. BVB *MMea mr. ”公”Vtvs9，小n晶SOV?: *B5.8课后习题-制作餐饮类App页面使用圆角矩形工具、矩形工具椭圆工具和直线工具绘制形状，使用置入嵌入对

7、象 命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作 弥散投影，使用横排文字工具输入文字。优选新鲜食材欢迎登录188*8888多种餐点任您挑选*多厅为电物供m费0务,父间免费配送即刻享用无怆您星电珞修定&用络ftf将为W免给国岸 算三Qw aaasucVIP RiiHBftnacaIt的岛产 tlfiX ft& nnrjH69528 A-Opn.“rA-Opn._o 冲.kod。九 a109aiJMn.9ft *ogiRjBtn.9n ioqffjnn9nIo9o_dplkgiXOJock.bJcoa.UWf卬Jg.qM io/njcsad k9o*.d3229O O

8、 x| x |logUJccR.oKfc togkJcc*.K*Awjc.ci&wd人 2tQ2aN课后习题-标注餐饮类App登录页并切图命名使用PxCook软件标注页面，使用Cutterman进行切图，按照UI页面命名规范对切 图效果进行命名。9：41M ,欢迎登录.MB188*8888KClOIxpoggO2*（xx）X芟用。0M2刃 WWOIxpogogin,bn.che_gj8.3P 加UtXptogin_kon.ech x.dHau2 Mp1、掌握UI设计的基本概念。2、掌握UI设计的常用软件。小结3、了解UI设计的行业发展。4、了解学习UI的正确知识。5、掌握UI设计的制作流程。1

9、、掌握线性图标的制作。小结2、掌握面性图标的制作。3、掌握线面图标的制作。课堂练习-制作电商类App线性图标使用“X”、“丫”、“宽”和“高”工具进行调整使图标符合设计规范，扩展外观变 成真实图像。而非Q 2P区首页分类发现购物车我的作业课后习题-制作餐饮类App面性图标课时 内容UI中的控件设计授课时间360分钟课时8教学 目标了解控件的基础知识。0掌握按钮控件的制作。掌握选择控件的制作。0掌握加减控件的制作。掌握分段控件的制作。掌握页面控件的制作。0掌握反馈控件的制作。掌握文本框控件的制作。教学 重占0掌握控件的基础知识。0掌握按钮控件的制作。教学 难点了解并掌握选择控件的制作。教学 设计

10、1、教学思路：（1）通过对课堂案例的讲解掌握制作旅游类App按钮控件、制作旅游类App 选择控件、制作旅游类App加减控件、制作旅游类App分段控件、制作旅游类App页面 控件、制作旅游类App反馈控件、制作旅游类App文本框控件的方法和技巧：（2）再通 过软件相关功能的解析深入学习软件功能和制作特色；（3）再通过课堂练习巩固软件功 能及制作控件设计的应用技巧；（4）最后通过课后习题消化所学软件知识，提高制作控 件设计的能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件功能；（2）通过软件功能解析深 入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应用能力。3、教

11、学资料及要求：在网上或现实生活中找一些控件进行制作，来加深学员对知识点的理 解，拓展实际应用能力。教学内容讨论问题：1、控件设计有哪几种分类？2、控件设计的特点是什么？内容大纲：具体可结合本项目的PPT课件进行配合讲解。控件的初始控件的概念控件的获取线性图标的基础设计按钮控件的概念按钮控件的类型按钮控件的规则课堂案例-制作旅游类App按钮控件选择控件的设计331选择控件的概念33.2选择控件的类型333选择控件的规则课堂案例-制作旅游类App选择控件加减控件的设计加减控件的概念加减控件的类型加减控件的规则课堂案例-制作旅游类App加减控件分段控件的设计分段控件的概念分段控件的类型分段控件的规则

12、课堂案例-制作旅游类App分段控件页面控件的设计页面控件的概念页面控件的类型页面控件的规则课堂案例-制作旅游类App页面控件反馈控件的设计反馈控件的概念反馈控件的类型反馈控件的规则课堂案例制作旅游类App反馈控件文本框控件的设计文本框控件的概念文本框控件的类型文本框控件的规则课堂案例制作旅游类App文本框控件课堂练习制作电商类App文本框控件课后习题-制作餐饮类App按钮控件小结1、了解控件的基础知识。2、掌握按钮控件的制作。3、掌握选择控件的制作。4、掌握加减控件的制作。5、掌握分段控件的制作。6、掌握页面控件的制作。7、掌握反馈控件的制作。8、掌握文本框控件的制作。课时内容UI中的组件设计

13、授课时间180分钟课时4教学目标0 了解组件的基础知识。0掌握导航栏的设计。0掌握标签栏的设计。0掌握金刚区的设计。0掌握瓷片区的设计。教学重点0掌握组件的基础知识。0 了解导航栏的设计。0 了解并掌握标签栏的设计。教学难点了解并掌握金刚区的设计。教学设计1、教学思路：（1）通过对课堂案例的讲解掌握制作制作旅游类App导航栏、制作旅 游类App标签栏、制作旅游类App金刚区、制作旅游类App瓷片区的方法和技巧；（2）再通过软件相关功能的解析深入学习软件功能和制作特色；（3）再通过课堂 练习巩固软件功能及组件设计的应用技巧；（4）最后通过课后习题消化所学软件知 识，提高面性组件设计的能力。2、教学手段：（1）通过课堂案例快速熟悉制作思路和软件功能；（2）通过软件功能解 析深入学习软件功能和制作特点。（3）通过课堂练习和课后习题提高学生的实际应 用能力。3、教学资料及要求：在网上或现实生活中找一些组件进行设计，来加深学员时知识点 的理解，拓展实际应用能力。教学内容讨论问题：1、组件设计由哪些组成部分？2、瓷片区有哪些规范？内容大纲：具体可结合本项目的PPT课件进行配合讲解。组件的初识组件的概念组件的获取导航栏的设计导航栏的概念导航栏的类型导航栏的规则课堂案例-制作旅游类