一、成品效果

Axure Cloud 案例14 【动态面板-滚动条4】深色模式 - 图层处理

版本更新

一、background变量
1.1 默认值为0，表示图层顺序。可能取值有{0,1}。0=浅色图层位于上方，1=深色图层位于上方。

二、动态面板a
2.1 只有一个子页面，使用浅色图片，图层默认为上层。
2.2 交互：滚动时，动态面板a 的热区移动到 [[This.scrollY]]。
2.3 交互：滚动时，动态面板b 的热区移动到 [[This.scrollY]]。

三、动态面板b
3.1 只有一个子页面，使用深色图片，图层默认为下层。
3.2 交互：滚动时，动态面板a 的热区移动到 [[This.scrollY]]。
3.3 交互：滚动时，动态面板b 的热区移动到 [[This.scrollY]]。

四、按钮
4.1 文字修改为 深色模式。
4.2 浅色模式下：点击后，background变量=1，浅色模式置于底层。
4.3 深色模式下：点击后，background变量=0，深色模式置于底层。

历史版本：Axure Cloud 案例13-【动态面板-滚动条3】双向同步滚动
一、focus变量
1.1 默认值为0，表示当前操作的窗口，可能取值有{0,1,2}。0=外部，1=动态面板a，2=动态面板b。

二、动态面板a
2.1 交互：鼠标移入时，focus = 1。
2.2 交互：鼠标悬停时，focus = 1。
2.3 交互：鼠标移出时，focus = 0。

二、动态面板b
3.1 交互：鼠标移入时，focus = 2。
3.2 交互：鼠标悬停时，focus = 2。
3.3 交互：鼠标移出时，focus = 0。
3.4 滚动时，动态面板a 同步滚动 并且比例相同。

历史版本：Axure Cloud 案例12 【动态面板-滚动条2】单向同步滚动
一、动态面板a
1.1 page1时：滚动时，动态面板b 同步滚动 并且比例相同。
1.2 page1时：滚动到底部时，动态面板b 同步滚动到底部。
1.3 page2时：滚动时，动态面板b 同步滚动 并且比例相同。
1.4 page2时：滚动到底部时，动态面板b 同步滚动到底部。
1.5 page1切换page2时：page1与page2不能同步滚动，重新回到page最上方。

二、动态面板b
2.1 支持滚动浏览，但不影响 动态面板a 的浏览进度。

历史版本：Axure Cloud 案例11-【动态面板-滚动条1】
一、切换
1.1 page1时：点击切换面板a，可以切换到page2。
1.2 page2时：点击切换面板a，可以切换到page1。
1.3 切换页面后不保存浏览进度，从头部重新浏览。

二、滚动
2.1 支持浏览方式：鼠标滚轮。
2.2 支持浏览方式：拖拽进度条。
2.3 支持浏览方式：点击进度条。
2.4 范围：动态面板所有子页面（强制）。

二、素材准备

使用任意一张长图，这里我使用的是案例13 【动态面板-滚动条3】双向同步滚动中的图1，简单修改一下区别出浅色模式和深色模式。

用原图随便调一调参数：

三、制作方法

首先，也是需要两个动态面板互相驱动，但实现原理与案例13 【动态面板-滚动条3】双向同步滚动有些区别。

在案例13场景中，两个面板的高度不一致。而 案例14 中，两个面板与图片的高度完全一致。经过测试，是可以直接互相驱动的，而且不会导致 永动机 的bug。

猜测这可能是由于在Axure RP9中，计算后结果非整数时所导致的bug。

实现思路：
1. 将两个相同尺寸的 动态面板重叠放置。
2. 动态面板 同步滚动进度。
3. 点击按钮后通过 改变图层顺序 来切换显示的内容。
4. 使用变量记录（background）当前图层顺序，决定点击后执行的代码逻辑。

动态面板a 配置交互如下：

[[This.scrollY]]

动态面板b 配置交互如下：

[[This.scrollY]]

【滚动】热区配置交互如下

深色模式按钮配置交互如下

四、图层（概要）使用技巧

制作原型图时，如果元件较多，需要注意规范对每个元件都规范命名。主要是为了方便查找和区分。

技巧1：在元件叠放时，不方便操作下层元件。这时可以通过概要模块的 在视图中显示 按钮。来隐藏上层图层

隐藏前：

隐藏后：

技巧2：可以在概要模块中，通过拖拽的方式调整图层顺序，概要的顺序 = 图层顺序。

技巧3：大部分单个元件是不支持隐藏功能的（目前只发现动态面板可以隐藏），这时可以通过组合功能，将单个元件置于组合中，就可以看到隐藏按钮了。

技巧4：可以直接直接在概要中选中元件，方便对其进行样式、交互等配置。

选中面板a

选中面板b

技巧5：注意规范命名！这里可以根据元件名称搜索对应元件，在元件很多时，需要经常使用此功能。

22/09/13

1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理相关推荐

1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解手动制作滚动条的原理 2. 掌握鼠标悬停在本案例中的用法一.成品效果 Axure ...
1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解元件库,会使用元件库中的成品进行改造 2. 掌握在概要模块的使用技巧一.成品效果 ...
1.4_18 Axure RP 9 for mac 高保真原型图 - 案例17 【js-echarts官网】
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 最开始只是想尝试一下,在Axure RP9中引用echarts图片.访问了一下echarts官网 ,后来对官网的 ...
1.4_10 Axure RP 9 for mac 高保真原型图 - 案例9 【按钮】单选按钮组
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解单选功能的实现原理 2. 掌握按钮的常见使用方式 3. 掌握指定单选按钮的组功 ...
1.4_6 Axure RP 9 for mac 高保真原型图 - 案例5 【旋转的唱片3】进度条_滚动
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解进度条的实现原理 2. 熟悉设置尺寸动作的使用场景 3. 掌握变量值实现复杂的 ...
1.4_7 Axure RP 9 for mac 高保真原型图 - 案例6 【旋转的唱片4】进度条_拖拽、点击
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 熟悉动态面板的拖拽.点击动作的使用场景 2. 掌握动态面板中配置拖拽功能实现原理( ...
1.4_8 Axure RP 9 for mac 高保真原型图 - 案例7 【旋转的唱片5】进度条计时器关联
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解进度条绑定时间的实现原理 2. 掌握变量的高级使用技巧一.成品效果 Axure C ...
1.4_9 Axure RP 9 for mac 高保真原型图 - 案例8 【动态面板】浏览、翻页、回弹
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解手机端app 浏览的实现原理 2. 掌握回弹效果的交互配置方式 3. 掌握动态面板 ...
1.4_3 Axure RP 9 for mac 高保真原型图 - 案例2 【旋转的唱片】
相关链接目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解实现选中效果的原理 2. 熟悉动态面板的使用场景 3. 熟悉变量值的使用场景 ...

1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理

一、成品效果

二、素材准备

三、制作方法

四、图层（概要）使用技巧

1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理相关推荐

最新文章

热门文章