项目1 交互设计概述-备课笔记

【认识交互设计部分】项目一：交互设计概述一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入在日常生活中，大家会频繁的面对各种网页操作或App操作，而这些应用中所体现出来的操作逻辑，动态效果，内容编排方式，则是影响用户对这些程序应用体验的全部因素；如何让用户感觉到一部应用程序的流畅、方便、清晰、高效、记忆深刻，则是我们这门交互设计课程的根本任务，本节课则是介绍网页交互设计中的基本流程，并了解一部网页是如何通过交互设计来满足大众的操作需求的。三、理论知识讲解（一）交互设计的基本概念1.基本概念交互设计可以用简单的术语来理解：它是用户和产品之间交互的设计。大多数情况下，当人们谈论交互设计时，他们讨论的产品往往是应用程序或网站等产品。交互设计的目的是提供给用户具有可用性的产品，来帮助用户实现其目标。这个定义听起来很广泛，那是因为交互设计囊括了相当多的内容。交互设计通常涉及美学设计，动态设计，声音设计，空间设计等内容。当然，这些领域会交叠融合，因此我们可以说交互设计是一个跨学科领域的融合。2.生活中的交互能量…………………【思政融入（从疫情防控，感受中国制度优势）】用户与产品之间的交互需要在当前更加趋向于多线程，多维度，多情境，实时化这样的“三多一实”要素。在2020年我国的疫情攻坚战中，各大综合信息网站对疫情的防控情况进行了实时的数据发布，方便了广大群众的“了解”需要，同时也用多维度的交互设计呈现方式，清晰明了的向大家展现了我们在各个方面的战疫成果。这种实时性的动态资讯网站，在美术设计，交互心理设计，信息呈现设计等多方面都做了细致的考量。【课后思考：第一，生活中的交互设计中，“便捷”与“全面”的关系；第二，广义的交互设计的含义。】（二）交互设计的流程1.设计流程环节网页交互设计的工作，需要参与前期的需求分析、后期开发、测试验收等产品设计与实现的多个环节。我们的工作流程如图中所示：项目立项后，需要进行产品分析包括需求和架构分析、根据分析做原型设计，通过评审后进行视觉设计；确认后，进入前端与后台开发，完成后进行测试阶段，直至产品最终上线；这是网页交互设计的一个流程；产品最终是用户使用，那么用户的体验尤为重要，下面我们从用户体验的五个层面来进行重点讲解。（三）开发人员配置.................................................................................【思政融入：团队协作的本质是共同奉献】当我们开发一款产品时，通常都是由一个团队的成员共同完成，而团队的特点是以目标为导向，以协作为基础，需要共同的规范和方法，在技术或技能上形成互补。团队协作的本质是共同奉献，这种共同奉献需要一个切实可行、具有挑战意义且让成员能够为之信服的目标。只有这样，才能激发团队的工作动力和奉献精神，不分彼此，在一个团队里面，并不是说每一个成员各方面能力都特别棒，而是能够很好地借物使力，取团队其它成员的长处来补自己的短处，也把自己的长处优点分享给大家，互相学习交流，共同进步，遇到问题都及时交流，才能让团队的力量发挥得淋漓尽致。（1）产品经理开发一个产品，需要对客户的需求进行分析，同时对市场上同类型或其他产品比较了解，了解用户习惯、产品的定位、功能、逻辑，在头脑里要有清晰的逻辑，这就是产品经理的主要职责。产品经理经过专业的市场洞察、客户分析、用户体验等，将客户的要求形成详细的功能文档，然后和团队成员制作出清晰简洁的交互产品原型图，原型图包括各项功能排布、业务逻辑、页面交互等等。（2）UI设计师UI设计师主要负责App产品的界面设计和交互设计，根据产品经理的需求进行App页面及元素的设计。（3）前端工程师前端口工程师主要负责将UI设计师设计完成的页面是代码实现出来，是开发团队中最不可缺少的人员。前端口工程师：主要分为Android或iOS两个不同系统的客户端的开发，分别由Android开发工程师及iOS开发工程师完成。（4）后台程序开发主要完成运营管理后台的开发，包括数据及服务器的部署等。（5）测试人员测试人员相当于产品开发的质量检查员，进行功能，性能，兼容性等总体测试，发现bug反馈给对应的开发人员进行修改。另外，当产品上线后，经过多个版本的迭代，用户数量越来越多，就需要大数据工程师；运维工程师需要将产品的代码需要部署到一个服务器上，日常的维护都是由运维工程师来负责；在产品刚刚上线时，如果涉及到推广还需要有运营、市场营销、售前/售后工程师等。（四）产品交互原型的分类交互原型根据页面的保真程度可以划分为草图、低保真和高保真。在进行原型设计之前，我们需要根据使用场景、使用人群、或者是项目的不同阶段来设计不同保真度的产品原型。1.草图草图通常用于产品早期的概念阶段。在项目立项的早期，对于产品的功能及业务场景都处于规划阶段，没有明确成熟的产品方案，团队成员在项目规划，进行头脑风暴的会议时我们需要能够快速呈现产品雏形的原型，且便于及时修改。草图绘制阶段的原型大部分都是手绘稿，一边讨论产品功能，另一边直接绘制产品原型，这个阶段的原型大部分都是在白板或者在白纸上手绘完成，在讨论的过程中发现问题，及时修改。草图原型能够表达出基本的界面功能及内容布局即可，利用基本的几何图形如方框、圆和一些线段表达产品雏形，只需要参与讨论会议的人员明白大概意图即可。草图的优势在于设计成本低，能够随时进行修改，在项目早期有很多不确定因素的前提下，尽量使用草图进行讨论评审。2.低保真当我们明确了产品的业务需求及使用场景以后，产品经理和交互设计师们可以使用低保真原型来快速设计产品的概貌。产品经理和交互设计师们通过项目早期阶段明确了产品的功能需求及业务范围，根据业务会议上确定的产品方案，首先需要梳理清楚产品的功能结构和信息结构，根据业务需求推导出详细的功能点。工作产品的战略目标、需求范围、功能结构都清楚以后，就可以开始正式绘制线框图了，线框图又称为低保真原型。线框图可以帮助我们准确拆分页面、以及每个页面的功能模块及展示信息，确定每个页面元素的界面布局。线框图与草图相比较而言，视觉显示及意图表达上更准确了。线框图的绘制需要借助于原型设计工具，线框图中的元素布局以及功能模块需要无限接近产品上线后的样子。低保真原型阶段可以不考虑界面元素的配色以及各功能的交互跳转及动画效果。界面的配色是UI设计师的工作，丰富的交互动作也不适合在这个阶段去详细分析。通常查看低保真原型完成后，需要与需求提出人员、UI设计师、前端工程师、后端工程师以及测试人员进行召开原型设计评审会，根据评审结果，需要对低保真原型进行多轮调整，直至达成一致结果，确保能往下推进。低保真原型确定后，UI设计师及开发工程师们可以据此进行项目实施了。3.高保真高保真原型常用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资。高保真原型又可以成为产品的Demo，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能，完全是一个高度仿真产品，对于一些非专业的高层领导、老板及投资人，他们希望看到的是一个无线接近线上产品的Demo，能够尽可能详细的了解产品的功能及业务需求，从视觉显示以及交互动作上都和真实产品大致相同。高保真原型需要在低保真的基础上进行配色，插入真实的图片及图标。充分利用原型工具中每一类元件的样式及专有的交互属性为原型增加保真度，为相关的元件及页面添加交互事件、配置交互动作。这样从视觉显示及交互设计来看，就是一个高保真原型。在明确当前的项目阶段及使用人群后，再决定什么样保真度的原型才是最合适的。既不能为了方便而总是使用草图，也不能一味的追求高保真原型，而是综合评估使用的场景及用户因素，在工作当中，我们使用最多的是低保真原型，毕竟项目团队中最关心产品原型的是项目的实施人员，低保真原型也能较为准确的阐述项目需求，以及一些简单的交互跳转及交互效果，可以让行业内的设计人员一看便知。有些业务规则及交互细节上的效果，还需要配以说明文档，这样才能方便开发及测试人员深刻理解产品需求。交互设计的常用软件交互设计案例分析四、实践技能训练（一）布置训练任务任务1.以实际应用出发整理一篇网页交互设计需求文字任务2.选择一个网站，通过用户体验要素分析该网站的用户体验层级，并以word文档的方式呈现。（二）实战项目案例行业网站交互需求构架剖析。………【难点】教师重点指导：典型交互网站的构架分类；尝试设计命题类的网站构架设计；框架在网站设计中的使用。【学生初次进行设计实践，教师应多引导，帮助学生形成设计方案，指导学生完成图案草稿绘制】五、课堂总结今天，我们主要结合网页交互设计案例学习了设计流程、网页交互构架和网页交互界面设计原理（分类，适用范围，组合）等相关理论，也针对相关理论做了一些练习，想必同学们通过练习对网页交互设计原理和框架设计基本类型有了一定的了解和掌握。希望同学们课后继续对你所接触到的相关作品，用专业的眼光，分析交互产品的交互设计法则和交互界面设计基本原则，这样有助于你们对知