Axure教程:中繼器如何切換標(biāo)記狀態(tài)?

17 評(píng)論 34611 瀏覽 43 收藏 8 分鐘

中繼器如何切換標(biāo)記狀態(tài)呢?一定有很多PM和我一樣為此苦惱,一起來(lái)看看作者的解答。

寫(xiě)在前面

在之前的文章《Axure教程:如何使用Axure中繼器元件?》中,@wu賴、在評(píng)論里指出:

有瑕疵,選中一次后背景顏色改變?cè)冱c(diǎn)擊一次背景顏色變成原始狀態(tài),但這行其實(shí)狀態(tài)還是標(biāo)記狀態(tài),會(huì)一起被刪除。

問(wèn)題產(chǎn)生的原因是什么呢?答案是當(dāng)我們點(diǎn)擊中繼器某一行的時(shí)候,該行的選中狀態(tài)會(huì)“toggle”而標(biāo)記狀態(tài)不會(huì)“toggle”也不會(huì)變?yōu)椤癴alse”,也就是說(shuō),中繼器只是切換了選中狀態(tài)而沒(méi)有切換標(biāo)記狀態(tài)。

因此當(dāng)點(diǎn)擊某一行兩次時(shí),該行選中狀態(tài)為“false”→“true”→“false”,而標(biāo)記狀態(tài)為“false”→“true”→“true”。于是我們看到的視覺(jué)效果就是白→藍(lán)→白,而該行卻依然處于標(biāo)記狀態(tài),刪除處于標(biāo)記狀態(tài)的行時(shí)該行依然會(huì)被刪除。

這個(gè)問(wèn)題看似簡(jiǎn)單,其實(shí)不然。在網(wǎng)上也無(wú)法搜到正確的解決方案。有的只是如何“標(biāo)記行”和“取消標(biāo)記”,并沒(méi)有“切換標(biāo)記狀態(tài)”的方法。

那么,中繼器到底該如何切換標(biāo)記狀態(tài)呢?

上下求索

想法一

一下子想到的便是,既然點(diǎn)擊時(shí)行的選中狀態(tài)可以“toggle”,那標(biāo)記狀態(tài)也跟著“toggle”不就好了?不幸的是,Axure并不支持對(duì)行標(biāo)記狀態(tài)的“toggle”。So bad.

點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開(kāi)用例編輯<鼠標(biāo)單擊時(shí)>面板,如下圖所示,可以看到?jīng)]有“切換標(biāo)記狀態(tài)”動(dòng)作,只有“標(biāo)記行”和“取消標(biāo)記”動(dòng)作。

想法二

問(wèn)題總會(huì)有辦法解決的!既然選中狀態(tài)可以“toggle”,標(biāo)記狀態(tài)不可以“toggle”,那我們可不可以刪除處于選中狀態(tài)的行呢?答案是Axure也不支持刪除處于選中狀態(tài)的行,只支持刪除處于標(biāo)記狀態(tài)的行。真令人難過(guò)。

切換到主界面,點(diǎn)擊選擇用于刪除的按鈕,在右側(cè)“檢視:矩形——交互”中雙擊“Case 1”打開(kāi)用例編輯<鼠標(biāo)單擊時(shí)>面板,如下圖所示,可以看到?jīng)]有“已選中”選項(xiàng)。

想法三

咦,除了已標(biāo)記,這不還有個(gè)條件嘛!說(shuō)不定那里有我們想要找的答案!點(diǎn)進(jìn)去一看,還是可用的條件,絕望。。。

選擇“條件”選項(xiàng),點(diǎn)擊右下角“fx”,試圖設(shè)置刪除行的條件為[[“isPitchOn”==true]],然而如下圖所示,并沒(méi)有這樣的變量或函數(shù)。

條件判斷

山窮水盡疑無(wú)路,柳暗花明又一村。

點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開(kāi)用例編輯<鼠標(biāo)單擊時(shí)>面板,我們看到有個(gè)“添加條件”的按鈕。

點(diǎn)開(kāi)看看?可以看到,我們可以根據(jù)行的選中狀態(tài)來(lái)決定對(duì)應(yīng)用例(也就是這里的Case1:切換選中狀態(tài)和標(biāo)記行)的執(zhí)行與否。

于是腦海里產(chǎn)生了這樣的想法:

if (選中狀態(tài) == false) {選中狀態(tài) == true;標(biāo)記狀態(tài) == true;}

if (選中狀態(tài) == true) {選中狀態(tài) == false;標(biāo)記狀態(tài) == false;}

嗯!一定就是這樣了!試試看!

解決方案

點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開(kāi)用例編輯<鼠標(biāo)單擊時(shí)>面板,點(diǎn)擊“添加條件”按鈕,打開(kāi)<條件設(shè)立>面板,將判斷變量設(shè)為“選中狀態(tài)”,判斷值設(shè)為“false”,如圖所示。

按“確定”按鈕保存,關(guān)閉條件設(shè)立面板,關(guān)閉用例編輯<鼠標(biāo)單擊時(shí)>面板,回到中繼器模式編輯操作區(qū)。在右側(cè)“檢視:組合——交互”中右鍵單擊“鼠標(biāo)單擊時(shí)”,選擇“添加用例”。

會(huì)自動(dòng)彈出用例編輯<鼠標(biāo)單擊時(shí)>面板,點(diǎn)擊正上方“添加條件”按鈕,設(shè)置判斷變量為“選中狀態(tài)”,判斷值為“true”。

按“確定”按鈕關(guān)閉條件設(shè)立面板,回到用例編輯<鼠標(biāo)單擊時(shí)>面板,在左側(cè)“添加動(dòng)作”欄點(diǎn)擊“元件——取消選中”添加取消選中動(dòng)作。

再在左側(cè)“添加動(dòng)作”欄點(diǎn)擊“中繼器——數(shù)據(jù)集——取消標(biāo)記”添加取消標(biāo)記動(dòng)作。

點(diǎn)擊“確定”按鈕關(guān)閉用例編輯<鼠標(biāo)單擊時(shí)>面板,回到中繼器模式編輯操作區(qū),可以在右側(cè)“檢視:組合——交互”中看到此時(shí)鼠標(biāo)單擊時(shí)會(huì)執(zhí)行的動(dòng)作。

大功告成!

點(diǎn)擊上方“預(yù)覽”按鈕查看最新效果。

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 前面分享了自己的思考經(jīng)過(guò)還不錯(cuò),全部看得到。
    看完抓住的關(guān)鍵點(diǎn)是“通過(guò)再次點(diǎn)擊來(lái)實(shí)現(xiàn)標(biāo)記的取消”,這適用于多選的情況,如果是單選呢?

    來(lái)自福建 回復(fù)
  2. 樓主的語(yǔ)言和文字的組織能力比較差,前面的廢話太多了,而且沒(méi)有什么關(guān)聯(lián)系,建議大家只看最后的交互動(dòng)作及條件設(shè)置就可以了,結(jié)果是可以實(shí)現(xiàn)的

    來(lái)自中國(guó) 回復(fù)
  3. 請(qǐng)教一下 將中繼器設(shè)置鼠標(biāo)單擊某一行時(shí)改行文字顏色改變(矩形設(shè)置選中時(shí)字體顏色改變,鼠標(biāo)單擊時(shí)設(shè)置該元件選中) 那我單擊另一行如何將選中狀態(tài)切換到另一行

    來(lái)自廣東 回復(fù)
  4. 哪有這么麻煩,就一招搞定。
    先取消標(biāo)記“全部”——再標(biāo)記“this”就可以了。

    來(lái)自廣東 回復(fù)
    1. 你才是王道,簡(jiǎn)單粗暴。Thx~

      來(lái)自福建 回復(fù)
    2. 這樣的話,選擇第二個(gè)的時(shí)候,就會(huì)把第一個(gè)取消標(biāo)記。導(dǎo)致想一次性刪多個(gè)的話,只有最后點(diǎn)擊的被刪掉。

      來(lái)自遼寧 回復(fù)
    3. 有用

      來(lái)自北京 回復(fù)
  5. 不會(huì)函數(shù),不會(huì)中繼器的小白看著好吃力,所以中繼器在一般原型中真的用處很多嗎,我至今還沒(méi)用過(guò) ?? ??

    來(lái)自廣東 回復(fù)
  6. 不行啊,刪除中繼器當(dāng)中的行要雙擊那個(gè)行,你所給的預(yù)覽頁(yè)面也是打不開(kāi),哎 ??

    來(lái)自江蘇 回復(fù)
  7. 你這個(gè)我還是看不懂(昨天才開(kāi)始學(xué))。但看了以后還可以這樣: case1:設(shè)置選中狀態(tài)為toggle ;標(biāo)記this在(中繼器)。
    case2:(條件設(shè)置:if選中狀態(tài)=fasle)取消標(biāo)記行this在(中繼器)
    應(yīng)該就可以了

    來(lái)自廣東 回復(fù)
  8. 你這次改的刪除這塊,我剛才試了一下,也許可以簡(jiǎn)單點(diǎn)。
    你試下:在刪除行時(shí)選擇“條件”(不選“已標(biāo)記),點(diǎn)擊fx,選擇”選中狀態(tài)“,動(dòng)物。

    來(lái)自山東 回復(fù)
    1. 簡(jiǎn)單好用哎

      來(lái)自四川 回復(fù)
    2. 厲害厲害!

      來(lái)自江蘇 回復(fù)
  9. 許久不走邏輯,繞了10分鐘才繞明白,受教了 :mrgreen:

    來(lái)自廣東 回復(fù)
    1. 這教程要我看我也煩,需要靜下心來(lái)慢慢看才行 ??

      來(lái)自天津 回復(fù)
  10. ( )氣十足~自個(gè)兒填2333

    來(lái)自廣東 回復(fù)
    1. 快叫( )( ) ??

      來(lái)自天津 回復(fù)