精华内容
下载资源
问答
  • AXure(3):点击导航切换页面

    万次阅读 2018-04-05 23:55:37
    这里学习的是,点击导航栏的菜单时,页面根据所点击的菜单进行切换。1. 将母板应用于Index页面Index页面内容如下:2. 选中左侧导航中的“红色页面”菜单,点击右侧“属性”中的“创建连接”连接中选中“红色页面”3....

    这里学习的是,点击导航栏的菜单时,页面根据所点击的菜单进行切换。

    1. 将母板应用于Index页面

    Index页面内容如下:

    2. 选中左侧导航中的“红色页面”菜单,点击右侧“属性”中的“创建连接”

    连接中选中“红色页面”

    3. 同理,选中母板中的“绿色页面”导航菜单,在属性的“创建连接”中选择“绿色页面”

    4. 蓝色页面同理

    5. 查看点击效果

    进入index页面

    点击导航栏的“红色页面”菜单:

    点击导航栏的“绿色页面”菜单:

    点击导航栏的“红色页面”菜单:

    6. 对导航栏的菜单在点击时改变样式

    增加事件:鼠标悬停时,字体变色:右侧,[2]Shapes中,点击“鼠标悬停”,设置鼠标悬停时的字体颜色:

    7. 最终效果

    无点击:

    点击导航栏“红色页面”:

    点击导航栏“绿色页面”:

    点击导航栏“蓝色页面”:

    8. Gif动图

     


    展开全文
  • AXURE-导航切换

    2020-09-10 11:09:49
    再分别点击对应的状态,往里面添加任意页面内容。 二、添加交互 (1)按住shift键,选中两个导航按钮,鼠标右键,选中【交互样式】。 (2)设置选中样式:字体颜色为白色,填充色为蓝色。 (3)选中导航...

    一、页面布局

    (1)从左侧元件库拉入两个矩形作为导航按钮,分别命名为:页面1、页面2。

    (初级)导航中的页面切换

    (2)从左侧元件库拉入一个动态面板作为页面内容展示,命名为页面内容。

    (初级)导航中的页面切换

    (3)双击动态面板,点击“+”,添加状态2;再分别点击对应的状态,往里面添加任意页面内容。

    (初级)导航中的页面切换

    (初级)导航中的页面切换

    二、添加交互

    (1)按住shift键,选中两个导航按钮,鼠标右键,选中【交互样式】。

    (初级)导航中的页面切换

    (2)设置选中样式:字体颜色为白色,填充色为蓝色。

    (初级)导航中的页面切换

    (3)选中导航按钮【页面1】;双击右侧“属性”栏中的【鼠标点击时】。

    (初级)导航中的页面切换

    (4)选择【设置面板状态】->勾选【页面内容动态面板】->选择【状态1】。

    (初级)导航中的页面切换

    再点击【设置选中】-》勾选导航组中的【页面1】按钮。

    (初级)导航中的页面切换

    (5)选中导航按钮【页面2】;双击右侧“属性”栏中的【鼠标点击时】,重复上面步骤;选择【设置面板状态】-》勾选【页面内容动态面板】-选择【状态2】;再点击【设置选中】-》勾选导航组中的【页面2】按钮。

    三、交互细节调整

    (1)按住shift键,选中两个导航按钮,鼠标右键,选中【设置选项组】。主要为了实现,点击选中【页面1】按钮选中时,【页面2】按钮则自动变为不选中。

    (初级)导航中的页面切换

    (2)页面刚加载时,先展示页面1,所以,导航按钮【页面1】的初始状态应该为选中;因此,选中导航按钮【页面1】,点击右侧属性栏,勾选【选中】。

    (初级)导航中的页面切换

    四、预览效果

    学习更多教程,关注微信公众号:艾斯的Axure峡谷。欢迎大家留言评论,也可以留下你期待看到的交互效果。

    示例:下载地址

    效果:

    展开全文
  • Axure学习日记之tab菜单(二)——点击tab菜单切换页面 本期实现点击tab菜单切换对应的页面,同时实现鼠标悬停及选中后菜单颜色改变。 (1)设置鼠标悬停及选中颜色 选择一级菜单,设置鼠标悬停、鼠标按下以及选中...

    Axure学习日记之tab菜单(二)——点击tab菜单切换页面


    本期实现点击tab菜单切换对应的页面,同时实现鼠标悬停及选中后菜单颜色改变。
    (1)设置鼠标悬停及选中颜色
    选择一级菜单,设置鼠标悬停、鼠标按下以及选中样式,改变填充颜色。

    在这里插入图片描述

    展示效果如下:

    在这里插入图片描述

    (二)设置点击tab切换对应tab页
    第一步,拖入一个动态面板,命名为“页面面板”

    在这里插入图片描述
    第二步,对该面板添加多个状态

    在这里插入图片描述
    第三步,填充每个状态面板的内容

    在这里插入图片描述
    第四步,进入二级菜单,对每一个二级菜单设置单击事件

    在这里插入图片描述
    设置单击事件,切换页面面板状态
    在这里插入图片描述
    对单击事件添加设置选中,选中当前菜单时,设置值为true,同时设置其他菜单的值为false(该设置为切换选中时,切换相应颜色)

    在这里插入图片描述
    展示效果如下:

    在这里插入图片描述
    在这里插入图片描述
    以上,实现了点击不同菜单切换不同界面,同时改变悬停及选中颜色。

    第一期:
    Axure学习日记之tab菜单(一)——实现菜单下拉及折叠效果

    展开全文
  • Axure 页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号、手机账号、邮箱账号时候的状态 ...

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面

    操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号、手机账号、邮箱账号时候的状态

     

    Axure利用一个内联框实现点击按钮的时候,框架跳转至百度地图页面

     

    转载于:https://www.cnblogs.com/souhaite/p/10755296.html

    展开全文
  • Axure RP9——【页面交互切换效果】

    千次阅读 2020-12-15 11:29:17
    AxureRP9-页面切换交互效果 II.实现步骤 当点击问题1下方的选项时,可以出现转场动画效果。 ①进度条位移到第二个问题 ②选中问题会出现选中效果 ③这里只能单选一个选项 1.元件准备 (1)文本: 命名为...
  • 实现效果: 第一步:新建三个矩形为顶部导航...第四步:在页面合适的位置放置动态面板,添加3个动态面板的状态(state),State1(页面1)对应选项一,State2(页面2)对应选项二,State3(页面3)对应选项三;实际工
  • 再分别点击对应的状态,往里面添加任意页面内容; 二、添加交互 1、按住shift键,选中两个导航按钮,鼠标右键,选中【交互样式】; 2、设置选中样式:字体颜色为白色,填充色为蓝色; 3、选中导...
  • 什么是TAB页面切换? 我的理解是:点击不同的标题或者标签,内容显示区显示不同的结果。通常标题或者标签是并列排放的。如携程网首页下面的部分。 注:对于上面的内容区部分,是非常有规律的,这种使用中继器来...
  • Axure tab切换 学习笔记

    2015-03-03 14:56:52
    矩形框也是可以设置点击事件的选中tab的切换{分为已选择(选中时)和默认(未选中时)}页面载入时,初始默认为淘宝会员已选中页面给选中的tab按钮设置颜色----选中淘宝会员矩形框-----右键--------编辑按钮形状-----...
  • Axure之实现图片循环切换效果

    千次阅读 2019-07-26 11:29:32
    Axure之实现图片循环切换效果 1、将母版应用于Index页面 2、先选择一个box,调整大小,再选择动态面板 给动态面板命名,并在index中调节动态面板大小,再选择三张图片,分别放在三个状态中 3、状态一 状态2、状态3和...
  • 使用Axure9.0实现简单的web端导航栏的切换效果或者APP底部的tab切换效果,主要做了三种模式,如下图: 1、构建基本的切换框架图 2、设置交互 2.1导航一效果设计 (1)选中需要设置的交互元件,后点击交互...
  • Axure使用中继器制作菜单,实现点击菜单切换菜单背景色以及进行页面跳转。 效果如下: 1.给中继器的选择框设置选中效果 2.选中中继器,给矩形框添加事件:,右侧页面使用动态面板实现,选中不同菜单切换到不同...
  • 1. 实例截图分析 ...重点是如何实现这2个标签在点击下自动切换。 实际制作 第一步:拖动一个动态面板组件到页面编辑区域,并设置其大小为400*360 第二步:给动态面板添加2个状态:淘宝会...
  • Axure 轮播

    2021-01-14 16:32:40
    大体步骤如下:先实现自动播放+页面切换+按钮和图片对应。 先拉一个图片出来,去掉边框然后转换为动态面板,再添加所需的七张图片。 添加点击事件让其自动切换。如下图: 根据循环需要选择交互动作,选择载入时,如...
  • 导航栏中切换账号效果 目录 Navigation Bar -Switch account I....II....I....实现导航栏中切换账号效果 ...导航栏账号切换效果 ...再次点击可以收回切换账号页面 (3)进行交互的时候,主页面会有一层浮层显示...
  • 1. 实例截图分析    淘宝的登录框主要分为了2个页面标签,淘宝...重点是如何实现这2个标签在点击下自动切换。     第一步:拖动一个动态面板组件到页面编辑区域,并设置其大小为400*360
  • 页面中:(图1-72) 动态面板“LoginPanel”各个状态中:(图1-73) 包含命名: 动态面板(用于制作登录面板):LoginPanel 动态面板状态(用于包含快速登录内容):State1 动态面...
  • Axure 选项卡

    2021-01-18 19:19:52
    选项卡是由几个按钮组成,通过点击显示页面切换。选项卡的步骤也很简单,选项卡通过运用判断加动态面板和选中效果再加上手机元件实现的。 实现效果:A.如果选中是1,那么点2和点3分别向左滑动 B.如果选中2,那么...
  • Axure轮播制作

    2021-01-15 14:43:45
    点击向左向右按钮,能实现图片之间的切换。 图片转换时,能实现圆点列表的转换。 制作流程 (1)页面载入之后,能使图片之间能实现相互转换。 打开Axure RP 8,从元件列表中拖出图片的元件,并设置图片。 上一步...
  • 一、从“index”中拖出一个按钮。 二、双击“鼠标单击时”,点击“设置变量值”,设置值为2。 三、点击“打开链接”,选择...七、切换到page1,点击空白处,双击“页面载入时”,点击“添加条件”,把“元件
  • Axure RP 8轮播

    2021-05-08 09:23:53
    (2) 可以实现自动播发+页面切换+按钮和图片对应。 2. 首先我先展示在作品 如图所示: 3.首先做出主体结构如上图,然后设置动态面板,双击添加多个面板,设置需要的图片。 如图所示: 4.然后就是设置交互了首先是 ...
  • axure动态面板

    2019-07-15 15:18:14
    实现效果如下:(点击头部导航,切换到相应页面) 步骤: 1、将水平menu拖入右侧面板 2、添加动态面板(Dynamic Panel) 3、双击动态面板 4、点击加号添加(头部导航有几个就添加几个state) ...
  • Axure RP8手机边框

    2021-01-20 20:53:49
    设计五个小按钮,通过点击小按钮,实现页面切换。 使用动态面板插入图片实现图片的切换,加入两个小按钮。 也可以实现页面切换设计一个小轮播,添加文字,实现其动态效果。 如下图: 添加文本,
  • Axure 学习笔记

    2015-02-28 15:36:02
    在右边的面板上2015,上点击,既可以跳出动态面板状态管理,然后点击+ ,即可以添加活动的面板03 04 06 09 等等,然后编辑布局这一个个活动页面。(具体见图一,图二)3.先拖入文本框,输入好字体后,再拖入左边得...
  • axure_1复习2

    2021-06-10 19:46:53
    交互动作:页面切换,响应范围,点击动效等; 演示效果:手机演示、原型托管、屏幕适配。 前三条为【静态】,后两天是【动态】。 高保真原型图是什么? 一般用于给用户“开发前产品体验”,是一个带交互动作的MVP,...
  • axure_1复习4

    2021-06-11 11:46:28
    axure_1复习4 1.动态面板-轮播图 图标有三个层:黑色灰色和蓝色,通过action(动作)控制具体展示哪个状态; 可以理解为多层页面放到一起; 拖动一个动态面板D1进来,双击会弹出状态管理。添加3个状态; 点击1个...
  • 如何用Axure实现轮播

    2020-12-04 21:36:01
    可以实现自动播放+页面切换+按钮和图片对应 开始当然是把布局给弄好啦,图片这里就用动态面板实现,动态面板可供同时存放多个图片,弄好它直接给他设置载入时自动播放就好, 旁边的两个箭头设置点击切换图片具体操作...
  • Axure RP 编辑自适应视图

    万次阅读 2015-01-19 14:00:12
    1、学习不同自适应视图的切换。... 点击“基本”按钮,切换到基本页面 RP编辑自适应视图" TITLE="Axure RP编辑自适应视图" /> 步骤2: 在基本页面制作淘宝网首页: 注意:仅制作在视图1200、1024中显示的公共
  • Axure RP 9 Mac这款原型设计软件能让...31、Axure RP 9 Mac切换元件库 在元件库功能面板中,可以通过点击元件库列表,选择不同的元件库进行使用。 32、设置页面居中 在页面【样式】设置中选择页面居中的按钮。...
  • 产品原型开发工具---Axure

    千次阅读 2013-07-16 10:14:21
    在产品设计初期,避免不了对产品有个简单的设计模板,当然在初期可以使用纸质或图片等工具传达产品设计思想,使用Axure...包括按钮点击事件,页面切换,布局都能很好的体现。 Axure中文网:http://www.axure.us/

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

axure点击页面切换