UI设计基础

李露露

目录

  • 1 《UI设计基础》课程导学
    • 1.1 课程介绍
    • 1.2 课程思政
    • 1.3 教学团队介绍
    • 1.4 人才培养方案
    • 1.5 课程标准
    • 1.6 教学日历
  • 2 《UI设计基础》概述
    • 2.1 UI设计的概念
    • 2.2 UI设计的流程
    • 2.3 UI设计规范
    • 2.4 本章小结
    • 2.5 单元测验
  • 3 项目一:图标设计
    • 3.1 图标设计概述
    • 3.2 图标设计流程
    • 3.3 图标设计规范
    • 3.4 图标设计项目实战
    • 3.5 本章小结
    • 3.6 单元测验
    • 3.7 图标设计案例欣赏
  • 4 项目二:界面设计
    • 4.1 界面设计概述
    • 4.2 界面设计分类
    • 4.3 界面设计规范
    • 4.4 界面设计项目实战
    • 4.5 本章小结
    • 4.6 单元测验
    • 4.7 界面设计案例欣赏
  • 5 项目三:交互设计
    • 5.1 交互设计团队的组成
    • 5.2 交互设计的要素
    • 5.3 交互设计的流程
    • 5.4 交互设计项目实战
    • 5.5 本章小结
    • 5.6 单元测验
    • 5.7 交互设计案例欣赏
  • 6 《UI设计基础》综合项目实战
    • 6.1 生活类APP UI设计
    • 6.2 影音娱乐类APP UI设计
    • 6.3 社交类APP UI设计
    • 6.4 游戏类APP UI设计
课程标准

《UI设计基础》课程标准

一、课程基本信息

课程编码

03020202

课程名称

UI设计基础

开设学期

课程类别

专业核心课

总学时

理论16+实训16

学分

2

适用专业

软件技术

二、课程定位与作用

(一)课程定位

UI设计基础》是软件技术专业培养课程体系中重要的一门专业必修课程,随着智能终端设备的发展和普及,人们越来越注重用户界面的视觉设计和操作体验,产品的UI(用户界面)设计需求越来越专业化,UI设计人才的市场需求量也越来越大。

本课程以从事UI设计需要具备的职业能力入手,由浅入深的介绍与UI设计相关的知识和技术,采用理实一体化教学,具有很强的实践性和应用性。通过本课程的学习,使学生掌握UI设计所需的基本理论知识,具备一定的UI设计开发技能,培养学生的工匠精神和创新能力以及团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质。该课程既可以巩固前期所学的专业课程,还重在给学生开拓新的专业知识面,认知一个新的设计领域,从而拓展职业能力和就业选择面。

(二)课程的作用

UI设计所面向的领域包括平面媒体设计、网页端界面设计、移动端界面设计、交互设计和互联网产品设计等。UI设计行业发展前景广阔,对从业人员的素质、能力有相对较高的要求。

通过课程的学习,使学生了解UI界面设计的基本理念,掌握UI界面设计所需的基本知识和方法,掌握UI界面设计的基本技能,使学生具备主要常用的一些APP主题界面的设计能力和精细ICON图标的表现能力,并具有一定的综合创作能力。同时培养学生创新思维能力和健康的审美意识以及团结协作能力,为其成长为一名合格的UI设计与制作人员奠定良好的基础,帮助学生在学习制作图像的过程中,培养审美能力,形成创新意识。

三、课程设计理念

UI设计基础》课程的总体设计思路是遵循任务引领、做学一体的原则,参照人才培养方案的相关内容,以UI界面设计的相关工作任务要求为依据设置。课程内容的选取围绕UI界面设计应具备的职业能力要求,同时充分考虑本专业学生对本课程相关理论知识的需要。

课程内容的组织以UI界面设计的步骤流程和方法为主线,包括App图标设计与制作、APP界面设计、交互设计、UI设计综合项目实战等多个学习任务。采用“任务驱动、案例教学、过程指导、探究实践”的教学模式,模拟知识点的实际应用,使学生置身于工作情境中,提高学生工作能力的培养。通过各项目的练习操作,熟练地掌握岗位所需知识和技能。

四、课程目标

课程目标1:能够综合运用UI设计的设计流程、设计规范、设计方法等基础知识,建立对UI设计的整体认识,培养科学健康的审美观、积极向上的审美情趣,为后续课程的学习打下坚实的基础。

课程目标2:能够根据图标设计的分类、原则、方法和流程确定图标风格,进行图标草图绘制,养成良好的职业习惯为图标设计项目实战奠定基础。

课程目标3能够掌握图标设计的系统规范和设计制作规范,锻炼自我学习的能力,综合运用所学知识完成图标设计的项目实战。

课程目标4:能够综合运用界面设计的内容、设计要点和表现手法加深对界面设计分类的理解,建立系统思维和整体意识,完成界面设计项目实战。

课程目标5:能够依照界面设计的系统规范、设计制作规范加深对界面设计的整体认知,建立规则意识,从而更好的完成界面设计项目实战。

课程目标6:能够根据交互设计团队岗位分工和交互设计要素明确交互设计主要内容,建立团队意识,更加深入的了解交互设计的方法和技巧。

课程目标7:能够综合运用交互设计的流程,从前期准备到中期设计再到后期跟进,合理利用用户建模卡片、思维导图、低保真原型图、高保真原型图等设计载体,树立严谨的工作态度,完成交互设计项目实战。

五、课程内容设计

UI设计基础》课程内容与学时安排

学习情境/项目

子学习情境

(任务/子项目)

思政点

学习成果

教学活动设计

建议学时

对应课程目标

第一单元:UI设计概述

1.1 UI设计的概念

通过列举各类UI设计app及网站,围绕UI涉及的学科内容展开讲解,培养学生的发散思维,同时加深学生的爱国主义意识。

1.了解UI设计的概念、UI设计的用户体验与常用设计工具

 

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标1

1.2 UI设计的流程

1.掌握UI设计的工作流程

 

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

1.3 UI设计的规范

1.掌握UI设计的规范

 

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

第二单元:主题图标设计

2.1 图标设计概述

通过观看“安卓图标的发展史,围绕图标设计展开讲解,培养学生的综合能力、和创新思维。

1.了解图标的概念

2.掌握图标设计的分类

3.掌握图标设计的原则

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标2

2.2 图标设计流程 

1.了解图标设计风格

2.掌握图标草图绘制的规范

4.掌握PS基本操作

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

2.3 图标设计规范

通过优秀图标设计案例分析,引导学生树立规范意识和团队合作意识。

1.掌握图标设计系统规范

2.掌握图标设计制作规范

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标3

2.4 图标设计项目实战

通过项目实战培养学生的创新意识和精益求精的工匠精神。

1.能够利用所学知识完成图标项目实战

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标3

 

 

 

 

 

 

 

 

 

 

第三单元:界面设计

3.1 界面设计概述

通过界面设计经典案例赏析,探索此类作品存在的共性,培养学生的审美意识,以及独立思考、归纳总结的能力。

1.了解界面设计的内容

2.了解界面设计的注意要点

3.了解界面设计的表现手法

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标4

3.2界面设计分类

1.了解常见的APP界面

2.掌握APP界面的布局设计原理和布局方式

3.掌握APP界面颜色的设计方法

 

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

3.3 界面设计规范

通过列举时代发展手机界面的变革,围绕界面设计内容展开讲解,培养学生的规则意识和爱国主义情怀。

1.掌握界面设计的系统规范

2.掌握界面设计的制作规范

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标5

3.4界面设计项目实战

通过项目实战,融入严谨细致的工匠精神及UI设计师职业素养。

1.能够利用所学知识完成界面设计项目实战

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标5

第四单元:交互设计

4.1 交互设计团队的组成

通过时政素材引入,培养同学们的爱国主义精神以及意识到团队的重要性,培养团队合作意识。

1.了解交互设计团队的组成 

2.掌握交互设计的要素

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标6

4.2 交互设计的要素

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

4.3 交互设计的流程

宣传临沂传统感美食“豆鼓”,感受临沂优秀传统文化培养,通过教授和提问以及小组讨论的形式,锻炼同学们独立思考、以及协作分工、沟通表达的能力。

1.了解交互设计的流程

2.能够进行用户建模

3.能够完成竞品分析

4.能够进行产品流程图绘制

5.掌握低保真原型图和高保真原型图的绘制

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

2

课程目标7

4.4交互设计项目实战

通过项目实战,培养同学们攻坚克难、细致严谨的思维意识。

1. 能够利用所学知识完成交互设计项目实战

 

1.导入

2.知识准备

3.任务描述

4.实施指导

5.任务拓展

4

课程目标7

六、课程实施

(一)教学团队基本要求

本课程由软件技术专业专任教师团队进行授课专业团队由一名副教授,三名助教组成,团队教师具备前沿的UI设计与制作的理论基础,还有一定的实践技能能力。具备设计课程教学和组织课堂教学的能力能够根据本课程标准制定详细的授课计划,对每一堂课的教学过程精心设计,做出详细、具体的安排;还应该具备较强的施教能力,即掌握扎实的教学基本功并能够因材施教,具备良好的师德和终身学习能力,积极开展课程与教学改革在教学过程中还应具备一定的课堂控制能力和应变能力。

(二)校内外实践教学条件要求

校内实训基地条件要求:完善配套的实训基地建设是顺利实施人才培养方案的关键要素之一。实训室一般配备黑(白)板、多媒体计算机、投影设备(多媒体电视)、音响设备,互联网接入或Wi-Fi环境,并实施网络安全防护措施;安装应急照明装置并保持良好状态,符合紧急疏散要求,标志明显,保持逃生通道畅通无阻;应按1:1配备计算机,安装有photoshopFireworksIllustrator、XMind、dreamweaver等必备软件。

校外实训基地条件要求:根据专业人才培养需要和产业技术发展特点,建立具备社会实践和学生顶岗实习功能的实训基地,具有稳定的校外实训基地;能够开展UI设计实训活动,实训设施齐备,实训岗位、实训指导教师确定,实训管理及实施规章制度齐全,保障有效的工作时间。

(三)教学方法建议

结合职业能力要求,以典型工作任务为载体设计学习情境和项目,将企业的真实工作任务作为教学内容,做到职业素养和专业技能培养并重。采用基于工作过程的任务导向的教学方法,理论与实践相结合,采取“理实一体化”教学方式,“教、学、做”有机融合,突出岗位能力与素质的培养,把能力培养贯穿于教学过程的始终,培养学生职业素质。

学习方法建议

教师要引导学生学会自主学习建议学生采用自主学习法、分组讨论法、探究学习法、任务驱动法等学习方法,改变课堂学习为主的传统学习方式。使学生真正成为学习的主人,从而增强对信息技术发展变化的适应能力。

(五)教学评价、考核要求

教学评价和考核中贯彻能力本位的理念。变单向教学评价为多元评价,将静态教学评价变为动态评价;变学生被动应对考试为主动参与考核,将结果式考核变为分阶段分层次的过程考核。

在设计教学考核方式时,不再简单进行理论知识考核和单一的期末考试等做法,推行教学评价、考核的多元性,要对知识与技能、过程与方法、情感态度与价值观等进行全面评价。 

七、课程资源开发与利用

(一)教材的选用与编写

1.按照国家规定选用优质教材,经教研室开会研讨,确认选择优质教材。或依据本课程标准编写教材,教材应充分体现任务引领、实践导向课程的设计思想目前选用“十三五”职业教育规划教材:《移动UI交互设计》,人民邮电出版社出版,夏琰主编。

2.教材应将本专业课程职业活动,分解成若干典型的工作项目。要以实际项目为载体,引入必备的专业知识,增加实践内容,强调理论在实践过程中的应用。

3.教材应图文并茂,符合UI设计课程特色,提高学生的学习兴趣,加深学生对UI设计的认识和理解。教材表达必须精炼、准确、科学。

4.教材内容应体现先进性、通用性、实用性,要将本专业新技术、新方法、新成果及时地纳入教材,使教材更贴近本专业的发展和实际需要。

5.教材中的活动设计的内容要具体,并具有可操作性。

(二)网络资源建设

建议教师对教学中的重难点制作微课视频、搭建网络课程平台和远程实验室开放平台提供给学生。

(三)信息化教学资源建设

教师在授课过程中为学生提供文本类、图形/图像类、微课视频类、动画类、虚拟仿真类、PPT 演示文稿等素材与资料,帮助学生独立自主的学习。

(四)其它教学资源的开发与利用

1.充分利用行业资源,为学生提供阶段实训,让学生在真实的环境中磨练自己,提升其职业综合素质。

2.编写实训指导手册和电子实验题目,通过完成具体的工作任务来让学生体会学习的乐趣和成就感。  

3.推荐学生课外阅读参考资料:

UI设计(全彩慕课版)》 叶军编著,人民邮电出版社出版

《移动终端UI设计)》 迟晓曼编著,北京邮电出版社出版

《移动UI设计案例教材》李开华编著,航空工业出版社

UI设计基础与实战项目教程》夏琰编著,人民邮电出版社

八、其他说明

1.主讲教师根据本课程标准及教学周历制定具体的授课计划,标注(选)的项目可以根据教学课时进行安排。

2.本课程实行理实一体化教学,建议全程在机房授课。