火星網校
躺在家里睡大覺，不如花5分鐘學個交互技能
發(fā)布時間：2024-01-18 10:47:03 瀏覽量：185次
標簽頁的定義與應用
標簽頁是一種選項卡切換組件，分隔內容上有關聯但屬于不同類別的數據集合，提供平級的區(qū)域將大塊內容進行收納和展現，保持界面整潔。各選項卡下面的內容從物理上都從屬于一個頁面的大容器當中，他們都對應同一個頁面訪問地址。
table標簽頁的應用場景非常廣泛，無論是將復雜的信息進行分類處理，還是不同類別的功能進行分類設計，都可以使用標簽頁組件。如果我們細心觀察，會發(fā)現很多互聯網產品都使用了標簽頁設計，無論是傳統(tǒng)的PC網頁還是移動端的界面設計都在使用標簽設計。頭條號的PC后臺和知乎App的首頁都使用標簽頁的設計方式。
觀察交互效果
演示地址：AxureShop原型演示
點擊上方鏈接，打開頁面后從左側目錄找到“標簽頁Tabs”頁面
在制作table標簽切換效果之前，我們先來觀察標簽頁切換過程中的交互效果，點擊選項卡后，有以下3個交互效果：
- 選項卡被選中，選中的選項卡呈現出不同的視覺效果，一般為選項卡顏色發(fā)生改變，也有一些大小發(fā)生變化的
- 選項卡下方的直線水平移動到選中項的下方
- 切換頁面內容，切換頁面時會有一些動畫效果
交互分析與制作
線框圖的繪制和準備工作假設我們已經都做好了（線框圖效果如下圖所示），這里就不再贅述，下面重點講解利用Axure制作交互的思路與方法。剛才，我們已經分析了切換過程中的的交互效果，下面就需要思考如何分別實現這3個效果。
效果1：我們可以將這一組選項設置為同一個組，并且為這一組的幾個選項設置相同的選中樣式，這里我們設置選中后文字的顏色都變?yōu)樗{色。為第一個選項添加鼠標單擊事件，添加“設置選中”動作，將當前的選項進行選中。將第一個選項的鼠標單擊事件復制到其他兩個選項。
選中樣式
“選中”動作配置
效果2：為選項一的鼠標單擊事件添加動作“移動”，移動直線到達選項一左側的某一個位置，這里我們設置距離選項一左側23像素的位置，垂直方向上保持不變。水平方向上的位置可靈活調整，只要保持這條直線和選項內容保持水平居中對齊即可。如果直線的寬度與選項的寬度相等，那么這里的水平位置可以設置成選項的橫坐標。以我們現在做的案例說明，動作配置上選擇到達（[[This.x-23]]，[[Target.y]]），動畫效果選擇線性，動畫時間設置為200毫秒。將這個移動的動作配置，復制到另外兩個選項當中。
“移動”動作配置
效果3：利用動態(tài)面板的多狀態(tài)特征，來分別放置選項卡對應的幾個頁面。
為選項一的鼠標單擊事件添加動作“設置面板狀態(tài)”，將動態(tài)面板的狀態(tài)切換到選項一對應的頁面。進入動畫和退出動畫設置為向右滑動，動畫時間均設置為200毫秒。注意這里的動畫時間和效果2當中的直線移動的時間保持一致，否則會造成不同步，視覺上感覺突兀。
選項一切換面板
為選項二的鼠標單擊事件添加動作“設置面板狀態(tài)”，添加動作之前我們需要分析下，用戶操作的動作軌跡。用戶既可以從選項一切換到選項二，也可以從選項三切換到選項二。這兩種情況下，切換頁面時的動畫效果是不同的，從不同的方向滑動切換。所以，在添加動作之前，首先要添加假設條件，假設在此之前選項一處于選中狀態(tài)，添加動作“設置面板狀態(tài)”，切換至選項二對應頁面的狀態(tài)，進入和退出動畫效果為向左滑動，動畫時間均為200毫秒。為選項2添加第二個情形用例，將之前的交互配置再復制一遍，修改假設條件為選項三處于選中狀態(tài)，切換動態(tài)面板狀態(tài)的動畫效果設置為向右滑動，“選中”和“移動”這兩個動作的配置保持不變。（選項二的配置如下圖所示）
選項二切換面板
為選項三的鼠標單擊事件添加動作“設置面板狀態(tài)”，將動態(tài)面板的狀態(tài)切換到選項三對應的頁面。進入動畫和退出動畫設置為向右滑動，動畫時間均設置為200毫秒。
選項三切換面板
好了，到這里所有的交互配置都已經完成了，最后我們再檢查一遍所有的交互設置，為了方便大家檢查，我們將三個選項的完整交互配置進行了截圖，如下所示：
選項一交互配置
選項二交互配置
選項三交互配置
大家可以預覽原型，驗證我們的交互制作效果。
思考小結
在制作table切換頁面的動畫效果時，我們還可以設置成逐漸切換或者上下滑動切換，可以根據自己的需要進行靈活設置。在文末給大家留一個思考題，如果標簽選項是在頁面的下方或者頁面的左右兩側，那么該如何制作標簽頁的切換效果呢？利用Axure制作常見的交互其實很簡單，只要大家平時學好Axure原型設計的基礎知識，平時多思考多練習，或者借助老司機的點撥與提醒，相信每個人都有成為交互高手的潛力，充分挖掘Axure在交互原型領域的潛力。
關注并轉發(fā)后，可私信關鍵字“標簽切換”可獲取本節(jié)課案例的源文件。
【Axure原型設計】專注分享Axure基礎教程、交互案例以及經驗技巧，并不定期贈送各種資源福利，包含：系統(tǒng)組件庫、頁面模板、實戰(zhàn)案例等。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
