【Axure 教程】中繼器入門教程-數(shù)據(jù)排序

Sam
2 評論 10443 瀏覽 15 收藏 4 分鐘

編輯導(dǎo)讀:當(dāng)工作中需要進(jìn)行數(shù)據(jù)排序操作時,我們可以如何使用Axure來進(jìn)行相關(guān)操作呢?本篇文章里,作者利用中繼器為我們展示了數(shù)據(jù)排序操作,讓我們一起來看一下。

原型展示:

https://5ejk3o.axshare.com

所需原件:

  • 中繼器
  • 小三角

本文主要講解中繼器的基本用法,以便大家更容易去理解和學(xué)習(xí)中繼器的高級用法,入門教程會分為 6 個小節(jié),本節(jié)主要講解如何實現(xiàn)中繼器的數(shù)據(jù)排序

一、列表制作

這里我們直接引用課程【Axure 教程】中繼器入門教程-列表制作

中制作的列表,快速修改表頭和中繼器數(shù)據(jù)后,得到一個列表,如上圖;

二、狀態(tài)設(shè)置

拖入兩個小三角,拼成一個排序 icon,組合后創(chuàng)建動態(tài)面板,并設(shè)置三個狀態(tài):默認(rèn)、升序、降序,如上圖所示;

三、交互設(shè)置

選中表頭的【年齡】文本標(biāo)簽,創(chuàng)建交互,在點擊時,設(shè)置排序 icon 的面板狀態(tài),并添加中繼器的排序,如上圖所示;

注意在不同的狀態(tài)下,對應(yīng)的排序規(guī)則,并在【降序】切換到【默認(rèn)】狀態(tài)時,移除所有排序;

同理,生日的排序,大家可以自己嘗試一下 : )

四、細(xì)節(jié)優(yōu)化

我們希望在年齡和生日兩個排序切換時,重置對方的排序狀態(tài),因此為每個交互添加將對方面板狀態(tài)置為【默認(rèn)】狀態(tài)的交互動作,如上圖所示;

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 點贊

    回復(fù)
    1. 謝謝!

      回復(fù)