第五章App移动端“教学助手”产品交互设计开发

App移动端“教学助手”产品交互设计开发知识要点01App移动端“教学助手”产品交互设计开发项目背景分析02App移动端“教学助手”产品交互设计开发项目背景分析03墨刀原型工具概述04项目实施-App移动端“教学助手”产品交互设计开发第一部分App移动端“教学助手”产品交互设计开发项目背景分析在智能手机、移动终端铺天盖地的今天，各个行业和领域的信息化需求越来越强烈，而我们的课堂教学模式和教务管理模式也在进行着一场大变革。传统教学法形式单一，一般都是教师站在讲台上讲，学生在下面被动地接受知识。长期采用这种灌输式的教学，会产生学生不主动，学习兴趣不高、课堂效果不佳等问题。如何激发学生的天性，把快乐带进课堂，让学习变得有趣、高效？“互联网＋”背景下的教学，要求我们用新技术、新媒体、新方法，探索个性化学习新模式。由此应运而生的“教学助手”软件，不仅提高了课堂教学质量和效果，而且促进了信息技术与教育教学的深度融合。App移动端“教学助手”产品交互设计开发项目背景分析第二部分App移动端“教学助手”产品交互设计开发项目需求分析App移动端“教学助手”产品交互设计开发项目是一款教学服务管理软件，旨在通过信息化手段，提供了学院部门管理、智慧教学、教务管理、课程及资源管理、学习管理、新闻资讯等功能。主要从目标用户、软件规划、功能需求等方面进行需求分析。1.目标用户适用于学校、管理层、广大师生、培训平台等。2.运行环境：安卓移动端。App移动端“教学助手”软件规划学习平台：文字图片视频多媒体在线学习。资源平台：统一标准、整合资源、共享网络服务。教务平台：教学资料管理、考务、学生管理等。资讯平台：政策速读、新闻事件、热点话题、行业动态等构建全方位信息平台。交流平台：先锋论坛，发布学习心得，在线评论互动。4.需求分析注册登录：用户可以通过手机号验证码或者用户名密码进行登录；忘记密码：如果用户忘记密码可以通过手机号+验证码的方式重置密码；首页分类：首页会展示一些相应的新闻及学术专题，每个专题都有不同的分类；新闻资讯：App中会实时更新一些大赛、培训、会议等相关新闻，方便用户了解最新的资讯；点赞评论：遇到喜欢的视频或者文章可以点赞；学习模块：用户在学习模块可以搜索相关课程的书籍、视频、音频进行学习；教学管理：用户可以在App上对教学计划、教研活动、教学组织及教学质量等环节进行查看和管理；我的资料：我的资料会展示用户的头像、昵称、性别、生日、实名认证、手机号绑定等；App移动端“教学助手”产品交互设计开发项目背景分析第三部分墨刀原型工具概述墨刀工作界面示意图，墨刀原型工具添加页面墨刀原型工具调整页面顺序展开、折叠页面墨刀原型工具删除页面删除页面找回墨刀原型工具设置页面横屏设置页面背景颜色墨刀原型工具修改页面名称墨刀原型工具墨刀原型工具设置页面高度墨刀原型工具添加组件内置组件你可以快速拖拽使用我们为你内置的基础组件以及平台组件（ios、MaterialDesign、AntDesign、WeUI...）。我的组件你可以将需要复用的组件或组合选中，鼠标右键添加到「我的组件」当中，便于之后直接拖拽使用。图标你可以通过搜索或分类查找的方式选用图标库中的开源图标，并且可以自由设置图标的默认颜色及尺寸。母版如果你需要在多个页面或位置用到同一组件，且需要它们可以被批量修改，那你可以先将它设置为「母版」。比如同一个文字组件，可以在多个页面中复用，并且可以通过修改母版达到批量修改的效果。墨刀原型工具显示、隐藏组件墨刀原型工具我的组件管理我的组件墨刀原型工具选中被盖住的组件组件的重命名与组件颜色修改墨刀原型工具组合、打散组件锁定、解锁组件墨刀原型工具显示、隐藏交互链接添加/删除参考线（红线）墨刀原型工具一屏线隐藏一屏线修改文字外观墨刀原型工具选中文字组件后，可以在编辑区右侧的外观设置面板中点为它设置字号、颜色、字体。注：目前除已提供字体外，不支持上传自己下载的字体使用。

修改批注颜色墨刀原型工具矩形设置圆角插入图片墨刀原型工具图片裁切图片拉伸下载图片墨刀原型工具标注模式下载图片选中需要下载的图片组件，点击右下角的「导出图片」即可保存图片到本地。如需批量下载页面内图片，可按住shift，鼠标左键点选，多选完成后，点击「导出图片」即可。链接区域墨刀原型工具聊天气泡墨刀原型工具轮播图墨刀原型工具调整轮播图顺序墨刀原型工具设定滚动横向/纵向滚动自动轮播/点击轮播墨刀原型工具设置指示点及指示点颜色我的组件墨刀原型工具添加图标墨刀原型工具下载图标母版墨刀原型工具新建母版编辑母版素材库墨刀原型工具墨刀原型工具墨刀原型工具墨刀原型工具批量管理墨刀原型工具批量删除墨刀原型工具高效搜索墨刀原型工具替换图片墨刀原型工具企业素材墨刀原型工具在页面下使用状态墨刀原型工具页面状态设置与添加页面状态设置与添加墨刀原型工具动态组件连接其它页面墨刀原型工具添加音频墨刀原型工具添加音频墨刀原型工具添加地图墨刀原型工具添加地图/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀区复兴路32号院&key=YOUR_KEY&referer=myapp其中红色的字体部分需要换成自己的腾讯地图创建的key墨刀原型工具添加视频选择通用代码：<iframeframeborder="0"width="640"height="498"src="/iframe/player.html?vid=w0021e4ijb4&tiny=0&auto=0"allowfullscreen></iframe>墨刀原型工具固定顶栏/固定底部导航长页面滚动墨刀原型工具定时跳转自动旋转分享项目墨刀原型工具分享项目墨刀原型工具分享链接给别人默认显示某个页面分享链接打开后需要默认显示某个页面可以这么操作：1、在编辑区顶栏点击「分享」，复制分享链接2、在浏览器中打开分享链接3、切换到想要让别人查看那个的页面，复制该页面在浏览器中显示的链接（此链接就是页面的分享链接）。手机微信扫码打开演示墨刀原型工具下载PNG电脑端离线演示墨刀原型工具下载/安装APK墨刀原型工具安装到手机桌面（Android）墨刀原型工具安装到手机桌面（iOS）墨刀原型工具显示、隐藏手机边框墨刀原型工具设备框消失「PRD」模式墨刀原型工具在页面编辑区外放置产品迭代记录表格、产品流程图等设置允许查看「PRD」模式「PRD」模式墨刀原型工具分享查看PRD如果在分享设置中，允许查看「PRD」的模式，那么导出html时，可以将画板外的PRD内容一起导出的；如果导出png格式的文件，暂时还不支持「PRD」内容一起导出。如何导出「PRD」模式的内容「长页面」模式墨刀原型工具「设备框」模式第四部分项目实施-App移动端“教学助手”产品交互设计开发1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发本案例设计制作使用App切换底部导航栏时，底部导航栏选中切换效果的制作。切换底部导航栏效果原理就是：利用墨刀“组件状态”，通过“新建交互”来切换状态，并根据相应的页面进行底部导航栏组件状态切换来实现。底部导航栏切换的效果，如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发制作步骤1.元件基础样式设置使用元件库中的元件，进行底部导航栏的制作，如图5-79所示。根据需要使用自己的导航栏图片，如图选中底部导航栏组件，在右侧的“外观”面板中，点击“添加组件状态”。如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发进入组件状态编辑页面后，鼠标悬浮在状态1上，点击后边的“复制状态”按钮，如图本案例中底部导航栏时五个按钮的状态切换，点击复制状态1，复制五个的状态。然后需要修改每个状态的名称，方便后续对状态的选择，如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发接下来修改“学习”状态中的，“首页”和“学习”的图标样式。如图修改完成后的学习状态，导航栏样式。如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发因为首页导航菜单选中样式只需要在首页状态中进行选中，而其他四个状态都不选中，所以需要对其他四个状态的首页菜单都进行修改，可以点击首页图标和文本，鼠标“右键”，在下拉列表找到“添加/替换到其他状态”，选中其他三个状态即可，如图按照相同的方法，修改其他三个状态的导航栏样式。最终状态如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发元件交互效果制作接下来，进行交互事件的添加，给每个状态的导航栏按钮，覆盖一个“链接区域”元件，。导航栏菜单按钮添加“链接区域”元件后的样式，如图点击导航栏多态组件，鼠标“右键”，在下拉列表找到“转换为动态面板”，命名为“底部导航栏copy”，如图所示。转换为母版后动态组件的样式和交互链接有继承性，稍后设置连接就不需要重复设置了。1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发双击进入导航栏母版编辑页面后，选中首页的链接区域，鼠标拖动“闪电”按钮，。链接到“首页”页面，同样的后边四个“链接区域”，也链接到相应的页面，进行交互跳转功能，状态1链接完成的效果如图所示。同样的方法，可以进行其他状态的交互链接。把设置好的“导航栏”母版，放在每个页面的下方，并且设置“运行时固定在页面底部”，如图1、“教学助手”-底部导航功能制作项目实施-App移动端“教学助手”产品交互设计开发每个页面设置完成后，点击有上角的“运行”按钮，进行预览查看设置的交互效果，点击下方的导航栏菜单时，会根据显示不同的页面而进行导航栏上的高亮选择，如图2、“教学助手”-TAB切换功能制作项目实施-App移动端“教学助手”产品交互设计开发本案例设计制作TAB标签切换的效果，在讲解具体操作前，先看一下TAB切换的运行效果，运行时可以看到，TAB标签会变色，TAB标签下的指示条也会跟着移动，下边内容也跟着切换。如图所示。案例实现原理就是利用墨刀工具的状态切换功能，设置神奇移动效果来实现的。2、“教学助手”-TAB切换功能制作项目实施-App移动端“教学助手”产品交互设计开发制作步骤1.元件基础样式设置首先在墨刀编辑区中，对“新闻资讯”页面进行搭建，如图所示。选中“新闻资讯”页面后，点击右侧元件栏中的“状态”按钮，如图2、“教学助手”-TAB切换功能制作项目实施-App移动端“教学助手”产品交互设计开发打开页面状态设置面板后，点击“新闻资讯”页面后边的复制按钮，复制一个新的页面状态，并改名为“智慧教学”页面，如图添加“智慧教学”页面后，因为这个页面是复制的“新闻资讯”，所以需要把展示“智慧教学”的内容修改一下。修改后的“智慧教学”页面，如图2、“教学助手”-TAB切换功能制作项目实施-App移动端“教学助手”产品交互设计开发接着修改TAB标签切换的样式，在“智慧教学”页面中把“智慧教学”文本设置为蓝色选中样式，把“新闻资讯”文本设置为灰色不选中样式，把文本下边的指示条，移动到“智慧教学”文本下。如图页面设置完成后，分别在“新闻资讯”页面和“智慧教学”页面中，两个文本上放入一个“链接区域”，设置尺寸覆盖文本点击的区域用来制作做交互效果。2、“教学助手”-TAB切换功能制作项目实施-App移动端“教学助手”产品交互设计开发元件交互效果设置接下来添加交互效果，在“新闻资讯”页面选中“智慧教学”链接区域，拖动交互按钮到，页面状态面板的“智慧教学”上，如图同样在“智慧教学”页面中，选择“新闻资讯”连接区域，拖动交互按钮到“新闻资讯”上。如图在右侧的“事件”面板中，可以看到交互事件的详细设置。如图