【Axure交互教程】 可滑动的标签页效果
作品名稱:可滑動的標簽頁效果
作品編號: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交互教程】 可滑动的标签页效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: UltraISO 对光盘镜像常用操作方法
- 下一篇: 桌面总是弹出计算机内存不足,Win10提