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

编号09-01

[web产品交互设计开发制作】

学习任务三、网页交互的低保真呈现

一、课程说明与要求

1.课程说明

本阶段课程分为三个部分，第一部分为制作产品原型时要注意什么，介绍了Axure原型设计注意事项；

第二部分为提高Axure设计效率的建议，介绍如何高效率设计交互原型：第三部分为Axure低保真常月功

能实现，重点说明网页交互中的功能Axure低保真的实现：通过学习Axure设计注意事项和低保真交互案

例，学生可以全面、深入、透彻地理解Axure原型设计工具的使用方法，提高产品设计能力和项目实战能

力。

2.工具材料准备说明

本课的作业作品实践需要同学们提前准备一些工具和材料，教师毙供软件下载链接。

工具材料备注

Axure每台电脑安装

二、学情分析与课程导入

1.学情分析

本课程为效果实现课程，需要能深入掌握Axure各个元件的使用.然后将低保真原型效果实现出来。

需要学生在学习过程中，结合实际的网页交互案例进行操作感受。在进行原型设计效果制作的同时，要不

断思考原型设计效果的逻辑，思考如何做到与最终成品-•致的效果，这是非常重要的。此外，这时一门实

践性较强的课程，需要学生在平时学习时不断的思考各个实际案例中交互效果实现的方式方法，提高自己

制作交互原型的效率。

2.课程导入

我们之前学习了Axure交互工具的使用规范。而想要把一个低保真交互效果制作出来，需要知道Axure

交互原型设计的注意事项，这样才能提高交互设计效率。那么，本节：果将通过对网页中的交互在Axure中

实现低保真的效果，来对Axure实现交互原型设计有更深入的了解。

三、理论知识讲解

（一）制作产品原型时要注意事项.............[【思政融入（从使用时注意事项，提高团队完成任

务的工作效率，领会原型制作各个要点的有机统一，体现自我在集体中的价值）】

1.页面结构完整，展示页面流程

展示了页面流程之后，不仅可以看到这个产品中的具体页面，还可以看到是如何从过一个页面跳转到

另一个页面。我们一个就能知道有哪些页面，页面和页面之间的关系是如何，在辅以必要的说明，可以增

强沟通的效果，提高工作效率。

编号09-02

2.功能框架的划分要明确、合理

产品由很多功能组成，如何将这些功能划分到不同的模块里面，这是非常重:要的。同时，功能框架划

分明确，也能够方便产品团队的成员理解产品经理的思路和意图，和产品经理一起更好的完善产品设计。

明确合理的功能框架也能够让用户在使用的时候体验更好。

3.功能结构完整、流程清晰

清晰的产品流程，能够帮助用户快速的了解产品希望解决的问题及解决问题的方式：同时，也能够方

便梳理产品的功能结构是否完整，是否有遗漏的环节。简单来说，功能流程清晰、结构完整的产品原型，

能越帮组用户快速的了解到“完整”的产品是什么样的，在此基础上•用户就能够更好的理解和思考产品

的功能细节。

4.色彩的合理应用

（1）增加明暗对比

做好明暗对比之后，我们可以明确地看到，需要突出的内容是哪一部分，或者重点和非重点之间的分

（2）不使用不必要的颜色

在制作线框图的时候，个人的建议是不要使用过多色彩,除了已经定下来的主调色和点缀色,其他的

色彩尽量少使用。如果使用了过多色彩，会在产品设计的时候带来干扰。

首页服装餐厨电器配件居家融婴童杂货饮食

5页面布局

（1）设置好第一屏的高度

第一屏的高度至关更要，尤其是在网页中。最丞要的内容、尤其是更要的操作按钮尽可能在第一屏内

显示完全，否则用户体验会较差，从而对很多方面造成影响。

（2）内容切忌堆叠

过多的堆叠内容，会让页面变得非常拥挤，没有美感，同时也不能突出重点。对后面的工作也有比较

大的影响，可能需要重新布局排版、或者调整所有版块，大大增加了工作量。

编号09-03

【那么在这部分的学习中，请大家思考一下如何提高Axure制作原型交互的效果】

（二）提高Axure设计效率的建议...................................................【重点】

1.用一个控件就可以完成的事永远不要用两个控件

需加U标直击时的交互事样

标打比时的身口事件

2.不要复制对象，而是把对象转成母版

当你使用任何操作次数超过一次的时候。当发现自己一直在复制和粘贴一组控件，可以将对象创建一

个母版。

3.保持项目的组织性和命名的清晰性

4.养成使用全局辅助线和网格的习惯

辅助线顾名思义就是用于辅助页面进行排版布局的线，辅助线可以帮助我们在页面设计之初，对页面

结构、内容排版、间距大小进行合理的划分，在Axure中包括全局辅助线和页面辅助线两类。与此同时，

一个团队成员将在一个共享项目中看到这些全局辅助线，使用网格可以帮助你保持设计的整洁和结构化。

编号09-04

-632E,BUY)SQMKX做好设置x

UBCH)ri.

网格辅助注元件对齐坦版各份

□辅助找对齐

匚底层显示刖废

□始羯在标尺中工示位置

927<2B*r*n»f<u

全局日助绡s色:

JY7EW9页面尺寸辅的线镰色:

Q3MMC

打印第助线腿:

J元

5.导入功能

在大多数项目中，人们制作的元素对其他项目也都是有用的。不需要重新发明轮子，而是重复使用那

些在过去工作中使用过的元素。

6.不要设计不必要的交互动作

Axure的初始用户可以很轻松地将交互动作添加到原型中。一开始的时候，会想对创建的每一页都添

加交互动作。然而，在大多数情况下，只需要清楚地传达设计而不需要任何交互——仅仅是静态图像就可

以。

【我们在了解了元件与母版的建立方式后，在接下来的部分，就Axure的制作低保真效果来进行重点

的讲解】

（三）Axure元件的交互.......................................................【重点】

1.首页的图片轮播效果

【思政融入（这是使用Axure综合元件实现的交互效果，离开任何一个元件交互的设置都将无法完成

轮播效果。类比于学生组合在一起构成一个整体，一人无法完成的任务，但一个团队只要互相取长补短，

每个人都发挥相应的作用，就可以完成一件看似不可能完成的任务。最终达到预期：促进学生对团队意义

的理解，培养学生的团队精神和集体荣誉感）】

轮播效果原理多张图片放进一个动态面板的不同状态里面，载入时添加切换动态面板的状态的交互效

果，这里使用三张图片来演示效果

（I）将其中一张图片右键单击选择转换为动态面板，添加两个状态，并把其他两张图片添加到新创建

的两个状态，调整一下图片的位置使图片可以在动态面板的显示出来。

100012001400

（2）给动态面板添加一个交互，载入时的交互。

编号09-05

（3）给轮播的图片上添加三个点来分别表示三个图片的位置。

（2）为三个点添加新的交互效果就是点击三个点可以切换相应的图片效果，之后再按最初的轮播效果

进行切换。

（3）左右两侧添加两个点击按钮进行上一张，和下一张的图片切换操作。

编号09-06

Q・工的

动500姓皿“W5箕8物

aHT-«»i£M5OO»aufl

I53CCC®?

2.登录效果

在首页上点击登录进行页面跳转到登录页面。

网页的登录属于最基本的功能，创建一个登录页面和一个简单的网页首页页面;在首页上点击登录进

行页面跳转到登录页面，然后在登录页面实现假登录后的跳转首页的功能，交互功能实现，在未登录的首

页上为登录按钮添加页面跳转交互，在登录页面上的登录按钮上分情况设置不同的登录状态未登录时，账

号密码错误时给出的登录提示信息，在登录情形下进行首页跳转，并将全局变量的值传递给首页上的文本

3.文字跑马灯效果

文字跑马灯效果就是实现一个文本从一个方向想另一个方向不断移动，而当文字移动完后再回到初始

位置，接着进行下一次循环移动显示。

因此这个效果的中心是不断循环，然后进行文本移动的控制，

（1）首先创建一个文本，写入一些文字，给这个文本先起个名字,然后将其转换为动态面板，并把文

字调到动态面板区域的水平方向的外边，因为要想让文字从右向左不断移动，那么就把文字放到动态面板

编号09-08

(2)双击动态面板吧里面的文字放置到动态面板X为280,Y为D的位置，到此文字的面板设置完毕。

(3)想要实现不断循环的效果，就需要在添加一个新的动态面板来不断切换他的面板状态，来进行循

环操作的控制，而切换面板状态的话最少需要两个状态。

编号09-09

（4）元件设置完后就需要对循环控制的交互进行设置，第一步设置循环面板我入时设置面板状

态（向后循环循环间隔设置为100亳秒），因为设置了动态面板为不断循环切换，这样就可以在面板状态改

变时去控制文字的移动，第二步设置交互，面板状态改变时，需要判断文字元件的位置是否达到设置的点,

创建一个局部变量，用来指定文字元件，然后判断文字元件的X值，来控制文字元件位置的移动，当文字

的位置在初始位置即动态面板的右侧时280,因为动态面板的宽度为280,让文字开始想左移动到文字完全

走出动态面板的区域，因为文字元件的长度为349,所以需要文字移动到坐标为（-349,0）的位置，而当

文字移动到-349位置时需要把文字元件的位置在此设置到原来初始的位置即（280,0）位置这样在面板状态

不断切换的时候就看循环控制文字进行滑动，从而实现跑马灯的效果.

4.导航栏菜单切换效果，

鼠标移动到某个菜单上方时在导航栏下方显示对应的二级菜单，移出后自动隐藏，首先先添加元件进

行简单页面的搭建，并把这些元件设置为动态面板并添加与上方对应的状态设置相应子选项。

给每个按钮添加鼠标移入的交互，当鼠标移入时设置面板状态为当前鼠标悬浮在的元件文字内容的面

板上，然后设置面板为显示状态动画效果为弹出，而且此时在鼠标移出时也会自动收起子菜单栏，接着为

每一个按钮都添加相应的交互事件，然后进行预览。