《UI界面设计》教学大纲

《UI界面设计》教学大纲适用范围：202X版本科人才培养方案课程代码：08150501课程性质：专业选修课学分：4学分学时：64学时（理论48学时，实验16学时）先修课程：色彩与构成后续课程：移动平台游戏开发、交互产品开发适用专业：数字媒体技术开课单位：计算机科学与技术学院一、课程说明UI界面设计是数字媒体技术专业本科学生的专业选修课。通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，了解UI设计的基础知识，并掌握UI设计各要素的相关理论知识与设计方法，以及UI界面的布局与规划等知识。具备UI界面的分析与规划能力，能够根据用户需求，对目前主流的各大App、网站、网页等对象的界面进行设计与输出。UI界面设计是一门新的学科，也称之为当代的新媒体，它是跨学科的学术领域，是在各门相关学科中提取相关的内容要素而综合起来的系统学科。在教学过程中，应立足于加强学生实际操作能力的培养，采用项目教学，以任务引领提高学生学习兴趣，激发学生的成就动机。二、课程目标通过本课程的学习，使学生达到如下目标：课程目标1：了解UI界面设计的内涵、研究领域及发展趋势，具备相关领域的复合知识结构。课程目标2：从心理学、人机工程学、设计艺术出发，了解UI设计的基础知识，并掌握UI设计各要素的相关理论知识与设计方法，以及UI界面的布局与规划等知识。课程目标3：培养学生团队合作、沟通能力，运用所学知识分析和解决问题，创新设计思维，培养学生的UI界面设计的制作能力，使学生掌握界面设计制作的基本知识。三、课程目标与毕业要求《UI界面设计》课程教学目标对数字媒体技术专业毕业要求的支撑见表1。表1课程教学目标与毕业要求关系毕业要求指标点课程目标支撑强度3.设计/开发解决方案3.2能针对数字媒体领域各个层次复杂工程问题的特定需求，进行数字媒体系统的模块设计，进而完成系统设计。课程目标2：从心理学、人机工程学、设计艺术出发，掌握UI设计各要素的相关理论知识与设计方法，以及UI界面的布局与规划等知识，具备UI界面的分析与规划能力。H10.沟通10.1掌握技术文件写作方法，能够撰写数字媒体技术方面的报告和设计文件，符合行业规范和要求。课程目标3：培养学生团队合作、沟通能力，运用所学知识分析和解决问题，创新设计思维，培养学生的UI界面设计的制作能力，使学生掌握界面设计制作的基本知识。M12.终身学习12.2能适应职业发展要求，及时关注并跟踪、把握数字媒体技术领域前沿理论、技术的发展动态，具备不断获取新的知识、技能，持续自我提升的能力。课程目标1：了解UI界面设计的内涵、研究领域及发展趋势，具备相关领域的复合知识结构。M注：表中“H（高）、M（中）”表示课程与毕业要求的关联度。四、教学内容、基本要求与学时分配1.理论部分理论部分的教学内容、基本要求与学时分配见表2。表2教学内容、基本要求与学时分配教学内容教学要求，教学重点难点理论学时实验学时对应的课程目标1.认识UI设计1.1UI设计概述1.2UI设计的运用1.3UI设计的原则1.4UI设计的流程教学要求：什么是UI设计、UI设计的用户体验与常用工具；UI设计在移动App界面、网页界面、游戏界面、应用软件界面等领域的应用；人工智能产品、AR产品界面、VR产品界面设计。重点：分析设计需求、明确视觉定位、绘制原型图、绘制效果图、标注与切图。难点：UI设计的原则和流程。412.UI设计要素2.1点、线、面2.2色彩2.3字体2.4风格教学要求：了解UI界面设计的要素。重点：点、线、面；色彩的属性、对比以及搭配；UI设计常用字体类型、字体规范、字体排版。难点：界面风格的设计要点、设计风格。421、23.UI设计规范3.1UI设计规范3.2不同操作系统的UI设计规范3.3UI设计的图片规范教学要求：UI设计规范的原则、包括的内容，图片的格式、使用规范。重点：iOS、Android、Windows操作系统的UI设计规范。难点：iOS、AndroidUI设计规范。61、2、34.UI设计布局与构图4.1UI设计的布局元素4.2UI设计的布局原则4.3UI设计的构图方法教学要求：留白、视觉层次；对齐、对比、重复、平衡、节奏与韵律原则；平衡构图、放射式构图、九宫格构图、三角形构图、F形构图、S形构图。重点：UI设计的布局原则和构图方法。难点：UI设计的构图方法。841、2、35.网页界面设计5.1认识网页界面5.2网页界面Logo和按钮设计5.3网页界面设计教学要求：网页界面的组成、常见的网页界面布局方式、网页界面的设计要求；Logo设计标准与样式、按钮的类型和特点、设计旅行网Logo、设计网页登录按钮；网页首页界面的主要功能、注意事项、制作网页首页界面、制作网页内页界面。重点：网页界面Logo和按钮设计。难点：网页界面设计。822、36.App界面设计6.1认识App界面6.2App界面图标设计6.3App首页界面设计6.4App列表页界面设计6.5App其他界面设计教学要求：App基本界面构成、布局形式、设计要点；认识App界面图标、App界面图标类型、App界面图标设计要点；App首页界面类型、设计要点；App列表页界面类型、App列表页界面设计原则；App其他界面类型。重点：App基本界面构成、布局形式、设计要点。难点：App界面图标、App界面图标类型、App界面图标设计要点。822、37.界面的标注、切图与动效制作7.1界面的标注7.2界面的切图7.3界面的动效制作教学要求：界面标注的作用、内容、规范、常用工具；界面动效的作用、类型；制作加载动效。重点：切图的原则、要点、命名规则。难点：界面标注的作用、内容、规范。42、38.综合案例——电商主题界面设计8.1家居网案例分析8.2家居网界面设计8.3家居网App界面设计教学要求：家居网项目定位、设计思路、绘制家居网界面原型图；设计家居网Logo、首页界面、内页界面；设计家居网App首页界面、App发现页界面、App详情页界面、App商品结算页界面、App个人中心页界面、App登录页界面。重点：家居网项目定位、设计思路。难点：设计家居网Logo、首页界面、内页界面。661、2、3合计48162.实验部分实验部分的教学内容、基本要求与学时分配见表3。表3实验项目、实验内容与学时实验项目实验内容和要求实验学时对应的课程目标1.UI设计要素实验内容：了解UI界面设计的要素。实验要求：通过UI设计要素的练习，掌握元素、色彩、字体和风格。222.UI设计布局与构图实验内容：UI设计布局与构图练习。实验要求：通过平衡构图、放射式构图、九宫格构图、三角形构图、F形构图、S形构图等构图方法进行界面设计，并掌握构图原则。42、33.网页与App界面设计实验内容：网页和App界面构成、布局形式、设计要点练习实验要求：通过临摹界面设计，掌握网页和App界面构成、布局形式、设计要点。41、2、34.主题界面设计实验内容：自定义App主题界面设计。实验要求：自定项目主题，明确定位、设计思路、绘制界面原型图，完成设计Logo、首页界面、内页界面布局及设计。61、2、3合计16五、教学方法及手段本课程以课堂讲授为主，结合讨论、案例、视频资源共享、实验等教学手段完成课程教学任务和相关能力的培养。通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，掌握UI设计各要素的相关理论知识与设计方法，以及UI界面的布局与规划等知识，具备UI界面的分析与规划能力。通过本课程的学习，学生应该掌握软件的基本操作，并初步具备UI界面设计能力。在实验教学环节中，通过启发式教学、讨论式教学培养学生UI界面设计的基本理论、基本知识和基本技能。培养学生自主学习能力、实际动手能力，激发学生的创新思维。在实验前学生应复习和掌握与本实验有关的教学内容、认真阅读实验指导书；在实验中要严格遵守实验纪律，按操作规程使用仪器；实验结束后，按规定对仪器进行维护保养；每完成一项实验，要认真完成一份实验报告。六、课程资源1.推荐教材：（1）叶军，江韵竹.《UI设计》[M].北京:人民邮电出版社.2021.（2）黎娅,任劲松编.《UI界面设计与制作教程》[M].北京:中国水利水电出版社.2020.2.参考书：（1）肖睿，杨菊英，李丹.《移动UI界面设计》[M].北京:人民邮电出版社.2019.（2）张磊，黄玮雯.《移动UI设计实战（微课版）》[M].北京:人民邮电出版社.2021.3.期刊：（1）陈尧.谈UI设计视觉表现中的“简”与“繁”[D].天津工业大学.2018.（2）王锐.基于UI设计的交互性与界面视觉设计研究[J].无线互联科技.2020,17(07):143-144.（3）陈武晓,梁丹丹.基于用户体验的移动端UI交互设计探究[J].计算机产品与流通,2020(08):26+28.（4）李敏.艺术设计中的UI界面设计及应用[J].信息与电脑(理论版),2020,32(12):80-82.（5）SufyanbinUzayr.MasteringUIMockupsandFrameworks:ABeginner'sGuide.MasteringComputerScience.2021-11-24.4.网络资源：（1）UI界面设计，慕课网/course/NJUPT-1464128175（2）UI设计师之路，慕课网/course/CQTBI-1464037180七、课程考核对课程目标的支撑课程成绩由过程性考核成绩和期末考核成绩构成，具体考核/评价细则及对课程目标的支撑关系见表4。表4课程考核对课程目标的支撑考核环节占比考核/评价细则课程目标123过程性考核课堂表现16（1）根据课堂出勤情况和课堂回答问题情况进行考核，满分40分。（2）以平时考核成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√565实验10（1）根据每个实验的实验操作完成情况和实验报告质量单独评分，满分25分；（2）每次实验单独评分，取各次实验成绩的平均值作为此环节的最终成绩。（3）以实验成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√424作业8（1）主要考核学生对各章节知识点的复习、理解和掌握程度，满分20分；（2）每次作业单独评分，取各次成绩的平均值作为此环节的最终成绩。（3）以作业成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√233线上学习6（1）根据线上课程视频和章节学习次数进行评分，满分15分；（2）以课程视频和学习次数成绩乘以其在总评成绩中所占的比例计入课程总评成绩。√√√222期末考核60（1）期末大作业成绩100分，以成绩乘以其在总评成绩中所占的比例计入课程总评成绩。（2）主要考核UI设计要素、设计规范、布局与构图等内容。（3）大作业内容：综合网站或APP的设计与制作。√√√252510合计：100分383824八、考核与成绩评定1.考核方式及成绩评定考核方式：本课程主要以课堂表现、实验、作业、线上学习、期末大作业等方式对学生进行考核评价。考核基本要求：考核总成绩由期末大作业和过程性考核成绩组成。其中：期末大作业为100分（权重60%）；课堂表现、实验、作业、线上学习等过程性考核成绩为100分（权重40%）；过程性考核和期末大作业分值分配应与教学大纲各章节的学时基本成比例。2.过程性考核成绩的标准过程性考核方式重点考核内容、评价标准、所占比重见表5。表5过程性考核方式评价标准考核方式所占比重(%)100>x≥9090>x≥8080>x≥7070>x≥60x<60课堂表现40笔记完整，积极参与教学活动，踊跃回答问题，准确率大于90%。笔记完整，认真参与教学活动，回答问题准确率大于80%。笔记不完整，偶尔参与教学活动，回答问题准确率大于70%。上课不认真，上课不记笔记，偶尔参与教学活动。上课不认真，上课不记笔记，不参与教学活动。实验25实验预习认真，能够熟练掌握方法与步骤，实验操作过程熟练、规范，遵规守纪、团结协作，实验结果详实、结论清晰、讨论合理实验前有预习，能够掌握方法与步骤，实验操作过程正确、规范，遵规守纪、团结协作，实验结果正确、讨论适当实验前有预习，基本能够掌握方法与步骤，实验操作过程基本正确、无协作，实