入門級丨下拉選擇菜單項的實現(xiàn)
1月份從實習公司辭職,在秋招的尾巴找到就業(yè)公司,12月份停止了投稿,經(jīng)歷疫情后,不久前公司才安排了入職。時隔半年再次投稿,教大家如何實現(xiàn)下拉選擇菜單項的效果。
實現(xiàn)效果預覽
初始狀態(tài):
點擊菜單后:
選擇菜單后:
原型預覽地址:https://92wc31.axshare.com
所需元件:三個矩形、一個熱區(qū)、一個動態(tài)面板
總體元件:
動態(tài)面板內(nèi)的元件:
操作步驟
擺放元件
將元件擺放好,其中熱區(qū)放置在顯示領域的矩形和顯示符號的矩形外面。
設置熱區(qū)交互動作—鼠標單擊時
Case1(if菜單項不可見)
Case2(Else if菜單項可見)
設置動態(tài)面板內(nèi)元件的交互動作—鼠標單擊時
每個矩形的交互都是一樣的:
按F5預覽原型效果
思考
在預覽原型時,大家會發(fā)現(xiàn)該原型與其他下拉選擇菜單項的區(qū)別,只能通過點擊熱區(qū)才能將顯示的菜單項隱藏起來。正常情況下,當我們將菜單項顯示出來后,點擊頁面的空白處,菜單項也應該自動隱藏才對。那么需要怎么設置才能實現(xiàn)這種效果?
小記
大家如果有什么不懂的歡迎在評論區(qū)提問和討論~
#相關閱讀#
#專欄作家#
Nilz,人人都是產(chǎn)品經(jīng)理專欄作家。關注用戶交互體驗,產(chǎn)品功能設計。擅長原型設計。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協(xié)議
評論
又復制了第一個金融業(yè)的矩形 奇跡般的好了 不知道為什么 還有Icon設置文字=“口”這個 我把這條都刪掉了 也沒有感覺哪里有問題 一樣實現(xiàn) 想請教一下 Icon這條是啥意思
這個“口”其實是個符號,是一種叫FontAwesome的字體。在我的文章《Axure教程:使用動態(tài)面板實現(xiàn)收藏→已收藏》里最后的小記有提到。
為什么我做完以后只有點第一個金融業(yè) 可以 在顯示矩形里顯示金融業(yè) 其他的只顯示[[LVAR1]] 還有設置文字于Icon=“口 ”中建那個方框是啥意思 望說明下 本人小白一枚
顯示[[LVAR1]]可能是你函數(shù)的使用不對,可以看看我前面的文章《Axure教程:獲取驗證碼倒計時的實現(xiàn)》,對于函數(shù)的使用步驟會比較詳細一些。