在实现web端的顶部导航头像个人中心二级导航的原型，很多新手都会忽略Axure自带的一些高级交互效果，而采用冗余而复杂的交互事件。那么，要如何简单去实现这个效果呢？
　　原型效果如下：
　　一、页面布局
　　（1）主要从左侧元件库拉入【图片】元件，在样式中设置圆角半径变为圆形；拉入【文本标签】作为名称。三角形则可以采用顶部栏的钢笔工具勾画。将上述三个元件组合，命名为：个人中心；
　　（2）再从左侧元件库拉入四个矩形作为子菜单，宽高为100X40；一个矩形作为背景，宽度为100X160，并为其背景添加阴影；将上述五个元件组合，命名为：二级导航；并将其设为隐藏。
　　如下图所示：
　　二、新手误区实现的交互
　　（1）为【个人中心】添加【鼠标移入时】交互事件
　　1）二级菜单的显示：左侧元件显示隐藏勾选二级导航：可见性为显示，动画为向下滑动，时间为200毫秒。
　　如下图所示：
　　2）三角的旋转：左侧元件旋转勾选三角：旋转为相对位置，角度180fx，方向为顺时针，锚点为中心，动画线性，时间200毫秒。
　　如下图所示：
　　（2）为【个人中心】添加【鼠标移出时】交互事件
　　1）二级菜单的显示：左侧元件显示隐藏勾选二级导航：可见性为隐藏，动画为向上滑动，时间为200毫秒。
　　2）三角的旋转（与上一交互事件相同）
　　注意：为了使鼠标移入显示【二级导航】菜单时，二级菜单继续显示；移出【二级导航】菜单时，二级菜单隐藏；还需要将【个人中心】的鼠标移入移出交互事件，复制粘贴给二级导航；当然还有的新手，通过添加热区，来控制鼠标的交互事件，这样的步骤比较复制冗余。
　　而且，当鼠标刚离开【个人中心】，移入【二级菜单】时，会出现上滑下滑的情况，影响用户体验。动效如下：
　　三、简洁高效实现的交互
　　（1）只需要为【个人中心】添加【鼠标移入时】的交互事件
　　1）二级菜单的显示：（注意：需要将“更多选项”设为“弹出效果”）左侧元件显示隐藏勾选二级导航：可见性为显示，动画为向下滑动，时间为200毫秒，更多选项设为弹出效果。
　　如下图所示：
　　2）三角的旋转（与上述交互事件一致）
　　（2）还需要为【二级导航】添加【隐藏时】，三角旋转的交互事件。直接将上述的旋转事件复制粘贴就行。
　　四、预览效果

以“封装”的思维，来做原型原型是产品经理岗位最基本也是最重要的产出了，那么作为我们产品汪的日常工作，效率就很关键了，想要提高效率，不妨试一试用“封装”的思维方式来做原型吧封装的概念不管大家是……Auxre教程：网易云音乐听歌识曲交互动效制作如何用Auxre制作网易云音乐听歌识曲交互动效呢？一起来文中看看效果展示：分析交互动效打开网易云音乐，截图，然后我们可以看到，这个就像水波的动效是这样组成的：……从制作“打地鼠”小游戏，看对接客户的最后一步本文通过分享一个用Axure做打地鼠小游戏的小案例，希望大家通过这个案例能了解到：循环事件的设置方法；全局变量局部变量的使用方法；函数公式的使用方法；事件用例的使用方法；数据传……Axure教程：图片局部开灯交互动效如何利用Axure制作图片局部开灯交互动效呢？来文中看看本期教学由于是用作者本人的自拍照片进行制作教学，所以大家请勿乱传播，以免暴露本人帅的事实，话不多说，教学开始！……Axure教程：明日之子投票界面交互动效制作本文以明日之子投票界面为例，拆解了其中的交互动效，并具体分析了每一个交互动效的操作步骤。最近在追明日之子每天疯狂给妹妹点赞，所以尝试下投票界面的制作，分享给大家，这是我发……Axure教程：如何制作微信拍摄小视频按钮动效本文跟大家讲解一下，如何制作微信拍摄小视频按钮动效，一起来看看看看效果：制作过程1。分析截两张微信拍摄过程的界面，一共要制作两个动效：按钮交互：当……App产品原型背后要交代的细节和要理解的原则（一）笔者从产品经理设计需求的角度，分享了APP产品原型设计背后需要的注意的细节和原则，供大家参考与学习。移动App的产品设计往往都是所见即所有，没有太深奥的逻辑要交代的，比葫……Axure教程：计数文本域实现制定UI规范时，遇到实现“限制字数的文本域”的交互问题，即当用户输入的字数长度超过限制要求，如何只保留规定长度的文本？效果如下：我们知道【Number】类型的文本框……Axure技巧分享：个人中心二级菜单的交互实现在实现web端的顶部导航头像个人中心二级导航的原型，很多新手都会忽略Axure自带的一些高级交互效果，而采用冗余而复杂的交互事件。那么，要如何简单去实现这个效果呢？原型效……Axure教程：音乐播放器中，带时间的进度条歌词颜色变化旋转本文以QQ音乐为例，实现了带时间的进度条、歌词颜色变化、唱片旋转、暂停播放等原型交互。一、效果展示体验地址：https：v0u9to。axshare。com原……Axure教程：如何利用Axure实现可伸缩导航？在原型设计中，Axure还可以用于实现可伸缩导航功能，展现出菜单栏或者导航栏都无法完全展现的子菜单。那么，通过什么样的操作可以实现呢，本文为我们揭晓了答案。一、场景简述……Axure教程：首页的左右滑动、点击切换卡片、加载动画等交互本案例实现了微信读书首页的左右滑动切换卡片、点击按钮切换卡片、加载新卡片的动效、判断用户是否已浏览完推荐的新卡片等交互效果。一、效果展示体验地址：https：1qp……