作品名稱：可滑動的標簽頁效果

作品編號：Case002

軟件版本：Axure9

作品類型：交互案例

原型預覽鏈接（附源文件下載鏈接）：http://daisyaxure.com/demo/Case002

標簽頁式導航是移動端常見的一種導航形式，可以用于讓用戶在不同的視圖中進行切換，今天我們來講下如何用Axure實現制作一個可滑動的標簽頁。

?交互效果說明?

1.左右滑動查看所有標簽。

2.鼠標點擊時可選中當前標簽，同時只能選中一個標簽。

3.點擊位于邊緣位置的標簽，該標簽可移動到中間的位置。

效果預覽：

制作單選組效果?

1.拖入一個【文本標簽】，設置文本顏色:#CECECE，文本內容：“關注”；

選中此文本標簽，在右側【交互】面板中添加【交互樣式】，設置【選中】時字體顏色為：#333333。

2.拖入一個【矩形】，設置矩形大小：14*3px, 圓角大小：3，顏色透明度0%；

選中此矩形，在右側【交互】面板中添加【交互樣式】，設置【選中】時填充顏色為：#0B5AF0。

3.將上述兩個元件選中，點擊頂部的【居中】就可以快速將其居中對齊；

右鍵將其設置為組合，組名為：「關注」。

4.右側交互面板里，將組合「關注」設置選項組名稱為「單選組」，添加【單擊時】時選中當前組合為【真】。

制作左右滑動效果?

1.復制出多個「關注」組合，分別修改文本和組名，將所有的組合選中右鍵編組「標簽組」；

選中第一個標簽組合「關注」，在右側【交互】面板中，勾選【選中】。

2.右鍵將「標簽組」轉換為動態面板，設置動態面板名稱為：「滑動面板」；

設置動態面板的寬度和內容區一致，為375px。

3.給動態面板「滑動面板」添加【拖動時】的交互，目標為組合「標簽組」，【跟隨水平拖動】，點擊【更多選項】，軌道為【直線】，添加邊界【左側≤0】【右側≥-230】；

右側的-230這個數值是【標簽組】能向左滑動的最小坐標。

效果優化?

做完上述步驟，標簽頁的選中和滑動效果已經完成了。但是我們希望點擊邊緣的標簽時，能夠使其自動滑動到中間的位置，以方便我們再次點擊其他標簽。

只需要分別找到對應的標簽，添加【單擊時】，移動「標簽組」到對應的坐標即可。

最后添加一個帶漸變的矩形和圖標，效果就完成了。

---

更多高保真原型及交互案例請訪問：http://daisyaxure.com

總結

以上是生活随笔為你收集整理的【Axure交互教程】 可滑动的标签页效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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