Axure交互设计操作（二）

之前一里总结到轮播效果，其实实战当中轮播效果一般是复合使用的。比如：

image.png
1）左右导航箭头：一般有移入显示效果，背景透明度改变这两种效果；可以先设置隐藏，然后添加用例，鼠标移入显示两个箭头，并且改变面板的透明度。
2）轮播图导航：随着大图的变换，这几个点或者方块，相应的改变自己的颜色；点击其中一个，主图会跳转到相应的图片；另外也会有透明度的设置。

和轮播图类似，这其实也是一个轮播效果。我刚遇到这个需求时，一直在想有没有伴随的这种状态，因为它是随着主图变化的，但是并没有这种状态。

后来解决也很容易，因为想要的效果是，轮播图导航可以在轮播图变换的时候也变换，并且点击然后跳转到相应的轮播大图就好，这就是点击相应的方块改变轮播图的面板状态（一中说了轮播图用动态面板实现）；又因为我们轮播图的播放其实就是我们自己设置的规律，只需让轮播图导航也符合相同的规律就好，所以它也是动态面板有4个状态，每个状态是不同的方块显示提示颜色，时间上也显示一样就好。

image.png

（说到这里，跑题一下：思维不能被惯性束缚，就像我刚才说自己；其实思考的方式应该是这样：为了提示用户轮播图播放到第几张了，需要有个导航提示。如何让这两个一起变换呢，只要等待的时间一样就好了。Axure只是个实现脑海中想法的工具，只要能够实现，并且有可操作性，就是好的）

再提一下，像之前说的二级菜单和这个轮播的效果，不光是上下滑动菜单或者左右轮换图片，我们还可以利用同样的操作把它们变成侧边栏，或者类似新闻、通知之类的轮转的效果。

6、浏览器顶部导航/搜索栏吸附效果（不好意思，我拿阿里的网站做模板练手了）

image.png
这个的交互两方面：1） 有个吸附效果，无论窗口如何滚动，这个导航栏一直吸附在浏览器顶部。2）页面刚加载时不显示，只有窗口滚动超过判断条件时才会显示。
image.png
吸附在浏览器的顶部可以鼠标右键，然后选中固定到浏览器，然后想让这个导航栏占这个页面宽度，就把100%宽度选上。
image.png
滚动时显示/隐藏；这个有点折腾我了，因为用的汉化版Axure有些单词理解的不是很深刻，哈哈。具体就是要对页面操作，而并非是导航栏_吸附这一个组件，在页面交互选取窗口滚动时，当窗口滚动的Y轴的值超过我们所设置的值时，产生交互效果，反之亦然。具体设置就是添加一个条件，用一个函数变量Window.scrollY（窗口滚动Y轴的值），因为页面或者原件定位都是选取左上角的坐标值，那么页面的定位就是(X=0,Y=0)
image.png

7、设置锚点，点击直接返回这个页面中的某个位置

我用返回顶部这个按钮当例子

image.png
image.png
很简单，鼠标单击滚动到你最顶部的那一块，我的顶部栏命名为菜单栏1。（这里多说一句，命名真的很重要，最好在第一版页面布局出来的时候就规范好命名规则，中文或者英文，然后命名下降到元件级。不要到用到了再想起来命名，因为遮挡分层的原因，很多部件有可能被上一层挡住，没有办法直接鼠标选取）。唠叨一句，返回顶部跟跳转到页面某个位置是一摸一样的办法。

上一篇：Axure交互设计操作（一）
下一篇：暂无