Axure教程:tab標(biāo)簽切換交互案例,5分鐘輕松學(xué)會

0 評論 554 瀏覽 0 收藏 9 分鐘

利用Axure制作常見的交互其實很簡單,只要大家平時學(xué)好Axure原型設(shè)計的基礎(chǔ)知識,平時多思考多練習(xí),或者借助老司機(jī)的點(diǎn)撥與提醒,相信每個人都有成為交互高手的潛力,充分挖掘Axure在交互原型領(lǐng)域的潛力。

標(biāo)簽頁的定義與應(yīng)用

標(biāo)簽頁是一種選項卡切換組件,分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合,提供平級的區(qū)域?qū)⒋髩K內(nèi)容進(jìn)行收納和展現(xiàn),保持界面整潔。各選項卡下面的內(nèi)容從物理上都從屬于一個頁面的大容器當(dāng)中,他們都對應(yīng)同一個頁面訪問地址。

table標(biāo)簽頁的應(yīng)用場景非常廣泛,無論是將復(fù)雜的信息進(jìn)行分類處理,還是不同類別的功能進(jìn)行分類設(shè)計,都可以使用標(biāo)簽頁組件。如果我們細(xì)心觀察,會發(fā)現(xiàn)很多互聯(lián)網(wǎng)產(chǎn)品都使用了標(biāo)簽頁設(shè)計,無論是傳統(tǒng)的PC網(wǎng)頁還是移動端的界面設(shè)計都在使用標(biāo)簽設(shè)計。頭條號和知乎的首頁都使用標(biāo)簽頁的設(shè)計方式。

在制作table標(biāo)簽切換效果之前,我們先來觀察標(biāo)簽頁切換過程中的交互效果,點(diǎn)擊選項卡后,有以下3個交互效果:

1)選項卡被選中,選中的選項卡呈現(xiàn)出不同的視覺效果,一般為選項卡顏色發(fā)生改變,也有一些大小發(fā)生變化的

2)選項卡下方的直線水平移動到選中項的下方

3)切換頁面內(nèi)容,切換頁面時會有一些動畫效果

一、交互分析與制作

線框圖的繪制和準(zhǔn)備工作假設(shè)我們已經(jīng)都做好了(線框圖效果如下圖所示),這里就不再贅述,下面重點(diǎn)講解利用Axure制作交互的思路與方法。剛才,我們已經(jīng)分析了切換過程中的的交互效果,下面就需要思考如何分別實現(xiàn)這3個效果。

table標(biāo)簽頁效果演示地址:https://blytor.axshare.com

效果1:我們可以將這一組選項設(shè)置為同一個組,并且為這一組的幾個選項設(shè)置相同的選中樣式,這里我們設(shè)置選中后文字的顏色都變?yōu)樗{(lán)色。為第一個選項添加鼠標(biāo)單擊事件,添加“設(shè)置選中”動作,將當(dāng)前的選項進(jìn)行選中。將第一個選項的鼠標(biāo)單擊事件復(fù)制到其他兩個選項。

1. 選中樣式

2. 選中動作

效果2:為選項一的鼠標(biāo)單擊事件添加動作“移動”,移動直線到達(dá)選項一左側(cè)的某一個位置,這里我們設(shè)置距離選項一左側(cè)23像素的位置,垂直方向上保持不變。水平方向上的位置可靈活調(diào)整,只要保持這條直線和選項內(nèi)容保持水平居中對齊即可。如果直線的寬度與選項的寬度相等,那么這里的水平位置可以設(shè)置成選項的橫坐標(biāo)。

以我們現(xiàn)在做的案例說明,動作配置上選擇到達(dá)([[This.x-23]],[[Target.y]]),動畫效果選擇線性,動畫時間設(shè)置為200毫秒。將這個移動的動作配置,復(fù)制到另外兩個選項當(dāng)中。

3. 移動直線

效果3:利用動態(tài)面板的多狀態(tài)特征,來分別放置選項卡對應(yīng)的幾個頁面。

為選項一的鼠標(biāo)單擊事件添加動作“設(shè)置面板狀態(tài)”,將動態(tài)面板的狀態(tài)切換到選項一對應(yīng)的頁面。進(jìn)入動畫和退出動畫設(shè)置為向右滑動,動畫時間均設(shè)置為200毫秒。注意這里的動畫時間和效果2當(dāng)中的直線移動的時間保持一致,否則會造成不同步,視覺上感覺突兀。

二、選項一切換面板狀態(tài)

為選項二的鼠標(biāo)單擊事件添加動作“設(shè)置面板狀態(tài)”,添加動作之前我們需要分析下,用戶操作的動作軌跡。用戶既可以從選項一切換到選項二,也可以從選項三切換到選項二。這兩種情況下,切換頁面時的動畫效果是不同的,從不同的方向滑動切換。

所以,在添加動作之前,首先要添加假設(shè)條件,假設(shè)在此之前選項一處于選中狀態(tài),添加動作“設(shè)置面板狀態(tài)”,切換至選項二對應(yīng)頁面的狀態(tài),進(jìn)入和退出動畫效果為向左滑動,動畫時間均為200毫秒。

為選項2添加第二個情形用例,將之前的交互配置再復(fù)制一遍,修改假設(shè)條件為選項三處于選中狀態(tài),切換動態(tài)面板狀態(tài)的動畫效果設(shè)置為向右滑動,“選中”和“移動”這兩個動作的配置保持不變。(選項二的配置如下圖所示)

三、選項二交互配置

為選項三的鼠標(biāo)單擊事件添加動作“設(shè)置面板狀態(tài)”,將動態(tài)面板的狀態(tài)切換到選項三對應(yīng)的頁面。進(jìn)入動畫和退出動畫設(shè)置為向右滑動,動畫時間均設(shè)置為200毫秒。

四、選項三切換面板狀態(tài)

好了,到這里所有的交互配置都已經(jīng)完成了,最后我們再檢查一遍所有的交互設(shè)置,為了方便大家檢查,我們將三個選項的完整交互配置進(jìn)行了截圖,如下所示:

選項一交互

選項二交互

選項三交互

五、思考小結(jié)

在制作table切換頁面的動畫效果時,我們還可以設(shè)置成逐漸切換或者上下滑動切換,可以根據(jù)自己的需要進(jìn)行靈活設(shè)置。在文末給大家留一個思考題,如果標(biāo)簽選項是在頁面的下方或者頁面的左右兩側(cè),那么該如何制作標(biāo)簽頁的切換效果呢?

本文由 @PM_墨兮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!