UI设计教学大纲教案.docx

《UI设计教学大纲教案.docx》由会员分享，可在线阅读，更多相关《UI设计教学大纲教案.docx（14页珍藏版）》请在优知文库上搜索。

1、U1.设计（全彩慕课版）教学大纲一、课程信息ra：U设计（全彩幕课版）峰别：兴质选修课，专业基础课程性及，选修/必修计笈学时：24计笈学分；2先修森无选用【材，WIi殳计全彩墓课版），叶军江的竹编著,2021年：人民邮电出版社出版教材；适用去建：本一可作为南等院校U1.设计类课程的教材，也可作为U1.设计相关工作人员的参考书.程负费人，二、课程简介本书全面困绕U1.设计的相关知识和操作技能展开讲解,内容新期i,深浅适度，知识全面，在形式上本书完全按照现代教学需求诳行编写，适合实际教学，在内容上木书不仅对Ui设计的基础知识和常见设计规范及方法进行了介绍，还通过实例的形式，对不同类型的U1.设计进

2、行了介绍,理论与实践相结合.具有较强的实用性.同时，为了帮助读者快速了解U1.设计,并掌握不同类型的UI设计方法，编者在阐述理论的同时，结合大小设计案例，使读者能将所学知识应用于实际工作中，更满足行业的制求。本书第1-4章主要对U1.设计相关的基础知识进行讲解,第5-6主要对网页界面设计、APP界面设计进行讲解.第7章主要对界面的标注、切图与功效制作的方法诳行道好.第8章则通过保合案例讲解完整的电商主题界面设计与制作方法，三、课程教学要求序号/业毕业要求售程学要求1工程知识1.2问也分析了解U1.设计的基础知识，并掌握UI设计各要案的相关理论知识与设计方法,以及U1.界面的布局与规划等知识H3

3、设计/开发解决方案具备U1.界面的分析与规划能力,能够根据用户需求，对目前主流的各大APP、网站、网页等对象的界面进行设计与输出H1研究H5使用现代工具Photoshop、I1.1.ustrator1.4UI设计布局与构图UI设计的布局元索UI设计的布局原则UI设计的构图方法曲白、觇觉层次对齐、对比、重更、平瘠、节奏与的律原则平衡构图、放射式构图、九宫格构图、三角形构图、F形构图、S形构图3理论+上机5网页界面设计认识网页界面网页界面1.OgO和按钮设计网页界面设计网页界面的组成、常见的网页界面布局方式、网页界面的设计要求1.og。设计标准与样式、按钮的类里和特戊、设计旅行网1.oko、设计网

4、页登录按钮网页首页界面的主要功能、注意事项、制作网页首页界面、制作网页内页界面3理论+上机6App界面设计认识APP界面App界面图标设计APP首页界面设计App列表页界面设iApp其他界面设计App葩本界面构成、布局形式、设计要点认识APP界面图标界面图标类型、APP界面图标设计要点、设计“书画应用”2.5D图标APP首页界面类型、设计要点、设计美食APP首页界面APP列表页界面类型、APP列表页界面设计原则、设计美食APP列表页界面App其他界面类型、设计美食pp关注页界面、设计美食APP个人中心页界面4理论+上机7界面的标注、切图与动效制作界面的标注界面的切图界面的动效制作界面标注的作用

5、、内杵、规范、常用工具切图的原则、要点、命名规则界面动效的作用、类型制作加战动效3PI!+上机8综合案例一一电商主遨界面设计家居网案例分析家居网界面设计家居网App界面设it-家居网项目定位、设计思路、绘制家居同界面原型图设计家居网1.og。、首页界面、内页界面设计家居网APP首页界面/、App发现页界面、App详情页界面、App商品结算页界面、APP个人中心页界而、APP登录页界面3理论+上机3UI设计（全彩慕课版）配套教学教案第1章课时内容认识U1.设计授课时间90分仲课时2教学目标了解什么是U1.设计了解U1.设计的运用与发展趋势熟怂U1.设计的晚则教学重点UI设计的用户体缝UI设计的常

6、用工具U1.设计的应用领域U1.设计的暴木原则教学难点分析界面的设计特点UI设计的基本流程教学设计1 .教学思路，1）对U1.设计的基础知识进行介绍，包括什么是CI设计、UI设计的用户体验、UI设计的常用工具:讲解U1.设计在移动APP界航网页界面、游戏界面、应用软件界面等领域的应用：（3讲解U设计未来的发展趋势：（4讲解U1.设计的版期，包括适用性、规范性、易操作性、统一性、层级性：（5）G后讲解U1.设计的流程.2 .教学手段：（I）通过演示讲解基础知识,讲解结束后通过项目实训巩固所学知识：（2）对于重点内容者近讲解.3 .教学资料及要求：除教材中的实例外，可以补充讲解U1.设计的一些案例

7、，加深学员时U1.设计的理斛。教学内容4 .热急UI设计的原则。5 .掌握U1.设计的流程.1 .列举经典的UI设计，并分析其优点.2 .查找资料,思考U1设计还有哪些设计原则.3 .查找资料,思考U1.改计还有哪些新的应用领域.4 .对下图所示的智能手表界面进行货析，分析其U1.设计的原则。思考与练习1.1.1 UI设计常用字体类型1.1.2 U1.设计字体熄范1.1.3 U1.设计中的字体排版1.1.4 设计案例小游戏APP界面中的文字设计2.4 风格2.4.1 界面风格的设计暨点2.4.2 界面W见的设计风格2.4.3 设计案例插画风格的网站登录界面设计2.5 项目实训项目一分析网站首页

8、的UI设计项目二设计读书APP启动页界面思考与练习小结1 .掌握京、线、面3大地本要素，2 .常握色彩、字体和风格的设计要点.I,列举经典的U1.设计案例，并分析其色彩、字体和风格特点.2 .查找资料，思考还有哪些常见的U1.设计风格.3 .对下图所示的网站登荥界而进行赏析.分析其色彩搭配.思考及作业心4.利用收集的素材制作美食网站界面,完成后的参考效果如下图所示。课时内容U1.iSi1.赛瑟授课时间90分钟课时2教学目标了解U1.设计的现苞熟悉不同系统下的U1.设计规范了解UI设计的图片规葩教学重点UI设计规范的原则不同操作系统的U1.设计规范图片的格式教学难点U1.设计规范包括的内容iOS

9、和Android操作系统的U1.设计现就图片的使用规范教学设计1 .教学思路：(1)训解UI设计规范的班础知识，包括UI设计规范的原则、U1.设计煨范包括的内容等：(2)讲解不同操作系统的U1.设计规范，包括iOS.Android.Wind。WS撵作系统等：(3)讲解U1.设计可使用的图片格式,以及图片使用现等.2 .教学手段：(1通过演示讲解基础知识，讲解结束后通过项目实训巩固所学知识：(2)对于理点内容着重讲解.3 .教学资料及要求：除教材中的实例外，可根据学习情况对其他优秀的U1.设计作品进行分析看看其是否符合设计规范.教学内容知识回顾：在前面讲解了U1.设计要素的相关知识，本章将对U1

10、.设计规范的相关知识进行介绍.讨论问筮：1.1.I设计的图标怎么为断其是否符合规范？2. iOS和Android操作系统的规范有哪些不同？内容大纫：具体可结合本章的PPT课件进行配合讲解.2.1 了解U1.设计煨范2.1.1 U1.设计规数的原则2.1.2 U1.设计规他包括的内容2.2 不ISJ操作系统的U1.设计规数2.2.1 iOS的UI设计熄范2.2.2 Android操作系统的U1.设计规范2.2.3 Windows操作系统的U1.设计规抱2.3 UI设计的图片现范2.3.1 图片的格式2.3.2 图片的使用Mt范2.4 项目实训分析某App界面中的UI设计规范思考与练习课时内容界面

11、的标注、切图与动效制作授课时间135分钟课时3教学目标掌握界面的标注掌握界面的切图掌握界面的动效制作教学重点掌握界面标注的作用、内容掌握界面切图的原则界面动效的作用、类型教学难点掌握界面标注的规范、常用工具掌握界面切图的要点与命名规则掌握界面动效的设计方法教学设计1 .教学思路：(1)讲解界面标注的基础制作,包括界面标注的作用、内容、规范、常用工具：2界面界面切图的原则、要点与命名规则：(3)掌握界面动效的作用、.类型与设计方法.2 .教学手段：(1)通过演示讲解基础知识，讲解结束后通过设计案例和项目实训巩固所学知识：(2)对于重点内容着重讲解，3 .教学资料及要求：除教材中的实例外，还可以设

12、计其他APP界面的动效,并进行切图.教学内容知识回顾：前面介绍了APP界面设计的相关知识.本章主要介绍界面的标注、切图与动效制作等制作.讨论问题：1.怎么为界面添加标注？2 .哪一种工具方便为界面添加标注？3 .怎么对界面的主体部分进行切图？4 .怎么设计一个不停闪烁的按钮图标？内容大纲：具体可结合本点的PPT课件进行配合讲解,7.1 界面的标注7.1.1 界面标注的作用7.1.2 界面标注的内容7.1.3 界面标注的规范7.1.4 界面标注的常用工具7.1.5 设计案例一标注APP甘页界面7.2 界面的切图7.2.1 切图的原则7.2.2 切图的饕点7.2.3 切图的命名战期7.2.4 设计

13、案例对APP苜页界面进行切图7.3界面的动效制作7.3.1 界面动效的作刖7.3.2 界而功效的类型7.3.3 设计案例制作加我动效7.1项目实训一-标注M中关注页界面思考与练习9:41AMt100%-关注.1 .了解并掌握界面的标注小结2 .掌握界面的切图3 .学握界面的功效制作思考与练使用AfterEffectsCC2018制作倒计时动效，在制作时先绘制曙形，然后添加习文本,最后对文本设置倒计时动效,完成后的蛰考效果如图所示.课时内容综合案Wf授课时间135分钟课时3教学目标掌握设计案例的定位和构思方法，以及原型图的绘制方法掌握电商主遨界面的设计方法教学重点家居网项目定位、设计思路设计家居

14、网1.og。、首页界面和内页界面教学难点绘制家居网界面原型图设计家居网App首页界面、APP发现页界面、APP详情页界面、App商品结算页界面、APD个人中心页界面、APP登录页界面教学设计1 .教学思路；(D分析家居网，明确家居网的项目定位、设计思谿和原型图；设计家居网的1.Og。、网站首页、内页：(3)设计家居网APP首页界面、APP发现页界面、APP详情页界面、APP商品结算页界面、APP个人中心页界面、APP登录页界面。2 .教学手段：通过分析案例明确设计思路，然具体设计网站界面和APP界面，从而巩冏本书讲说内容.3 .教学资料及要求：除教材中的实例外，还可以进行其他类型的界面设计.教学内容知识回顾：前面介绍了界面的标注、切图与动效制作的相关知识,本章主要进行绘令案例电商主区界面设计.讨论问题：1.网页界面的设计思路怎么定位？2. App界面的设计思路怎么定位？内容大纫：具体可结合本章的PPT课件进行配合讲解.2.1 家居网案例分析2.1.1 家居网项目定位2.1.2 家居网设计思