1月份從實(shí)習(xí)公司辭職，在秋招的尾巴找到就業(yè)公司，12月份停止了投稿，經(jīng)歷疫情后，不久前公司才安排了入職。時(shí)隔半年再次投稿，教大家如何實(shí)現(xiàn)下拉選擇菜單項(xiàng)的效果。

實(shí)現(xiàn)效果預(yù)覽

初始狀態(tài)：

點(diǎn)擊菜單后：

選擇菜單后：

原型預(yù)覽地址：https://92wc31.axshare.com

所需元件：三個(gè)矩形、一個(gè)熱區(qū)、一個(gè)動(dòng)態(tài)面板

總體元件：

動(dòng)態(tài)面板內(nèi)的元件：

操作步驟

擺放元件

將元件擺放好，其中熱區(qū)放置在顯示領(lǐng)域的矩形和顯示符號(hào)的矩形外面。

設(shè)置熱區(qū)交互動(dòng)作—鼠標(biāo)單擊時(shí)

Case1（if菜單項(xiàng)不可見）

Case2（Else if菜單項(xiàng)可見）

設(shè)置動(dòng)態(tài)面板內(nèi)元件的交互動(dòng)作—鼠標(biāo)單擊時(shí)

每個(gè)矩形的交互都是一樣的：

按F5預(yù)覽原型效果

思考

在預(yù)覽原型時(shí)，大家會(huì)發(fā)現(xiàn)該原型與其他下拉選擇菜單項(xiàng)的區(qū)別，只能通過點(diǎn)擊熱區(qū)才能將顯示的菜單項(xiàng)隱藏起來。正常情況下，當(dāng)我們將菜單項(xiàng)顯示出來后，點(diǎn)擊頁面的空白處，菜單項(xiàng)也應(yīng)該自動(dòng)隱藏才對。那么需要怎么設(shè)置才能實(shí)現(xiàn)這種效果？

小記

大家如果有什么不懂的歡迎在評論區(qū)提問和討論~

#相關(guān)閱讀#

Axure教程：鼠標(biāo)移入時(shí)切換抽屜風(fēng)格菜單

Axure教程：鼠標(biāo)移入時(shí)切換菜單

Axure教程：實(shí)現(xiàn)菜單下拉效果

Axure教程：抽屜風(fēng)格的菜單實(shí)現(xiàn)

#專欄作家#

Nilz，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注用戶交互體驗(yàn)，產(chǎn)品功能設(shè)計(jì)。擅長原型設(shè)計(jì)。

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

題圖來自 Unsplash ，基于 CC0 協(xié)議