全栈工程师?
嗯.....目前并不是!

具有一定交互功能的動態彈窗,如何設計?

我們要如何去設計,具有一定交互功能的動態彈窗呢?一起來文中看看~

相關介紹

頁面布局

首先,從左側元件庫內拉入一個【橢圓形】,大小尺寸為100*100,填充色為白色,並設定陰影。

其次,將相關圖標嵌入原件之內,上下居中對齊,與元件形成一個原型按鈕,當鼠標懸停、按下、選中,則圖標的顏色會改變。

狀態欄等其他頁面內元素可以忽略不計,具體頁面元素命名如下:

動態交互

(1)效果設計

實現按鈕懸停、按下、選中的動態效果:

選中【橢圓形】&【圖標】,設置其交互樣式,分別將圖標的第二狀態樣式導入鼠標懸停、鼠標按下、選中三種動態交互的圖標之內。

實現彈窗的隱藏、顯示、布局的效果:

選中【彈窗組合】文件轉變成【動態面板】,點擊鼠標右鍵,在彈出框內先將動態面板設定成隱藏。

(2)交互流程

實現按鈕與彈窗的交互操作效果:

步驟一:設置按鈕與彈窗之間的交互觸發

選中【橢圓形】&【圖標】,點擊添加用例中的鼠標點擊用例,配置相關的動作。

步驟二:設點擊按鈕,彈窗顯示,並上下左右居中

在【配置動作】區域內,勾選【彈窗組合】文件,【可見性】勾選成【顯示】,並勾選【置於頂層】,【更多選項】內選擇成【燈箱效果】,【背景色】為黑色(#000000),透明度為50%。

步驟三:設置彈窗內描述1的文本

在【配置動作】區域內,勾選【彈窗組合】文件內的【描述1】元件,設置文本為:【值】,編輯文本為(fx):是否將此條信息推送給產權部相關負責人員?

步驟四:點擊彈窗內取消按鈕,彈窗消失

在【配置動作】區域內,勾選【交互性彈窗】和【彈窗組合】,【可見性】勾選成【隱藏】即可。

步驟五:點擊彈窗內確定按鈕,彈窗內描述1的內容改變,並在一定的時間內自動消失

在【配置動作】區域內,勾選【彈窗組合】內的【描述1】元件,設置文本為:【值】,編輯文本為(fx):信息推送成功!

然後添加【其他】中的【等待】動作,等待時間(Wait time)為3000毫秒。

最後,在【配置動作】區域內,勾選【交互性彈窗】內的【彈窗組合】,【可見性】勾選成【隱藏】即可。

細節補充

(1)彈窗上下左右居中

雙擊【交互性彈窗】【動態面板】將其勾選為【自動調整為內容尺寸】,【固定瀏覽器】為上下左右居中。

(2)預覽效果

結語

請路過的朋友們多多支持哈,卧枕江山在這裡先謝謝了,以後會有更多優質的文章和產品在這個平台上進行發布,請盡請期待呦!

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《具有一定交互功能的動態彈窗,如何設計?》
文章链接:https://www.pmbear.com/archives/9495
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们