相關鏈接

• 目錄
• Axure中文學習網
• AxureShop
• AxureShop-QA

---

案例目標

?1. 了解 元件庫，會使用元件庫中的成品進行改造
?2. 掌握 在 概要 模塊的使用技巧

一、成品效果

Axure Cloud 案例15 【動態面板-滾動條5】深色模式 - 按鈕效果升級

版本更新

?一、按鈕
??1.1 使用Sample UI Patterns元件庫的開關，改造成新的按鈕樣式。

歷史版本：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 范圍：動態面板所有子頁面（強制）。

---

二、素材準備

素材參考案例14 【動態面板-滾動條4】深色模式 - 圖層處理，另外直接從Axure RP9 自帶的Sample UI Patterns 元件庫 中找到 開關，作為切換深色模式的按鈕。

在原按鈕的基礎上做一些UI上的美化，和尺寸的適配。根據實際情況自己制作一個按鈕，這里比較簡單就不展開介紹了。交互設置可以參考下圖：

---

三、制作方法

??與案例14 【動態面板-滾動條4】深色模式 - 圖層處理一致。

??現在一共有4個動態面板，【深色模式】- 圓形按鈕、【深色模式】-圓形按鈕底色、【主內容】淺色模式、【主內容】深色模式。與前一案例對比，唯一區別就是交互點在圓形按鈕上。

動態面板-圓形按鈕 配置交互如下：

---

22/09/14

M

總結

以上是生活随笔為你收集整理的1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。