项目6 移动端“茶物语”App产品交互设计开发-备课笔记

项目六：移动端“茶物语”App产品交互设计开发一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入本项目主要通过移动端“茶物语”产品交互设计开发讲解，了解使用原型设计工具AdobeXD软件来进行移动端“茶物语”产品交互设计开发的流程与方法，通过本项目的学习，读者可以掌握使用AdobeXD进行原型交互设计时AdobeXD软件中基本工具的使用方法，通过认真学习本项目读者可以达到使用AdobeXD进行原型交互设计的能力，满足使用AdobeXD原型交互设计的基本素质要求，继而在工作中体现自己的社会价值。三、理论知识讲解（一）移动端“教学助手”App产品交互设计开发项目背景分析茶饮行业是一个利益比较高的行业，当代年轻人无论在上班、逛街、或者出去玩时，都钟爱喝一杯奶茶来放松自己。如今奶茶店在很多一线城市里面也是遍地开花，开发一款奶茶App也能够让茶饮店铺在市场中出类拔萃。（二）移动端“茶物语”App产品交互设计开发项目需求分析App移动端“茶物语”产品交互设计开发项目主要从目标用户、产品特点、功能需求等方面进行需求分析。1.目标用户适用广大奶茶爱好者。2.运行环境：安卓移动端。3.App移动端“茶物语”软件产品特点更方便：消费者可以通过在软件上面选择自己心仪的奶茶下单，相比传统行业需要到店消费的方式，提供了更多的便利性。增加回头率：奶茶App可以通过各种折扣满减或者限时促销活动，提高用户的回头率。更加灵活：如果商家有多家奶茶门店，那奶茶App可以帮助您同步各个门店的用户信息，更加灵活。4.App移动端“茶物语”需求分析奶茶推荐：无论是新品上架，还是用户习惯，App都能够在第一时间为用户进行推荐。奶茶分类：为用户提供专门的在线分类功能，将不同类型的奶茶进行分类，以便用户更好的进行获取自己想要的奶茶，提高奶茶获取便捷性。奶茶评价：当用户对指定奶茶品尝之后，便可以对该奶茶进行相应的评价，每一个评价都能够成为其它用户判断选择的标准。促销活动：商家可以定期举办各种促销活动，设置哪些爆款奶茶可以参与秒杀，不仅可以制定营销策略，也可以清理库存商品。优惠券：商家可以发出折扣或者满减的优惠券，并设置优惠券仅限的奶茶品种，吸引消费者来抢优惠券的同时也能提高下单率。扫码点餐：有些新用户不知道可以线上点餐的时候会到线下购买，我们可以提供扫码点餐的服务，也能减少更多的人力成本。订单配送：只要在线下单之后，系统就会自动生成相应的订单，让用户能够实时关注配送情况。会员功能：与传统会员服务不同的是，线上会员能够提供更加全面、更加精准的会员服务。个人中心：消费者在个人中心中可以查看自己的消费记录和消费积分，也可以查看自己的优惠券信息。（三）AdobeXD概述1.AdobeXD的基础操作当启动这个应用时，欢迎页面提供不同标准屏幕尺寸模板以及添加你自己设定的文件尺寸。而且欢迎页面还包含很多资源可以访问，通过这些资源可以进一步学习AdobeXD工具的操作。打开AdobeXD的弹出菜单，选择“新建”选项，即可新建一个AdobeXD文档。再选择“保存”选项，即可保存一个AdobeXD文档选择“打开”选项，即可打开一个AdobeXD文档。或者双击AdobeXD文件的图标，也可打开当前的AdobeXD文件。在“主页”屏幕中选择一个预设尺寸，进入工作界面即是创建好的新文档。或者自定义文档的大小，然后按住【enter】键完成新建文档。在工作界面顶端中间，可以看到文件名称和三角形图标单击三角形图标，弹出“重命名文档”对话框，，在此对话框中重新为文档命名。2.AdobeXD的基本工具（1）选择工具“选择”工具是AdobeXD工具栏中的第1个工具，在大多数情况下默认选中“选择”工具，可以通过单击工具栏中的指针图标，或者直接按键盘上的V键激活。激活“选择”工具，用鼠标左键直接在画布上单击任意元素即可选中该元素，可对选中的元素进行拖拽、缩放和旋转等操作。按住键盘上的【Shift】键，可以选择多个图层。（2）矩形工具“矩形”工具是AdobeXD工具栏中的第2个工具，可以通过单击工具栏中的矩形工具图标，或者直接按键盘上的R键激活。激活“矩形”工具后，在画板上单击鼠标左键并拖拽，即可绘制一个矩形，按住键盘上的【Shift】键，同时拖拽鼠标即可绘制正方形，在AdobeXD中默认的填充色为纯白色。3.使用AdobeXD完成原型在AdobeXD中完成UI界面的设计工作后，可以直接在软件中把这些界面快速链接起来，生成一个可交互的原型文档，并且能简单设置一些跳转效果。（1）链接页面AdobeXD可以创建交互式原型，直观地展示如何在屏幕或线框之间进行连接。也可以预览交互，这样可以验证用户体验并对设计进行迭代，从而节省开发事件。制作好页面元素后，就可以点击原型按钮，进入原型交互设计页面，制作交互效果页面至少需要两个画板，当页面中只有一个画板的时候呢我们是无法制作交互效果。①设置“主页”“主页”屏幕是应用程序或网站的第一个屏幕。浏览者会从“主页”屏幕开始应用程序或网站的浏览。切换到“原型”模式，单击要设置为“主页”的画板。左上角会出现一个灰色的主页图标。单击“主页”图标，它会变成蓝色，提示该画板或屏幕已被成功设置为“主页”屏幕。②将交互式元素链接到目标屏幕在开始链接画板或屏幕之前，要适当地为画板命名，这样做有助于设计师能够分辨清楚画板之间的链接。切换到“原型”模式，单击要链接的对象或画板。对象或画板上将会出现带箭头的连接手柄。将鼠标悬停

在手柄上，光标会变为线条连接器，将光标移动到需要被链接的画板或对象上在xd预览原型界面中根据设置的触发操作不同，而执行的反应效果不同。在画板的交互设置面板中“操作”的类型有过渡、自动制作动画、叠加、滚动至、上一个画板、音频播放和语音播放，而画板中元素中多了一个“滚动至”的操作。过渡效果，选择过渡之后交互面板上会有一个保留滚动位置的选项。如果勾选这个选项后，在预览窗口中我们滚动时就会记录我们滚动的位置，即使再跳转页面时也会保留到相应的位置，而不用再次滚动到相应的位置。自动制作动画：AdobeXD自动制作动画要求第二个画板由第一个画板复制，第二个画板中的内容发生变化，可以完成自动补充；借助自动制作动画功能，用户可以创建沉浸式过渡，以便呈现内容在画板之间的移动。叠加，在预览窗口中点击交互元素后他不会进行页面跳转，而是把页面直接叠加在这个原有的页面上，叠加操作之后在原页面上会有一个绿色的方框，表示叠加页面的区域，如果叠加画板区域超出了画板实际尺寸那么就只能显示这一部分的页面，而当叠加的画板尺寸小于画板的区域那么就可以点击中间的加号进行调整位置，之后再预览时点击交互元素叠加的页面就只再绿色方框中显示。如图6-80所示。“滚动至...”，表示如果页面超过了正常显示的页面后，比如滚动到最下方后，想快速定位到某个元素的位置，那么就可以在对象框中选择这个元素，之后再预览窗口中点击相应的交互，就会快速滚动到这个元素的位置。返回上一面板，当有多个界面都能点击跳转到这个界面时，当需要返回时就可以设置操作为上一个面板。即跳转回到上一个画板。音频播放时需要选择一个本地的音频然后再预览时点击就会播放一个音频文件。语音播放时需要自定义一段文字内容，之后再预览时即可播放设置的语音内容。交互设置面板中动画分为，无、溶解、左滑右滑、上滑下滑以及向左推出、向右推出、向上推出和向下推出。溶解效果就是当前画板在设置时间内匀速消失，跳转画板匀速显示。滑动效果就是根据设置的方向进行滑动显示直到新画板完全显示，推出效果，就是把当前的画板和跳转的画板同时按照设置进行推动直至新的画板显示出来。4.使用AdobeXD成果输出导出文档，单击“弹出”菜单，选择“导出”选项，弹出“导出”选项，如图6-83所示。选择任意一个选项后，进入“导入资源”对话框，在对话框中设置所需要的参数，单击“导出”所有画板按钮即可导出资源。导出资源或画板时注意事项想要导出所有画板时，需要确保没有选择画板或资源。可以单击粘贴板取消选择的对象或画板，这样可以确保没有选择任何画板或资源。导出特定资源或画板时，必须选中需要导出的特定资源或画板才行。可以标记稍后要导出的资源或画板，然后将它们批量导出即可。选择目标平台和文件格式，目标平台包括Web、iOS或Android选项，文件格式则包括PNG、SVG、PDF和JPG。指定目录即可保存输出文件。项目实施——移动端移动端“茶物语”App产品交互设计开发通过AdobeXD基础功能完成屏幕设计后，AdobeXD创建交的互式原型，直观地展示如何在屏幕或线框之间导航。通过预览交互，验证用户体验并对设计进行迭代，从而节省开发时间。以下就是对App移动端“茶物语”App原型设计开发中，一些简单的交互效果的制作。1.“茶物语”Loading动画效果元素样式设置完成后，进入原型页面，为三个画板添加交互效果，添加的交互顺序为，画板1跳转到画板2，画板2跳转到画板3，之后画板3再次跳转到画板1如此实现loading动画效果循环演示，设置交互为“时间”，操作类型为“自动制作动画”，动画效果为“渐入渐出”，持续时间为0.6秒，同样把其他两个画板也如此设置。设置完成后点击右上角运行按钮查看运行效果。2.“茶物语”左右滑动效果实现左右滑动的效果，需要全部选中需要滚动的元素，然后再右侧属性面板变换中找到设置，水平滚动和垂直以及水平和垂直同时滚动的按钮，然后再设置需要再滚动过程中展示的区域大小即可实现滚动效果，以水平效果为例设置图形再水平方向滚动展示的效果制作完成后点击右上角预览左右滑动显示的效果。3.“茶物语”轮播图演示效果本案例设计制作轮播图的演示效果，图片在根据鼠标拖动时不停的循环切换图片四、实践技能训练（一）布置训练任务设计并制作“茶物语”产品交互设计项目五、课堂总结本章介绍了关于AdobeXD的相关基础知识，包括软件的简介、基本操作、工具的使用、原型的设计和导出文档等内容。工具的使用以及原型的设计等功能是整个软件中非常重要的部分，可以帮助读者制作很多交互效果，因此需要熟练掌握AdobeXD软件的用法才行。六、课后思考本项目介绍了AdobeXD工具基础操作以及AdobeXD软件中交互链接的操作，通过几个小的项目对AdobeXD工具基础操作和交互进行详细说明，同学们通过对项目实施中各