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

Axure 教程:左右設限滑塊頁眉菜單欄(仿今日頭條APP)

本文要跟大家講的是,如何利用製作左右設限滑塊頁眉菜單欄,一起來看看~

1. 頁面布局

頁面設定

新建一個頁面,命名為【左右設限滑塊頁眉菜單欄】。

在【左右設限滑塊頁眉菜單欄】內新建命名為【【左右設限滑塊頁眉菜單欄】的動態面板,動態面板的【State1】更改為【全部】,在【全部】內新建一個命名為【右浮圖標】的【組合文件】和一個命名為【切換菜單】的【動態面板】,【切換菜單】內的【State1】更改【文本】。

(1)右浮圖標

從元件庫內分別拉入兩個【矩形】元件分別做圖標的圖標背景1和圖標背景2。

圖標背景1的【填充】色為#ffffff,透明度為30%,圖標背景2的【填充】色為#ffffff,透明度為90%,切圖標背景2的X大於圖標背景2X的8px,然後將圖標嵌入圖標背景1和圖標背景2兩者形成的半透明上下左右居中區域。

(2)切換菜單

從元件庫內分別拉入14個【文本標籤】元件依次在切換菜單規定的區域範圍內排序成行,並依次將內容更改為1至14的數字。

【文本標籤】的【填充】色皆為透明,字體顏色#666666。

2. 動態交互

效果設計

(1)圖標交互樣式設置

選中【圖標】,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的另一種狀態的【圖片】導入。

(2)文本標籤的交互樣式設置

選中表現1至14個數字的【文本標籤】元件,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】進行設置。

(3)交互流程

1)實現左右設限滑塊頁眉菜單欄的動態交互

選中【左右設限滑塊頁眉菜單欄】動態面板內的【全部】,在【屬性】中設定【向左拖動結束時】和【向右拖動結束時】的用例,配置相關的動作。

步驟一:設置【向左拖動結束時】用例的配置動作

在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態面板,設置【移動】為【經過】狀態,x=-150,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且大於等於-338。

步驟二:設置【向右拖動結束時】用例的配置動作

在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態面板,設置【移動】為【經過】狀態,x=-200,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且小於等於0。

預覽效果

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure 教程:左右設限滑塊頁眉菜單欄(仿今日頭條APP)》
文章链接:https://www.pmbear.com/axure-%e6%95%99%e7%a8%8b%ef%bc%9a%e5%b7%a6%e5%8f%b3%e8%a8%ad%e9%99%90%e6%bb%91%e5%a1%8a%e9%a0%81%e7%9c%89%e8%8f%9c%e5%96%ae%e6%ac%84%ef%bc%88%e4%bb%bf%e4%bb%8a%e6%97%a5%e9%a0%ad%e6%a2%9dapp%ef%bc%89/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

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

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

联系我们联系我们