Axure操作之--点聚式导航

前言:

在我们日常在移动端产品的设计过程中,会遇到这种交互,就是点击按钮,以点击的按钮为中心分散拓展若干个按钮,这种交互在设计过程中称之为点聚式导航,今天我们就来临摹以下PATH。

示例:

1、先临摹无需交互的样式:这些都是基础的操作,就不再赘述,但是在学习的过程中可不能偷懒,axure学习主要就靠临摹,没有其它窍门哦。

2、将页面底部的红色添加转换为动态面板,并命名为【按钮】,并将其设置为两种样式,一种为点击前的样式,一种为点击后的样式。点击前中间的样式为+,点击后中间的样式为X。

3、制作点聚式导航的样式,并确定其弹出时的位置。我们将每个点聚式图标命名并带上其坐标,如【音乐 155 697】。以便后续操作。

4、将点聚式导航放置在【按钮】的下方,并将其设置为底层,并拖入一个矩形,将其命名为【遮罩】不可见度设置为40%,并至于底层。

5、制作点点聚式导航的操作:

相关推荐
虫无涯8 天前
Axure、xiaopiu设计弹窗的实践
axure·产品设计·原型设计
繁星流动 >_<17 天前
Axure-固定侧边栏-滚动内容区导航
axure
spencer_tseng22 天前
Plant Operation Dashboard Cockpit
axure
繁星流动 >_<25 天前
Axure-局部放大图片交互
交互·axure·photoshop
繁星流动 >_<1 个月前
Axure上下文交互
axure
Dontla1 个月前
Axure RP(Rapid Prototyper)原型图设计工具介绍
ui·axure·photoshop
繁星流动 >_<1 个月前
Axure拓展列表操作
axure
落雨盛夏1 个月前
Axure入门学习(自用)
学习·axure
XiaoXiao_RenHe1 个月前
Axure11 使用示例
axure
繁星流动 >_<1 个月前
AXURE图片轮盘式
axure