UI 界面设计课程标准-美术设计与制作专业

UI界面设计课程标准
【课程名称】
UI界面设计。

【适用专业】
中等职业学校美术设计与制作专业。

1. 前言
1.1 课程性质
本课程是中等职业学校美术设计与制作专业多媒体设计与制作方向的一门专业技能课程。

其功能是使学生了解UI界面设计的基本理念，掌握UI界面设计所需的基本知识和方法，具备UI界面设计的基本技能。

本课程是美术绘画基础、美术设计基础、计算机辅助设计等课程的后续课程，为学生学习其他后续课程奠定扎实基础。

1.2 设计思路
本课程的总体设计思路是遵循任务引领、做学一体的原则，参照ACAA高级交互设计师职业标准的相关内容，根据美术设计与制作专业的工作任务和职业能力分析，以UI界面设计的相关工作任务要求为依据设置。

课程内容的选取围绕UI界面设计应具备的职业能力要求，同时充分考虑本专业中职学生对本课程相关理论知识的需要，并融入ACAA高级交互设计师职业标准的相关考核内容与要求。

课程内容的组织以UI界面设计的步骤流程和方法为主线，包括App图标设计与制作、APP界面设计、网页界面设计等3个学习任务。

以任务为引领，通过任务整合相关知识、技能与态度。

本课程建议教学课时数为144学时。

2. 课程目标
通过本课程的学习，学生能具备UI界面设计的基础知识，掌握UI界面设计的基本方法和技能，达到ACAA高级交互设计师职业标准的相关要求，具体达成以下职业素养与职业能力目标。

职业素养目标：
逐渐养成认真负责、严谨细致、静心专注、精益求精的职业态度；树立科学健康的审美观，积极向上的审美情趣，在学习和实践中不断加强艺术修养和信息化素养；养成良好的团队合作意识，积极参与团队学习与实践，主动协助同伴完成任务，提高人际沟通能力；养成独立思考的习惯和勇于创新的精神。

在进行UI界面设计的过程中，严格遵守实训室设备的使用规定和设备操作规范，养成良好的职业习惯和严谨的工作态度。

职业能力目标：
⚫能设计并制作APP界面上的图标
⚫能按需求合理设计APP界面
⚫能按需求合理设计网页界面
⚫能按规范标注或创建相关项目信息，并完成文档设置
⚫能运用设计原则优化和调整相应结构布局
⚫能辨识不同图标的指代含义
⚫能根据目标关键词选择适合的形状、文字、图形组合完成简单的图标设计
⚫能运用位图或矢量图形等设计软件，完成图标、按钮的构建，并输出符合应用需求的图标、按钮文件
⚫能熟练运用位图或矢量图形软件进行设计与制作绘制
⚫能根据企业网站特点设计制作网站效果图
⚫能根据自主学习和研究性学习需要，运用信息化手段收集和处理信息
3. 课程内容和要求
学习任务技能与学习要求知识与学习要求参考学时
1. APP图标设计与制作1. App图标设计
⚫能按照主题需要设
计像素化图标
⚫能按照主题需要设
计拟物化图标
⚫能按照主题需要设
计扁平化图标
⚫能用草图的形式设
计并绘制APP图标
1.APP图标的基础知识
⚫说出图标的概念及作用
⚫举例说明APP中的图标，并说出其特征
⚫了解APP的开发流程
2.APP图标的设计原则
⚫归纳说明APP图标的设计原则
⚫了解APP图标的设计特点与用户体验之间
的关联
⚫归纳说明增加图标可识别性的方法
⚫归纳说明提高APP图标点击率的方法
3.APP图标风格的种类
⚫归纳说明像素化图标的特征及作用
⚫归纳说明拟物化图标的特征及作用
⚫归纳说明扁平化图标的特征及作用
4.App图标设计的方法
⚫说出需要设计的APP的市场定位
⚫说出选择APP图标风格的依据
⚫归纳说明用草图的形式绘制APP图标的要
点
⚫归纳说明高保真APP图标的制作要点
24
2. App图标制作
⚫能按照草图设计制
作像素化图标
⚫能按照草图设计制
作拟物化图标
5. 常见的APP设备尺寸的标准
⚫举例说明常用的手机屏幕尺寸
⚫归纳说明显示分辨率的概念
⚫说出手机屏幕与分辨率的关系
⚫说出在图形软件中设置图标尺寸的方法
22
⚫能按照草图设计制作扁平化图标⚫说出iOS、Android系统常用的应用图标的像素尺寸
6. 常用的图标格式
⚫举例说明常用图标的格式
⚫简述JPEG、GIF、PNG图片格式的特征
7.像素化图标的制作方法
⚫举例说明制作像素化图标常用的工具及用途
⚫说出像素网格在制作过程中起到的作用
⚫说出2D与2.5D两种图标效果的差异
⚫归纳说明制作像素图标的要点
8.拟物化图标的制作方法
⚫举例说明制作拟物化图标常用的工具及用途
⚫归纳说明塑造拟物化图标材质效果的方法⚫归纳说明塑造拟物化图标高光的方法
⚫归纳说明塑造拟物化图标投影的方法
⚫归纳说明塑造拟物化图标反光的方法
⚫归纳说明塑造拟物化图标镜面效果的方法⚫举例说明渐变衰减在拟物化图标制作中的用途
⚫举例说明环境色在拟物化图标制作中起到的作用
9.扁平化图标的制作方法
⚫举例说明制作扁平化图标常用的工具及其用途
⚫归纳说明塑造扁平化图标的高光、渐变、投影的方法
⚫归纳说明塑造扁平化图标长阴影的方法
⚫举例说明运用不同的色块组合塑造出扁平化图标立体感的方法
2.APP界面设计1.App界面草图设计
⚫能设计APP的欢迎
界面
⚫能设计APP的导航
栏
⚫能设计APP的屏幕
1.APP的基础知识
⚫说出手机APP 的UI和平面UI的差异
⚫说出不同设备对应的分辨率
⚫举例说明常用的手机操作系统的特点
⚫说出不同的结构化布局设计方式
2.iOS和Android系统用户界面的特征
22
栏⚫区别说明iOS和Android系统的状态栏、导
航栏、标题栏、搜索栏、工具栏的界面特征
3.色彩的情感特征
⚫了解色彩的情感与用户体验之间的关系
⚫举例说明不同色系在APP界面设计中体现
的情感特征
4. APP的界面风格
⚫归纳说明扁平化风格APP界面的特征
⚫归纳说明写实风格APP界面的特征
⚫归纳说明插画风格APP界面的特点
5. APP欢迎界面的元素及特征
⚫举例说明欢迎界面中常见的类型以及常见
的表现元素
⚫归纳说明欢迎界面的特征与作用
6. APP导航栏的元素及特征
⚫举例说明导航栏中常见的元素
⚫归纳说明导航栏的特征与作用
7. APP屏幕栏的元素及特征
⚫举例说明屏幕栏中包含的元素
⚫归纳说明屏幕栏中标题栏、菜单栏、滚动条、
状态栏和控制栏的特征与作用
2. App界面效果制作⚫能综合运用图形制作软件完成APP欢
迎界面的制作
⚫能综合运用图形制作软件完成APP导
航栏的制作
⚫能综合运用图形制作软件完成APP屏
幕栏的制作8. 欢迎界面中文字及图文搭配的要求
⚫举例说明欢迎界面中文字的制作要点
⚫举例说明欢迎界面中图文搭配的要点
9. 常用工具的使用方法
⚫说出新建图层、编组图层、图层变形的快捷键
⚫列举图层样式及其特点
⚫列举常见滤镜及其效果特点
⚫说出明蒙版制作的方法
⚫说出参考线的设置方法
⚫说出对齐和分布的区别
10. 导航栏的制作要求
⚫举例说明导航栏上图标的制作要点
⚫举例说明让导航栏显眼的方法
11. 屏幕栏的制作方法
⚫举例说明屏幕栏中各个功能元素的布局要
22
点
⚫举例说明制作立体效果屏幕栏的方法
⚫举例说明制作金属材质效果屏幕栏的方法⚫举例说明制作扁平化效果屏幕栏的方法
3. 网页界面设计1.网站首界面的布局设
计
⚫能合理规划布局网
站首界面
⚫能综合运用图形图
像设计软件设计制
作网站首界面的布
局图
⚫能综合运用图形图
像设计软件进行网
页的图文排版
1.网站首界面的构成元素
⚫列举网站首界面的构成元素
⚫列举超链接的表现形式
2.网站首界面的设计要点
⚫举例说明网站首界面的设计要点
⚫列举网站的设计风格
⚫列举说明常见的网站配色方案
3.网站界面的布局要点
⚫举例说明网站界面的几种布局模式
⚫说出响应式网页的特点及作用
4.网页图文编排的要点
⚫举例说明网页图文排版的样式及表现特征
⚫举例说明网页中图片处理的表现形式
⚫举例说明网页中文字处理的标准
20
2. 网页表单设计
⚫能设计表单中标
签、输入框、按钮
的草图
⚫能综合运用图形图
像设计软件设计制
作网页表单
5. 网站表单的构成元素
⚫列举网站表单的构成元素
⚫举例说明网站表单中各元素的作用
⚫举例说明标签的表现形式
⚫举例说明输入框签的表现形式
⚫举例说明输入表单按钮的表现形式
6. 网站表单的设计要点
⚫举例说明网站表单的设计要点
⚫列举网站表单的设计风格
⚫列举说明常见的表单配色方案
10
3. 网页导航菜单设计
⚫能设计导航菜单中
一级菜单和子菜单
的草图
⚫能综合运用图形图
像设计软件设计制
作导航菜单
7. 网页导航菜单的构成元素
⚫列举网页导航菜单的构成元素
⚫举例说明网页导航菜单的表现形式
8.网页导航菜单的设计要点
⚫举例说明网页导航菜单的设计要点
⚫列举网页导航菜单的设计风格
⚫列举说明常见的网页导航菜单的配色方案
18
4. 网页超链接按钮的
设计
9. 超链接按钮的设计要点
⚫举例说明超链接按钮hover、active、link、
6
⚫能设计网页上超链接按钮的草图
⚫能综合运用图形图像设计软件设计制
作超链接按钮
visited状态下的状态特征
⚫列举超链接按钮的样式
⚫列举说明常见的超链接按钮的配色方案
总课时144
4.教学活动设计参考
教学活动名称教学活动设计
教学活动一：《上海优品》APP 图标设计1. 教师要求每组派代表展示课前作业《上海优品》APP图标设计。

2. 每组代表展示本组最佳作品，并配合PPT加以介绍。

（1）介绍选择APP图标风格的依据。

（2）介绍图标设计的创作思路。

3. 教师组织学生互评，组织票选最佳作品。

4. 教师以最佳作品为例进行分析，引导学生发现作品中的优点与有待改进的点，与学生一起归纳设计要点，并记录于板书中。

5. 每组以板书中的设计要点为准则，团队商量进一步修改的内容
教学活动二：上海优品网站效果图制作1. 教师布置任务：教师以天猫为例，介绍我国电子商务发展历史，以及全球领先的情况，布置为“上海优品”设计电子商务网站的任务。

2. 教师示范讲解：教师示范讲解网站效果图设计的要领，强调重点和难点。

3. 教师组织同学们讨论网站效果图设计的流程，引导学生思考分析并得出适合自己的设计方案。

4. 学生分组尝试：学生以4～5人为小组进行讨论，选定方案，利用课后进行调研后，每人绘制1个电子商务网站效果图的设计草图，并最终选出一个，以规范的JPG图片文件进行展现。

5. 作品上传平台，教师组织评价：学生互评，社团师生参与评价，教师综合点评设计成果、设计过程合理性及团队合作
5. 实施建议
5.1 教材编写建议
（1）以本课程标准为依据编写教材。

（2）教材应该充分体现以岗位为目标，以任务为引领的课程设计思路。

（3）教材编写应打破传统的学科界线和教学方法，把基础学科的训练项目分解到具体的工作任务中去，真正体现“在做中学，在做中会”的理念，使学习目标明确，更具实用性。

（4）教材编写应注意到本学科的快速发展和变化，在教学内容和教学手段上都注意到前瞻性。

争取将本学科的新知识、新技术、新材料、新发展融入教材中。

（5）教材应力求文字简练，指令明确。

要充分考虑美术设计作为视觉艺术的特点，配备适量的直观图片和视频影像资料或者提供相应的网络链接。

5.2 教学建议
（1）教学方法应充分考虑课程演进中形式的多样化（如案例教学、项目活动教学、临摹教学等），激发学生的学习兴趣，使教学既有明确的实战目的，也能提升他们的就业能力。

（2）教学过程应注意在规定任务情景里展开学习的互动性，如创设情境，激发学生主动学习的内驱力，提升学生解决实际问题的能力与创新能力。

（3）专业教师应注意自身的职业化、市场化、实战化素质，有意识地将自身置于“规定性的任务”情境中，真正实施“产——学——研——教”相结合的职业技能教学。

（4）各学校可依据具体的学情，调整教学单元的课时，更希望各学校设计出与本校密切相关的设计任务。

5.3 学习评价建议
（1）教学评价以课程标准为依据，同时适当考虑工作岗位实际要求，针对UI界面设计内容进行实战，作业以电脑绘制和手绘为形式，从中了解学生对UI界面设计知识掌握的程度，考核学习的效果。

（2）学生的考核评价可以通过以下方式实现，如课上提问、参与互动、学习态度占30℅，展览参观小结占10℅，实践作业占60℅为考核成绩，综合以上进行评价，评价时应侧重考核学生综合动手制作能力，运用所学知识解决实际、分析问题的能力。

（3）充分发挥考核评价的功能，既要发挥考核的评价功能，又要发挥考核的激励机制和引导作用，通过考核评价，营造出良好的学习环境，激发学生的学习兴趣，并使学生得到成功的体验，促进学生个性的发展。

5.4 资源利用
（1）充分利用多媒体展示会、国际互联网的资源，使学生在视频作品的拍摄和制作中吸取养料，加深对视频设计与制作课业的理解,以便有效完成课业。

（2）必须充分利用网络平台来进行最新学习资料的收集。

注重充分发挥多媒体的学习互动性优势。

让学生的学习具有主动性、趣味性，又有利于学生的思维与技能拓展。

（3）争取特定企业给予设计项目，使学生在做中学，学能用。

（4）充分利用上海市多媒体开放实训中心等基地的设备与师资，为学生创设多元化的教学空间。

（5）参观各大多媒体创意园区，让学生领略他们未来工作空间的氛围与环境，鼓舞与激励学生的职业理想。