利用推理法解決 Axure9 摺疊菜單的空白問題

本文作者分享了利用推理法解決 Axure9 摺疊菜單的空白問題的方法，並對具體步驟進行了詳細的説明，希望對有同樣困惑的人有所幫助。

近日在用Axure9製作單選項摺疊菜單時，偶然發現當展開時就會產生空白（如下圖所示），而百度後發現很多人都遭遇了這個問題、但卻無人解答，所以在自己利用推理法摸索出該問題的解決方案後，隨手分享在這裏以便後來者不至於重蹈覆轍。

下圖即為所設計的具體交互（3個一級菜單的交互類似）:利用矩形和動態面板分別製作一級菜單和相應的二級菜單集，對於每個一級菜單設置“單選時切換”，同時分別對“選中”及“取消選中”時設置相應的推拉動作（我們這裏取100ms的動畫效果）。在設置完畢後粘貼兩次，按照從上到下的順序排列，這個摺疊菜單就做完了。

但結合上文預覽界面，我們可以觀察到：這裏當“視頻管理”為選中項時再選中“首頁管理”，此時的“用户管理”理論上應該位置不變（推動3行 拉動3行，所以最終不變），但事實是“用户管理”卻只推動了3行，所以我們有理由懷疑這裏發生了邏輯衝突、“推拉”這個動作只執行了一次。

與此同時，在與朋友討論時偶然發現：如果刪除了動畫效果、只保留最基礎的推拉功能（推拉時不設100ms的線性動畫效果），那在預覽界面中的展開就不會再導致空白的出現了。

所以我們可以猜測會不會是“動畫”這個元素的介入導致Axure邏輯上的判斷失誤、進一步縮小了問題的範圍。因此可以作出這個問題是基於“動畫的優先級判斷”而誕生的假設：

當1、2、3三個“一級菜單”同處一列自上到下排列時，即使是單選項，但2的（上下）推拉動作也只能控制“2到3之間這一段”的動畫效果、而無法跨過2來控制“1到2之間這一段”

——而動畫是同時發生，所以當“2到3之間這一段”的推動動畫效果結束時、“1到2之間這一段”的（實際未發生的拉動效果）也結束了，因此造成了“只進行了推動、未進行拉動，僅執行了一半動畫”產生的空白區域。

那麼順着這個思路往下延伸，如下圖所示，筆者嘗試着在每個“推動”操作前加入大於其時長的“等待”來人為製造一個先後邏輯，即插入了一個120ms的等待效果（大於100ms，並且注意這裏只針對“推動”動作進行添加，而且“等待”置於“推動”前方意味着先執行此項），相當於手動加了1個“等待”、讓“拉動”的動作執行完畢後再執行“推動”，結果不出所料，就可以正常執行了。

這是相應的預覽界面：

看來我們可以確定，這個“摺疊菜單的空白問題”的確是由於Axure9對於動畫的優先級判斷而產生的，而按照上文所述的添加大於“推動”時長的“等待”動作即可解決這個空白問題。

這就像個魔術一樣，初遇時百思不得其解，而當揭破謎底後大家會有一種恍然大悟、甚至不過如此的感覺（笑），但還是希望這篇隨筆能給同樣受此問題困擾的同行們提供一點小小的獲益；同時對於個人而言，在思考這個問題的過程中使用的推理方法也讓筆者感受到了久違的鬥智鬥勇的快樂，哈哈~~

本文由 @中二喵神 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。