axure商城

具有一定交互功能的動態彈窗設計

1.1相關介紹

全部產品所在的店鋪地址:https://www.axureshop.com/shop/3039

與此相關的完整版高保真實戰項目(UE&UI)原型設計(針對于全息中繼器組件)地址:https://www.axureshop.com/a/249709.html

與此相關的完整版高保真實戰項目(UE&UI)原型設計(PC端+手機端)地址(這個性價比很高,推薦路過的朋友購買):https://www.axureshop.com/a/234122.html#comment-287804

與此相關的完整版高保真實戰項目(UE&UI)原型設計(手機端)地址:https://www.axureshop.com/a/246479.html

與此相關的完整版高保真實戰項目(UE&UI)原型設計(PC端)地址:https://www.axureshop.com/a/298707.html

本項目完整版高保真實戰原型(UE&UI)設計(PC端)地址:https://www.axureshop.com/a/674824.html

1.2頁面布局

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

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

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

1.3動態交互

1.3.1效果設計

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

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

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

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

1.3.2交互流程

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

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

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

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

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

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

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

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

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

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

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

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

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

1.4細節補充

1.4.1彈窗上下左右居中

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

1.5預覽效果

1.6結語

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

給TA買糖
共{{data.count}}人
人已贊賞
Axure教程

精美橫軸智能滾動條設計

2019-4-8 21:25:44

Axure教程

動態由右向左橫軸自動滾動通知公告設計

2019-4-9 23:13:14

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo