本文作者分享了利用推理法解決 Axure9 折疊菜單的空白問(wèn)題的方法，并對(duì)具體步驟進(jìn)行了詳細(xì)的說(shuō)明，希望對(duì)有同樣困惑的人有所幫助。

近日在用Axure9制作單選項(xiàng)折疊菜單時(shí)，偶然發(fā)現(xiàn)當(dāng)展開(kāi)時(shí)就會(huì)產(chǎn)生空白（如下圖所示），而百度后發(fā)現(xiàn)很多人都遭遇了這個(gè)問(wèn)題、但卻無(wú)人解答，所以在自己利用推理法摸索出該問(wèn)題的解決方案后，隨手分享在這里以便后來(lái)者不至于重蹈覆轍。

下圖即為所設(shè)計(jì)的具體交互（3個(gè)一級(jí)菜單的交互類(lèi)似）:利用矩形和動(dòng)態(tài)面板分別制作一級(jí)菜單和相應(yīng)的二級(jí)菜單集，對(duì)于每個(gè)一級(jí)菜單設(shè)置“單選時(shí)切換”，同時(shí)分別對(duì)“選中”及“取消選中”時(shí)設(shè)置相應(yīng)的推拉動(dòng)作（我們這里取100ms的動(dòng)畫(huà)效果）。在設(shè)置完畢后粘貼兩次，按照從上到下的順序排列，這個(gè)折疊菜單就做完了。

但結(jié)合上文預(yù)覽界面，我們可以觀察到：這里當(dāng)“視頻管理”為選中項(xiàng)時(shí)再選中“首頁(yè)管理”，此時(shí)的“用戶(hù)管理”理論上應(yīng)該位置不變（推動(dòng)3行+拉動(dòng)3行，所以最終不變），但事實(shí)是“用戶(hù)管理”卻只推動(dòng)了3行，所以我們有理由懷疑這里發(fā)生了邏輯沖突、“推拉”這個(gè)動(dòng)作只執(zhí)行了一次。

與此同時(shí)，在與朋友討論時(shí)偶然發(fā)現(xiàn)：如果刪除了動(dòng)畫(huà)效果、只保留最基礎(chǔ)的推拉功能（推拉時(shí)不設(shè)100ms的線性動(dòng)畫(huà)效果），那在預(yù)覽界面中的展開(kāi)就不會(huì)再導(dǎo)致空白的出現(xiàn)了。

所以我們可以猜測(cè)會(huì)不會(huì)是“動(dòng)畫(huà)”這個(gè)元素的介入導(dǎo)致Axure邏輯上的判斷失誤、進(jìn)一步縮小了問(wèn)題的范圍。因此可以作出這個(gè)問(wèn)題是基于“動(dòng)畫(huà)的優(yōu)先級(jí)判斷”而誕生的假設(shè)：

當(dāng)1、2、3三個(gè)“一級(jí)菜單”同處一列自上到下排列時(shí)，即使是單選項(xiàng)，但2的（上下）推拉動(dòng)作也只能控制“2到3之間這一段”的動(dòng)畫(huà)效果、而無(wú)法跨過(guò)2來(lái)控制“1到2之間這一段”

——而動(dòng)畫(huà)是同時(shí)發(fā)生，所以當(dāng)“2到3之間這一段”的推動(dòng)動(dòng)畫(huà)效果結(jié)束時(shí)、“1到2之間這一段”的（實(shí)際未發(fā)生的拉動(dòng)效果）也結(jié)束了，因此造成了“只進(jìn)行了推動(dòng)、未進(jìn)行拉動(dòng)，僅執(zhí)行了一半動(dòng)畫(huà)”產(chǎn)生的空白區(qū)域。

那么順著這個(gè)思路往下延伸，如下圖所示，筆者嘗試著在每個(gè)“推動(dòng)”操作前加入大于其時(shí)長(zhǎng)的“等待”來(lái)人為制造一個(gè)先后邏輯，即插入了一個(gè)120ms的等待效果（大于100ms，并且注意這里只針對(duì)“推動(dòng)”動(dòng)作進(jìn)行添加，而且“等待”置于“推動(dòng)”前方意味著先執(zhí)行此項(xiàng)），相當(dāng)于手動(dòng)加了1個(gè)“等待”、讓“拉動(dòng)”的動(dòng)作執(zhí)行完畢后再執(zhí)行“推動(dòng)”，結(jié)果不出所料，就可以正常執(zhí)行了。

這是相應(yīng)的預(yù)覽界面：

看來(lái)我們可以確定，這個(gè)“折疊菜單的空白問(wèn)題”的確是由于Axure9對(duì)于動(dòng)畫(huà)的優(yōu)先級(jí)判斷而產(chǎn)生的，而按照上文所述的添加大于“推動(dòng)”時(shí)長(zhǎng)的“等待”動(dòng)作即可解決這個(gè)空白問(wèn)題。

這就像個(gè)魔術(shù)一樣，初遇時(shí)百思不得其解，而當(dāng)揭破謎底后大家會(huì)有一種恍然大悟、甚至不過(guò)如此的感覺(jué)（笑），但還是希望這篇隨筆能給同樣受此問(wèn)題困擾的同行們提供一點(diǎn)小小的獲益；同時(shí)對(duì)于個(gè)人而言，在思考這個(gè)問(wèn)題的過(guò)程中使用的推理方法也讓筆者感受到了久違的斗智斗勇的快樂(lè)，哈哈~~

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。