PhotoshopCCUI设计案例教程教学教案.pdf

《PhotoshopCCUI设计案例教程教学教案.pdf》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程教学教案.pdf（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、Photoshop CC UI 设计案例教程 教学教案 第1讲 课时内容 初识 UI 设计 授课时间 90 分钟 课时 2 教学目标 了解 UI 设计的相关概念。了解 UI 设计项目流程。了解 UI 设计的风格表现。了解 UI 设计的行业发展。了解 UI 设计的学习方法。教学重点 了解 UI 设计的相关概念与常用软件。教学难点 掌握 UI 设计的学习方法。教学设计 1、教学思路：（1）通过对 UI 设计的相关概念、项目流程、风格表现和行业发展的讲解，可以对 UI 设计有一个宏观的认识；（2）通过 UI 设计的学习方法的讲解，可以更好的了解如何学习 UI 设计。2、教学手段：（1）通过资料了解

2、UI 设计的基本概念；（2）通过深入讲解了解 UI 设计的项目流程、风格表现、行业发展和学习方法。教学内容 讨论问题：1、UI 设计的常用软件有哪些？2、UI 设计的学习方法有哪几类？内容大纲：具体可结合本项目的 PPT 课件进行配合讲解。1.1 UI 设计的相关概念 1.1.1 UI 设计的概念 1.1.2 UI 与 WUI 和 GUI 1.1.3 UI 设计常用术语中英文对照 1.1.4 UI 设计常用软件 1.2 UI 设计项目流程 1.2.1 项目设计流程 1.2.2 UI 设计流程 1.3 UI 设计的风格表现 1.4 UI 设计的行业发展 1.4.1 UI 设计行业现状 1.4.2

3、 UI 设计发展趋势 1.5 UI 设计的学习方法 小结 1、了解 UI 设计的相关概念、项目流程、风格表现和行业发展。2、掌握 UI 设计的学习方法。第2讲 课时内容 图标设计 授课时间 90 分钟 课时 2 教学目标 了解图标的基础知识。熟练掌握图标的设计规范。了解图标的风格类型。教学重点 熟练掌握图标的设计流程和原则。教学难点 了解并掌握图标的尺寸和单位。教学设计 1、教学思路：（1）通过对课堂实训案例的讲解掌握绘制扁平化风格-单色面性图标的方法和技巧；（2）再通过相关的解析掌握图标的基础知识、设计规范和风格类型；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂

4、实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的扁平化图标进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容 讨论问题：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 扁平化风格

5、 2.3.3 拟物风格 2.3.4 微拟物风格 2.3.5 立体风格 2.4 课堂案例绘制扁平化风格-单色面性图标 2.5 课堂练习 2.5.1 课堂练习绘制扁平化风格-不透明色块面性图标 2.5.2 课堂练习绘制扁平化风格-微渐变面性图标 2.6 课后习题 2.6.1 课后习题绘制扁平化风格-光影效果图标 2.6.2 课后习题绘制扁平化风格-折纸投影图标 小结 1.了解图标的基础知识（概念、设计的流程、设计的原则）2.掌握图标的设计规范（iOS 系统中的图标尺寸及单位、Android 系统中的图标尺寸及单位、图标的视觉统一、图标的清晰度）3.了解图标的风格类型（像素风格、扁平化风格、拟物风格

6、、微拟物风格和立体风格）作业 2.5.1 课堂练习绘制扁平化风格-不透明色块面性图标 使用“椭圆形”工具绘制灯泡主体，使用“圆角矩形”工具和“多边形”工具绘制其他部分。2.5.2 课堂练习绘制扁平化风格-微渐变面性图标 使用“渐变叠加”命令绘制背景，使用“多边形”工具、“圆角矩形”工具、“矩形”工具、“椭圆形”工具和“合并形状”命令、“减去顶层形状”命令绘制其他部分。使用“添加图层蒙版”命令和“画笔”工具擦除不需要的部分。2.6.1 课后习题绘制扁平化风格-光影效果图标图标 使用“渐变叠加”命令绘制背景，使用“圆角矩形”工具、“矩形”工具、“椭圆”工具和“合并形状”命令、“减去顶层形状”命令绘

7、制其他部分。使用“剪切蒙版”命令置入渐变效果。2.6.2 课后习题绘制扁平化风格-折纸投影图标 使用“渐变叠加”命令绘制背景，使用“圆角矩形”工具、“矩形”工具、“椭圆形”工具和“减去顶层形状”命令绘制其他部分，使用“剪切蒙版”命令置入渐变效果。第3讲 课时内容 App 界面设计 授课时间 360 分钟 课时 8 教学目标 了解 App 的基础知识。熟练掌握 App 设计的规范。了解 App 常用界面类型的种类。教学重点 熟练掌握 iOS 和 Android 系统对于 App 的设计规范。教学难点 熟练掌握 App 设计的流程。教学设计 1、教学思路：（1）通过对课堂实训案例的讲解掌握制作侃侃

8、 App 的方法和技巧；（2）再通过相关的解析掌握 App 的基础知识、App 设计的规范和 App 常用的界面类型；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的 App 界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容 讨论问题：1、A pp 的概念是什么？2、App 常用的界面类型有哪几种？内容大纲：具体可结合本项目的 PPT 课件进行配合讲解。3.1 App 基础知识 3.1.1 App 的概念 3.1.2 App

9、设计的流程 3.1.3 App 设计的原则 3.2 App 设计的规范 3.2.1 iOS 设计规范 3.2.2 Android 设计规范 3.3 App 常用界面类型 3.3.1 闪屏页 3.3.2 引导页 3.3.3 首页 3.3.4 个人中心页 3.3.5 详情页 3.3.6 注册登录页 3.4 课堂案例制作侃侃 App 3.5 课堂练习制作 Shine App 3.6 课后习题制作 Circle App 小结 1、了解 App 的基础知识（概念、设计的流程和设计的原则）。2、掌握 App 设计的规范（iOS 设计规范和 Android 设计规范）。3、了解 App 常用界面类型（闪屏页

10、、引导页、首页、个人中心页、详情页和注册登录页）。作业 3.5 课堂练习制作 Shine APP 使用“直线”工具、“椭圆”工具和“圆角矩形”工具绘制图形，使用“渐变叠加”命令为图形添加效果，使用“剪贴蒙版”命令为图片添加蒙版，使用“横排文字”工具输入文字。3.6 课后习题制作 Circle APP 使用“直线”工具、“椭圆形”工具和“圆角矩形”工具绘制图形，使用“渐变叠加”命令为图形添加效果，使用“剪贴蒙版”命令为图片添加蒙版，使用“横排文字”工具输入文字。第4讲 课时内容 网页界面设计 授课时间 360 分钟 课时 8 教学目标 了解网页设计基础知识。熟练掌握网页设计的规范。了解网页常用界

11、面类型。教学重点 熟练掌握网页设计的规范。教学难点 掌握网页设计的流程。教学设计 1、教学思路：（1）通过对课堂实训案例的讲解掌握制作 Easy Life 家居电商网站首页、制作 Easy Life 家居电商网站产品列表页和制作 Easy Life 家居电商网站产品详情页的方法；（2）再通过软件相关功能的解析掌握网页设计的基础知识、网页设计的规范和常用界面类型；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的网页界面进行临摹制作，来加深学员对知识点

12、的理解和提高实际应用能力。教学内容 讨论问题：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 课堂案例制作 Easy Life 家居电商网站 4.4.1 课堂案例制作 Easy Life 家居电商网站首页

13、4.4.2 课堂案例制作 Easy Life 家居电商网站产品列表页 4.4.3 课堂案例制作 Easy Life 家居电商网站产品详情页 4.5 课堂练习制作 Artsy 家居电商网站 4.6 课后习题制作装饰家居电商网站 小结 1、了解网页设计基础知识（概念、流程和原则）。2、掌握网页设计的规范（网页设计尺寸及单位、界面结构、布局、文字和图标）。3、网页常用界面类型（首页、列表页、详情页、专题页、控制台页和表单页）。作业 4.5 课堂练习制作 Artsy 家居电商网站 使用“置入”命令置入图片，使用图层蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆形”工具和“

14、直线”工具绘制基本形状。4.6 课后习题制作装饰家居电商网站 使用“置入”命令置入图片，使用图层蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具和“直线”工具绘制基本形状。第5讲 课时内容 软件界面设计 授课时间 360 分钟 课时 8 教学目标 了解软件界面设计基础知识。熟练掌握软件界面设计的规范。了解软件常用界面类型。教学重点 熟练掌握软件界面设计的规范。教学难点 掌握软件界面设计的流程。教学设计 1、教学思路：（1）通过对课堂实训案例的讲解掌握制作 Song 音乐播放器软件首页、制作 Song 音乐播放器软件歌单页和制作 Song 音乐播放器软件歌曲列表页的方法；（2

15、）再通过软件相关功能的解析掌握软件界面设计的基础知识、软件界面设计的规范和常用界面类型；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的软件界面进行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容 讨论问题：1、软件界面设计的概念是什么？2、软件设计的图标有哪几种类型？内容大纲：具体可结合本项目的 PPT 课件进行配合讲解。5.1 软件界面设计基础知识 5.1.1 软件界面设计的概念 5.1.2 软件界面设计的流程 5.1.3 软件界

16、面设计的原则 5.2 软件界面设计的规范 5.2.1 软件设计的尺寸及单位 5.2.2 软件设计的界面结构 5.2.3 软件设计的布局 5.2.4 软件设计的文字 5.2.5 软件设计的图标 5.3 软件常用界面类型 5.4 课堂案例制作音乐播放器软件 5.4.1 课堂案例制作 Song 音乐播放器软件首页 5.4.2 课堂案例制作 Song 音乐播放器软件歌单页 5.4.3 课堂案例制作 Song 音乐播放器软件歌曲列表页 5.5 课堂练习制作 More 音乐播放器软件 5.6 课后习题制作 CoolPlayer 音乐播放器软件 小结 1、了解软件界面设计基础知识（概念、流程和原则）。2、掌

17、握软件界面的规范（网页设计尺寸及单位、界面结构、布局、文字和图标）。3、软件常用界面类型（启动页、着陆页、集合页、主/细节页、详细信息页和表单页）。作业 5.5 课堂练习制作 More 音乐播放器软件 使用“置入”命令置入图片，使用剪贴蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆形”工具和“直线”工具绘制基本形状。5.6 课后习题制作 CoolPlayer 音乐播放器软件 使用“置入”命令置入图片，使用剪贴蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆形”工具和“直线”工具绘制基本形状。第6讲 课

18、时内容 游戏界面设计 授课时间 180 分钟 课时 4 教学目标 了解游戏界面设计基础知识。熟练掌握游戏界面设计的规范。了解游戏常用界面类型。教学重点 熟练掌握游戏界面设计的规范。教学难点 掌握游戏界面设计的流程。教学设计 1、教学思路：（1）通过对课堂实训案例的讲解掌握制作水果消消消游戏界面的方法；（2）再通过软件相关功能的解析掌握游戏界面设计的基础知识、游戏界面设计的规范和常用界面类型；（3）最后通过课堂练习和课后习题消化所学知识。2、教学手段：（1）通过课堂实训案例熟悉设计规范和软件功能；（2）通过课堂练习和课后习题提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的游戏界面进

19、行临摹制作，来加深学员对知识点的理解和提高实际应用能力。教学内容 讨论问题：1、游戏界面设计的流程有哪些？2、游戏界面设计有几种常用的界面布局？内容大纲：具体可结合本项目的 PPT 课件进行配合讲解。6.1 游戏界面设计的基础知识 6.1.1 游戏界面设计的概念 6.1.2 游戏界面设计的流程 6.1.3 游戏界面设计的原则 6.2 游戏界面设计的规范 6.2.1 游戏界面设计的尺寸及单位 6.2.2 游戏界面设计的界面结构 6.2.3 游戏界面设计的布局 6.2.4 游戏界面设计的文字 6.2.5 游戏界面设计的图标 6.3 游戏常用界面类型 6.4 课堂案例制作水果消消消游戏 6.5 课堂

20、练习制作 Boom 游戏 6.6 课后习题制作 Pet Fun 游戏 小结 1、了解游戏界面设计基础知识（概念、流程和原则）。2、掌握游戏界面设计的规范（游戏界面的设计尺寸及单位、界面结构、布局、文字和图标）。3、游戏常用界面类型（启动界面、主菜单界面、关卡界面、操作界面、胜利界面和商店界面）。作业 6.5 课堂练习制作 Boom 游戏 使用新建参考线命令新建参考线，使用“置入嵌入对象”命令导入图片调整大小位置，使用“描边”命令给文字添加边框，使用“投影”命令给文字和图形添加投影，使用“颜色叠加”命令制作背景图。6.6 课后习题制作 Pet Fun 游戏 使用新建参考线命令新建参考线，使用“置入嵌入对象”命令导入图片调整大小位置，使用“描边”命令给文字添加边框，使用“斜面和浮雕”、“投影”命令给文字和图形添加效果，使用“渐变叠加”命令制作背景图。