《UI设计（项目式全彩微课版）》教案全套

《UI设计（项目式全彩微课版）》配套教学教案课时内容走进UI设计的世界—UI设计基础授课时间360分钟课时8教学目标理解UI设计的基本概念。了解UI设计的常用软件。熟悉UI设计的项目流程。熟悉UI设计的软件操作。掌握UI设计的规范与规则。培养对UI设计的基本兴趣。教学重点熟悉UI设计的项目流程。熟悉UI设计的软件操作。教学难点掌握UI设计的规范与规则。教学设计教学思路：（1）通过对相关知识的讲解理解UI设计的基本概念；（2）通过任务式案例的讲解掌握UI设计的项目流程。教学手段：（1）通过任务引入和设计理念引导学生快速了解其中的设计思路；（2）通过任务知识的解析深入学习软件功能和制作特色；（3）通过任务实施的解析掌握制作方法；（4）通过项目演练，提高学生的实际应用能力。教学资料及要求：除了任务式案例中讲解的软件基本操作外，还可以根据需要继续对软件进行熟悉和操作。教学内容讨论问题：1、UI设计都有哪些基本要求？内容大纲：具体可结合本项目的PPT课件进行配合讲解。相关知识：了解UI设计的发展趋势任务1.1理解UI设计的基本概念1.1.1任务引入1.1.2任务知识：UI设计的基本概念1.1.3任务实施任务1.2了解UI设计的常用软件1.2.1任务引入1.2.2任务知识：UI设计的常用软件1.2.3任务实施任务1.3熟悉UI设计的项目流程1.3.1任务引入1.3.2任务知识：UI设计的项目流程1.3.3任务实施任务1.4掌握UI设计规范与规则1.4.1任务引入1.4.2任务知识：UI设计规范与规则1.4.3任务实施小结理解UI设计的基本概念；了解UI设计的常用软件；熟悉UI设计的项目流程；熟悉UI设计的软件操作；掌握UI设计的规范与规则。

课时内容设计趣味的图标—UI图标设计授课时间450分钟课时10教学目标掌握线性图标的风格特点。掌握面性图标的风格特点。掌握线面图标的风格特点。掌握线性图标的制作方法。掌握面性图标的制作方法。掌握线面图标的制作方法。培养良好的UI图标设计劳动习惯。培养一定的UI图标设计创新能力和艺术审美能力。教学重点掌握线性图标、面性图标、线面图标的制作方法。教学难点培养一定的UI图标设计创新能力和艺术审美能力。教学设计教学思路：（1）通过相关知识的讲解了解图标的风格特点；（2）通过任务引入引导学生了解任务学习的要点；（3）通过设计理念确认设计的构思过程和主导思想；（4）通过任务实施的解析快速熟悉UI图标的设计制作过程；（5）通过项目演练可以拓展学生的认知和实际应用能力。教学手段：（1）通过对相关知识的讲解了解图标的风格特点；（2）通过任务式案例的讲解掌握不同图标的制作方法和技巧；（3）通过项目演练增强对UI图标设计的认识。教学资料及要求：在网上找一些简单的UI图标进行制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、UI图标常用到那些工具和命令？内容大纲：具体可结合本项目的PPT课件进行配合讲解。相关知识：UI图标的风格类型任务2.1设计旅游类App线性图标2.1.1任务引入2.1.2设计理念2.1.3任务知识：Illustrator-变换命令2.1.4任务实施任务2.2设计旅游类App面性图标2.2.1任务引入2.2.2设计理念2.2.3任务知识：Photoshop-合并形状命令、渐变工具、不透明度选项2.2.4任务实施任务2.3设计旅游类App线面图标2.3.1任务引入2.3.2设计理念2.3.3任务知识：Illustrator-属性面板、扩展外观命令2.3.4任务实施任务2.4项目演练——设计电商类App线性图标2.4.1任务引入2.4.2设计理念任务2.5项目演练——设计餐饮类App面性图标2.5.1任务引入2.5.2设计理念小结掌握线性图标、面性图标、线面图标的风格特点；掌握线性图标、面性图标、线面图标的制作方法；培养良好的UI图标设计劳动习惯、创新能力和艺术审美能力。作业2.4.1任务引入本任务通过学习使用软件Illustrator绘制电商类App标签栏中的“购物车”图标，掌握线性图标的设计要点与制作方法。2.4.2设计理念使用“属性”面板进行调整使图标符合设计规范，扩展外观变成真实图像。2.5.1任务引入本任务通过学习使用软件Illustrator绘制餐饮类App标签栏中的“订单”图标，掌握面性图标的设计要点与制作方法。2.5.2设计理念使用“属性”面板进行调整使图标符合设计规范，扩展外观变成真实图像。

课时内容制作独特的控件—UI控件设计授课时间450分钟课时10教学目标了解UI控件的基本概念。明确UI控件的获取方法。了解UI控件的设计思路。掌握UI控件的制作方法。培养对UI控件的审美鉴赏能力。培养对UI控件的设计创意能力。教学重点了解UI控件的设计思路。掌握UI控件的制作方法。教学难点培养对UI控件的审美鉴赏能力。培养对UI控件的设计创意能力。教学设计教学思路：（1）通过相关知识的讲解了解UI控件的基本概念和获取方法；（2）通过任务引入引导学生了解任务学习的要点；（3）通过设计理念确认设计的构思过程和主导思想；（4）通过任务知识的解析了解设计中的软件功能应用；（5）通过任务实施的解析快速熟悉UI控件的设计制作过程；（6）通过项目演练可以拓展学生的认知和实际应用能力。教学手段：（1）通过对相关知识的讲解了解UI控件设计基础；（2）通过任务式案例的讲解掌握不同UI控件的制作方法和技巧；（3）通过项目演练增强对UI控件的认识。教学资料及要求：在网上找一些简单的UI控件进行制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、UI控件设计的设计网格有哪些？2、UI控件设计中常用到哪些工具和命令？内容大纲：具体可结合本项目的PPT课件进行配合讲解。相关知识：UI控件设计基础知识任务3.1设计旅游类App按钮控件3.1.1任务引入3.1.2设计理念3.1.3任务知识：圆角矩形工具、横排文字工具3.1.4任务实施任务3.2设计旅游类App选择控件3.2.1任务引入3.2.2设计理念3.2.3任务知识：变换命令3.2.4任务实施任务3.3设计旅游类App加减控件3.3.1任务引入3.3.2设计理念3.3.3任务知识：置入嵌入对象命令3.3.4任务实施任务3.4设计旅游类App分段控件3.4.1任务引入3.4.2设计理念3.4.3任务知识：添加图层蒙版命令、画笔工具、减去顶层形状命令3.4.4任务实施任务3.5设计旅游类App页面控件3.5.1任务引入3.5.2设计理念3.5.3任务知识：直线工具3.5.4任务实施任务3.6设计旅游类App反馈控件3.6.1任务引入3.6.2设计理念3.6.3任务知识：椭圆工具3.6.4任务实施任务3.7设计旅游类App文本框控件3.7.1任务引入3.7.2设计理念3.7.3任务知识：字符面板3.7.4任务实施任务3.8项目演练-设计电商类App文本框控件3.8.1任务引入3.8.2设计理念任务3.9项目演练-设计餐饮类App按钮控件3.9.1任务引入3.9.2设计理念小结了解UI控件的基本概念。明确UI控件的获取方法。了解UI控件的设计思路。掌握UI控件的制作方法。作业3.8.1任务引入本任务通过学习使用软件Photoshop绘制电商类App文本框控件，掌握文本框控件的设计要点与制作方法。3.8.2设计理念在设计过程中，围绕电商类App文本框控件进行创意。整体呈现出编辑文本、操作高效的视觉效果。线性文本框的弱化有助于简化布局。3.9.1任务引入本任务通过学习使用软件Photoshop绘制餐饮类App按钮控件，掌握按钮控件的设计要点与制作方法。3.9.2设计理念在设计过程中，围绕餐饮类App按钮控件进行创意。图标选灰色和橙色两种颜色，可以更好地区别不同的层级关系。同时橙色既能明确操作又能吸引用户。

课时内容搭建丰富的组件—UI组件设计授课时间450分钟课时10教学目标了解UI控件的基本概念。明确UI控件的获取方法。掌握各种组件的设计思路。掌握各种组件的制作方法。培养对组件的审美鉴赏能力。培养对组件的设计创意能力。教学重点掌握各种组件的设计思路。掌握各种组件的制作方法。教学难点培养对组件的审美鉴赏能力。培养对组件的设计创意能力。教学设计教学思路：（1）通过相关知识的讲解了解UI组件设计的概念和设计风格；（2）通过任务引入引导学生了解任务学习的要点；（3）通过设计理念确认设计的构思过程和主导思想；（4）通过任务知识的解析了解设计中的软件功能应用；（5）通过任务实施的解析快速熟悉UI组件设计制作过程；（6）通过项目演练可以拓展学生的认知和实际应用能力。教学手段：（1）通过对相关知识的讲解了解UI组件设计基础；（2）通过任务式案例的讲解掌握不同UI组件的制作方法和技巧；（3）通过项目演练增强对组件设计的认识。教学资料及要求：在网上找一些不同类型的UI组件进行制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、UI组件设计技巧有哪些？2、UI组件构成元素有哪些？内容大纲：具体可结合本项目的PPT课件进行配合讲解。相关知识：UI组件设计基础知识任务4.1设计旅游类App导航栏4.1.1任务引入4.1.2设计理念4.1.3任务知识：属性面板4.1.4任务实施任务4.2设计旅游类App标签栏4.2.1任务引入4.2.2设计理念4.2.3任务知识：Illustrator-矩形工具、钢笔工具、直接选择工具4.2.4任务实施任务4.3设计旅游类App金刚区4.3.1任务引入4.3.2设计理念4.3.3任务知识：直接选择工具、渐变叠加命令4.3.4任务实施任务4.4设计旅游类App瓷片区4.4.1任务引入4.4.2设计理念4.4.3任务知识：剪贴蒙版命令、颜色叠加命令4.4.4任务实施任务4.5项目演练-设计电商类App标签栏4.5.1任务引入4.5.2设计理念任务4.6项目演练-设计餐饮类App标签栏4.6.1任务引入4.6.2设计理念小结了解UI控件的基本概念；明确UI控件的获取方法；掌握各种组件的设计思路；掌握各种组件的制作方法。作业4.5.1任务引入本任务通过学习使用软件Illustrator和Photoshop绘制电商类App标签栏，掌握标签栏的设计要点与制作方法。4.5.2设计理念在设计过程中，围绕电商类App标签栏进行创意。整体设计以图标+文字的方式进行展示，拥有较高的识别度，具有操作灵活、指导用户的特点。白色的背景样式，使背景与标签栏区分明显。线性（未选中状态）-线性（选中状态），这种方式下的切换状态精致简洁，使整体适用于电商类产品。4.6.1任务引入本任务通过学习使用软件Illustrator和Photoshop绘制餐饮类App标签栏，掌握标签栏的设计要点与制作方法。4.6.2设计理念在设计过程中，围绕餐饮类App标签栏进行创意。整体设计以图标+文字的方式进行展示，拥有较高的识别度，具有操作灵活、指导用户的特点。白色的背景样式，使背景与标签栏区分明显。面性（未选中状态）-面性（选中状态），这种方式下的切换状态安全厚重，使整体适用于餐饮类产品。

课时内容打造生动的页面—UI页面设计授课时间720分钟课时16教学目标掌握UI页面的设计规则。掌握UI页面的核心模块。了解UI页面的设计思路。掌握UI页面的制作方法。培养对UI页面的审美鉴赏能力。培养对UI页面的设计创意能力。教学重点掌握UI页面的设计规则。掌握UI页面的核心模块。了解UI页面的设计思路。掌握UI页面的制作方法。教学难点培养对UI页面的审美鉴赏能力。培养对UI页面的设计创意能力。教学设计教学思路：（1）通过相关知识的讲解了解UI页面的设计规则；（2）通过任务引入引导学生了解任务学习的要点；（3）通过设计理念确认设计的构思过程和主导思想；（4）通过任务知识的解析了解设计中的软件功能应用；（5）通过任务实施的解析快速熟悉UI页面的设计制作过程；（6）通过项目演练可以拓展学生的认知和实际应用能力。教学手段：（1）通过对相关知识的讲解了解UI页面设计基础；（2）通过任务式案例的讲解掌握不同UI页面的制作方法和技巧；（3）通过项目演练增强对UI页面设计的认识。教学资料及要求：在网上找一些不同类型的UI页面进行制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、UI页面的设计规则是什么？2、UI页面的核心模块有哪些？内容大纲：具体可结合本项目的PPT课件进行配合讲解。相关知识：UI页面的风格类型任务5.1设计旅游类App闪屏页5.1.1任务引入5.1.2设计理念5.1.3任务知识：综合运用Photoshop软件制作旅游类App闪屏页5.1.4任务实施任务5.2设计旅游类App引导页5.2.1任务引入5.2.2设计理念5.2.3任务知识：综合运用Photoshop软件制作旅游类App引导页5.2.4任务实施任务5.3设计旅游类App首页5.3.1任务引入5.3.2设计理念5.3.3任务知识：综合运用Photoshop软件制作旅游类App首页5.3.4任务实施任务5.4设计旅游类App个人中心页5.4.1任务引入5.4.2设计理念5.4.3任务知识：综合运用Photoshop软件制作旅游类App个人中心页5.4.4任务实施任务5.5项目演练-设计旅游类App详情页5.5.1任务引入5.5.2设计理念任务5.6项目演练-设计旅游类App注册登录页5.6.1任务引入5.6.2设计理念任务5.7项目演练-设计电商类App页面5.7.1任务引入5.7.2设计理念任务5.8项目演练-设计餐饮类App页面5.8.1任务引入5.8.2设计理念小结掌握UI页面的设计规则。掌握UI页面的核心模块。了解UI页面的设计思路。掌握UI页面的制作方法。掌握景深的控制。

作业5.5.1任务引入本任务通过学习使用软件Photoshop设计旅游类App详情页，掌握详情页的设计要点与制作方法。5.5.2设计理念在设计过程中，围绕主题旅游进行创意。背景为纯色和风景图片作为衬托。色彩选取橘黄色、深黄色和浅灰色分别体现了欢快、热情和柔和。字体选用苹方符合设计规范。视觉表现应与任务5.1的设计风格保持一致。整体设计充满特色，契合主题。5.6.1任务引入本任务通过学习使用软件Photoshop设计旅游类App注册登录页，掌握注册登录页的设计要点与制作方法。5.6.2设计理念在设计过程中，围绕主题旅游进行创意。整体设计具有清晰的操作流程。以实际图片作为背景，能够增强用户对产品的期待。色彩选用橙色能够体现旅游的欢快热情并突出重点。字体选用苹方符合设计规范。5.7.1任务引入本任务通过学习使用软件Photoshop绘制电商类App页面，掌握电商类App页面的设计要点与制作方法。5.7.2设计理念在设计过程中，围绕电商类App页面进行创意。整体呈现出简约精致的视觉效果。5.8.1任务引入本任务通过学习使用软件Photoshop绘制餐饮类App页面，掌握餐饮类App页面的设计要点与制作方法。5.8.2设计理念在设计过程中，围绕餐饮类App页面进行创意。整体呈现出具有感染力的视觉效果。

课时内容快速输出UI设计—UI设计输出授课时间450分钟课时10教学目标熟悉UI页面的标注内容。掌握UI页面切图的切图规则。了解UI页面的常用命名。掌握UI页面的标注。掌握UI页面的切图。掌握UI切图的命名。培养良好的UI设计输出习惯。培养一定的团队合作能力。教学重点掌握UI页面的标注。掌握UI页面的切图。掌握UI切图的命名。教学难点培养良好的UI设计输出习惯。培养一定的团队合作能力。教学设计教学思路：（1）通过相关知识的讲解了解UI页面的标注内容和切图规则；（2）通过任务引入引导学生了解任务学习的要点；（3）通过设计理念确认设计的构思过程和主导思想；（4）通过任务知识的解析了解设计中的软件功能应用；（5）通过任务实施的解析快速熟悉UI页面制作过程；（6）通过项目演练可以拓展学生的认知和实际应用能力。教学手段：（1）通过对相关知识的讲解了解UI页面设计基础；（2）通过任务式案例的讲解掌握不同UI页面的制作方法和技巧；（3）通过项目演练增强对UI页面的认识。教学资料及要求：在网上找一些不同类型的UI页面进行制作，来加深学员