相關(guān)鏈接

• 目錄
• Axure中文學(xué)習(xí)網(wǎng)
• AxureShop
• AxureShop-QA

---

案例目標(biāo)

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

一、成品效果

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

版本更新

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

歷史版本：Axure Cloud 案例14 【動態(tài)面板-滾動條4】深色模式 - 圖層處理
?一、background變量
??1.1 默認(rèn)值為0，表示圖層順序。可能取值有{0,1}。0=淺色圖層位于上方，1=深色圖層位于上方。

?二、動態(tài)面板a
??2.1 只有一個子頁面，使用 淺色 圖片，圖層默認(rèn)為 上層。
??2.2 交互：滾動時，動態(tài)面板a 的熱區(qū)移動到 [[This.scrollY]]。
??2.3 交互：滾動時，動態(tài)面板b 的熱區(qū)移動到 [[This.scrollY]]。

?三、動態(tài)面板b
??3.1 只有一個子頁面，使用 深色 圖片，圖層默認(rèn)為 下層。
??3.2 交互：滾動時，動態(tài)面板a 的熱區(qū)移動到 [[This.scrollY]]。
??3.3 交互：滾動時，動態(tài)面板b 的熱區(qū)移動到 [[This.scrollY]]。

?四、按鈕
??4.1 文字修改為 深色模式。
??4.2 淺色模式下：點(diǎn)擊后，background變量=1，淺色模式置于底層。
??4.3 深色模式下：點(diǎn)擊后，background變量=0，深色模式置于底層。

歷史版本：Axure Cloud 案例13-【動態(tài)面板-滾動條3】雙向同步滾動
?一、focus變量
??1.1 默認(rèn)值為0，表示當(dāng)前操作的窗口，可能取值有{0,1,2}。0=外部，1=動態(tài)面板a，2=動態(tài)面板b。

?二、動態(tài)面板a
??2.1 交互：鼠標(biāo)移入時，focus = 1。
??2.2 交互：鼠標(biāo)懸停時，focus = 1。
??2.3 交互：鼠標(biāo)移出時，focus = 0。

?二、動態(tài)面板b
??3.1 交互：鼠標(biāo)移入時，focus = 2。
??3.2 交互：鼠標(biāo)懸停時，focus = 2。
??3.3 交互：鼠標(biāo)移出時，focus = 0。
??3.4 滾動時，動態(tài)面板a 同步滾動 并且比例相同。

歷史版本：Axure Cloud 案例12 【動態(tài)面板-滾動條2】單向同步滾動
?一、動態(tài)面板a
??1.1 page1時：滾動時，動態(tài)面板b 同步滾動 并且比例相同。
??1.2 page1時：滾動到底部時，動態(tài)面板b 同步滾動到底部。
??1.3 page2時：滾動時，動態(tài)面板b 同步滾動 并且比例相同。
??1.4 page2時：滾動到底部時，動態(tài)面板b 同步滾動到底部。
??1.5 page1切換page2時：page1與page2不能同步滾動，重新回到page最上方。

?二、動態(tài)面板b
??2.1 支持 滾動 瀏覽，但不影響 動態(tài)面板a 的瀏覽進(jìn)度。

歷史版本：Axure Cloud 案例11-【動態(tài)面板-滾動條1】
?一、切換
??1.1 page1時：點(diǎn)擊切換面板a，可以切換到page2。
??1.2 page2時：點(diǎn)擊切換面板a，可以切換到page1。
??1.3 切換頁面后不保存瀏覽進(jìn)度，從頭部重新瀏覽。

?二、滾動
??2.1 支持瀏覽方式：鼠標(biāo)滾輪。
??2.2 支持瀏覽方式：拖拽進(jìn)度條。
??2.3 支持瀏覽方式：點(diǎn)擊進(jìn)度條。
??2.4 范圍：動態(tài)面板所有子頁面（強(qiáng)制）。

---

二、素材準(zhǔn)備

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

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

---

三、制作方法

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

??現(xiàn)在一共有4個動態(tài)面板，【深色模式】- 圓形按鈕、【深色模式】-圓形按鈕底色、【主內(nèi)容】淺色模式、【主內(nèi)容】深色模式。與前一案例對比，唯一區(qū)別就是交互點(diǎn)在圓形按鈕上。

動態(tài)面板-圓形按鈕 配置交互如下：

---

22/09/14

M

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。