新建目录
整体教学设计
一、课程基本信息
课程代码 | 课程性质 | 必修课 | |
总学时 | 76学时 | 学分 | 4学分 |
开设学期 | 第4学期 | 适用专业 | 云计算 |
先修课程 | |||
后续课程 | 响应式web开发项目教程、数据库设计、PHP等后台开发课程 | ||
是否为精品课程 | |||
二、课程定位
(一)学生所在专业面向的岗位(群)。初次就业岗、二次晋升岗和未来发展岗。
职业领域 | 岗位面向 | 主要就业岗位 |
界面设计师 | 初始就业岗位 | 网页设计师 |
淘宝美工 | ||
WEB前端设计师 | ||
H5设计师 | ||
目标岗位 | 界面设计师 | |
项目经理 |
(二)写出本课程项目设计时选择的（典型）背景实践岗位，画出其典型工作流程图，标示出这些工作所需的能力、知识和素质。
模块 | 知识要求 | 能力要求 | 素质要求 |
1、艺术瑰丽 2、PS基本知识 3、基础操作 4、抠图 5、修图 6、调色 7、合成 8、特效 9、综合演练 | 1. ps熟练操作 2.按钮设计 3.图标设计 4.网页界面设计规划 5.手机界面及APP界面设计规划 6.播放器界面设计规划 |
1. ps熟练操作能力 2.按钮设计能力 3.图标设计能力 4.网页界面设计规划能力 5.手机界面及APP界面设计规划能力 6.播放器界面设计规划能力 | 1.语言能力：不断提高自己的文字表达能力，能顺畅进行交流； 2.沟通能力：不断提高自己的语言表达和沟通能力，能与有关方进行有效沟通； 3.学习能力：通过不断学习，提升自己业务水平； 4.精神面貌：高效严谨、细致耐心、责任心强、吃苦耐劳；具有良好的团队合作精神；具有市场竞争意识。 |
(三)本课程与中职、高职（专科、本科）、普通高校、培训班同类课程的区别
课程对应岗位：界面设计师
该课程是计算机专业开设的公共必修课程，于大二上学期或下学期开设。小明作为界面设计师的主要日常工作为主线，并贯穿始终，实现图标按钮的设计、网页界面规划设计、软件界面规划设计、手机界面的规划设计、播放器界面规划与设计等业务的统一，通过该课程学习，学生能开展界面设计业务，实现就业与上岗零距离。
本课程与本科、中职和培训班的区别：
本科：注重理论。通过学习，学生能懂得与界面设计师业务有关的理论知识，但是针对各个业务环节的操作动手能力差。
中职和培训班：理论知识和操作知识都较浅，图标按钮技能点进行培训，知识缺乏系统化，缺乏理论基础，培养出来的学生无法胜任更高级的工作岗位。
高职：以工作过程为导向，重点培养学生对完整页面设计师业务流程的操作技能和管理能力。学生既具有必要的理论知识，又具备较强的实操能力。
三、课程目标
界面设计师的主要日常工作为主线，并贯穿始终，实现图标按钮的设计、网页界面规划设计、软件界面规划设计、手机界面的规划设计、播放器界面规划与设计等业务的统一，通过该课程学习，学生能开展界面设计业务，实现就业与上岗零距离。
能力目标：
1、能熟悉UI前端设计的相关理论知识；
2、能熟练操作PS软件；
3、能对设计制作按钮图标，符合界面设计使用需要；
4、能对网站界面进行设计规划；
5、能对软件界面进行设计规划
6、能对播放器界面进行设计规划。
知识目标：
1、熟练掌握PS中基本的操作本知识，能够利用PS中的选框工具及形状工具进行简单的扁平化的设计。
2、掌握PS中颜色以及渐变的设置，熟练应用相关知识进行界面的设计及颜色的搭配。。
3、熟练掌握PS中钢笔的使用，能够利用钢笔进行创作型的设计，也能够利用钢笔进行抠图。
4、熟练掌握PS中变换与自由变换，能够在界面设计过程中灵活应用。
5、熟练掌握图层、图层样式、图层混合模式、图像相关调整命令及滤镜的使用等相关知识，在设计过程中制作出我们想要达到的效果。
6、掌握样式的使用，常用抠图方法及通道抠图，配合钢笔抠图，达到熟练迅速获得想要的素材的能力。
7、掌握设计过程中文字工具的使用，让文字为整体的设计效果增砖添瓦。
8、掌握界面设计版面规划规范及相关尺寸要求，快速规范的设计相关界面，实现就业与上岗零距离。
素质目标：（职业道德、职业素质、职业规范在本课中的具体表现）
1、语言：具有较高的语言表达能力，能对前端界面设计工作进行准确的描述；
2、沟通：不断提高自己的语言表达和沟通能力，能对公司相关业务往来方进行有效沟通；
3、终身学习：不断学习计算机领域新知识、新规定，通过不同的途径不断获取信息等；
4、 调研、分析、决策能力：能对业务进行总结归纳，对数据进行分析和归纳，对办公文件等做出正确的分析判断和决策；
5、 高效严谨、耐心细致、责任心强、吃苦耐劳，具有市场竞争意识，稳定发展业务并不断开拓新业务；
6、具有良好的团队合作精神，在工作岗位上对上级尊重、和同事和睦相处。
四、课程的知识和理论内容：
序号 | 模块（或子模块）名称 | 学时 |
1 | UI基础与按钮设计 | 24 |
2 | 图标设计 | 18 |
3 | 网页设计 | 18 |
4 | 软件界面设计 | 18 |
5 | 手机界面设计 | 18 |
6 | 播放器界面设计 | 12 |
合计 | 108 |
五、能力训练项目设计
综合贯穿项目说明：
界面设计师的主要日常工作为主线，并贯穿始终，实现图标按钮的设计、网页界面规划设计、软件界面规划设计、手机界面的规划设计、播放器界面规划与设计等业务的统一，通过该课程学习，学生能开展界面设计业务，实现就业与上岗零距离。每个模块又分若干个任务，学生在研读项目的同时也完成项目的操作，锻炼学生能独立完成业务操作的能力。
教学组织说明：
1.整个班级分为6个小组，以小组形式完成课堂及课后的业务操作，以培养协作意识。
2.整个教学过程中，学生扮演界面设计师角色完成工作任务。
3.充分发挥学生的主体作用，开展自主式学习、角色式学习、协作式学习、创新式学习；教师发挥引导作用——激励、答疑、纠错开展情景式教学、互动式教学、引导式教学、激励式教。
4.课后学生去小组完成创新项目的操作。
5.课程结束，学生利用实际项目测试知识掌握水平和实际操作能力。
能力训练项目名称：
项目 | 一级子项目 | 二级级子项目 | 能力目标 | 知识目标 | ||
项目一 UI基础与按钮设计 | 第一次第一节课（了解课程内容） | 从总体上认识UI前端设计课程内容，对计UI前端设计课程产生学习兴趣。 | 1.UI设计； | |||
任务1 绘制简洁的开机按钮 | 1.1.1PS界面认识 | 1、PS安装、工作界面认识、PS基本操作能力 3、掌握PS中钢笔工具的使用，并能利用钢笔工具进行不规则翻页按钮的制作能力。 4、掌握PS中图像的转换，能够熟练应用PS，进行金属质感时尚音乐按钮的设计制作能力。 5、能够进行团队之间协作的能力。 | 1. 掌握UI设计的概念、分类、及设计原则。 2. 掌握PS安装、工作界面认识、PS基本操作，能利用PS绘制简洁的开机按钮。 3. 掌握PS渐变色的设置，并能利用PS设计网站主页按钮。 4. 掌握PS中钢笔工具的使用，并能利用钢笔工具进行不规则翻页按钮的制作。 5. 掌握PS中图像的转换，能够熟练应用PS，进行金属质感时尚音乐按钮的设计制作。 | |||
1.1.2 PS使用-扁平化风景图的绘制 | ||||||
1.1.3 简洁开机按钮的绘制 | ||||||
任务2 网站主页按钮的设计 | 1.2.1 渐变工具 | |||||
1.2.2 光盘制作 | ||||||
1.2.3卡通灯笼的绘制 | ||||||
1.2.4 网站主页按钮设计 | ||||||
任务3 制作不规则翻页按钮 | 1.3.1 钢笔工具 | |||||
1.3.2路径与形状的绘制 | ||||||
1.3.3 卡通树的绘制 | ||||||
1.3.4 制作不规则翻页按钮 | ||||||
任务4 金属质感时尚音乐按钮 | 1.4.1 图像大小与1寸照片排版 | |||||
1.4.2 自由变换 | ||||||
1.4.3 酒包装和的制作 | ||||||
1.4.4 金属质感的时尚音乐按钮绘制 | ||||||
项目二 图标设计 | 任务1 IE浏览器的绘制 | 2.1.1 图标知识介绍 | 1. 能够进行团队之间协作的能力。 2. 能够PS中图层的使用，并能利用图层及图层样式进行逼真镜头的设计的能力。 3. 能够PS中画笔的使用，并能利用画笔工具进行仿真西瓜图标的设计的能力。 4. 能够PS中形状工具的使用，并能利用形状工具进行手机APP图标的设计的能力。 | 1. 掌握UI图标设计的相关理论知识及设计原则。 2. 掌握PS中图层的使用，并能利用图层及图层样式进行逼真镜头的设计。 3. 掌握PS中画笔的使用，并能利用画笔工具进行仿真西瓜图标的设计。 4. 掌握PS中形状工具的使用，并能利用形状工具进行手机APP图标的设计。 | ||
2.1.2 IE浏览器的绘制 | ||||||
2.1.3 钢笔抠图 | ||||||
任务2绘制逼真镜头图标 | 2.2.1 图层认识 | |||||
2.2.2 吊坠的制作 | ||||||
2.2.3网络小图标的绘制 | ||||||
2.2.4 逼真镜头图标的绘制 | ||||||
任务3 西瓜图标绘制 | 2.3.1 画笔工具 | |||||
2.3.2 画笔工具在商业中的应用 | ||||||
2.3.3 自定义画笔 | ||||||
2.3.4 剪切蒙版的使用 | ||||||
2.3.5 仿真西瓜图标的绘制 | ||||||
项目三 网页设计 | 任务1 网站导航栏设计 | 3.1.1 网页UI基础 | 1、能够掌握UI网页设计的相关理论知识、设计原则及网页的布局形式，能进行网站导航栏及按钮的设计的能力。 2、能够PS中图层透明度的使用，并能进行网站主体的设计的能力。 3、能够PS中图层的混合模式的使用，并能利用图层混合模式进行网站中广告条的设计的能力。 4、能够PS中蒙版与剪贴蒙版的使用，并能利用其进行网页背景和导航栏的设计的能力。 5、能够进行团队之间协作的能力。 | 1. 掌握UI网页设计的相关理论知识、设计原则及网页的布局形式，能进行网站导航栏及按钮的设计。 2. 掌握PS中图层透明度的使用，并能进行网站主体的设计。 3. 掌握PS中图层的混合模式的使用，并能利用图层混合模式进行网站中广告条的设计。 4. 掌握PS中蒙版与剪贴蒙版的使用，并能利用其进行网页背景和导航栏的设计。 | ||
3.1.2 店招和导航条设计 | ||||||
3.1.3 网站导航栏设计 | ||||||
任务2网页中主体的绘制 | 3.2.1 文字工具的使用 | |||||
3.2.2. 图层不透明度与晶莹水滴制作 | ||||||
3.2.3 网页中主体的绘制 | ||||||
任务3 网站中广告条绘制 | 3.3.1 图层混合模式 | |||||
3.3.2 背景图案的制作 | ||||||
3.3.3 图层叠加、柔光、强光 | ||||||
3.3.4 网站中广告条绘制 | ||||||
任务4 网页背景和导航栏绘制 | 3.4.1 蒙版 | |||||
3.4.2 蒙版在商业中应用 | ||||||
3.4.3 蒙版在海报设计中应用 | ||||||
3.4.4 网页背景和导航栏绘制 | ||||||
项目四 软件界面设计 | 任务1 输入法皮肤的绘制 | 4.1.1 外部样式的应用 | 1、能够进行团队之间协作的能力。 2、能够掌握PS中，外部样式的应用，能进行输入法皮肤的绘制的能力。 3、能够掌握PS中通道的相关知识，并能利用通道知识进行颜色的调整与抠图，能进行软件界面的设计的能力。 4、能够掌握PS中文字工具的使用，并能制作出特效的文字，能制作日历软件界面的能力。 | 1. 掌握软件界面设计的概念、分类、及设计原则。 2. 掌握PS中，外部样式的应用，能进行输入法皮肤的绘制。 3. 掌握PS中通道的相关知识，并能利用通道知识进行颜色的调整与抠图，能进行软件界面的设计。 4. 掌握PS中文字工具的使用，并能制作出特效的文字，能制作日历软件界面。 | ||
4.1.2 输入法皮肤的绘制 | ||||||
任务2 绘制信息查询界面 | 4.2.1 通道的认识 | |||||
4．2.2通道应用 | ||||||
4.2.3 绘制信息查询界面 | ||||||
任务3 绘制简单的日历软件界面 | 4.3.1 路径文字的应用 | |||||
4.3.2 凹凸字的制作 | ||||||
4.3.3 绘制简单的日历软件界面 | ||||||
项目五 手机界面设计 | 任务1 绘制手机界面中的图标 | 5.1.1 手机图标创意介绍 | 1、能够进行团队之间协作的能力。 2、能够掌握PS中，动作使用，批处理的使用进行手机APP的绘制的能力。 3、能够掌握PS中调色的相关知识，并能各种调色工具进行颜色的调整的能力。 4、能够掌握利用PS工具，进行手机界面的设计的能力。 | 1. 掌握手机界面设计的概念、分类、及设计原则。 2. 掌握PS中，动作使用，批处理的使用进行手机APP的绘制。 3. 掌握PS中调色的相关知识，并能各种调色工具进行颜色的调整。 4. 掌握利用PS工具，进行手机界面的设计。 | ||
5.1.2 动作批处理与动画 | ||||||
5.1.3简单扁平化图标绘制 | ||||||
5.1.4 应用商店图标绘制 | ||||||
任务2 绘制IOS操作系统手机界面 | 5.2.1 手机界面的认识 | |||||
5.2.2 手机外观的绘制 | ||||||
5.2.3 IOS手机界面的绘制 | ||||||
5.2.4 手机界面的切图 | ||||||
任务3 绘制Android拨号界面 | 5.3.1 调整命令的使用 | |||||
5.3.2 折纸效果的制作 | ||||||
5.3.3 Andriod手机拨号界面的绘制 | ||||||
项目六 播放器界面设计 | 任务1 绘制简约时尚播放器 | 6.1.1 滤镜认识 | 1、能够进行团队之间协作的能力。 2、能够掌握PS中滤镜与滤镜库的种类与用途，能进行时尚简约播放器的绘制的能力。 3、能够掌握PS中只能滤镜相关知识，并能利用通道知识进行音乐播放器界面的设计的能力。 4、能够掌握PS色彩范围、快速蒙版、调整图层等知识，能制作黑色时尚播放器的能力。 | 1. 掌握播放器界面设计概念、分类、及设计原则。 2. 掌握PS中滤镜与滤镜库的种类与用途，能进行时尚简约播放器的绘制。 3. 掌握PS中只能滤镜相关知识，并能利用通道知识进行音乐播放器界面的设计。 4. 掌握PS色彩范围、快速蒙版、调整图层等知识，能制作黑色时尚播放器。 | ||
6.1.2绘制简约时尚播放器 | ||||||
任务2 绘制音乐播放器界面 | 6.2.1 外挂滤镜的应用 | |||||
6.2.2绘制音乐播放器界面 | ||||||
任务3 绘制黑色时尚播放器 | 6.3.1 液化滤镜及滤镜库应用 | |||||
6.3.2绘制黑色时尚播放器 | ||||||
最后一次课（总结考试） | 课程总结与考核 | 任务1、课程总结 | 能进行课程知识点总结 | 1.熟知该课程的知识结构体系 | ||
任务2、期末考核 | 考核 | |||||
六、项目情境设计
项目1：UI基础与按钮设计
项目2：图标设计
项目3、网页设计
项目4、软件界面设计
项目5、手机界面设计
项目6、播放器界面设计
项目 | 任务 | 情境设置 | 子任务 |
项目一 UI基础与按钮设计 | 第一次第一节课（了解课程内容） | 从总体上认识UI前端设计课程内容，对计UI前端设计课程产生学习兴趣。 | 1.UI设计； |
任务1 绘制简洁的开机按钮 | 小明初入职场，公司中界面设计师安排小明做他的助理，在工作中帮助他制作一些简单的按钮，首先熟悉PS界面设计软件。 | 1.1.1PS界面认识 | |
1.1.2 PS使用-扁平化风景图的绘制 | |||
1.1.3 简洁开机按钮的绘制 | |||
任务2 网站主页按钮的设计 | 小明初入职场，公司中界面设计师安排小明做他的助理，在工作中帮助他制作一些简单的按钮，首先熟悉PS界面设计软件。 | 1.2.1 渐变工具 | |
1.2.2 光盘制作 | |||
1.2.3卡通灯笼的绘制 | |||
1.2.4 网站主页按钮设计 | |||
任务3 制作不规则翻页按钮 | 小明初入职场，公司中前端界面设计师李老师安排小明做他的助理，在工作中帮助他制作一些简单的按钮，首先熟悉PS界面设计软件。 | 1.3.1 钢笔工具 | |
1.3.2路径与形状的绘制 | |||
1.3.3 卡通树的绘制 | |||
1.3.4 制作不规则翻页按钮 | |||
任务4 金属质感时尚音乐按钮 | 小明初入职场，公司中界面设计师李老师安排小明做他的助理，在工作中帮助他制作一些简单的按钮，首先熟悉PS界面设计软件。 | 1.4.1 图像大小与1寸照片排版 | |
1.4.2 自由变换 | |||
1.4.3 酒包装和的制作 | |||
1.4.4 金属质感的时尚音乐按钮绘制 | |||
项目二 图标设计 | 任务1 IE浏览器的绘制 | 经过一个阶段的学习，小明对PS有了一定的了解，李老师又安排他进行一些图标的绘制，重点练习钢笔的使用、图层及图层样式的应用。 | 2.1.1 图标知识介绍 |
2.1.2 IE浏览器的绘制 | |||
2.1.3 钢笔抠图 | |||
任务2绘制逼真镜头图标 | 经过一个阶段的学习，小明对PS有了一定的了解，李老师又安排他进行一些图标的绘制，重点练习钢笔的使用、图层及图层样式的应用。 | 2.2.1 图层认识 | |
2.2.2 吊坠的制作 | |||
2.2.3网络小图标的绘制 | |||
2.2.4 逼真镜头图标的绘制 | |||
任务3 西瓜图标绘制 | 经过一个阶段的学习，小明对PS有了一定的了解，李老师又安排他进行一些图标的绘制，重点练习钢笔的使用、图层及图层样式的应用。 | 2.3.1 画笔工具 | |
2.3.2 画笔工具在商业中的应用 | |||
2.3.3 自定义画笔 | |||
2.3.4 剪切蒙版的使用 | |||
2.3.5 仿真西瓜图标的绘制 | |||
项目三 网页设计 | 任务1 网站导航栏设计 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接手网站前端界面设计的部分内容。 | 3.1.1 网页UI基础 |
3.1.2 店招和导航条设计 | |||
3.1.3 网站导航栏设计 | |||
任务2网页中主体的绘制 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接手网站前端界面设计的部分内容。 | 3.2.1 文字工具的使用 | |
3.2.2. 图层不透明度与晶莹水滴制作 | |||
3.2.3 网页中主体的绘制 | |||
任务3 网站中广告条绘制 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接手网站前端界面设计的部分内容。 | 3.3.1 图层混合模式 | |
3.3.2 背景图案的制作 | |||
3.3.3 图层叠加、柔光、强光 | |||
3.3.4 网站中广告条绘制 | |||
任务4 网页背景和导航栏绘制 | 经过一阶段的网站界面的熟悉，李老师安排小明独自承担网页界面的整体布局、规划与设计。 | 3.4.1 蒙版 | |
3.4.2 蒙版在商业中应用 | |||
3.4.3 蒙版在海报设计中应用 | |||
3.4.4 网页背景和导航栏绘制 | |||
项目四 软件界面设计 | 任务1 输入法皮肤的绘制 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触软件界面设计的部分内容。 | 4.1.1 外部样式的应用 |
4.1.2 输入法皮肤的绘制 | |||
任务2 绘制信息查询界面 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触软件界面设计的部分内容。 | 4.2.1 通道的认识 | |
4．2.2通道应用 | |||
4.2.3 绘制信息查询界面 | |||
任务3 绘制简单的日历软件界面 | 经过一阶段的软件界面的熟悉，李老师安排小明独自承担日历软件界面的整体布局、规划与设计。 | 4.3.1 路径文字的应用 | |
4.3.2 凹凸字的制作 | |||
4.3.3 绘制简单的日历软件界面 | |||
项目五 手机界面设计 | 任务1 绘制手机界面中的图标 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触手机界面设计的部分内容。让小明自己查阅手机图标及界面设计的相关尺寸规范。 | 5.1.1 手机图标创意介绍 |
5.1.2 动作批处理与动画 | |||
5.1.3简单扁平化图标绘制 | |||
5.1.4 应用商店图标绘制 | |||
任务2 绘制IOS操作系统手机界面 | 了解手机图标及界面设计的相关尺寸规范后，李老师安排小明进行手机界面及ＡＰＰ界面整体规划与设计。 | 5.2.1 手机界面的认识 | |
5.2.2 手机外观的绘制 | |||
5.2.3 IOS手机界面的绘制 | |||
5.2.4 手机界面的切图 | |||
任务3 绘制Android拨号界面 | 了解到ＩＯＳ系统与Android系统的不同，针对不同的系统的规范，进行具体情况具体分析。 | 5.3.1 调整命令的使用 | |
5.3.2 折纸效果的制作 | |||
5.3.3 Andriod手机拨号界面的绘制 | |||
项目六 播放器界面设计 | 任务1 绘制简约时尚播放器 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触播放器界面的规划与设计。 | 6.1.1 滤镜认识 |
6.1.2绘制简约时尚播放器 | |||
任务2 绘制音乐播放器界面 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触播放器界面的规划与设计。 | 6.2.1 外挂滤镜的应用 | |
6.2.2绘制音乐播放器界面 | |||
任务3 绘制黑色时尚播放器 | 经过前面的学习，李老师对小明的工作非常满意，逐步让小明接触播放器界面的规划与设计。小明成长为一名ＵＩ前端设计师，能进行游戏界面、播放器界面的设计，继续努力，争取成为一名优秀的界面设计师。 | 6.3.1 液化滤镜及滤镜库应用 | |
6.3.2绘制黑色时尚播放器 | |||
最后一次课（总结考试） | 课程总结与考核 | 任务1、课程总结 | |
任务2、期末考核 |
七、课程进度表
项目 | 一级子项目 | 二级级子项目 | |
项目一 UI基础与按钮设计 | 第一次第一节课（了解课程内容） | １课时 | |
任务1 绘制简洁的开机按钮 | 1.1.1PS界面认识 | １课时 | |
1.1.2 PS使用-扁平化风景图的绘制 | ２课时 | ||
1.1.3 简洁开机按钮的绘制 | ２课时 | ||
任务2 网站主页按钮的设计 | 1.2.1 渐变工具 | １课时 | |
1.2.2 光盘制作 | １课时 | ||
1.2.3卡通灯笼的绘制 | ２课时 | ||
1.2.4 网站主页按钮设计 | ２课时 | ||
任务3 制作不规则翻页按钮 | 1.3.1 钢笔工具 | １课时 | |
1.3.2路径与形状的绘制 | １课时 | ||
1.3.3 卡通树的绘制 | ２课时 | ||
1.3.4 制作不规则翻页按钮 | ２课时 | ||
任务4 金属质感时尚音乐按钮 | 1.4.1 图像大小与1寸照片排版 | １课时 | |
1.4.2 自由变换 | １课时 | ||
1.4.3 酒包装和的制作 | ２课时 | ||
1.4.4 金属质感的时尚音乐按钮绘制 | ２课时 | ||
项目二 图标设计 | 任务1 IE浏览器的绘制 | 2.1.1 图标知识介绍 | １课时 |
2.1.2 IE浏览器的绘制 | ２课时 | ||
2.1.3 钢笔抠图 | １课时 | ||
任务2绘制逼真镜头图标 | 2.2.1 图层认识 | １课时 | |
2.2.2 吊坠的制作 | １课时 | ||
2.2.3网络小图标的绘制 | ２课时 | ||
2.2.4 逼真镜头图标的绘制 | ２课时 | ||
任务3 西瓜图标绘制 | 2.3.1 画笔工具 | １课时 | |
2.3.2 画笔工具在商业中的应用 | ２课时 | ||
2.3.3 自定义画笔 | １课时 | ||
2.3.4 剪切蒙版的使用 | ２课时 | ||
2.3.5 仿真西瓜图标的绘制 | ２课时 | ||
项目三 网页设计 | 任务1 网站导航栏设计 | 3.1.1 网页UI基础 | １课时 |
3.1.2 店招和导航条设计 | ２课时 | ||
3.1.3 网站导航栏设计 | ３课时 | ||
任务2网页中主体的绘制 | 3.2.1 文字工具的使用 | ２课时 | |
3.2.2. 图层不透明度与晶莹水滴制作 | ２课时 | ||
3.2.3 网页中主体的绘制 | ２课时 | ||
任务3 网站中广告条绘制 | 3.3.1 图层混合模式 | １课时 | |
3.3.2 背景图案的制作 | ２课时 | ||
3.3.3 图层叠加、柔光、强光 | １课时 | ||
3.3.4 网站中广告条绘制 | ２课时 | ||
任务4 网页背景和导航栏绘制 | 3.4.1 蒙版 | １课时 | |
3.4.2 蒙版在商业中应用 | ２课时 | ||
3.4.3 蒙版在海报设计中应用 | １课时 | ||
3.4.4 网页背景和导航栏绘制 | ２课时 | ||
项目四 软件界面设计 | 任务1 输入法皮肤的绘制 | 4.1.1 外部样式的应用 | １课时 |
4.1.2 输入法皮肤的绘制 | ３课时 | ||
任务2 绘制信息查询界面 | 4.2.1 通道的认识 | ２课时 | |
4．2.2通道应用 | ２课时 | ||
4.2.3 绘制信息查询界面 | ２课时 | ||
任务3 绘制简单的日历软件界面 | 4.3.1 路径文字的应用 | ２课时 | |
4.3.2 凹凸字的制作 | ２课时 | ||
4.3.3 绘制简单的日历软件界面 | ２课时 | ||
项目五 手机界面设计 | 任务1 绘制手机界面中的图标 | 5.1.1 手机图标创意介绍 | １课时 |
5.1.2 动作批处理与动画 | ２课时 | ||
5.1.3简单扁平化图标绘制 | ２课时 | ||
5.1.4 应用商店图标绘制 | ２课时 | ||
任务2 绘制IOS操作系统手机界面 | 5.2.1 手机界面的认识 | １课时 | |
5.2.2 手机外观的绘制 | １课时 | ||
5.2.3 IOS手机界面的绘制 | ２课时 | ||
5.2.4 手机界面的切图 | １课时 | ||
任务3 绘制Android拨号界面 | 5.3.1 调整命令的使用 | ２课时 | |
5.3.2 折纸效果的制作 | ２课时 | ||
5.3.3 Andriod手机拨号界面的绘制 | ２课时 | ||
项目六 播放器界面设计 | 任务1 绘制简约时尚播放器 | 6.1.1 滤镜认识 | １课时 |
6.1.2绘制简约时尚播放器 | ２课时 | ||
任务2 绘制音乐播放器界面 | 6.2.1 外挂滤镜的应用 | ２课时 | |
6.2.2绘制音乐播放器界面 | ２课时 | ||
任务3 绘制黑色时尚播放器 | 6.3.1 液化滤镜及滤镜库应用 | １课时 | |
6.3.2绘制黑色时尚播放器 | ２课时 | ||
最后一次课（总结考试） | 课程总结与考核 | 任务1、课程总结 任务2、期末考核 | ２课时 |
―― | 总计 | １０８课时 | |
八、第一单元设计
《UI设计》课程单元教学设计
单元名称： UI基础与按钮设计 | 单元教学学时 | 6 | |||||
在整体设计中的位置 | 第1次 | ||||||
授课班级 | 16软件 | 上课 时间 | 周 月 日第 节至 周 月 日第 节 | 上课 地点 | |||
教学 目标 | 能力目标 | 知识目标 | 素质目标 | ||||
从总体上认识UI设计，对计UI前端设计产生学习兴趣。 | ①初步了解课程内容安排； ②了解本课程学习任务及考核方式。 ③掌握PS安装、工作界面认识、PS基本操作，能利用PS绘制简洁的开机按钮。 | ①养成积极主动学习意识； ②养成良好的团队合作精神； ③养成动手操作的的习惯。 | |||||
本单元任务 | 情 境 描 述 | 引 出 任 务 | |||||
1.从总体上认识什么是UI前端设计，针对的岗位工作内容，对计UI前端设计课程产生学习兴趣。 2.初步了解课程内容安排； 3.了解本课程学习任务及考核方式 小明初入职场，公司中界面设计师安排小明做他的助理，在工作中帮助他制作一些简单的按钮，首先熟悉PS界面设计软件。 | 1.PS界面认识 2.PS使用-扁平化风景图的绘制 3.简洁开机按钮的绘制 | ||||||
单元教学资源 | |||||||
（指教材或讲义、课件、案例、参考资料、仪器、设备等） 教材：张晨起主编，人民邮电出版社，2016 参考资料： 《移动平台UI交互设计与开发》陈燕 , 戴雯惠 (主编)，人民邮电出版社 《移动应用UI设计》张晓景 , 胡克 (主编)，人民邮电出版社
网络资源： | |||||||
单元教学进度设计（第一节课）（简表）
步骤 | 教学内容及能力/知识目标 | 教师活动 | 学生活动 | 时间（分钟） |
1 | 师生认识 | 教师自我介绍，与学生相互认识 | 学生自我介绍，师生认识 | 2 |
2 | 学生分组 | 给学生分组，以小组形式完成课堂仿真业务操作以及课后拓展业务的操作，以培养协作意识。 | 学生分组 | 3 |
3 | UI相关知识的认识 | 教师展示与计算机相关的图片和视频 | 学生观看图片和视频了解当前的UI前端设计技术 | 10 |
4 | 认识UI设计 | 教师引导学生探讨UI技术及学生在学习过程中对UI前端技术有哪些需要 | 学生分组展开讨论 | 5 |
5 | 认识课程 | 教师向学生介绍课程对应岗位、课程总体目标、课程的学习内容、学习方法、告知学生学习参考书、辅助参考书以及相关网站 | 学生形成对课程的初步认知 | 5 |
6 | 认识本课程的学习方法和考核方式 | 教师说明学习方法以及对本课程的考核方式 | 学生明确学习方法及课程考核方式 | 5 |
7 | 课程模块介绍 | 教师介绍贯本课程的两个六个模块 | 学生认识六个模块 | 10 |
8 | 小结 | 教师以提问方式小结，进一步加深学生对本门课程的认识 | 学生回答教师提出的问题，进一步加深对本门课程的认识 | 5 |
9 | 课后任务（在微信群里或QQ群公布） | 教师布置课后的学习任务 | 接受任务 | |
课后 体会 | ||||
最后单元
《课程总结》
《UI设计》课第19次课
《UI设计》课程单元教学设计
单元名称：课程总结
| 单元教学学时 | 4 | |||||
在整体设计中的位置 | 第19次 | ||||||
授课班级 | 上课 时间 | 周 月 日第 节至 周 月 日第 节 | 上课 地点 | ||||
教学 目标 | 能力目标 | 知识目标 | 素质目标 | ||||
能进行课程知识点总结
| ①熟知该课程的知识结构体系； ②确定自主学习的内容与方向。 | 培养学生努力、勤奋、踏实工作的基本素养。
| |||||
本单元任务 | 情 境 描 述 | 引 出 任 务 | |||||
1.教师组织学生进行课程知识点总结，教师归纳课程知识体系 2.教师点评学生本学期的课内与课外学习情况，组织学生分享学习心得； 3.组织学生进行作品演示，分享学习心得并点评，同学们开展自评和互评 4.教师组织学生制定自主后续学习计划，教师进行点评，学生在教师指导下制定自主后续学习计划。同学们自评、互评。 5.学生在教师指导下开始自主学习 | 任务： 1.课程总结汇报 2.分享学习心得 3.课程总结的自评、互评 4.期末测试 | ||||||
本次课使用的外语单词 | |||||||
单元教学资源 | |||||||
（指教材或讲义、课件、案例、参考资料、仪器、设备等） 教材：张晨起主编，人民邮电出版社，2016 参考资料： 《移动平台UI交互设计与开发》陈燕 , 戴雯惠 (主编)，人民邮电出版社 《移动应用UI设计》张晓景 , 胡克 (主编)，人民邮电出版社
网络资源： | |||||||
单元教学进度设计（最后一课）（简表）
步骤 | 教学内容及能力/知识目标 | 教师活动 | 学生活动 | 时间（分钟） |
1 | 拓展项目点评 | 教师点评学生课后作业完成情况，总结存在的共性问题。 | 学生听取教师作业点评，归纳总结，掌握知识提升能力。 | 5 |
2 | 课程总结 | 教师组织学生进行课程知识点总结，教师归纳课程知识体系 | 学生进行课程知识点总结 | 45 |
3 |
确定自学内容 | 点评学生本学期的课内与课外学习情况，组织学生演示作品分享学习心得 | 同学们自评、互评；分享学习心得。 |
30 |
组织学生制定自主后续学习计划，并进行点评 | 制定自主后续学习计划， 同学们自评、互评；在教师指导下开展自主学习。 | |||
4 | 学生展开自主学习（课后） | 教师给予实时帮助 | 开展自主学习 | |
5 | 收取报告书 | 作品演示 | 轮流演示观看 | 100 |
课后 体会 | ||||
九、考核方案
考核方式 | 成绩构成 | 评价标准 | 权重1 | 考核方式 | 权重2 | 成绩 |
形成性考核 50% | 小组任务 （单项能力） | 对每模块操作任务进行考核。 考核时间：每任务讲解完成后 | 40% | 组内对成员的评价 | 25% | |
小组互评 | 25% | |||||
教师评定 | 50% | |||||
学习态度 | 遵守课堂纪律、积极参与课堂教学活动、按时完成作业 考核时间：平时做好记录，期末统计 | 10% | 组内对成员的评价 | 25% | ||
小组互评 | 25% | |||||
教师评定 | 50% | |||||
期末考核 50% | 期末大作业 | 采用期末项目考核的方式，考察学生对必要的理论知识和实践操作知识的掌握情况 | 40% | 教师评定 | 100% | |
报告书的书写 | 对相应作品的文字描述能力 | 10% | ||||
合计 | 100 | |||||
备注： 1.小组互评成绩=其他小组对本小组评价成绩的平均值，也是本小组所有成员的成绩； 2.教师评定=教师评定的本小组的成绩，也是本小组所有成员的成绩； 3.小组互评和教师评定里面考虑素质的实现。 | ||||||
十、教学资源（指教材或讲义、参考资料、所需仪器、设备、网络学习资源等）
教材：张晨起主编，人民邮电出版社，2016
参考资料：
《移动平台UI交互设计与开发》陈燕 , 戴雯惠 (主编)，人民邮电出版社
《移动应用UI设计》张晓景 , 胡克 (主编)，人民邮电出版社
网络资源：
鲁公网安备 37110202000410号