|
|
在日常交互场景中，咱们常常会使用“前往顶部”或者锚点定位功用，来疾速抵达本人想去的页面。那末假如想利用Axure来完成这一交互设计的话，咱们又能够如何进行呢？本文作者便进行理解读，一同来看。
ozqu4zdd1fq.jpg
Axure 有一个【转动到元件】的交互，这个交互在日常设计顶用得至多的次要有两种场景，分别是【前往顶部】和【锚点】，明天分享这两种场景的设计。
一、前往顶部
这个功用在网页设计中十分常见，然而我在网上搜了一下，却发现很少无关于这块的 Axure 教程，我料想大佬们多是感觉这个真实太简略，没有须要出教程。而剩下未几的教程中呢，根本上都十分繁杂，很费力才完成这个设计，看得人想骂娘，明天，我将分享多是全网最简略的，用 Axure 完成前往顶部的教程。
先找个实际网站看一下，下列是人人都是产品经理首页的演示成果：
usppywfmiwo.jpg
前往顶部的设计次要有3个要点：
默许暗藏；页面向下滑动一定间隔后显示；点击按钮前往到页面顶部。接上去开始入手做。
先画个示意界面：
etw4ri3x4ov.jpg
最下面的【矩形】伪装是顶部内容，下方的【占位符】表现页面其余内容，右边是一个【静态面板】，外面放了一个【圆形】，并填充了文字“↑”。
首先页面是能够继续转动的，而【前往顶部】的按钮是固定在页面上的，所以需求对按钮所在的【静态面板】配置【固定到阅读器】：
yu5kr13jbkm.jpg
对于【静态面板】固定到阅读器我在《【Axure 教程】静态面板的救赎》有相干的分享，各位有兴致能够看看。
接上去给【静态面板】添加【转动到元件】交互，指标设置为的矩形，并选择【垂直】，动画个别设置【线性】，速度本人能够按照观感调理便可：
evxmavmt5vv.jpg
设置完看看成果：
ktkfvc0xzvf.jpg
这个时分【前往顶部】的功用就做完了，然而当页面曾经处于顶部的时分，咱们是不需求显示前往按钮的，而是当页面向下滑动一定间隔后才显示，所以咱们需求优化一下。
首先咱们点一下任务区的空白处，不选择任何元件，给页面添加【窗口转动时】的交互：
0kizwgays3l.jpg
这里先判别窗口垂直滑动的间隔（Window.scrollY）是不是超过的高度，假如是，表现顶部内容板块曾经彻底滑出阅读器页面，这个时分就能显示【前往顶部】按钮，假如尚无，则无需显示，最初再选择【前往顶部】按钮，设置为暗藏，看看成果：
1tm1i1q3nrq.jpg
前往顶部的功用就设计完了，假如各位看完感觉这还不简略，也请不要骂娘，假如一定要骂的话，就骂我好了。
二、锚点
锚点个别是用于页面较长时，经过分类导航来疾速定位页面的地位，以人人都是产品经理文章页为例：
5ed4ho45n2z.jpg
接上去用 Axure 来完成相似设计。
外观如下：
t1o1zpb0rg5.jpg
放几个标题，再放几段文本段落，右侧放一个表格做锚点，一样设为【静态面板】，并固定在页面右下角。
接上去给表格的每个单元格添加转动到元件，指标就是对应的标题：
55uosjmufod.jpg
设置完之后看看成果：
q3ytfnv2snq.jpg
其余场景就请各位本人挖掘了。
本文由 @产品锦李 原创公布于人人都是产品经理，未经许可，阻止转载。
题图来自Unsplash，基于CC0协定。
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。 |
|
中级会员