全栈工程师?
嗯.....目前并不是!

Axure教程:界面右側懸浮可伸縮動態按鈕製作

界面右側懸浮可伸縮動態按鈕要如何製作?來文中看看便知~

1. 頁面布局

頁面設定:

新建一個頁面,命名為【界面右側懸浮可伸縮動態按鈕】,在這個頁面下面新建一個叫做【界面1】的子頁面,再在【界面1】下面新建兩個2子頁面,分別命名為【界面1-1】和【界面1-2】。

(1)界面右側懸浮可伸縮動態按鈕

在頁面內新建一個【動態面板】。

【動態面板】的【State1】內分別從左側元件庫內拉入兩個【矩形】做一級背景(大小尺寸為1704*940)和二級背景(大小尺寸為1704*821,上下邊框為實體線框,較粗樣式,顏色為#06C1FA)。

並從左側元件庫內拉入一個內聯框架,將其嵌入到二級背景之內,隱藏其邊框,框架滾動條設為從不顯示,大小尺寸為1704*815,不覆蓋二級背景的樣式,且內聯框架目標頁面為【界面1】。

(2)界面1

頁面內從左側元件庫拉入一個【矩形】元件,作為背景,大小尺寸為1643*760,邊框為實體線,色值為#f2f2f2。

從左側元件庫拉入一個【內聯框架】元件,將其嵌入到背景之內,隱藏其邊框,框架滾動條設為從不顯示,大小尺寸為1639*754,不覆蓋背景的樣式,且內聯框架目標頁面為【界面1-1】。

新建兩個【動態面板】,分別命名為【界面1-1】和【界面1-2】,在兩個動態面板內分別新建兩個相同命名的文件組合,然後分別從左側元件庫內拉入一個【矩形】做背景,一個【文件標籤】,一個【橢圓形】,以及在【橢圓形】內嵌入圖標,設定成按鈕的樣式。

(3)界面1-1&界面1-2

從左側元件庫拉入一個【一級標題】元件,內容改為界面1-1;從左側元件庫拉入一個【一級標題】元件,內容改為界面1-2。

2. 動態交互

2.1 效果設計

(1)實現右側懸浮按鈕的懸停、按下、選中的動態效果

選中【背景】,進行其【交互樣式設置】,將鼠標懸停交互樣式填充顏色設置為#ff0000、透明度為80%,鼠標按下交互樣式填充顏色設置為#ff0000、線段顏色為#ff9900、選中交互樣式填充顏色設置為#ff0000、線段顏色為#ff9900。

(2)實現右側懸浮按鈕的伸縮動態效果

選中界面1-1或者界面1-2【動態面板】內的文件組合,點擊添加交互中的【鼠標移入時】&【鼠標移出時】用例,匹配值相關動作。

步驟一:設置右側懸浮按鈕交互【鼠標移入時】用例

在case1【組織動作】中添加【移動】動作,在【配置動作】內夠遠界面1-1【文件組合】,【移動】狀態選擇【到達】,x=0、y=y,【動畫】效果選擇【彈性】時間t=1000毫秒。

步驟二:設置右側懸浮按鈕交互【鼠標移出時】用例

在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選界面1-1【文件組合】,【移動】狀態選擇【到達】,x=70、y=y,【動畫】效果選擇【彈性】時間t=1200毫秒。

2.2 交互流程

(1)實現右側懸浮按鈕與內聯框架的交互操作效果

選中【文字】元件,點擊【添加用例】中的【鼠標單擊時】用例,配置相關的動作。

步驟一:設置右側懸浮按鈕觸發之後狀態的改變設置

在case1【組織動作】中添加【選中】動作,在【配置動作】內勾選界面1-1和界面1-2【文件組合】內的【橢圓形】和【背景】元件,界面1-1內的【橢圓形】和【背景】勾選之後,設置選中狀態的值=true,界面1-2內的【橢圓形】和【背景】勾選之後,設置選中狀態的值=false。

步驟二:設置右側懸浮按鈕觸發之後內聯框架的交互設置

在case1【組織動作】中添加【選中】動作,在【配置動作】內勾選【內聯框架】,在【打開位置】勾選【鏈接到當前項目的某個頁面】,並選擇【界面1-1】頁面,配置【內聯框架】鏈接界面1-2與以上同理。

3. 預覽效果

4. 結語

結語:請路過的朋友們多多支持哈,卧枕江山在這裡先謝謝了,以後會有更多優質的文章和產品在這個平台上進行發布,請盡請期待呦

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure教程:界面右側懸浮可伸縮動態按鈕製作》
文章链接:https://www.pmbear.com/archives/9497
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们