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

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-QA

---

案例目标

 1. 了解 深色模式 的实现原理
 2. 掌握 在 概要 模块中，显示/隐藏 对象
 3. 掌握 置于顶层/底层 动作

一、成品效果

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

M