Axure如何制作网页目录的选中跳转效果

PhoebeFeng
1 评论 8885 浏览 8 收藏 4 分钟
好的产品经理必须懂业务!起点课堂的课程强调“产品+业务”双轮驱动的理念,教你如何深入理解商业模式,设计出真正具有商业价值和用户价值的产品。

对于原型工具,在工作的过程中会遇到不知道某个效果怎么制作出来的情况,本文介绍了如何制作网页目录的选中效果,选中目录跳转到对应页,该目录变色,且目录之间互斥,希望能够给你带来帮助。

画原型是产品经理的基本功,但有时候不知道这个效果怎么制作出来,去网上搜也搜不到,靠自己慢慢琢磨出来的笨方法,在这里记录一下,也方便大家使用。

本次介绍如何制作网页目录的选中效果,选中目录跳转到对应页,该目录变色,且目录之间互斥,参考下方动图:

一共分为以下几步:

新建母版

建立母版是为了组件的复用,母版里设置好,那么引用这个母版的所有页面都会跟着变。这里我们的目录设定为:A、B,点击目录分别跳转到不同页面。

然后在页面A、B里,增加这个母版。

设置元件选中的样式

让我们回到母版。给当前A、B按钮都分别新增一个“元件选中的样式”,这个样式就是我们鼠标点击后按钮变成的样子。

设置单击动作

那么,什么时候这个按钮该切换为“被选中”的样式呢?当然是被点击的时候。所以需要在“交互”中,增加点击后“设置选中”值为“真”。

设置选项组

如何快速的设置A、B两个按钮点击效果互斥?——设置选项组,则选A的时候B恢复,选B的时候A恢复。

这里选项组随便起个名字就行。

设置页面载入后的状态

如果想跳转到该页面后,目录一直保持选中的状态,就可以设置该页面载入时,“母版-按钮A”的选中状态为“真”,页面B同理。

以上就是全部方法,快打开Axure试试吧~

本文由 @PhoebeFeng 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 感谢分享,才知道用选项组使选中状态互斥。

    来自四川 回复
专题
12122人已学习13篇文章
激活是指用户通过完成关键行为,真正成为产品的用户,而提升新用户激活则是留存用户的第一步。本专题的文章分享了如何做好新用户激活。
专题
15342人已学习13篇文章
在产品的商业模式中,广告变现占据了很大的比重,那么广告功能就是产品里面非常重要的功能之一。本专题的文章分享了如何搭建广告投放系统。
专题
13231人已学习12篇文章
数据挖掘是指从大量的、不完全的、有噪声的、模糊的、随机的数据中通过算法搜索隐藏于其中信息的过程。本专题的文章分享了如何挖掘数据。
专题
35776人已学习18篇文章
内容运营的正确姿势,你都能在这里找到!
专题
17749人已学习13篇文章
本专题的文章分享了小程序介绍、小程序搭建、优化设计规范和功能设计指南
专题
14709人已学习13篇文章
作为一名运营,需要持续对自己的经验进行总结并不断更新迭代。本专题的文章分享了运营方法论。