项目4 Web端“电商平台”产品交互设计开发-备课笔记

项目四：移动端“美食小吃”App交互UI设计一、课程说明与要求1.课程性质与考核方式说明教师首先自我介绍。然后说明本课为考查课，平时成绩和期末成绩各占总成绩的50%，平时成绩主要通过平时作业（作品）的形式评定，还要兼顾考核出勤、学习态度、课堂表现等因素；期末考试是在课程的最后两次课采取限时命题创作的形式，全面考核课程知识的综合运用。2.课程说明《数字媒体交互设计》共分为网页交互设计、App交互设计、VR交互设计三方面的内容。本课程是以理论为基础的实践导向型课程,所传达的课程内容围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、移动端应用人机交互技术、人机交互开发工具与环境等理论内容；简要介绍人机交互的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养学生利用交互设计工具制作做实际交互作品原型的能力。3.组织签到及建立班级课程微信群组织学生使用学习通进行签到。然后使用微信面对面建群，说明本群作为课程的相关通知发布、知识答疑和作品交流使用，同时欢迎同学们及时在群里反馈对课程教学方面的意见和学习感想，提醒老师及时调整适合同学们的授课方式。4.工具材料准备说明本课的实践技能训练阶段，需要同学在手机或者是计算机中下载好行业需求分析文档，教师将所需准备资料发到微信群中。资料类型与名称备注行业需求分析报告文档每个小组一份二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，需要学生在学习过程中，对美术设计与逻辑设计内容进行一定程度上的融通。作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对未来的市场应用有信心，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入本项目主要通过Web端“电商平台”产品交互设计开发讲解中，学习Web端“电商平台”开发流程以及原型设计工具AxureRP9软件的使用方法，通过本项目的学习，读者可以达到使用Axure进行原型交互设计的能力，并为以后的原型设计工作打下基础，从而在工作中收获自己的人生价值。三、理论知识讲解（一）Web端“电商平台”产品设计开发项目背景分析我国非常重视电子商务系统领域的发展，国家和地方在最近几年有关该领域的政策力度明显加强，突出表现在如下几个方面：1、稳定国内外市场；2、提高自主创新能力；3、加快实施技术改造；4、淘汰落后产能；5、优化区域布局；6、完善服务体系；7、加快自主品牌建设；8、提升企业竞争实力。（二）Web端“电商平台”产品设计开发项目需求分析（三）AxureRP9介绍1.AxureRP9的工作界面2.AxureRP9的元件库元件是原型产品中最基础的组成部分，使用元件可以制作出丰富多彩的产品原型效果。在AxureRP9中，

用于绘制原型设计的用户界面元素被称为“元件”。而“元件”又被放在了“元件库”面板中。3.AxureRP9的元件库在Axure中通过添加元件来展示原型设计的静态页面，而实现动态效果则需要使用Axure中的交互功能。交互定义了一个元件或者页面的动态行为。在Axure的右侧交互栏目中创建和管理交互。可以在底部来设置交互，也可以单击新建交互来创建。（1）事件查看一个元件或页面的事件：单击元件或页面，在右侧交互栏目中可查看。事件的删除：选中某一个事件后，按Delete即可。（2）情形一个事件可以有多个情形，当鼠标悬浮在事件上时，可以看到右侧的添加情形按钮，可以设置触发条件来设置情形的启动。情形的删除：选中某一个情形后，直接按Delete即可。注意：可用鼠标来拖动情形的顺序，特别是使用条件逻辑时，情形的顺序是非常重要的。3.动作是在某一情形下的操作。动作的添加：单击情形下方的“+”按钮，如图4-24所示。可用鼠标来拖动动作的顺序。4.元件交互样式交互样式指元件的样式，当元件进入触发状态时，效果样式将被应用，当元件退出触发状态时，样式效果被取消，元件恢复为基本样式。（1）交互样式常见的例子如下：按钮被单击时边框颜色发生改变；鼠标悬停在元件上时，元件的样式发生改变；可以为元件自定义样式效果。操作方法：“选择元件—>鼠标右键—>交互样式”，或者在元件的“交互”面板中找到“交互样式”点击“+”添加新的交互样式，即可打开交互样式设置面板。（2）Axure9.0元件交互样式有这几种：鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。鼠标按下：当鼠标按下元件时，元件的显示样式。选中：元件被选中时的显示样式。禁用：元件被停止使用时的显示样式。获取焦点：当光标聚焦在元件（如文本框）上的显示样式。（四）AxureRP9的常用元件内联框架可以将HTML、视频、音频和其他媒体文件嵌入到AxureRP中。比如youku视频和Baidu地图，也可以将原型中的其他页面嵌入其中。在元件库中找到内联框架，拖入工作区域中松开鼠标即可开始使用中继器，如图4-59所示，双击内联框架元件，弹出了“链接属性”的对话框如图4-60所示，此处可以选择链接至Axure文件中的其他页面或者外部URL地址。默认情况下，内联框架有边框，可以在“样式”窗格中的“隐藏边框”中打开或关闭。当内联框架内的内容超过其本身大小时，可以设置内联框架进行滚动，如图4-61所示。查看原型当产品经理在AxureRP9中完成原型设计后，接下来可以在浏览器中预览原型，可以生成HTML本地文件查看，也可以把原型发布在Axure云中，或者可以生成Word说明书。当项目完成后，单击工具栏中“预览”按钮或按【F5】键。也在“菜单栏”中可以选择“发布>预览”选项，如图4-65所示，即可在浏览器中查看原型效果。Web端“电商平台”产品交互设计开发（1）使用“动态面板”制作Web端Banner轮播效果本案例需要设计制作购物网页的商品轮播图效果，案例效果是通过动态面板元件，让四张商品图片随着一定顺序进行循环播放，图片中的圆点也会随着图片的改变而进行相应的变化。轮播效果实现的原理是，多张图片放进一个动态面板的不同状态里面，“载入时”添加“切换动态面板的状态”的交互效果，这里使用四张图片来演示效果，将四张图片“转换为动态面板”，放在四个不同的状态下，以及四个圆点对应图片状态的一个切换设置，之后需要在交互中进行图片轮流切换图片的设置。（2）制作步骤1.元件基础样式设置在左侧元件库中，选中“动态面板”元件，将其拖入工作区内。在“交互”面板上，设置“动态面板”的名称为“轮播”。双击“动态面板”进入“动态面板”的编辑页面，连续单击“添加状态”按钮，新建三个“动态面板”状态。在每个状态中都添加一张图片。添加完成后，可以在“概要”面板中预览图片和状态。在左侧元件库中找到“动态面板”元件，拖入工作区内，设置名称为“but-one”，然后复制三个状态，然后每个状态中都添加四个圆形，设置大小为12px*12px，然后分别在四个状态中按顺序给代表不同顺序图片的圆形设置一个不同的颜色，其他保持默认颜色。在添加两个控制左/右进行切换的按钮，并在开始时设置为“隐藏”。之后将两个动态面板和这个控制按钮全部选中“转换为动态面板”，命名为“动态轮播图”。2.设置元件自动轮播的交互效果。给“动态轮播图”添加交互，在“交互”面板中，点击“新建交互”按钮，在下拉列表中选择“鼠标移入时”事件，添加目标为“控制按钮”，设置为“显示”，动画效果为“弹出效果”。继续为“轮播”图片，点击“新建按钮”，在下拉列表中选择“载入时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加目标为“轮播”，设置详细参数。为动态面板“but-one”添加交互动作，点击“新建交互”按钮，在下拉列表中选择“载入时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加目标为“but-one”，设置详细参数。“控制按钮”以及“but-one”按钮时图片切换的效果。在“but-one”动态面板中，四个不同状态里的四个圆形分别添加交互事件，首先在状态1中，对第二个按钮，进行点击交互的设置，点击“新建交互”按钮，在下拉列表中选择“单击时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加两个目标分别是“轮播”动态面板和“but-one”动态面板，因为此时是需要点击某个按钮切换到相应的页面，所以设置的切换状态就不需要循环，只需要切换好制定的状态即可，，当状态切换完后如果没有交互操作需要再次让两个动态面板开始重新循环切换状态。接下来给状态1中第三个圆形添加交互动作。同理状态1中其他“圆形”添加的交互事件，和其他三个状态里的圆形添加的交互事件都类似，只不过需要注意切换到相应的状态即可。给动态面板“控制按钮”中的左右两个箭头添加交互，首先选中“右箭头”元件，在“交互”面板中，点击“新建交互”按钮，动作选择“设置面板状态”，添加两个目标分别是“轮播”和“B.ut-one”。同理“左箭头”设置跟“右箭头”除了切换状态的顺序和动画方向不一样外其他都是正常的切换效果。交互都设置完成后，点击“预览”按钮，打开浏览器预览广告轮播页面，可以发现图片切换和圆形变化是对应的。四、实践技能训练（一）布置训练任务设计并制作“电商平台”产品交互设计项目五、课堂总结本项目主要介绍了关于AxureRP9原型设计工具的相关使用基础知识，包括软件的基础使用方法和面板及工具的使用方式方法。其中，着重介绍了AxureRP9原型软件中的函数，AxureRP9中的函数是整个软件中非常重要的部分，读者想要熟练使用软件，必须对函数部分的内容熟练掌握才行。六、课后思考本项目主要介绍了AxureRP9原型设计工具的界面功能区、基本交互方法和重点的元件应用补充（动态面板的使用，中继器的使用）等相关理论，也通过项目实施案例——Web端“电商平台”的交互功能做了详细的介绍，可以在后续对读者所接触到的相关作品，用专