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

作品編號：Case002

軟件版本：Axure9

作品類型：交互案例

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

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

?交互效果說明?

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

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

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

效果預(yù)覽：

制作單選組效果?

1.拖入一個【文本標簽】，設(shè)置文本顏色:#CECECE，文本內(nèi)容：“關(guān)注”；

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

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

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

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

右鍵將其設(shè)置為組合，組名為：「關(guān)注」。

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

制作左右滑動效果?

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

選中第一個標簽組合「關(guān)注」，在右側(cè)【交互】面板中，勾選【選中】。

2.右鍵將「標簽組」轉(zhuǎn)換為動態(tài)面板，設(shè)置動態(tài)面板名稱為：「滑動面板」；

設(shè)置動態(tài)面板的寬度和內(nèi)容區(qū)一致，為375px。

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

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

效果優(yōu)化?

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

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

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

---

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

總結(jié)

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

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