3.3 备课笔记-网页交互的低保真呈现

编号09-01【web产品交互设计开发制作】编号09-01学习任务三、网页交互的低保真呈现一、课程说明与要求1.课程说明本阶段课程分为三个部分，第一部分为制作产品原型时要注意什么，介绍了Axure原型设计注意事项；第二部分为提高Axure设计效率的建议，介绍如何高效率设计交互原型；第三部分为Axure低保真常用功能实现，重点说明网页交互中的功能Axure低保真的实现；通过学习Axure设计注意事项和低保真交互案例，学生可以全面、深入、透彻地理解Axure原型设计工具的使用方法，提高产品设计能力和项目实战能力。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料备注Axure每台电脑安装二、学情分析与课程导入1.学情分析本课程为效果实现课程，需要能深入掌握Axure各个元件的使用，然后将低保真原型效果实现出来。需要学生在学习过程中，结合实际的网页交互案例进行操作感受。在进行原型设计效果制作的同时，要不断思考原型设计效果的逻辑，思考如何做到与最终成品一致的效果，这是非常重要的。此外，这时一门实践性较强的课程，需要学生在平时学习时不断的思考各个实际案例中交互效果实现的方式方法，提高自己制作交互原型的效率。2.课程导入我们之前学习了Axure交互工具的使用规范。而想要把一个低保真交互效果制作出来，需要知道Axure交互原型设计的注意事项，这样才能提高交互设计效率。那么，本节课将通过对网页中的交互在Axure中实现低保真的效果，来对Axure实现交互原型设计有更深入的了解。三、理论知识讲解（一）制作产品原型时要注意事项…【思政融入（从使用时注意事项，提高团队完成任务的工作效率，领会原型制作各个要点的有机统一，体现自我在集体中的价值）】1.页面结构完整，展示页面流程展示了页面流程之后，不仅可以看到这个产品中的具体页面，还可以看到是如何从过一个页面跳转到另一个页面。我们一个就能知道有哪些页面，页面和页面之间的关系是如何，在辅以必要的说明，可以增强沟通的效果，提高工作效率。编号09-02编号09-022.功能框架的划分要明确、合理产品由很多功能组成，如何将这些功能划分到不同的模块里面，这是非常重要的。同时，功能框架划分明确，也能够方便产品团队的成员理解产品经理的思路和意图，和产品经理一起更好的完善产品设计。明确合理的功能框架也能够让用户在使用的时候体验更好。3.功能结构完整、流程清晰清晰的产品流程，能够帮助用户快速的了解产品希望解决的问题及解决问题的方式；同时，也能够方便梳理产品的功能结构是否完整，是否有遗漏的环节。简单来说，功能流程清晰、结构完整的产品原型，能够帮组用户快速的了解到“完整”的产品是什么样的，在此基础上，用户就能够更好的理解和思考产品的功能细节。4.色彩的合理应用（1）增加明暗对比做好明暗对比之后，我们可以明确地看到，需要突出的内容是哪一部分，或者重点和非重点之间的分别。（2）不使用不必要的颜色在制作线框图的时候，个人的建议是不要使用过多色彩，除了已经定下来的主调色和点缀色，其他的色彩尽量少使用。如果使用了过多色彩，会在产品设计的时候带来干扰。5页面布局（1）设置好第一屏的高度第一屏的高度至关重要，尤其是在网页中。最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全，否则用户体验会较差，从而对很多方面造成影响。（2）内容切忌堆叠过多的堆叠内容，会让页面变得非常拥挤，没有美感，同时也不能突出重点。对后面的工作也有比较大的影响，可能需要重新布局排版、或者调整所有版块，大大增加了工作量。【那么在这部分的学习中，请大家思考一下如何提高Axure制作原型交互的效果】（二）提高Axure设计效率的建议………………【重点】1.用一个控件就可以完成的事永远不要用两个控件编号09-03编号09-032.不要复制对象，而是把对象转成母版当你使用任何操作次数超过一次的时候。当发现自己一直在复制和粘贴一组控件，可以将对象创建一个母版。3.保持项目的组织性和命名的清晰性4.养成使用全局辅助线和网格的习惯辅助线顾名思义就是用于辅助页面进行排版布局的线，辅助线可以帮助我们在页面设计之初，对页面结构、内容排版、间距大小进行合理的划分，在Axure中包括全局辅助线和页面辅助线两类。与此同时，一个团队成员将在一个共享项目中看到这些全局辅助线，使用网格可以帮助你保持设计的整洁和结构化。编号09-04编号09-045.导入功能在大多数项目中，人们制作的元素对其他项目也都是有用的。不需要重新发明轮子，而是重复使用那些在过去工作中使用过的元素。6.不要设计不必要的交互动作Axure的初始用户可以很轻松地将交互动作添加到原型中。一开始的时候，会想对创建的每一页都添加交互动作。然而，在大多数情况下，只需要清楚地传达设计而不需要任何交互——仅仅是静态图像就可以。【我们在了解了元件与母版的建立方式后，在接下来的部分，就Axure的制作低保真效果来进行重点的讲解】（三）Axure元件的交互……………………【重点】1.首页的图片轮播效果【思政融入（这是使用Axure综合元件实现的交互效果，离开任何一个元件交互的设置都将无法完成轮播效果。类比于学生组合在一起构成一个整体，一人无法完成的任务，但一个团队只要互相取长补短，每个人都发挥相应的作用，就可以完成一件看似不可能完成的任务。最终达到预期：促进学生对团队意义的理解，培养学生的团队精神和集体荣誉感）】轮播效果原理多张图片放进一个动态面板的不同状态里面，载入时添加切换动态面板的状态的交互效果，这里使用三张图片来演示效果将其中一张图片右键单击选择转换为动态面板，添加两个状态，并把其他两张图片添加到新创建的两个状态，调整一下图片的位置使图片可以在动态面板的显示出来。给动态面板添加一个交互，载入时的交互。编号09-05编号09-05给轮播的图片上添加三个点来分别表示三个图片的位置。为三个点添加新的交互效果就是点击三个点可以切换相应的图片效果，之后再按最初的轮播效果进行切换。左右两侧添加两个点击按钮进行上一张，和下一张的图片切换操作。编号09-06编号09-062.登录效果在首页上点击登录进行页面跳转到登录页面。网页的登录属于最基本的功能，创建一个登录页面和一个简单的网页首页页面，在首页上点击登录进行页面跳转到登录页面，然后在登录页面实现假登录后的跳转首页的功能，交互功能实现，在未登录的首页上为登录按钮添加页面跳转交互，在登录页面上的登录按钮上分情况设置不同的登录状态未登录时，账号密码错误时给出的登录提示信息，在登录情形下进行首页跳转，并将全局变量的值传递给首页上的文本标签进行显示。3.文字跑马灯效果文字跑马灯效果就是实现一个文本从一个方向想另一个方向不断移动，而当文字移动完后再回到初始位置，接着进行下一次循环移动显示。因此这个效果的中心是不断循环，然后进行文本移动的控制，（1）首先创建一个文本，写入一些文字，给这个文本先起个名字,然后将其转换为动态面板，并把文字调到动态面板区域的水平方向的外边，因为要想让文字从右向左不断移动，那么就把文字放到动态面板水平方向的右边。（2）双击动态面板吧里面的文字放置到动态面板X为280，Y为0的位置，到此文字的面板设置完毕。编号09-07编号09-07想要实现不断循环的效果，就需要在添加一个新的动态面板来不断切换他的面板状态，来进行编号09-08循环操作的控制，而切换面板状态的话最少需要两个状态。编号09-08元件设置完后就需要对循环控制的交互进行设置，第一步设置循环面板载入时-->设置面板状态(向后循环循环间隔设置为100毫秒)，因为设置了动态面板为不断循环切换，这样就可以在面板状态改变时去控制文字的移动，第二步设置交互，面板状态改变时，需要判断文字元件的位置是否达到设置的点，创建一个局部变量，用来指定文字元件，然后判断文字元件的X值，来控制文字元件位置的移动，当文字的位置在初始位置即动态面板的右侧时280，因为动态面板的宽度为280，让文字开始想左移动到文字完全走出动态面板的区域，因为文字元件的长度为349，所以需要文字移动到坐标为（-349，0）的位置，而当文字移动到-349位置时需要把文字元件的位置在此设置到原来初始的位置即（280,0）位置这样在面板状态不断切换的时候就看循环控制文字进行滑动，从而实现跑马灯的效果。4.导航栏菜单切换效果，鼠标移动到某个菜单上方时在导航栏下方显示对应的二级菜单，移出后自动隐藏，首先先添加元件进行简单页面的搭建，并把这些元件设置为动态面板并添加与上方对应的状态设置相应子选项。给每个按钮添加鼠标移入的交互，当鼠标移入时设置面板状态为当前鼠标悬浮在的元件文字内容编号09-09的面板上，然后设置面板为显示状态动画效果为弹出，而且此时在鼠标移出时也会自动收起子菜单栏，接着为每一个按钮都添加相应的交互事件，然后进行预览。编号09-09四、实践技能训练（一）布置训练任务任务1：依据设计注意事项与制作建议分析案例制作的方式。任务2：使用原型工具Axure实现文字跑马灯效果（二）实战项目案例运用Axure原型设计工具制作“轮播图”交互效果。……【难点】教师重点指导：Axure元件功能以及设计注意事项，制作交互原型。【学生初次进行设计实践，教师应多引导，帮助学生形成设计方案，指导学生完成初步概念建立】五、课堂总结今天，我们主要结合AXURE软件工具的注意事项以及低保真交互效果学习了Axure元件的具体使用时的交互方法，也针对相关理论做了一些练习，想必同学们通过练习对Axure制作低保真交互效果有了一定的了解和掌握。希望同学们课后继续对你所接触到的相关作品，用所学习的知识，分析网页交互产品的交互效果的设计方法和网页交互中的逻辑流程概念，这样有助于在设计制作交互案例时更加得心应手。六、课后思考前面我们讲到