项目5 移动端“教学助手”App产品交互设计开发-备课笔记

项目五：移动端“教学助手”App产品交互设计开发一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入本项目主要通过移动端“教学助手”产品交互设计开发讲解，了解使用原型设计工具墨刀软件来进行移动端“教学助手”产品交互设计开发的流程与方法，通过本项目的学习，读者可以掌握使用墨刀进行原型交互设计时墨刀工具的使用方法，并且本案例中可以在学习项目制作的同时，也在制作中了解教学服务的建设，通过本项目的学习读者可以在以后的原型设计工作中得心应手，从而达到适配自己岗位的能力。三、理论知识讲解（一）移动端“教学助手”App产品交互设计开发项目背景分析在智能手机、移动终端铺天盖地的今天，各个行业和领域的信息化需求越来越强烈，而我们的课堂教学模式和教务管理模式也在进行着一场大变革。传统教学法形式单一，一般都是教师站在讲台上讲，学生在下面被动地接受知识。长期采用这种灌输式的教学，会产生学生不主动，学习兴趣不高、课堂效果不佳等问题。如何激发学生的天性，把快乐带进课堂，让学习变得有趣、高效？“互联网＋”背景下的教学，要求我们用新技术、新媒体、新方法，探索个性化学习新模式。由此应运而生的“教学助手”软件，不仅提高了课堂教学质量和效果，而且促进了信息技术与教育教学的深度融合。（二）移动端“教学助手”App产品交互设计开发项目需求分析App移动端“教学助手”产品交互设计开发项目是一款教学服务管理软件，旨在通过信息化手段，提供了学院部门管理、智慧教学、教务管理、课程及资源管理、学习管理、新闻资讯等功能。主要从目标用户、软件规划、功能需求等方面进行需求分析。1.目标用户适用于学校、管理层、广大师生、培训平台等。2.运行环境：安卓移动端。App移动端“教学助手”软件规划学习平台：文字图片视频多媒体在线学习。资源平台：统一标准、整合资源、共享网络服务。教务平台：教学资料管理、考务、学生管理等。资讯平台：政策速读、新闻事件、热点话题、行业动态等构建全方位信息平台。交流平台：先锋论坛，发布学习心得，在线评论互动。4.需求分析注册登录：用户可以通过手机号验证码或者用户名密码进行登录；忘记密码：如果用户忘记密码可以通过手机号+验证码的方式重置密码；首页分类：首页会展示一些相应的新闻及学术专题，每个专题都有不同的分类；新闻资讯：App中会实时更新一些大赛、培训、会议等相关新闻，方便用户了解最新的资讯；点赞评论：遇到喜欢的视频或者文章可以点赞；学习模块：用户在学习模块可以搜索相关课程的书籍、视频、音频进行学习；教学管理：用户可以在App上对教学计划、教研活动、教学组织及教学质量等环节进行查看和管理；我的资料：我的资料会展示用户的头像、昵称、性别、生日、实名认证、手机号绑定等。（三）墨刀概述1.墨刀工作界面介绍墨刀工作界面是墨刀的主要操作区，认识墨刀工作界面可以帮助我们更好地掌握墨刀使用方法。墨刀工作界面由七部分组成，分别是功能区、工具栏、页面栏、图层栏、元件栏、设置栏、工作区，墨刀工作界面示意图，如图5-1所示。以下是各个部分的细节功能介绍。功能区工功能区工具栏页面栏图层栏元件栏工作区设置栏2.墨刀元件介绍（1）轮播图组件内置组件中新增轮播图组件，自带自动轮播和左滑右滑功能，操作更加智能便捷。添加轮播图：从内置组件中拖出轮播图组件，如图5-22所示。右侧设置面板上自动出现图片占位，鼠标悬浮于上，可以选择从“本地上传”或者是从“素材库中”上传，如图5-23所示。（2）网页组件在内置组件库中选择“网页”，拖入页面画板中，如图5-26所示。可以添加音频、视频或者地图URL。3.我的组件“我的组件“在编辑区右侧的元件栏中，它可以用于放置个人保存的组件，如图5-38所示。可以将可能会复用的组件或组合添加到“我的组件“当中，便于制作时直接拖拽使用。4.图标（1）添加图标图标在编辑区右侧的组件素材区域，打开图标面板后，可以通过搜索或分类查找的方式选用图标库中的开源图标。可以在图标面板设置图标的默认颜色及尺寸。（2）下载图标墨刀中提供内置的图标下载功能，下载格式为svg/png，目前支持三倍倍数导出，具体操作方式如下：在页面编辑区，选中需要下载的图标后，点击右下角的“导出图标”即可保存svg/png格式的图标到本地。如需批量下载svg图标，可按住shift，鼠标左键点选，多选完成后，点击“导出图标”即可。5.母版在画原型时或许面临这样的问题：同一个组件（组合）在多个页面多处都用到，但是当后期需要修改时，想一次性修改所有这样的组件。此时就可以利用墨刀的“母版”进行同步修改。墨刀支持将任何组件，无论是静态还是动态的，转化成母版（master）。母版的特点是具备“继承性”：只要改动母版（master），那么它所有的实例（instance）都能同步更新改动。（四）项目实施——移动端“教学助手”App产品交互设计开发1.“教学助手”——底部导航功能制作本案例设计制作使用App切换底部导航栏时，底部导航栏选中切换效果的制作。切换底部导航栏效果原理就是：利用墨刀“组件状态”，通过“新建交互”来切换状态，并根据相应的页面进行底部导航栏组件状态切换来实现。底部导航栏切换的效果。 2.“教学助手”——TAB切换功能制作本案例设计制作TAB标签切换的效果，在讲解具体操作前，先看一下TAB切换的运行效果，运行时可以看到，TAB标签会变色，TAB标签下的指示条也会跟着移动，下边内容也跟着切换。案例实现原理就是利用墨刀工具的状态切换功能，设置神奇移动效果来实现的。3.“教学助手”——点赞效果制作本案例设计制作点赞的效果，在讲解具体操作前，先看一下点赞的运行效果，在点击点赞爱心的时候会变成红色爱心，并跳动一下，在此点击就会取消点赞效果。案例实现原理是利用墨刀工具的状态切换功能，设置元件的动效来实现。4.“教学助手”——图片左右滚动效果制作本案例设计制作左右滚动的效果为当一行无法一次全部显示内容时，可以通过鼠标左右滑动来显示未显示的内容。案例实现原理是利用墨刀工具的多态组件来实现效果。四、实践技能训练（一）布置训练任务设计并制作“教学助手”产品交互设计项目五、课堂总结本章介绍了关于墨刀原型设计工具的相关基础知识，包括软件的基础使用方法和面板及工具的使用方式方法。其中，着重介绍了软件中的状态功能，墨刀中的状态功能是整个软件中非常重要的部分，可以帮助读者制作很多交互效果，想要使用墨刀软件制原型，必须对状态功能的用法熟练掌握才行。六、课后思考本项目中主