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

《信息交互界面设计与编程》课程教学大纲（中英文）一、课程基本信息（BasicCourseInformation）课程名称（CourseName）：信息交互界面设计与编程（InformationInteractiveInterfaceDesignandProgramming）课程代码（CourseCode）：（根据学校课程编码规则填写/Tobefilledaccordingtotheschool'scoursecodingrules）课程类型（CourseType）：专业核心课（适用于数字媒体技术、交互设计、计算机科学与技术、软件工程等专业）/CoreProfessionalCourse(SuitableformajorssuchasDigitalMediaTechnology,InteractionDesign,ComputerScienceandTechnology,SoftwareEngineering)适用对象（TargetAudience）：相关专业本科学生（三年级/四年级）/Undergraduatestudentsofrelevantmajors(Junior/Senioryear)总学时/学分（TotalClassHours/Credits）：64学时/4学分（理论24学时，实践40学时）/64ClassHours/4Credits(24TheoryHours,40PracticalHours)先修要求（Prerequisites）：计算机基础、设计基础、程序设计基础（如Python/JavaScript）/ComputerFundamentals,DesignFundamentals,BasicProgramming(e.g.,Python/JavaScript)考核方式（AssessmentMethod）：过程性考核（60%）+终结性考核（40%）/ProcessAssessment(60%)+SummativeAssessment(40%)二、课程性质与定位（CourseNatureandOrientation）中文：本课程是连接交互设计理论与技术实现的核心桥梁课程，兼具设计创新性与技术实践性。课程以信息交互界面为核心研究对象，系统覆盖界面设计的核心原则、设计流程与编程实现技术，融合用户体验设计思维与前端开发技术，旨在帮助学生掌握从用户需求分析、界面原型设计到前端代码实现的全流程能力。通过理论讲授、案例分析、项目驱动、实践创作等多元教学模式，培养学生的交互设计思维、界面审美能力与前端编程实践能力，为后续从事交互设计师、前端开发工程师、UI/UX设计师等相关工作奠定坚实基础。English：Thiscourseisacorebridgingcourseconnectinginteractiondesigntheoryandtechnicalimplementation,integratingdesigninnovationandtechnicalpracticality.Focusingoninformationinteractiveinterfacesasthecoreresearchobject,thecoursesystematicallycoversthecoreprinciples,designprocessesandprogrammingimplementationtechnologiesofinterfacedesign,integratinguserexperiencedesignthinkingandfront-enddevelopmenttechnology.Itaimstohelpstudentsmasterthefull-processcapabilitiesfromuserneedsanalysis,interfaceprototypedesigntofront-endcodeimplementation.Throughdiversifiedteachingmodessuchastheoreticallectures,caseanalysis,project-drivenlearningandpracticalcreation,students'interactivedesignthinking,interfaceaestheticabilityandfront-endprogrammingpracticalabilityarecultivated,layingasolidfoundationforfutureworkasinteractiondesigners,front-enddevelopers,UI/UXdesignersandotherrelatedpositions.三、教学目标（TeachingObjectives）（一）知识目标（KnowledgeObjectives）中文：掌握信息交互界面设计的核心概念、基本原则与设计流程，理解用户体验（UX）与用户界面（UI）的核心内涵。/English：Masterthecoreconcepts,basicprinciplesanddesignprocessesofinformationinteractiveinterfacedesign,andunderstandthecoreconnotationsofUserExperience(UX)andUserInterface(UI).中文：熟悉信息架构设计、交互流程设计、视觉界面设计的核心方法与规范。/English：Familiarizewiththecoremethodsandspecificationsofinformationarchitecturedesign,interactiveprocessdesignandvisualinterfacedesign.中文：掌握前端开发的核心技术基础，包括HTML、CSS、JavaScript等编程语言与相关框架的基本原理。/English：Masterthecoretechnicalfoundationoffront-enddevelopment,includingthebasicprinciplesofprogramminglanguagessuchasHTML,CSS,JavaScriptandrelatedframeworks.中文：了解主流交互设计工具（如Figma、Sketch、Axure）与前端开发工具的使用方法。/English：Understandtheusageofmainstreaminteractiondesigntools(e.g.,Figma,Sketch,Axure)andfront-enddevelopmenttools.中文：熟悉不同场景下（移动应用、网页应用、桌面应用）的界面设计特点与编程适配要求。/English：Familiarizewiththeinterfacedesigncharacteristicsandprogrammingadaptationrequirementsindifferentscenarios(mobileapplications,webapplications,desktopapplications).（二）能力目标（AbilityObjectives）中文：能够运用用户研究方法分析用户需求，完成信息架构设计与交互流程规划。/English：Beabletouseuserresearchmethodstoanalyzeuserneedsandcompleteinformationarchitecturedesignandinteractiveprocessplanning.中文：能够使用主流设计工具制作高质量的界面原型与视觉设计方案。/English：Beabletousemainstreamdesigntoolstocreatehigh-qualityinterfaceprototypesandvisualdesignschemes.中文：能够运用HTML、CSS、JavaScript实现基本交互界面的开发，完成界面布局、样式设计与交互效果实现。/English：BeabletouseHTML,CSSandJavaScripttoimplementthedevelopmentofbasicinteractiveinterfaces,completinginterfacelayout,styledesignandinteractiveeffectimplementation.中文：能够结合设计需求与技术规范，实现设计方案到代码的转化，解决设计与开发过程中的适配问题。/English：Beabletocombinedesignrequirementsandtechnicalspecificationstorealizethetransformationfromdesignschemestocode,andsolveadaptationproblemsinthedesignanddevelopmentprocess.中文：能够独立完成小型信息交互界面项目的全流程开发（需求分析-设计-开发-测试），并撰写相关设计与开发文档。/English：Beabletoindependentlycompletethefull-processdevelopment(needsanalysis-design-development-testing)ofsmall-scaleinformationinteractiveinterfaceprojects,andwriterelevantdesignanddevelopmentdocuments.（三）素养与情感目标（LiteracyandEmotionalObjectives）中文：培养以用户为中心的设计思维，树立良好的设计审美与细节把控意识。/English：Cultivateuser-centereddesignthinkingandestablishagoodsenseofdesignaestheticsanddetailcontrol.中文：提升技术与设计融合的综合素养，增强跨领域协作与问题解决能力。/English：Improvethecomprehensiveliteracyofintegratingtechnologyanddesign,andenhancecross-fieldcollaborationandproblem-solvingcapabilities.中文：培养创新意识与持续学习能力，主动关注交互设计与前端开发领域的前沿技术与发展趋势。/English：Cultivateinnovationawarenessandlifelonglearningability,andactivelypayattentiontothecutting-edgetechnologiesanddevelopmenttrendsinthefieldofinteractiondesignandfront-enddevelopment.中文：树立严谨的编程规范与设计伦理意识，注重产品的可用性、易用性与包容性。/English：Establisharigoroussenseofprogrammingstandardsanddesignethics,focusingontheusability,easeofuseandinclusivenessofproducts.四、教学内容与学时分配（TeachingContentandClassHourAllocation）章节/模块（Chapters/Modules）教学内容（TeachingContent）学时（ClassHours）教学方式（TeachingMethods）备注（Remarks）中文：模块一：课程导入与交互设计基础English：Module1:CourseIntroductionandInteractionDesignBasics

中文：1.课程介绍、教学要求与考核标准；2.信息交互界面设计核心概念（UX/UI、信息架构、交互流程）；3.交互设计发展历程与行业趋势；4.交互设计原则与用户体验要素；5.实践：交互设计经典案例分析与总结English：1.Courseintroduction,teachingrequirementsandassessmentstandards;2.Coreconceptsofinformationinteractiveinterfacedesign(UX/UI,informationarchitecture,interactiveprocess);3.Developmenthistoryandindustrytrendsofinteractiondesign;4.Interactiondesignprinciplesanduserexperienceelements;5.Practice:Analysisandsummaryofclassicinteractiondesigncases

6（理论4+实践2）6(4Theory+2Practice)中文：理论讲授+案例分析+小组讨论English：Theoreticallectures+Caseanalysis+Groupdiscussion

中文：夯实基础，建立交互设计基本认知English：Layasolidfoundationandestablishbasiccognitionofinteractiondesign

中文：模块二：用户研究与信息架构设计English：Module2:UserResearchandInformationArchitectureDesign

中文：1.用户研究方法（访谈、问卷、用户画像、场景分析）；2.信息架构设计方法（卡片分类、站点地图）；3.交互流程设计（用户流程图、任务流程图）；4.实践1：特定产品用户研究与需求分析；5.实践2：基于需求完成信息架构与交互流程设计English：1.Userresearchmethods(interview,questionnaire,userpersona,scenarioanalysis);2.Informationarchitecturedesignmethods(cardsorting,sitemap);3.Interactiveprocessdesign(userflowchart,taskflowchart);4.Practice1:Userresearchandneedsanalysisforspecificproducts;5.Practice2:Completeinformationarchitectureandinteractiveprocessdesignbasedonneeds

8（理论4+实践4）8(4Theory+4Practice)中文：理论讲授+方法演示+分组实践+成果点评English：Theoreticallectures+Methoddemonstration+Grouppractice+Achievementreview

中文：奠定设计基础，培养用户中心思维English：Laythefoundationfordesignandcultivateuser-centeredthinking

中文：模块三：界面原型设计与设计工具实操English：Module3:InterfacePrototypeDesignandDesignToolOperation中文：1.原型设计基础（低保真/高保真原型）；2.主流设计工具（Figma/Sketch/Axure）操作技巧；3.视觉界面设计基础（色彩、字体、布局、组件）；4.设计系统与组件化设计理念；5.实践：使用设计工具制作产品高保真原型English：1.Basicsofprototypedesign(low-fidelity/high-fidelityprototypes);2.Operationskillsofmainstreamdesigntools(Figma/Sketch/Axure);3.Basicsofvisualinterfacedesign(color,font,layout,components);4.Designsystemandcomponent-baseddesignconcept;5.Practice:Createhigh-fidelityproductprototypesusingdesigntools

12（理论4+实践8）12(4Theory+8Practice)中文：理论讲授+工具演示+一对一指导+实操训练English：Theoreticallectures+Tooldemonstration+One-on-oneguidance+Practicaltraining

中文：核心设计技能模块，提升原型制作能力English：Coredesignskillmoduletoimproveprototypeproductionability

中文：模块四：前端开发基础（HTML/CSS）English：Module4:Front-endDevelopmentBasics(HTML/CSS)

中文：1.前端开发概述与技术栈介绍；2.HTML基础：标签、语义化、表单元素；3.CSS基础：选择器、样式属性、盒模型；4.CSS布局技术（Flex、Grid）；5.实践：使用HTML/CSS实现简单界面布局与样式设计English：1.Overviewoffront-enddevelopmentandintroductiontotechnologystack;2.HTMLbasics:tags,semantics,formelements;3.CSSbasics:selectors,styleattributes,boxmodel;4.CSSlayouttechnologies(Flex,Grid);5.Practice:ImplementsimpleinterfacelayoutandstyledesignusingHTML/CSS

12（理论4+实践8）12(4Theory+8Practice)中文：理论讲授+代码演示+实操练习+问题答疑English：Theoreticallectures+Codedemonstration+Practicalexercises+Q&A

中文：核心技术基础模块，掌握界面实现底层技术English：Coretechnicalfoundationmoduletomastertheunderlyingtechnologyofinterfaceimplementation

中文：模块五：交互效果实现（JavaScript）English：Module5:InteractiveEffectImplementation(JavaScript)

中文：1.JavaScript基础（变量、函数、条件语句、循环）；2.DOM操作与事件处理；3.常见交互效果实现（表单验证、动画效果、页面跳转）；4.前端框架基础（如Vue/React入门）；5.实践：为HTML/CSS界面添加交互效果English：1.JavaScriptbasics(variables,functions,conditionalstatements,loops);2.DOMoperationandeventhandling;3.Implementationofcommoninteractiveeffects(formverification,animationeffects,pagejump);4.Front-endframeworkbasics(e.g.,Vue/Reactintroduction);5.Practice:AddinteractiveeffectstoHTML/CSSinterfaces

16（理论6+实践10）16(6Theory+10Practice)中文：理论讲授+代码演示+分组练习+项目指导English：Theoreticallectures+Codedemonstration+Groupexercises+Projectguidance

中文：核心交互实现模块，打通设计与开发链路English：Coreinteractionimplementationmoduletoconnectdesignanddevelopmentlinks

中文：模块六：综合项目实战与成果展示English：Module6:ComprehensiveProjectPracticeandAchievementDisplay

中文：1.综合项目需求拆解与方案设计；2.项目开发流程与进度管理；3.实践：完成小型信息交互界面项目（从需求分析、设计到开发测试）；4.项目文档撰写（设计说明书、开发文档）；5.成果展示与答辩；6.课程总结与行业发展展望English：1.Comprehensiveprojectrequirementdecompositionandschemedesign;2.Projectdevelopmentprocessandprogressmanagement;3.Practice:Completeasmall-scaleinformationinteractiveinterfaceproject(fromneedsanalysis,designtodevelopmentandtesting);4.Projectdocumentwriting(designspecification,developmentdocument);5.Achievementdisplayanddefense;6.Coursesummaryandindustrydevelopmentoutlook

10（理论2+实践8）10(2Theory+8Practice)中文：项目指导+分组实战+答辩点评+总结回顾English：Projectguidance+Grouppracticalcombat+Defensereview+Summaryreview

中文：整合知识技能，检验综合应用能力English：Integrateknowledgeandskillstotestcomprehensiveapplicationcapabilities

五、教学方法与手段（TeachingMethodsandMeans）中文：理论讲授法：系统讲解交互设计理论与前端开发知识，结合多媒体课件、案例视频、代码演示等资源，清晰呈现教学内容。/English：TheoreticalLectureMethod:Systematicallyexplaininteractiondesigntheoryandfront-enddevelopmentknowledge,andclearlypresentteachingcontentcombinedwithmultimediacourseware,casevideos,codedemonstrationsandotherresources.

中文：案例分析法：选取国内外优秀交互设计案例与前端开发项目，从设计理念、技术实现、用户体验等维度进行深度剖析，引导学生总结规律与方法。/English：CaseAnalysisMethod:Selectexcellentdomesticandforeigninteractiondesigncasesandfront-enddevelopmentprojects,conductin-depthanalysisfromthedimensionsofdesignconcept,technicalimplementationanduserexperience,andguidestudentstosummarizelawsandmethods.

中文：工具实操法：针对设计工具与开发工具，进行现场演示与手把手指导，组织学生开展阶梯式实操训练，提升工具使用熟练度。/English：ToolOperationMethod:Conducton-sitedemonstrationsandhands-onguidancefordesigntoolsanddevelopmenttools,organizestudentstocarryoutstep-by-steppracticaltraining,andimprovetooluseproficiency.

中文：项目驱动法：以完整的交互界面设计与开发项目为核心，引导学生以小组或个人形式完成全流程任务，培养综合应用能力与项目管理意识。/English：Project-DrivenMethod:Takingacompleteinteractiveinterfacedesignanddevelopmentprojectasthecore,guidestudentstocompletethefull-processtasksingroupsorindividually,andcultivatecomprehensiveapplicationcapabilitiesandprojectmanagementawareness.

中文：分组协作法：将学生分为若干小组，明确分工与协作要求，通过小组讨论、任务分工、成果共享等形式，培养团队协作与沟通能力。/English：GroupCollaborationMethod:Dividestudentsintoseveralgroups,clarifydivisionoflaborandcollaborationrequirements,andcultivateteamcollaborationandcommunicationcapabilitiesthroughgroupdiscussions,taskdivision,achievementsharingandotherforms.

中文：线上线下融合法：借助线上教学平台发布学习资源、布置作业、开展互动答疑；线下聚焦理论讲解、实操指导与成果点评，提升教学效率。/English：Online-OfflineIntegrationMethod:Releaselearningresources,assignhomeworkandcarryoutinteractiveQ&Athroughonlineteachingplatforms;focusontheoreticalexplanations,practicalguidanceandachievementreviewsofflinetoimproveteachingefficiency.

六、考核方式与评分标准（AssessmentMethodsandGradingStandards）（一）考核构成（AssessmentComposition）中文：课程总成绩=过程性考核（60%）+终结性考核（40%）/English：TotalCourseScore=ProcessAssessment(60%)+SummativeAssessment(40%)（二）过程性考核（60分）（ProcessAssessment(60Points)）中文：出勤与课堂表现（10分）：全勤得10分，每缺勤1学时扣2分，缺勤5学时及以上过程性考核记0分；积极参与课堂讨论、实操练习等活动得5-10分，被动参与得1-4分。/English：AttendanceandClassroomPerformance(10Points):Fullattendancegets10points,2pointsdeductedforeachabsentclasshour,and0pointsforprocessassessmentifabsentfor5ormoreclasshours;5-10pointsforactiveparticipationinclassroomdiscussions,practicalexercisesandotheractivities,and1-4pointsforpassiveparticipation.

中文：阶段性作业（25分）：包括案例分析报告、原型设计作业、HTML/CSS/JavaScript实操作业等，共3-4次。每次作业按完成质量、创新性、规范性评分，质量高得6-8分，一般得3-5分，未完成得0分。/English：PhasedAssignments(25Points):Includingcaseanalysisreports,prototypedesignassignments,HTML/CSS/JavaScriptpracticalassignments,etc.,totaling3-4times.Eachassignmentisscoredaccordingtocompletionquality,innovationandstandardization:6-8pointsforhighquality,3-5pointsforaveragequality,and0pointsforincomplete.

中文：阶段性项目（25分）：完成小型交互界面设计与开发项目（如简单网页应用/移动应用界面），提交设计原型与代码。按需求理解准确性、设计合理性、代码规范性、交互效果实现度评分。/English：PhasedProject(25Points):Completeasmall-scaleinteractiveinterfacedesignanddevelopmentproject(e.g.,simplewebapplication/mobileapplicationinterface),andsubmitdesignprototypesandcode.Scoredaccordingtotheaccuracyofdemandunderstanding,rationalityofdesign,standardizationofcodeandimplementationdegreeofinteractiveeffects.

（三）终结性考核（40分）（SummativeAssessment(40Points)）中文：考核形式：综合项目答辩+书面测试（比例：3:1）/English：AssessmentForm:ComprehensiveProjectDefense+WrittenTest(Ratio:3:1)中文：综合项目答辩（30分）：学生展示期末综合项目（全流程设计与开发成果），阐述设计理念、开发过程与核心技术；回应评委提问。按项目完整性、创新性、技术难度、表达清晰度评分。/English：ComprehensiveProjectDefense(30Points):Studentsdisplaythefinalcomprehensiveproject(full-processdesignanddevelopmentachievements),elaborateonthedesignconcept,developmentprocessandcoretechnologies;respondtojudges'questions.Scoredaccordingtoprojectcompleteness,innovation,technicaldifficultyandexpressionclarity.

中文：书面测试（10分）：考察核心理论知识（交互设计原则、前端开发基础概念）与基础代码阅读、编写能力。/English：WrittenTest(10Points):Examinecoretheoreticalknowledge(interactiondesignprinciples,basicconceptsoffront-enddevelopment)andbasiccodereadingandwritingcapabilities.

（四）成绩等级（ScoreGrades）中文：90-100分：优秀；80-89分：良好；70-79分：中等；60-69分：及格；60分以下：不及格/English：90-100Points:Excellent;80-89Points:Good;70-79Points:Average;60-69Points:Pass;Below60Points:Fail七、教学资源（TeachingResources）中文：教材与参考书：《交互设计精髓》（AlanCooper著）、《HTML/CSS/JavaScript前端开发实战》、《FigmaUI设计实战》、《Vue.js实战》/English：TextbooksandReferenceBooks:"AboutFace:TheEssentialsofInteractionDesign"(byAlanCooper),"Front-endDevelopmentPracticewithHTML/CSS/JavaScript","FigmaUIDesignPractice","Vue.jsPractice"

中文：设计与开发工具：Figma、Sketch、Axure、VSCode、浏览器开发者工具等/English：DesignandDevelopmentTools:Figma,Sketch,Axure,VSCode,BrowserDeveloperTools,etc.

中文：案例与文献资源：国内外优秀交互设计案例库、UI/UX设计博客、前端开发技术社区（如掘金、GitHub）、核心期刊（《装饰》《数字媒体技术》）/English：CaseandLiteratureResources:Excellentdomesticandforeigninteractiondesigncaselibraries,UI/UXdesignblogs,front-enddevelopmenttechnologycommunities(e.g.,Juejin,GitHub),corejournals("Decoration","DigitalMediaTechnology")中文：多媒体资源：交互设计教学视频、前端开发技术教程、行业专家讲座视频/English：MultimediaResources:Interactiondesignteachingvideos,front-enddevelopmenttechnologytutorials,industryexpertlecturevideos

中文：网络与实践资源：中国大学MOOC相关精品课程、设计平台（如站酷、Behance）、校企合作实践基地/English：NetworkandPracticeResources:ExcellentcoursesrelatedtoChinaUniversityMOOC,designplatforms(e.g.,Zcool,Behance),university-enterprisecooperationpracticebases

八、教学注意事项（TeachingNotes）中文：课前了解学生的设计基础与编程基础差异，针对性调整教学难度；合理选取案例与项目，兼顾不同层次学生需求。/English：Understandthedifferencesinstudents'designandprogrammingfoundationsbeforeclass,andadjusttheteachingdifficultyaccordingly;selectcasesandprojectsreasonablytomeettheneedsofstudentsatdifferentlevels.

中文：注重设计与技术的融合，避免割裂教学；引导学生理解设计方案的技术可行性，提升跨领域思考能力。/English：Focusontheintegrationofdesignandtechnology,avoidfragmentedteaching;guidestudentstounderstandthetechnicalfeasibilityofdesignschemesandimprovecro