AXURE教程 | 如何實現(xiàn)彈出的提示自動消失

6 評論 27704 瀏覽 58 收藏 4 分鐘

非確認的提示使用AXURE如何實現(xiàn)？一起從文中了解一下吧~

如今非確認提示大多使用的提示方式為Toast，即無需交互可自動消失，這類提示不能承載太多內(nèi)容。例如：“支付成功”、“輸入信息有誤”、“有8條信息更新”等，屬于弱提示一類。

這種提示方式使用AXURE如何實現(xiàn)？了解一下其中一種實現(xiàn)方式。

  • 電腦系統(tǒng)： macOS v10.13.3
  • AXURE：v8.1.0.3366

Step1：設(shè)置基礎(chǔ)控件

  • 拖進按鈕控件，命名為“按鈕”，輸入文字“點擊彈出提示”；
  • 拖進動態(tài)面板控件，雙擊動態(tài)面板，命名為“提示框”，雙擊“state1”；
  • 拖出矩形進入“state1”，輸入文字“提示：3s后自動消失”，關(guān)閉“state1”tab，右擊“提示框”動態(tài)面板，選擇“set hidden”，將提示框設(shè)置為隱藏。

Step2：設(shè)置按鈕功能，點擊彈出提示框

  • 選中“按鈕”，在右側(cè)組建屬性中雙擊“OnClick”，彈出用例編輯器。
  • 選中左側(cè)“Widgets – Show”，選擇“提示框”動態(tài)面板（step1中已命名），Visibility默認為“show”，無需修改。

  • 點擊窗口上方“add condition”，選擇“value of variable”，設(shè)置為[?if value of OnLoadVariable equals? ]，結(jié)果如圖，點擊OK；

  • 返回編輯器頁面，點擊OK，結(jié)果如下：

step3：設(shè)置提示框

  • 繼續(xù)選中按鈕（非提示框?。?/strong>，在右側(cè)組建屬性中雙擊“OnClick”，彈出用例編輯器，此用例為“case2”；
  • 選擇左側(cè)“Miscellaneous -> Wait”，設(shè)置為3000ms；
  • 再選擇左側(cè)“Widgets -> Hide”，選擇右側(cè)“提示框”，點擊OK。

step4：最重要的一步

右擊右側(cè)的組件屬性的case2，選擇“Toggle IF/ELSE?IF”,設(shè)置為“if true”；

完成

保存預(yù)覽，即可看到效果?？梢愿鶕?jù)需求調(diào)整組建的形狀和位置，高保真原型就可以實現(xiàn)了！

 

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
January
1篇作品 27704總閱讀量
10-2014522 瀏覽
業(yè)財一體化之合同管理系統(tǒng)
04-249201 瀏覽
做SAAS產(chǎn)品，如何在標(biāo)準(zhǔn)化和定制化之間權(quán)衡？
09-063393 瀏覽
公眾號嘗到了小紅書的甜頭！
06-203692 瀏覽
職場方向選擇，該怎么做
07-254638 瀏覽
北上廣Citywalk火爆背后：旅游“特種兵”付費百元為遛彎，小而美生意難成持續(xù)業(yè)務(wù)
評論
評論請登錄

  1. 那個….新人還是建議用漢化版，漢化之后就會發(fā)現(xiàn)有很多更簡單的辦法，而且壓根就不需要用動態(tài)面板來實現(xiàn)這個功能

    來自廣東 回復(fù)

  2. 為什么要這么復(fù)雜??？直接在case1中加入1、wait 3000ms；2、hide 提示框。就好了呀。你這樣的交互，一是設(shè)置更復(fù)雜了，二是，用全局變量，一旦原型中其它地方對全局變量產(chǎn)生關(guān)聯(lián)，你的這個條件就不能生效了。

    來自上海 回復(fù)

    1. 贊一個，你的方法直觀了當(dāng)簡單！ ?? 棒棒的~

      來自廣東 回復(fù)

    2. 試了一下發(fā)現(xiàn)你這個好

      來自福建 回復(fù)

    3. 贊一個，你的方法直觀了當(dāng)簡單！ ?? 棒棒的~

      來自廣東 回復(fù)