如何用Axure8.0制作简单的登录窗口分享

1、绘制登录窗口
（1）首先，打开Axure80，在站点地图里选择一个页面，重命名为“登录窗口”，双击该页面，进入该页面的编辑模式。然后在元件库中拖拽一个矩形元件到线框图面板中，单击右键选择“转化为动态面板”，将其转化为动态面板，并将其命名为“login”
（2）双击login动态面板，选择动态面板的State1，进入状态1的编辑模式。可看到线框图面板中有一个矩形，我们将它调整为适当的大小。
（3）首先，从元件库中拖入一条水平线，作为标题栏的分割线；然后，继续拖入一个三级标题文本标签，修改文本为“登录窗口”，放置在标题栏位置；最后，拖入一个占位符，将其命名为“btn_close”，作为登录窗口的关闭按钮。如下图：
2、绘制登录表单
（1）从元件库中的表单元件中拖入两个文本框元件，一个标签文本，和一个按钮，并在属性面板编辑各个元件的属性：
文本框元件1：命名为“username”，作为用户名输入框，设置提示文本为“请输入您的用户名”；
文本框元件2：命名为“passwords”，作为密码输入框，设置提示文本为“请输入您的密码”，作为密码框，当用户输入文本，应该是以密文的形式展示，因此还需要文本框的类型设置为“密码”；
标签文本：命名为“tip”，作为页面错误提示的文本展示区域，设置文本居中显示，文本颜色为红色；
按钮：命名为“btn_login”，作为登录按钮，设置文本为“登录”；
3、为表单提交添加错误提示
当提交表单时，用户名或密码为空，会有错误提示。因此需要为登录按钮添加用例。
（1）点击“登录按钮”，选择右侧交互面板中的“鼠标单击时”，会出现如下图的用例编辑对话框。此时可以开始编辑用例。
（2）点击“添加条件”，添加的条件则为用户名为空，如下图，if 文字于username=="" 就是表示如果username为空时的意思；
点击确定，回到用例编辑对话框；
（3）选择左侧“添加动作”中的“设置文本”，在右侧的“配置动作”中选择“tip”元件，设置文本为“用户名不能为空”，如下图：
点击“确定”，Case1（用户名不能为空）即完成；接下来可按照以上的步骤完成 Case2（密码不能为空）的情况。
4、错误提示的隐藏
当错误提示后，用户要再次输入时，错误提示应消失。
（1）为元件“username”，添加获取焦点时的用例，设置当username获取焦点时，tip元件的文本为空；元件“passwords”也是；
5、关闭按钮的实现
单击占位符“btn_close”，为其添加鼠标单击时的用例，选择“显示/隐藏”，在“配置动作”栏中选择“login”动态面板，可见性选择“隐藏”，点击确定，完成用例。
至此，一个简单的登录窗口就大致实现。按键盘"F5"键，就可以预览原型啦。

采用动态面板做，动态面板的添加case部分有划动效果的，不过只有左划右划~~就是左划右划的时候设置move panle 上下划动假如只是加载内容的话采用动态面板中编辑是否显示滚动条处理就可以了，具体的 *** 作还是要靠你自己去完成了的~~

拖动中继器元件，新建一个。如图，是一个一列三行的表格，注意一下右侧“交互”和“中继器”两块用绿框圈起来的部分，[[itemColumn0]] 中的 Column0 与 “中继器”的第一列列名一样。但是， 文字于（矩形）中的‘矩形’不知道对应的是哪一个，别着急，往下看。

鼠标双击步骤1的表格，进入下图，可以看到有一个矩形框，我们把矩形框的名字改成 ‘测试矩形’。然后再返回步骤1的界面。

可以看到，交互里面的名字已经变过来了，变成了‘测试矩形’。现在我们就知道他们之间到底是怎么关联的了。

我们接着走下一步，在步骤2中再添加一个矩形，更改名称为‘矩形1’，如图：
返回中继器页面，可以看到多了一列。

在步骤5中，我们在右侧绿框选中的中继器数据表中看到，新增了一列“Column1”，并且在下面新增了一行数据‘23’，但是中继器没有变化，第二列仍然是空白列。

这个时候我们需要在交互中点击 Case1，再次配置“每项加载时”的交互动作，如下图：

按照绿框标注，将已命名为“矩形1”的矩形框设置文本为[[itemColumn1]]，Column1对应中继器数据表中新增的列“Column1”，点击确定。

如图，配置 Column1的行数据，就可以看到中继器第二列的数据都显示了出来。

下面我们开始进阶，如图，新建两个文本输入框和添加、删除按钮。对每个文本框都进行命名‘name’、‘age’。

选中“添加”按钮，配置交互-鼠标单击时：

中继器-数据集-添加行，按图示顺序 *** 作，下一步需要配置“TestColumn1”和“Column1”的数据。

点击 fx,在d出页面中点击“添加局部变量”，设置元件文字=name，name 是中继器页面 “姓名文本输入框”的名称。

在点击插入变量或函数，选择 LVAR1变量名，如图：

同样，对步骤10 中的第二个 fx也进行类似的 *** 作，只不过元件文字=age

以上两步都完成后，点击确定。

返回中继器页面，点击预览。

在名称和年龄文本框中输入一些文字或数字，点击添加按钮，就会有一行新的数据显示在下方。同理，删除也是一样的 *** 作，只不过交互动作就变成了中继器-删除行。

现在的网站很常见到一个页面占满一屏，鼠标滚动一下即是一屏，同时右下角也有一个侧边栏圆点导航，随页面滑动，切换选中不同的圆点，点击圆点也可跳转到某个位置。

这给人非常大气的感觉，我比较喜欢这种风格，正好最近也在研究Axure，于是打算使用Axure来模拟这种效果。

先放个动图：

本文将分成两个部分来讲解：
1、页面绘制
2、交互设置

首先，根据需要实现页面跳转的部分划分好板块。此例按照4个导航划分为4个板块，如下图：

使用Axure基础元件制作出4个实心圆点和1个箭头圆点，前者对应4个板块，后者表示“回到顶部”。

形状绘制比较简单，分别是由一个空心外圆加一个实心圆点/箭头组合而成的形状，具体过程就不在这里赘述啦~

我们还要设置下圆点被选中时的样式。

先选中外圆，点击“选中”交互样式设置，设置“线段颜色”为橙色（#FF9900）；
再选中内圆，点击“选中”交互样式设置，设置“填充颜色”为橙色（#FF9900）；
如果内圆有设置边框就将线段颜色也修改为同色值。

设置好外圆和内圆的样式后，再将这两个元件进行组合（快捷键ctrl+g），这样就配置完成了一个圆点的交互样式。其他3个圆点和箭头，都可以通过复制这个圆点来快速制作。

为了方便管理，也为了后面的1个关键步骤（先埋个伏笔），此处我们也把这5个圆点转换为“动态面板”吧！（此处省略 *** 作过程10个字）

OK，侧边栏圆点导航就这样搞定啦~~~

需要注意，还有一个关键点，会让我们的设计过程事半功倍。

由于4个圆点对应4个板块，同一时间只会有一个板块被选中，所以对应同一时间也只有一个圆点会被选中。

一般情况下我们需要在某个圆点的“鼠标单击时”事件中， 设置当前元件被选中、设置其他3个元件取消选中 ；如此这般地需要重复4次 *** 作，太繁琐了！

其实有一种更简单的方式，就是“设置选项组”。选项组就类似于Radio控件，具有互斥性——同一时间只能选中一个。

选中4个圆点之后，点击“属性”面板下，找到Group下的“设置选项组名称”，输入后回车即可。

设置鼠标单击时事件：

点击确认，效果如下：

其他3个圆点和箭头的“鼠标单击时”事件，可以通过复制这个圆点的Case1事件，再作粘贴即可。

将各板块都转化为动态面板，并分别命好名。其实不转化为动态面板也是可以的，但是做成动态面板对于页面元件比较多的时候会更好管理板块，跳转定位时也更方便一些。

选择好板块内的所有元件，右键点击“转换为动态面板”就可以了。

转换前：

转换后（已命好名，看起来是不是清爽多了）：

好了，准备工作到此就基本完成了。
下面我们开始重点部分的讲解——交互设置。

我们需要实现的效果主要有两点：
1）点击侧边竖滑动条的圆点时，能跳转定位到对应的板块区域；点击箭头圆点时回到顶部；
2）滚动屏幕时，浏览到某个板块时，侧边栏圆点导航的圆点也会相应被选中；

我们先来实现第一个效果。

选中第一个圆点，双击Case1用例，如下图添加动作“滚动到元件<锚连接>”，元件选择1-panel（由于前面有命好名，在这里就很方便可以找到了）

同理，为其他3个圆点添加同样动作，元件分别设置为跳转到对应板块的动态面板。

到目前为止，我们可以按F5预览一下效果了，点击圆点是不是能够跳转到对应的板块了呢？恭喜恭喜…哈哈…

咦~好像不对，是不是跳转了一下，发现侧边栏圆点导航不见了？

这是因为侧边栏圆点导航是固定在页面的，跳转时页面滚动自然它就不见了。

这时我们需要实现在前面埋下伏笔的关键一步啦——我们在前面提到，要将侧边栏圆点导航转换为动态面板，因为只有动态面板会有一个犇的功能：“固定到浏览器”，可以实现浮动的效果。

位置可以自由设定，这里我设置为固定在右下角。

到这里，已经完成了第一个效果的制作：

下面我们开始第二个效果：页面滚动到某一板块时，对应的圆点会被选中。

这里我们需要思考一下，圆点被选中是一个动作，必须要由一个事件来触发，那这个事件应该是什么？应该是页面滚动事件吧？嗯，对的。我们需要监控到当前是滚动到哪个板块，才能够触发事件。那么关键的问题来了，我们应该怎样监控页面的滚动？

答案就是：建立热区。

在页面合适位置添加一个热区元件，将作为事件触发的一个条件。

有2点需要注意：

我们先单击页面空白处，可以看到有“ 窗口滚动时 ”的事件，

我们先添加一个用例。我们是要实现圆点被选中，所以添加一个动作“设置选中”（强烈建议对圆点命名，便于查找）

这时就要使用到上面建立的热区来监控到达哪个板块——只有当板块到达热区区域时，才会触发事件。在Axure中，是通过给事件用例添加触发条件来实现的。

设置完选中状态后，需要添加一个条件：

其他3个板块也是同样 *** 作，添加1个新用例，添加条件，设置圆点的选中状态。

Demo到此就制作完成啦！

最后……是不是有童鞋发现似乎漏了一个地方——“回到顶部”的功能没有实现呢，哈哈，这是留给大家练练手的啦~

注：
第一次发文，如有地方写得不明白，欢迎拍砖、共同探讨
有需要源文件的童鞋，可以跟我私联 ：-）

男女的思维的确是不同，最近和老婆商量锻炼的事，因为我们俩都胖了，要开始锻炼。我第一个想到的是，安排在什么时间比较好；而她率先下单买了套运动服。昨天已经送到~~~

axure如何实现自动循环切换效果

1）添加动作中，选择设置面板状态，在配置动作中，依次按照下面中的箭头，选择状态：Next，勾选向后循环，循环间隔2000毫秒，单个状态耗时2000毫秒后切换等等，最后点击确定。

解释下：添加这些case的目的是，切换时，下面的小圆心的样式也可以跟着切换。只有这个目的。

来自 格雷戈·莫顿森《三杯茶》

一只猴子，肚子被树枝划伤，流了很多血。它见到一个猴子就扒开伤口说，你看我的伤口好痛。每个看见它伤口的猴子都安慰它，告诉它不同的治疗方法。它就继续给朋友们看伤口听取意见，后来它感染死掉了。一个老猴子说，它是自己把自己弄死的。痛，说一次就痛一次，不如自己默默愈合。启发：你若不坚强，懦弱给谁看~~~

1 AxureRP8实战手册-案例12（动态面板：自动切换）

如果有带给你一丝丝小快乐，就让快乐继续传递下去，欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持！

---