《Photoshop CC UI设计案例教程》教学教案

《PhotoshopCCUI设计案例教程》教学教案课时内容初识UI设计授课时间90分钟课时2教学目标掌握UI设计的概念。熟悉UI设计的常用软件。了解UI设计的行业现状与发展趋势。熟悉UI设计中常用的AI工具。教学重点掌握UI设计的项目流程。掌握UI设计的风格。掌握UI设计的学习方法。教学难点掌握UI设计的学习方法。培养UI设计的学习兴趣。培养获取UI设计新知识、新技能、新方法的基本能力。树立文化自信、职业自信。教学设计教学思路：（1）通过对UI设计的相关概念、项目流程、风格表现、行业发展和学习方法的讲解，可以对UI设计有一个宏观的认识；（2）通过UI设计的学习方法的讲解，可以更好的了解如何学习UI设计。教学手段：（1）通过资料了解UI设计的基本概念；（2）通过深入讲解了解UI设计的项目流程、风格表现、行业发展和学习方法。（3）通过AI扩展阅读，巧妙结合UI知识和工具同AI结合。教学内容讨论问题：1、UI设计的常用软件有哪些？2、UI设计的学习方法有哪几类？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1UI设计基础1.1.1UI设计的概念1.1.2WUI和GUI1.1.3UI设计常用术语中英文对照1.2UI设计的常用软件1.3UI设计的项目流程1.3.1项目设计流程1.3.2UI设计流程1.4UI设计的风格1.4.1拟物化风格1.4.2扁平化风格1.5UI设计的行业现状及发展趋势1.5.1UI设计行业现状1.5.2UI设计发展趋势1.6UI设计的学习方法1.7AI扩展阅读1.7.1AI扩展知识1——AI辅助UI设计的常用工具1.7.2AI扩展知识2——AI辅助UI设计的流程小结1、了解UI设计的相关概念、常用软件、项目流程、风格表现和行业发展。2、掌握UI设计的学习方法。3、熟悉UI设计中常用的AI工具。

课时内容图标设计授课时间90分钟课时2教学目标熟熟悉图标的基础知识。掌握图标的设计规范。掌握图标的风格。教学重点明确图标的设计思路。掌握图标的绘制方法。掌握运用AI工具辅助生成图标的方法。教学难点了解并掌握图标的尺寸和单位。培养良好的图标设计习惯。培养对图标设计的审美能力。培养有关图标设计的创意能力。教学设计教学思路：（1）通过对课堂实训案例的讲解掌握绘制扁平化风格的面性图标的方法和技巧；（2）通过软件相关功能的解析掌握图标的基础知识、设计规范和风格类型；（3）通过课堂练习和课后习题消化所学知识。（4）通过AI扩展案例可以在案例制作中巧妙融入AI技术，辅助完成设计。教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。（3）通过AI扩展案例，巧妙结合UI知识和工具同AI结合，提升工作效率。教学资料及要求：在网上找一些简单的扁平化图标进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、图标设计的流程有哪几部分？2、图标有哪些风格类型？内容大纲：具体可结合本项目的PPT课件进行配合讲解。2.1图标的基础知识2.1.1图标的概念2.1.2图标设计的流程2.1.3图标设计的原则2.2图标的设计规范2.2.1图标的尺寸及单位2.2.2图标的视觉统一2.2.3图标的清晰度2.3图标的风格2.3.1拟物化风格2.3.2扁平化风格2.3.33D风格2.3.42.5D风格2.4课堂案例——绘制扁平化风格的面性图标2.5课堂练习2.5.1课堂练习——绘制扁平化风格的不透明色块面性图标2.5.2课堂练习——绘制扁平化风格的微渐变面性图标2.6课后习题2.6.1课后习题——绘制扁平化风格的光影效果图标2.6.2课后习题——绘制扁平化风格的折纸投影图标2.7AI助学图标设计2.7.1AI助学——即梦AI生成3D风格图标2.7.2AI助学——豆包生成2.5D风格图标小结1、了解图标的基础知识（概念、设计的流程、设计的原则）2、掌握图标的设计规范（iOS系统中的图标尺寸及单位、Android系统中的图标尺寸及单位、图标的视觉统一、图标的清晰度）3、了解图标的风格类型（拟物化风格、扁平化风格、3D风格和2.5D风格）4、掌握运用AI工具辅助生成图标的方法。作业2.5.1课堂练习——绘制扁平化风格的不透明色块面性图标使用“椭圆”工具、“矩形”工具和“减去顶层形状”命令绘制灯泡主体，使用“矩形”工具和“椭圆”工具绘制其他部分。2.5.2课堂练习——绘制扁平化风格的微渐变面性图标使用“渐变叠加”命令绘制背景，使用“多边形”工具、“矩形”工具、“椭圆”工具和“合并形状”命令、“减去顶层形状”命令绘制其他部分，使用“添加图层蒙版”命令和“画笔”工具擦除不需要的部分。2.6.1课后习题——绘制扁平化风格的光影效果图标使用“渐变叠加”命令绘制背景，使用“矩形”工具、“椭圆”工具和“合并形状”命令、“减去顶层形状”命令绘制其他部分，使用“剪切蒙版”命令置入渐变效果。2.6.2课后习题——绘制扁平化风格的折纸投影图标使用“渐变叠加”命令绘制背景，使用“矩形”工具、“椭圆”工具和“减去顶层形状”命令绘制其他部分，使用“剪切蒙版”命令置入渐变效果。2.7.1AI助学——即梦AI生成3D风格图标在即梦AI中，使用“图片生成”中的“文本生图片”功能，输入提示词生成3D风格图标。在Photoshop中，使用“导入”命令导入图标，使用“对象选择”工具和“修边”命令抠除图标背景，使用“自由变换”命令调整图标尺寸。2.7.2AI助学——豆包生成2.5D风格图标在豆包中，使用“图像生成”中的“文本生图片”功能，输入提示词生成2.5D风格图标。在Photoshop中，使用“导入”命令导入图标，使用“对象选择”工具和“修边”命令抠除图标背景，使用“自由变换”命令调整图标尺寸。

课时内容App界面设计授课时间360分钟课时8教学目标熟悉App界面的基础知识。掌握App界面的设计规范。了解App常用界面类型的种类。教学重点明确App界面的设计思路。掌握App界面的绘制方法。þ掌握利用AI工具辅助制作App界面的方法。教学难点þ熟练掌握App设计的流程。þ培养良好的App界面设计习惯。þ培养对App界面的审美能力。þ培养App界面设计的创意能力。þ培养判断AI生成的内容是否真实、合理的能力。教学设计教学思路：（1）通过对课堂实训案例的讲解掌握制作畅游旅游App界面的方法和技巧；（2）通过相关的解析掌握App界面设计的基础知识、App界面设计的规范和App常用的界面类型；（3）通过课堂练习和课后习题消化所学知识。（4）通过AI扩展案例可以在案例制作中巧妙融入AI技术，辅助完成设计。教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。（3）通过AI扩展案例，巧妙结合UI知识和工具同AI结合，提升工作效率。教学资料及要求：在网上找一些简单的App界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、App的概念是什么？2、App常用的界面类型有哪几种？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1App界面设计的基础知识3.1.1App的概念3.1.2App界面设计的流程3.1.3App界面设计的原则3.2App界面的设计规范3.2.1iOS界面的设计规范3.2.2Android界面的设计规范3.3App常用的界面类型3.3.1引导页3.3.2闪屏页3.3.3首页3.3.4详情页3.3.5个人中心页3.3.6注册登录页3.4课堂案例——制作畅游旅游App界面3.4.1课堂案例——制作畅游旅游App引导页3.4.2课堂案例——制作畅游旅游App闪屏页3.4.3课堂案例——制作畅游旅游App首页3.4.4课堂案例——制作畅游旅游App酒店详情页3.4.5课堂案例——制作畅游旅游App个人中心页3.4.6课堂案例——制作畅游旅游App登录页3.5课堂练习——制作潮货电商App界面3.6课后习题——制作三餐美食App界面3.7AI助学——妙多AI制作悦途旅游App界面小结1、了解App界面设计的基础知识（概念、设计的流程和设计的原则）。2、掌握App界面设计的规范（iOS设计规范和Android设计规范）。3、了解App常用界面类型（引导页、闪屏页、首页、详情页、个人中心页和注册登录页）。4、掌握利用AI工具辅助制作App界面的方法。作业3.5课堂练习——制作潮货电商App界面使用“矩形”工具“椭圆”工具和“直线”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“属性”控制面板制作弥散投影，使用“横排文字”工具输入文字。

3.6课后习题——制作三餐美食App界面使用“矩形”工具、“椭圆”工具和“直线”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“属性”控制面板制作弥散投影，使用“横排文字”工具输入文字。3.7AI助学——妙多AI制作悦途旅游App界面使用“矩形”工具、“椭圆”工具和“直线”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“属性”控制面板制作弥散投影，使用“横排文字”工具输入文字。

课时内容网页界面设计授课时间360分钟课时8教学目标熟悉网页界面设计的基础知识。掌握网页界面的设计规范。掌握网页常用的界面类型。教学重点þ明确网页界面的设计思路。þ掌握网页界面的绘制方法。þ培养灵活运用AI技术辅助UI设计的能力。教学难点þ掌握网页界面的设计流程。þ培养良好的网页界面设计习惯。þ培养对网页界面的审美能力。þ培养网页界面设计的创意能力。教学设计教学思路：（1）通过对课堂实训案例的讲解掌握制作东方木品家居电商网站界面的方法；（2）通过软件相关功能的解析掌握网页界面设计的基础知识、网页界面的设计规范和常用界面类型；（3）通过课堂练习和课后习题消化所学知识。（4）通过AI扩展案例可以在案例制作中巧妙融入AI技术，辅助完成设计。教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。（3）通过AI扩展案例，巧妙结合UI知识和工具同AI结合，提升工作效率。教学资料及要求：在网上找一些简单的网页界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、网页界面设计中常用的相关单位有哪些？2、网页界面设计的界面结构有哪几部分？内容大纲：具体可结合本项目的PPT课件进行配合讲解。4.1网页界面设计的基础知识4.1.1网页界面设计的概念4.1.2网页界面设计的流程4.1.3网页界面设计的原则4.2页界面的设计规范4.2.1网页界面设计的单位及尺寸4.2.2网页界面设计的界面结构4.2.3网页界面设计的布局4.2.4网页界面设计的文字4.2.5网页界面设计的图标4.3网页常用的界面类型4.4课堂案例——制作东方木品家居电商网站界面4.4.1课堂案例——制作东方木品家居电商网站首页4.4.2课堂案例——制作东方木品家居电商网站产品列表页4.4.3课堂案例——制作东方木品家居电商网站产品详情页4.5课堂练习——制作一点生活家居电商网站界面4.6课后习题——制作臻艺装饰家居电商网站界面4.7AI助学——MasterGO制作尚家家居电商网站界面小结1、了解网页设计基础知识（概念、流程和原则）。2、掌握网页设计的规范（网页设计尺寸及单位、界面结构、布局、文字和图标）。3、网页常用界面类型（首页、列表页、详情页、专题页、控制台页和表单页）。4、培养灵活运用AI技术辅助UI设计的能力。作业4.5课堂练习——制作一点生活家居电商网站界面使用“置入”命令置入图片，使用图层蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆”工具和“直线”工具绘制基本形状。4.6课后习题——制作臻艺装饰家居电商网站界面使用“置入”命令置入图片，使用图层蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具和“直线”工具绘制基本形状。4.7AI助学——MasterGO制作尚家家居电商网站界面在MasterGO中，使用“AI生成界面”功能中的“文本生图片”功能，输入提示词生成尚家家居电商网站界面。使用“插入到画布”功能，插入尚家家居电商网站界面。使用“设计”选项中的“容器”“自动布局”“文字”“填充”“描边”等功能调整生成的尚家家居电商网站界面。课时内容软件界面设计授课时间360分钟课时8教学目标熟悉软件界面设计的基础知识。掌握软件界面的设计规范。掌握软件常用的界面类型。教学重点þ明确软件界面的设计思路。þ掌握软件界面的绘制方法。þ掌握利用AI工具生成软件界面的能力。教学难点þ掌握软件界面设计的流程。þ培养良好的软件界面设计习惯。þ培养对软件界面的审美能力。þ培养软件界面设计的创意能力。教学设计教学思路：（1）通过对课堂实训案例的讲解掌握制作天籁音乐播放器软件界面的方法；（2）通过软件相关功能的解析掌握软件界面设计的基础知识、软件界面设计的规范和常用的界面类型；（3）通过课堂练习和课后习题消化所学知识。4）通过AI扩展案例可以在案例制作中巧妙融入AI技术，辅助完成设计。教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。（3）通过AI扩展案例，巧妙结合UI知识和工具同AI结合，提升工作效率。教学资料及要求：在网上找一些简单的软件界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：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.2.4软件界面设计的文字5.2.5软件界面设计的图标5.3软件常用的界面类型5.4课堂案例——制作天籁音乐播放器软件界面5.4.1课堂案例——制作天籁音乐播放器软件首页5.4.2课堂案例——制作天籁音乐播放器软件歌单页5.4.3课堂案例——制作天籁音乐播放器软件歌曲列表页5.5课堂练习——制作不凡音乐播放器软件界面5.6课后习题——制作酷听音乐播放器软件界面5.7AI助学——MasterGO制作律动音乐播放器软件界面小结了解软件界面设计的基础知识（概念、流程和原则）。掌握软件界面的设计规范（软件界面设计的尺寸及单位、界面结构、布局、文字和图标）。软件常用界面类型（启动页、着陆页、集合页、主/细节页、详细信息页和表单页）。掌握利用AI工具生成软件界面的能力。作业5.5课堂练习——制作不凡音乐播放器软件界面使用置入命令置入图片，使用剪贴蒙版调整图片显示区域，使用横排文字工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具和“直线”工具绘制基本形状。5.6课后习题——制作酷听音乐播放器软件界面使用“置入”命令置入图片，使用剪贴蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具和“直线”工具绘制基本形状。5.7AI助学——MasterGO制作律动音乐播放器软件界面在MasterGO中，使用“AI生成界面”功能中的“文本生图片”功能，输入提示词生成尚家家居电商网站。使用“插入到画布”功能，插入律动音乐播放器软件。使用“设计”选项中的“容器”“自动布局”“文字”“填充”“描边”等功能调整生成的律动音乐播放器软件界面。课时内容游戏界面设计授课时间180分钟课时4教学目标熟悉游戏界面的基础知识。掌握游戏界面的设计规范。教学重点þ明确游戏界面的设计思路。þ掌握游戏界面的绘制方法。þ掌握运用AI工具辅助制作游戏界面的方法。教学难点þ掌握游戏界面的设计流程。þ培养良好的游戏界面设计游戏习惯。þ培养对游戏界面的审美能力。þ培养游戏界面设计的创意能力。教学设计教学思路：（1）通过对课堂实训案例的讲解掌握制作果蔬消消消游戏界面的方法；（2）通过软件相关功能的解析掌握游戏界面设计的基础知识、游戏界面设计的规范和常用界面类型；（3）通过课堂练习和课后习题消化所学知识。（4）通过AI扩展案例可以在案例制作中巧妙融入AI技术，辅助完成设计。教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。（3）通过AI扩展案例，巧妙结合UI知识和工具同AI结合，提升工作效率。教学资料及要求：在网上找一些简单的游戏界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容讨论问题：1、