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

3 評論 4958 瀏覽 18 收藏 6 分鐘

本文作者分享了利用推理法解決 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協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 一直被這個問題困擾著,不過我的菜單默認是展開的,試了博主這個方法,還是有問題。不知道博主是否還有其它的辦法?謝謝

    來自廣東 回復
  2. 來給喵神捧個場~

    來自廣東 回復
    1. 哈哈哈,謝謝鼓勵~

      來自四川 回復