[UI界面设计]

本科课程教学大纲（理工医类/电气学院）

课程负责人:张鉴新 主 审:
一、课程描述及课程目标

（一）课程描述

UI界面设计是面向计算机相关专业的一门专业课程，涉及APP设计基础知识、控件设计以及界面设计等内容。通过本课程的学习，学生能够系统掌握APP界面的设计方法与技巧，并能够独立完成一整套APP界面设计。

（二）课程目标

本课程为计算机类专业的专业基础课程，要求学生能够应用UI界面设计的基本知识及技能解决实际问题，通过本课程的学习，学生应达到下列学习目标:

1.掌握UI界面设计的基本知识及技能，具备使用PS基本技能进行设计的能力，核心能力2。

2.能够将实验结果，通过文字、图、表的形式撰写实验报告，从而能够完整表达对实验原理及实验内容的理解，核心能力4。

3.了解本课程内容及技能在行业企业中的实际应用，核心能力6。

4.能够主动做好课前预习和课后实践，养成自主学习的意识和提高不断学习的能力，核心能力6。

二、课程内容

（一）第1讲 UI基础概念

主要知识点:

1.1 UI的基本概念

1.2 UI设计师的职责

1.3就业岗位与薪资

1.4 UI设计师的工作内容

教学要求:通过本章的学习，使学生能够区分用户体验UE、交互设计和UI设计，能明确UI设计的工作内容、流程和规范。

重点:UI界面设计的概念、界面设计的流程。

难点:UI界面设计的概念。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:2学时

（二）第2讲 IOS&Android设计规范

主要知识点:

2.1 前言

2.2常见单位术语

2.3界面构成

2.4IOS设计规范

2.5Android设计规范

教学要求:通过本章的学习，使学生能够了解图标的基础概念，图标和标志的区别，图标的内在含意，掌握图标设计要素结构。

重点:IOS设计规范、Android设计规范。

难点:IOS设计规范、Android设计规范。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:2学时

（三）第3讲 小程序基本概念和规范

主要知识点:

3.1 小程序概念

3.2小程序交互规范

3.3小程序视觉规范

3.4小程序和APP区别

教学要求:通过本章的学习，使学生能够了解小程序的基础概念，小程序和APP的区别，小程序交互规范和视觉规范。

重点:小程序交互规范和视觉规范。

难点:小程序交互规范和视觉规范。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:2学时

（四）第4讲 墨刀

主要知识点:

4.1软件说明

4.2墨刀功能

4.3墨刀软件介绍

教学要求:通过本章的学习，使学生能够了解墨刀的功能，能使用墨刀制作低保真图。

重点:墨刀功能

难点:墨刀功能。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:2学时

（五）第5讲 图标设计-图标

主要知识点:

5.1 认识图标

5.2图标设计原则

5.3图标设计流程

5.4图标设计技巧

教学要求:通过本章的学习，通过“扁平化相机图标设计”、“微扁平相机图标设计”和“相机写实图标设计”三个对比案例，详细讲解图标的设计技巧。

重点:图标设计规范。

难点:图标设计规范。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（六）第6讲 滑块

主要知识点:

6.1 滑块设计基础知识

6.2音量调节滑块设计

6.3金属质感旋钮滑块设计

6.4极简风格滑块设计

教学要求:本章将通过“音量调节滑块设计”、“金属质感旋钮滑块设计”和“极简风格滑块设计”三个案例，详细讲解滑块的设计技巧。

重点:滑块的设计要点。

难点:滑块的设计要点。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（七）第7讲 按钮设计

主要知识点:

7.1 按钮状态

7.2按钮设计技巧

教学要求:按钮是APP界面设计中不可或缺的控件，通过点击按钮，可以启动APP中的某项功能或者是实现页面间的跳转。在各类APP应用程序中都少不了按钮的参与。本章将通过“色块按钮设计”、“渐变质感按钮设计”和“水晶按钮设计”三个对比案例，详细讲解按钮的设计技巧。

重点:按钮的设计技巧。

难点:按钮的设计技巧。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（八）第8讲 表单控件设计

主要知识点:

8.1 认识表单控件

8.2表单控件设计原则

教学要求:在APP应用软件中，表单控件是必不可少的一部分。一个设计优秀的的APP表单控件可以极大地提高用户的点击、注册数量，提升界面的友好度。本章将通过“单选框”、“复选框”、“下拉选框”以及“搜索框”等几个典型表单控件为代表的案例，详细讲解表单控件的设计技巧。

重点:认识表单控件。

难点:认识表单控件。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（九）第9讲 APP导航设计

主要知识点:

9.1 认识APP导航

9.2标签式导航设计

9.3宫格式导航设计

教学要求:导航设计在APP设计中占有着举足轻重的地位，与用户体验效果密切相关。导航设计的专业与否直接决定了界面信息是否可以有效地传递给用户。优秀的导航设计会让用户轻松浏览到所需内容，而又不干扰和困惑用户。本章将通过“标签式导航设计”和“宫格式导航设计”两个案例，详细讲解APP导航设计中的相关技巧。

重点:认识APP导航。

难点:宫格式导航设计。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（十）第10讲 APP图片效果设计

主要知识点:

10.1 图片效果设计技巧

10.2 APP引导页设计

10.3音乐播放界面设计

教学要求:在APP界面设计中，对图片进行设计处理，可以使图片的色彩、形状、风格保持统一，呈现出更绚丽的效果。本章将通过“音乐播放界面设计”、“登录界面设计”两个案例，详细讲解APP中图片效果设计技巧。

重点:图片效果设计技巧。

难点:APP引导页设计。

采用的教学方法:教师讲解演示，学生讨论与实践。

讲授学时:1学时

实践学时:1学时

（11）第11主 字体设计思维方法（英文）

主要知识点:

11.1 明确要求

11.2英文文字

1.3印象

11.4基础字形与图形化

教学要求:通过本章的学习，使学生能够掌握英文文字的设计方法，能把字面以外的信息表达出来。

重点:基础字形与图形化。

难点:基础字形与图形化。

采用的教学方法:教师讲解演示，学生实践。

讲授学时:1学时

实践学时:1学时

（12）第12讲 字体设计思维方法（中文）

主要知识点:

12.1 文字设计原则

12.2文字形态创意设计

教学要求:通过本章的学习，使学生能够掌握文字的设计原则和形态创意设计的方法，能独立设计中文文字。

重点:文字设计原则、文字形态创意设计。

难点:文字形态创意设计。

采用的教学方法:教师讲解演示，学生实践。

讲授学时:1学时

实践学时:1学时

（13）第13讲 优选网APP项目设计

主要知识点:

13.1 产品定位

13.2 绘制草图和原型图

13.3项目设计定位

13.4项目设计剖析

教学要求:在前面章节中已经详细讲解了APP的元素构成，以及页面中不同模块的设计规范和设计技巧。相信大家对APP设计已经有所了解，为了对前面所学的知识点加以巩固，本章以“优选网App项目设计”为例，详细讲解一套完整的APP项目设计中应该掌握的设计方法和相关技巧。

重点:原型图的设计方法。

难点:各页面设计规范。

采用的教学方法:教师讲解演示，学生实践。

讲授学时:3学时

实践学时:3学时

（14）学生作品演示

实践学时:2学时

三、课程的预期学习成果

在本门课程结束时，学生应该能够:

1.了解用户界面的基本概念和历史发展

2.掌握用户界面设计方法学的广泛内涵、用户界面设计的基本方法和基本原则

3.掌握交互设计与用户界面设计的关系

4.掌握图像用户界面的特点和主要实现方法

5.基于主流技术，掌握基于Web的软件应用系统的用户界面设计实现过程

6.掌握可用性的概念和基本准则，能够对用户界面进行可用性测试和评估。

7.了解用户界面新技术。

四、课程要求

（一）出勤

学生应积极参与课堂教学并完成相关的作业、实验内容。

（二）阅读资料

学生应认真进行课前预习，阅读教材和指定参考书及重要的参考文献。

（三）课堂展示

根据时间及课堂班人数，在可能的情况下安排小组实验课程讨论与效果演示。

（四）课外实践

本课程是理论与实验结合的课程，每次理论课后就是实验内容。

（五）实验与期末考

课程中每一部分有相应的实验，期末以设计作品为考核。

（六）课程论文

以平时作业为主，安排小案例实验作为期中检查。

（七）学术诚信

按中山大学南方学院相关规定执行。

（八）剽窃的定义以及相应的惩罚

剽窃是严重违反学校规章制度的行为。一经发现，将上报相关部门，并受到包括开除学籍在内的严厉处罚。

五、课程资料

（一）教科书-必读

黑马程序．智能手机APP-UI设计与应用任务教程．中国铁道出版社．2017．

（二）教科书-强烈推荐

1、《创意UI Photoshop玩转游戏界面设计》Art Eyes设计工作室 人民邮电出版社 第1版 2015年5月。

2、《认知与设计:理解UI设计准则(第2版)》Jeff Johnson (作者), 张一宁 (译者), 王军锋 (译者)人民邮电出版社; 第2版 2014年8月。

（三）文章-必读

《UI入门》，《抄袭别人，超越自己》，《图标创意设计》，《UI设计中的用户需求分析》，《设计骨骼》，《UI界面风格》，《Illustrator cs 6完全自学手册》

（四）文章-强烈推荐

《UI入门》，《抄袭别人，超越自己》，《图标创意设计》，《UI设计中的用户 需求分析》，《设计骨骼》，《UI界面风格》

（五）其他参考资料

设计之家:http://www.sj33.cn/digital/uisj/

UI中国-专业界面交互设计平台:http://www.ui.cn/

dribbble :https://dribbble.com/

优设:https://www.uisdc.com/

站酷:https://www.zcool.com.cn/

花瓣:https://huaban.com/

UI中国: https://www.ui.cn/

大作: https://www.bigbigwork.com/

XD中文网:https://xd.94xy.com/

六、教学活动以及对于预期学习成果的评估

（一）教学活动

1、个人预习

2、课堂讲授

3、课堂问答

4、课后答疑

5、课后作业

6、课程设计

（二）对预期学习成果的考察

七、评估的程序和方法

（一）评分体系

1、出勤率: 10%

2、课堂参与: 10%

3、课后作业: 30%

4、期末考查: 50%

（二）考试内容及要求

考试包含以下内容:

综合实践部分

（1）能够掌握UI界面设计的基本知识，选用合适的设计工具（核心能力2）；

（2）根据实际问题的需求，按照任务要求，设计并完成综合实验（核心能力2）；

（3）能够根据课程要求，通过文字、图、表的形式撰写实验报告，并进行简单的分析（核心能力4、6）；

（4）能够按照综合实验要求，按时完成综合实验，了解业界在新方法与新技术，并培养良好的职业习惯（核心能力6）。

八、教学进度与学时分配表

注:此表一式三份，于开学两周内填好，一份送教务与科研部，一份开课单位留存，一份自留。