《信息交互界面设计与编程》课程教学大纲（中英文）

1、- 8 -信息交互界面设计与编程教学大纲课程代码074101221课程名称信息交互界面设计与编程英文名称Information interactive interface design and programming课程类别学科基础课课程性质必修学时总学时：64上机实验学时：16实验学时：0实践学时：0实创学时：0学分4开课学期第四学期开课单位设计学院适用专业交互设计、工业设计、产品设计授课语言中文授课先修课程工业设计概论、工程训练毕业要求（专业培养能力）本课程对学生达到如下毕业要求有如下贡献：1.工程知识：掌握扎实的基础知识、专业基本原理、方法和手段，能够将数学、自然科学、本专业基础知识和专

2、业知识用于解决复杂工程问题，并接触和掌握造型材料、表面技术、成形工艺和数字化知识，为解决企业机械工程实际复杂问题打下知识基础。2.问题分析：能够应用数学、自然科学、本专业基本原理、方法和手段和工业设计知识，识别、表达、并通过文献研究分析工业产品制造性中的复杂问题，以获得有效结论。3.设计/开发解决方案：能够设计针对工业产品复杂问题的解决方案，设计满足特定需求的造型材料、表面技术或工艺流程，并能够在设计环节中体现创新意识，考虑社会、健康、安全、法律、文化以及环境等因素。4.研究：能够基于科学原理并采用科学方法对工业产品复杂问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结

3、论。5.使用现代工具：能够针对工业产品复杂问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，包括对工业产品复杂问题的预测与模拟，并能够理解其局限性。课程培养学生的能力（教学目标）完成课程后，学生将具备以下能力：（1）掌握信息交互界面设计的基本原理和基本知识，培养学生发现问题、解决问题的基本能力。1、2（2掌握信息交互界面编程概念，并逐步在设计过程中应用这些先进技术，从而能将精力集中于创意和构思，高效地开展创新活动。3、5课程简介课程是工业设计的专业基础课，也是交互设计专业学生的一门必修课，通过本课程学习，使学生具备PC网站和手机端网站整体策划、建设、维护和管理的基本知识，能熟

4、练运用网页制作软件和编程语言进行网站的创建、布局和编辑，熟悉网站美工创作、动画设计与制作，能够根据相关主题进行网站设计和制作。教学内容与学时分配（一）绪论：明确本课程的任务、要求、内容和学习方法 4学时（1）思政教学1学时十八大互联网+发展的理解新工科人才发展的理解（2）课程导论 3学时1.课程概述2. 开发工具介绍（二）界面原型设计 4学时1. 界面原型设计流程2. 界面原型设计工具（三）HTML5文字与图像4学时1. 文字与排版2. 超链接3. 嵌入图片（四）HTML5列表表格表单4学时1. 列表2. 表格3. 表单（五）层叠样式表CSS选择器4学时1.CSS基本概念2.CSS选择器3.C

5、SS选择器优先级（六）层叠样式表CSS布局 4学时1. 盒子模型2. 定位（七）层叠样式表CSS3 4学时1. CSS3简介2. CSS3新增选择器3. CSS3文本、字体4. CSS3转换、过渡、动画（八）响应式Web设计4学时1. 响应式Web设计简介2. 视窗- Viewport3. 媒体查询与断点4. 弹性框Flexbox（九）响应式图片与表格4学时1. 响应式图片2. 响应式表格（十）脚本JavaScript简介4学时1. JavaScript简介2. JavaScript循环3. JavaScript函数（十一）HTML5 Video与Audio4学时1.HTML5 Video2.

6、 HTML5 Audio（十二）Web前端框架Bootstrap4学时1. Bootstrap简介2. Bootstrap 网格系统3.Bootstrap 布局组件（十三）Web前端框架jQuery4学时1.jQuery简介2. jQuery DOM 操作3.jQuery 遍历（十四）移动端界面设计4学时1.移动页面构成2.组件3. 输入与输出（十五）Web前端移动端框架jQuery mobile4学时1. jQuery mobile简介2. jQuerymobile组件（十六）Wechat小程序开发简介4学时1.Wechat小程序简介2. Wechat小程序开发工具2. Wechat小程序开

7、发示例实验教学（包括上机学时、实验学时、实践学时、实创学时）实验16学时,实践0学时，实创学时：0教学方法课程教学以课堂教学、课外作业、综合讨论、网络以及授课教师的科研项目于积累等共同实施。考核方式平时作业和课堂表现：30%，课程设计占70%。教材及参考书主要参考资料：1HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站陈婉凌著，清华大学出版社，2014年2HTML5程序设计Peter Lubbers 等著；柳靖等译，人民邮电出版社，2012年3移动应用界面设计Steven Hoober, Eric Berkman等著；柳敏等译，机械工业出版社，2013年4JavaScr

8、ipt宝典 Danny Goodman（美），电子工业出版社，2009年5移动Web开发从入门到精通. 王翠萍. 中国铁道出版社. 2016Information Interactive Interface Design and Programming SyllabusCourse Code074101221Course TitleInformation Interactive Interface Design and ProgrammingEnglish TitleInformationInteractive Interface Design and ProgrammingCourse Ca

9、tegoryBasic coursesCourse NatureCompulsorycoursesCredit HoursTotal: 64 Computer: 0 Experiment: 0 Practice: 0 Practical innovation: 16Credit4SemesterFourth SemesterInstituteSchool of DesignProgram OrientedInteraction design, industrial design and product designTeaching LanguageTeaching in ChinesePrer

10、equisitesConcept of industrial design and engineering training IStudent Outcomes (Special Training Ability)This course contributes to student outcomes as follows: 1. Engineering knowledge: master the basic knowledge, professional basic principles, methods and means to be able to apply mathematics, n

11、atural science, basic knowledge and expertise of this major to solve complicatedly engineering problems, and contact and master the modelling materials, surface technology, formation process and digital knowledge to lay knowledge foundation for solving actual complex problems of machinery project of

12、 enterprise.(2) Problem analysis: apply the basic principles, methods and means of the mathematics, natural science and the major as well as knowledge related to the industrial design to identify, express and obtain effective solutions through complicated problems in the literature research and anal

13、ysis design product.3. Design/development solution: capable of designing the solution aiming at the complex problems of industrial products, designing the modeling materials, surface technology or process flow meeting the specific demands, embodying innovation awareness in the design link, and consi

14、dering society, health, safety, law, culture, environment, etc.4. Research: research the complex problems of the industrial products based on the scientific principle and scientific method, including design experiment, analysis and interpretation data, obtaining rational and effective conclusion by

15、comprehensive information.5. Use modern tools: capable of developing, selecting and using proper technology, resource, modern project tool and information technology tool aiming at the complex problems of the industrial product, including predicating and simulating the complex problems of the indust

16、rial product as well as understanding the boundedness.Course for Students Ability Development (Teaching Objectives)After the courses, students will have the following capabilities:(1) Master the basic principles and knowledge of information interactive interface design, and cultivate the basic capab

17、ility for students to find out and solve problems. 1、2(2 Master the concept of information interactive interface programming and apply the advanced technologies in the design process gradually , concentrate the energy in the creation and concept so as to develop the innovation activity effectively.

18、3、5Course DescriptionThe course is a specialized core course of industrial design and a compulsory course for students of interactive design major. Through this course, students will enjoy the basic knowledge of overall planning, building, maintenance and management of PC website and mobile phone we

19、bsite. Students can be familiar with the use of website to develop software and programming language for creation, layout and editing of the website, as well as the site art designing creation, animation design and production so that they can carry out the website design and production in accordance

20、 with relevant themes.Distribution of Teaching Contents and Class Hours(1) Introduction: Define the tasks, requirements, contents and learning methods of the course4 class hours1) Ideological and political education 1 class hourUnderstanding of Internet + development of the 18th CPC national congres

21、sUnderstanding of new engineering talent development2) Course introduction 3 class hour1. Course overview2. Introduction of Development Tools(2) Interface prototype design4 class hours1. Interface prototype design process2. Interface prototype design tools(3) HTML5 Text and Image4 class hours1. Text

22、 and Typesetting2. Hyperlinks3. Embedded Pictures(4) HTML5 List , Table and Form4 class hours1. List2. Table3. Form(5) Cascading Style Sheet- CSS Selector 4 class hours1. Basic concepts of CSS2. CSS selector3. CSS selector priority(6) Cascading Style Sheet CSS Layout4 class hours1. Box model2. posit

23、ioning(7) Cascading Style Sheet CSS3 4 class hours1. Introduction to CSS32. Additional selectors for CSS33. CSS3 Text and Font4. CSS3 Transition, Animation(8) Responsive Web Design 4 class hours1. A Brief Introduction to Responsive Web Design2. Viewport3. Media queries and breakpoints4. Flexbox with

24、 elastic frame(9) Responsive Pictures and Forms4 class hours1. Responsive pictures2. Response Form(10) Introduction to script JavaScript 4 class hours1. Introduction to JavaScript2. JavaScript loops3. JavaScript functions(11) HTML5 Video and Audio 4 class hours1. HTML5 Video2. HTML5 Audio(12) Bootst

25、rap of Web Front-end Framework4 class hours1. Introduction to Bootstrap2. Bootstrap grid system3. Bootstrap layout component(13) jQuery of Web Front-end Framework4 class hours1. Introduction to jQuery2. jQuery DOM operation3. jQuery traversal(14) mobile interface design4 class hours1. Mobile Page Co

26、mposition2. components3. Input and output(15) jQuery Mobile ofWeb Front-end Mobile Framework4 class hours1. Introduction to jQuery Mobile2. jQuery mobile component(16) Introduction to Wechat Small Program Development4 class hours1. Introduction to Wechat applet2. Wechat applet development tool2. Examples of Wechat applet development Experimental teaching (including computer class hours, experimental class hours, practice class hours, practical innovation class hours)Experiment