《UI界面设计》教学大纲(64学时)

2024年1月27日发(作者：)

《UI界面设计》课程教学大纲

一、课程基本信息

课程名称（中文）

课程名称（英文）

课程性质

总学时

课程类别

考核方式

先修课程

后续课程

适用专业

编制时间

专业课

考试

设计美学、色彩

数字手机UI交互界面设计

数字媒体艺术、计算机多媒体、计算机应用……

2022.1

课程教材与参考资料

使用教材

教学参考资料

网络学习资源

课程负责人

（教研组长）

审核负责人

（系主任）

审定负责人

（主管教学（副）院长）

注：此页不可增页

张小玲 彭赟主编. UI界面设计（第3版）[M]. 电子工业出版社. 2022年01月.

《矢量绘图设计与制作（Illustrator）》电子工业出版社

花瓣网、Pinterest、iconfont

大纲编制人及责任人信息

姓名

职称

签章

UI界面设计

UI Design

必修 学分 4

64，其中：理论学时（16）、实践学时（48）

课程代码

开课单位

— 1 —

二、课程教学目的与目标

（一）课程目的

《UI界面设计》课程是数字媒体艺术专业，第四学期开设的专业基础课程，根据专业培养目标和职业岗位要求而制定。是本专业后续所有专业课程的前期必修基础课程《设计美学》《Photoshop、Illustrator》。其息息相关的后续课程有《数字手机UI交互界面设计》《专业综合实训》等。

通过本课程的学习，使学生掌握数字矢量软件基础进行平面图形设计的基本方法和基本技能，使学生能够运用图形图像处理软件进行界面图形设计与制作，提高学生实际应用能力；培养学生具备积极思考问题、主动学习、良好的团队合作精神、获取知识能力、设计创意思维能力、色彩感悟能力和欣赏能力等素质，达到数字美术的初级设计水平。

（二）教学目标

1.知识目标：

（1）了解界面设计的意义、目的、基本要素、流程；

（2）理解典型的界面类型设计的原则、方法；

（3）掌握界面设计中文字、图形的编排构成；

（4）掌握UI界面设计中的常见项目的基本操作及制作流程。

（5）掌握绘图软件（Photoshop、Illustrator）的基本操作技巧.

2.能力目标：

（1）使学生能够根据需要进行界面设计能力；

（2）使学生能够正确处理图形、文字、色彩的关系；

（3）使学生能够运用软件完成界面设计、视觉编辑效果；

（4）具备较强的界面设计项目规划能力；

（5）具备制作发布能力。

3.素养目标：

（1）具有热爱所学专业、爱岗敬业的精神和强烈的法律意识；

（2）具有胜任设计工作的良好的业务素质和身心素质；

（3）具有自觉的规范意识和团队精神，并具有良好的沟通和交流能力；

（4）具有理论联系实际的素质。

— 2 —

三、学时分配及教学内容

（一）教学内容及学时分配

章 教学内容

知识目标：

1. 了解UI设计的概念；

2. 了解UI设计的流程；

3. 了解UI界面设计的规范；

4. 了解UI界面设计与用户体验的关系；

第

1

UI界面设计的概念，5. 掌握 Photoshop CC中图像常用基UI设计的流程，UI界本操作；

6. 掌握 Photoshop CC选区的基本操作；

7. 掌握 Photoshop CC画笔工具的使用。

能力目标：

1. 能绘制、修改选区。

2. 能熟练使用画笔工具。

知识目标：

1. 了解UI设计的概念

2. 了解UI设计的流程

3. 了解UI界面设计的规范

第

2

章

4. 了解UI界面设计与用户体验的关UI设计的常用方法

系

5. 掌握 Photoshop CC中图像常用基本操作

6. 掌握 Photoshop CC选区的基本操作

7. 掌握 Photoshop CC画笔工具的使用

2

理论

教学目标 学时 备注

面设计的规范，界面章

设计的常用工具

2

理论

— 3 —

能力目标：

1. 能绘制、修改选区。

2. 能熟练使用画笔工具。

知识目标：

1. 了解色彩基础知识

第

3

章

UI设计的配色方法

2. 掌握色彩搭配法则

3. 掌握设计软件中的色彩调整操作

能力目标：

1. 色彩配搭的能力

2. 色彩调整的能力

知识目标：

1. 掌握Photoshop各种常用的操作

第

4

章

UI设计的常用工具

2. 掌握Illustrator各种常用的操作

3. 了解其他辅助工具

能力目标：

1. 能熟悉使用软件制作各种简单的UI界面常用元素。

知识目标：

1.熟悉使用Photoshop制作各种简单的第 UI界面常用壁纸与控UI界面常用元素。

5 件制作 2.能灵活选择各种工具，如路径工具、擦除工具等。

能力目标：

1.能绘制简单图形、控件、壁纸等。

知识目标：

1.了解多种图标设计风格与方法。

第

6

章

图标设计

2.掌握基础图标（线性、面性图标）打造及变体方法。

能力目标：

1.能绘制基础图标。

2.能灵活进行图标变体设计

12

理论+实践

2

理论

4

理论+实践

4

理论+实践

章

— 4 —

知识目标：

1.熟悉手机UI界面设计的基本思想和原则；

2.掌握平板电脑界面设计的工具和技第

7

章

手机主题界面设计

术。

能力目标：

1.根据不同系统界面设计的原则（简洁、一致性、对比度）进行界面规划、概要设计和设计要素的选择，并利用一种界面设计工具（Photoshop）完成设计。

知识目标：

1.熟悉APP设计的基本流程和简单规第

8 APP界面设计

章

范；

2.掌握使用Photoshop 图形处理工具进行UI界面的制作的技能。

能力目标：

1.整体规划与交互设计能力

知识目标：

1.熟悉网站界面设计的基本思想和原则；

2.掌握网站图形界面设计的工具和技第

9 网页界面设计

章

术。

能力目标：

根据网站界面设计的原则（简洁、一致性、对比度）进行界面规划、概要设计和设计要素的选择，并利用一种界面设计工具（Photoshop）完成网页界面设计

第10智能电视界面设计

知识目标：

1.熟悉智能电视界面设计的基本流程8

理论+实践

10

理论+实践

8

理论+实践

8

理论+实践

— 5 —

章 和简单规范。

2.熟悉并灵活使用Photoshop图形处理工具进行UI界面的制作技能。

能力目标：

1.延伸运用能力

知识目标：

1.熟悉播放器界面设计的基本思想和原则；

其他类型人机界面设2.掌握Photoshop界面设计的工具和技计 术。特别是利用图层样式打造质感。

3.了解人机界面设计要点及原则

能力目标：

1.延伸运用能力

合计 64

4

理论+实践

第11章

四、考核方式及成绩评定

1.考试方式：考试

2.考核组成：平时成绩（占60％）、期末考核（占40%）。

五、其他说明

该课程以项目为导向，根据不同界面设计的特殊性进行教学，课堂以案例讲授法、现场指导法为主，向学生阐释原理、原因，引导出设计制作方法，课后延展内容建议依据当下的设计动态和专业赛事而开展。

— 6 —