亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

躺在家里睡大覺，不如花5分鐘學(xué)個(gè)交互技能

發(fā)布時(shí)間：2024-01-18 10:47:03 瀏覽量：185次

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

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

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



觀察交互效果

演示地址：AxureShop原型演示

點(diǎn)擊上方鏈接，打開頁面后從左側(cè)目錄找到“標(biāo)簽頁Tabs”頁面


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

  1. 選項(xiàng)卡被選中，選中的選項(xiàng)卡呈現(xiàn)出不同的視覺效果，一般為選項(xiàng)卡顏色發(fā)生改變，也有一些大小發(fā)生變化的
  2. 選項(xiàng)卡下方的直線水平移動(dòng)到選中項(xiàng)的下方
  3. 切換頁面內(nèi)容，切換頁面時(shí)會(huì)有一些動(dòng)畫效果

交互分析與制作

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


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


選中樣式


“選中”動(dòng)作配置

效果2：為選項(xiàng)一的鼠標(biāo)單擊事件添加動(dòng)作“移動(dòng)”，移動(dòng)直線到達(dá)選項(xiàng)一左側(cè)的某一個(gè)位置，這里我們設(shè)置距離選項(xiàng)一左側(cè)23像素的位置，垂直方向上保持不變。水平方向上的位置可靈活調(diào)整，只要保持這條直線和選項(xiàng)內(nèi)容保持水平居中對齊即可。如果直線的寬度與選項(xiàng)的寬度相等，那么這里的水平位置可以設(shè)置成選項(xiàng)的橫坐標(biāo)。以我們現(xiàn)在做的案例說明，動(dòng)作配置上選擇到達(dá)（[[This.x-23]]，[[Target.y]]），動(dòng)畫效果選擇線性，動(dòng)畫時(shí)間設(shè)置為200毫秒。將這個(gè)移動(dòng)的動(dòng)作配置，復(fù)制到另外兩個(gè)選項(xiàng)當(dāng)中。


“移動(dòng)”動(dòng)作配置

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

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


選項(xiàng)一切換面板

為選項(xiàng)二的鼠標(biāo)單擊事件添加動(dòng)作“設(shè)置面板狀態(tài)”，添加動(dòng)作之前我們需要分析下，用戶操作的動(dòng)作軌跡。用戶既可以從選項(xiàng)一切換到選項(xiàng)二，也可以從選項(xiàng)三切換到選項(xiàng)二。這兩種情況下，切換頁面時(shí)的動(dòng)畫效果是不同的，從不同的方向滑動(dòng)切換。所以，在添加動(dòng)作之前，首先要添加假設(shè)條件，假設(shè)在此之前選項(xiàng)一處于選中狀態(tài)，添加動(dòng)作“設(shè)置面板狀態(tài)”，切換至選項(xiàng)二對應(yīng)頁面的狀態(tài)，進(jìn)入和退出動(dòng)畫效果為向左滑動(dòng)，動(dòng)畫時(shí)間均為200毫秒。為選項(xiàng)2添加第二個(gè)情形用例，將之前的交互配置再復(fù)制一遍，修改假設(shè)條件為選項(xiàng)三處于選中狀態(tài)，切換動(dòng)態(tài)面板狀態(tài)的動(dòng)畫效果設(shè)置為向右滑動(dòng)，“選中”和“移動(dòng)”這兩個(gè)動(dòng)作的配置保持不變。（選項(xiàng)二的配置如下圖所示）


選項(xiàng)二切換面板

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


選項(xiàng)三切換面板

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


選項(xiàng)一交互配置


選項(xiàng)二交互配置


選項(xiàng)三交互配置

大家可以預(yù)覽原型，驗(yàn)證我們的交互制作效果。

思考小結(jié)

在制作table切換頁面的動(dòng)畫效果時(shí)，我們還可以設(shè)置成逐漸切換或者上下滑動(dòng)切換，可以根據(jù)自己的需要進(jìn)行靈活設(shè)置。在文末給大家留一個(gè)思考題，如果標(biāo)簽選項(xiàng)是在頁面的下方或者頁面的左右兩側(cè)，那么該如何制作標(biāo)簽頁的切換效果呢？利用Axure制作常見的交互其實(shí)很簡單，只要大家平時(shí)學(xué)好Axure原型設(shè)計(jì)的基礎(chǔ)知識(shí)，平時(shí)多思考多練習(xí)，或者借助老司機(jī)的點(diǎn)撥與提醒，相信每個(gè)人都有成為交互高手的潛力，充分挖掘Axure在交互原型領(lǐng)域的潛力。

關(guān)注并轉(zhuǎn)發(fā)后，可私信關(guān)鍵字“標(biāo)簽切換”可獲取本節(jié)課案例的源文件。

【Axure原型設(shè)計(jì)】專注分享Axure基礎(chǔ)教程、交互案例以及經(jīng)驗(yàn)技巧，并不定期贈(zèng)送各種資源福利，包含：系統(tǒng)組件庫、頁面模板、實(shí)戰(zhàn)案例等。

熱門課程推薦

熱門資訊

請綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定