1.1 录课-第一章1网页交互设计流程初识-备课笔记

编号01-01【认识交互设计部分】编号01-01学习任务一、网页交互设计流程初识（一）一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。编号01-022.课程导入编号01-02在日常生活中，大家会频繁的面对各种网页操作或App操作，而这些应用中所体现出来的操作逻辑，动态效果，内容编排方式，则是影响用户对这些程序应用体验的全部因素；如何让用户感觉到一部应用程序的流畅、方便、清晰、高效、记忆深刻，则是我们这门交互设计课程的根本任务，本节课则是介绍网页交互设计中的基本流程，并了解一部网页是如何通过交互设计来满足大众的操作需求的。三、理论知识讲解（一）交互设计概念讲解1.基本概念交互设计可以用简单的术语来理解：它是用户和产品之间交互的设计。大多数情况下，当人们谈论交互设计时，他们讨论的产品往往是应用程序或网站等产品。交互设计的目的是提供给用户具有可用性的产品，来帮助用户实现其目标。这个定义听起来很广泛，那是因为交互设计囊括了相当多的内容。交互设计通常涉及美学设计，动态设计，声音设计，空间设计等内容。当然，这些领域会交叠融合，因此我们可以说交互设计是一个跨学科领域的融合。2.生活中的交互能量…………………【思政融入（从疫情防控，感受中国制度优势）】用户与产品之间的交互需要在当前更加趋向于多线程，多维度，多情境，实时化这样的“三多一实”要素。在2020年我国的疫情攻坚战中，各大综合信息网站对疫情的防控情况进行了实时的数据发布，方便了广大群众的“了解”需要，同时也用多维度的交互设计呈现方式，清晰明了的向大家展现了我们在各个方面的战疫成果。这种实时性的动态资讯网站，在美术设计，交互心理设计，信息呈现设计等多方面都做了细致的考量。【课后思考：第一，生活中的交互设计中，“便捷”与“全面”的关系；第二，广义的交互设计的含义。】（二）网页交互设计流程……………【重点】1.设计流程环节网页交互设计的工作，需要参与前期的需求分析、后期开发、测试验收等产品设计与实现的多个环节。我们的工作流程如图中所示：项目立项后，需要进行产品分析包括需求和架构分析、根据分析做原型设计，通过评审后进行视觉设计；确认后，进入前端与后台开发，完成后进行测试阶段，直至产品最终上线；这是网页交互设计的一个流程；编号01-03编号01-03产品最终是用户使用，那么用户的体验尤为重要，下面我们从用户体验的五个层面来进行重点讲解。用户体验要素…………………1.层次要素用户体验的五个层面分为：战略层、范围层、结构层、框架层、表现层。五个层面自上而下地建设，从抽象到具体。2.具体的概念战略层：也就是“产品目标、用户需求”，通俗来讲，就是经营者想从网站上得到什么，用户想从网站上得到什么？【在这里，我们仍然可以用抗疫网站的需求来说明这一点，用户针对网站的需求涉及到：了解数据，周边情况查询，最新通告，在线求助等。那么，重点深入某种需求或者全面覆盖多种需求，则决定了下面的几个层面的设计考量】范围层：也就是“功能规格和内容需求”，当我们把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时，战略就变成了范围。也就是明确“我们要开发的是什么？结构层：就是“交互设计、信息架构”，它的目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。编号01-04框架层：即界面设计、导航设计、信息设计层。用来确定用什么样的功能和形式来实现。编号01-04表现层：即视觉设计；主要解决“产品框架层的逻辑排布”的感知呈现问题。其中，“结构层”与“框架层”是我们要讲述的重点。（四）结构层与信息架构……………………【重点】1.信息架构概念信息架构主要体现在信息型产品的结构层，对于目前市面上的大部分产品，内容是躲不开的，因此信息架构也是我们需要重点理解的部分。在以内容为主的网页上，信息架构的主要工作是设计组织分类和导航的结构，让用户可以高效率、有效地浏览网站的内容，使呈现给用户的信息合理并且具有意义。首先创建分类体系。创建方式可以是从上到下也可以是从下到上。分类中的关系可以是线性关系（如书、文章)、层级关系等2.结构层方法信息架构的基本单位是节点（node）。节点可以对应任意的信息片段或组合，可以是一个数字，一个控件，一个组件，一个页面，甚至一个功能。节点的抽象性使我们能明确地设定对产品关注点的详略程度。常见的结构类型有层级结构、矩阵结构、自然结构、线性结构。各种结构层的形象说明层级结构：又叫树状结构或中心辐射结构。它的节点与其他相关节点之间存在父级/子级的关系。矩阵结构：允许用户在节点与节点之间沿着两个或更多的“维度”移动。

自然结构：不会遵循任何一致的模式。节点是被逐一连接起来的，同时这种结构没有太强的分类概念。线性结构：连贯的语言流程是最基本的信息结构类型。比如：书、文章、音像和录像全部都被设计成编号01-05一种线性的体验。编号01-05【互动讨论：这部分的教学会向学生随机展示一些网页的交互过程，然后请学生思考其中应用了哪一种结构方式，并且和学生讨论为什么应用这种结构】框架层与界面设计……………………【重点】界面设计的首要任务界面设计要做的事情就是选择正确的界面元素。这些元素的目的是能帮助用户完成任务，还要通过适当的方式让它们容易被理解和使用。成功的界面设计是主次分明的，能让用户一眼就看到“最重要的东西”。比如某个功能要在哪个界面上完成，是在结构层的交互设计中已经决定的；而这些功能在界面上如何被用户认知到，则属于界面设计的范畴。界面设计可以采用各种技巧，使用户完成任务的过程变得容易。比如：产品可以代替用户去做一些简单的辅助操作，在界面第一次呈现给用户的时候，仔细考虑每一个选项的默认值；比如在用户填写丰富内容的过程中，自动保存。交互界面设计的步骤首先进行项目背景分析（界面干扰因素不宜过多；）>视觉风格设计（确定风格）>制作（统一icon、编号01-06界面尺寸规范、）>细节推敲（文字、颜色、icon大小等，统一规范，整体对齐，相应位置等间距等，会使得整体感觉更好；交互细节、交互操作是否符合用户操作习惯）>初稿编号01-06交互界面设计的方法-线框图框架层的内容是交互设计师的重点输出物，根据页面布局需要输出一个详细的文档，也就是页面示意图或线框图。线框图是之前所有思考的体现，是对一个页面中所有组成部分以及它们如何结合到一起的、最直观的描述。线框图在正式建立网站的视觉设计的流程中是必要的一步。【这部分内容会采用现实中的交互网页成品与对应的线框图进行比较，引导学生现场设计出线框图，进行反推化教学】（五）开发人员配置.................................................................................【思政融入：团队协作的本质是共同奉献】当我们开发一款产品时，通常都是由一个团队的成员共同完成，而团队的特点是以目标为导向，以协作为基础，需要共同的规范和方法，在技术或技能上形成互补。编号01-07团队协作的本质是共同奉献，这种共同奉献需要一个切实可行、具有挑战意义且让成员能够为之信服的目标。只有这样，才能激发团队的工作动力和奉献精神，不分彼此，在一个团队里面，并不是说每一个成员各方面能力都特别棒，而是能够很好地借物使力，取团队其它成员的长处来补自己的短处，也把自己的长处优点分享给大家，互相学习交流，共同进步，遇到问题都及时交流，才能让团队的力量发挥得淋漓尽致。编号01-07（1）产品经理开发一个产品，需要对客户的需求进行分析，同时对市场上同类型或其他产品比较了解，了解用户习惯、产品的定位、功能、逻辑，在头脑里要有清晰的逻辑，这就是产品经理的主要职责。产品经理经过专业的市场洞察、客户分析、用户体验等，将客户的要求形成详细的功能文档，然后和团队成员制作出清晰简洁的交互产品原型图，原型图包括各项功能排布、业务逻辑、页面交互等等。（2）UI设计师UI设计师主要负责App产品的界面设计和交互设计，根据产品经理的需求进行App页面及元素的设计。（3）前端工程师前端口工程师主要负责将UI设计师设计完成的页面是代码实现出来，是开发团队中最不可缺少的人员。前端口工程师：主要分为Android或iOS两个不同系统的客户端的开发，分别由Android开发工程师及iOS开发工程师完成。（4）后台程序开发主要完成运营管理后台的开发，包括数据及服务器的部署等。（5）测试人员测试人员相当于产品开发的质量检查员，进行功能，性能，兼容性等总体测试，发现bug反馈给对应的开发人员进行修改。另外，当产品上线后，经过多个版本的迭代，用户数量越来越多，就需要大数据工程师；运维工程师需要将产品的代码需要部署到一个服务器上，日常的维护都是由运维工程师来负责；在产品刚刚上线时，如果涉及到推广还需要有运营、市场营销、售前/售后工程师等。编号01-08（六）产品交互原型的分类编号01-08交互原型根据页面的保真程度可以划分为草图、低保真和高保真。在进行原型设计之前，我们需要根据使用场景、使用人群、或者是项目的不同阶段来设计不同保真度的产品原型。1.草图草图通常用于产品早期的概念阶段。在项目立项的早期，对于产品的功能及业务场景都处于规划阶段，没有明确成熟的产品方案，团队成员在项目规划，进行头脑风暴的会议时我们需要能够快速呈现产品雏形的原型，且便于及时修改。草图绘制阶段的原型大部分都是手绘稿，一边讨论产品功能，另一边直接绘制产品原型，这个阶段的原型大部分都是在白板或者在白纸上手绘完成，在讨论的过程中发现问题，及时修改。草图原型能够表达出基本的界面功能及内容布局即可，利用基本的几何图形如方框、圆和一些线段表达产品雏形，只需要参与讨论会议的人员明白大概意图即可。草图的优势在于设计成本低，能够随时进行修改，在项目早期有很多不确定因素的前提下，尽量使用草图进行讨论评审。2.低保真当我们明确了产品的业务需求及使用场景以后，产品经理和交互设计师们可以使用低保真原型来快速设计产品的概貌。产品经理和交互设计师们通过项目早期阶段明确了产品的功能需求及业务范围，根据业务会议上确定的产品方案，首先需要梳理清楚产品的功能结构和信息结构，根据业务需求推导出详细的功能点。工作产品的战略目标、需求范围、功能结构都清楚以后，就可以开始正式绘制线框图了，线框图又称为低保真原型。编号01-09编号01-09线框图可以帮助我们准确拆分页面、以及每个页面的功能模块及展示信息，确定每个页面元素的界面布局。线框图与草图相比较而言，视觉显示及意图表达上更准确了。线框图的绘制需要借助于原型设计工具，线框图中的元素布局以及功能模块需要无限接近产品上线后的样子。低保真原型阶段可以不考虑界面元素的配色以及各功能的交互跳转及动画效果。界面的配色是UI设计师的工作，丰富的交互动作也不适合在这个阶段去详细分析。通常查看低保真原型完成后，需要与需求提出人员、UI设计师、前端工程师、后端工程师以及测试人员进行召开原型设计评审会，根据评审结果，需要对低保真原型进行多轮调整，直至达成一致结果，确保能往下推进。低保真原型确定后，UI设计师及开发工程师们可以据此进行项目实施了。3.高保真高保真原型常用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资。高保真原型又可以成为产品的Demo，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能，完全是一个高度仿真产品，对于一些非专业的高层领导、老板及投资人，他们希望看到的是一个无线接近线上产品的Demo，能够尽可能详细的了解产品的功能及业务需求，从视觉显示以及交互动作上都和真实产品大致相同。编号01-10编号01-10高保真原型需要在低保真的基础上进行配色，插入真实的图片及图标。充分利用原型工具中每一类元件的样式及专有的交互属性为原型增加保真度，为相关的元件及页面添加交互事件、配置交互动作。这样从视觉显示及交互设计来看，就是一个高保真原型。在明确当前的项目阶段及使用人群后，再决定什么样保真度的原型才是最合适的。既不能为了方便而总是使用草图，也不能一味的追求高保真原型，而是综合评估使用的场景及用户因素，在工作当中，我们使用最多的是低保真原型，毕竟项目团队中最关心产品原型的是项目的实施人员，低保真原型也能较为准确的阐述项目需求，以及一些简单的交互跳转及交互效果，可以让行业内的设计人员一看便知。有些业务规则及交互细节上的效果，还需要配以说明文档，这样才能方便开发及测试人员深刻