當前位置:首頁 > 運營推廣

APP吐司功能,如何用Axure畫出來?

時間:2019-06-19 05:44:16來源:運營推廣作者:seo實驗室小編閱讀:85次「手機版」
 

吐司app

吐司用來反饋信息或臨時提醒用戶,俗稱提示條。

典型應用場景

原型畫法(無交互)

吐司通常包含背景、文案、圖標,位于頁面中間。

1、先畫背景。從默認元件庫拖動“矩形3”到工作區合適位置,修改尺寸為195*195,修改圓角半徑為20,修改填充色為#000000,不透明為50。

2、再畫文案。從默認元件庫拖動“三級標題”到背景中合適位置,然后雙擊輸入文字“吐司文案”,修改字體顏色為#FFFFFF。

3、再畫圖標。從默認元件庫拖動“圖片”到背景中合適位置,修改尺寸為60*60。

4、生成原型HTML并在瀏覽器中查看效果。

原型畫法(有交互)

吐司的常見交互效果:

觸發一定條件,顯示吐司。

等待了幾秒后,隱藏吐司。

以“進入新頁面都會檢測網絡。如果網絡不好,就提示用戶。”來講解吐司的交互如何畫出來。

5、在之前步驟的基礎上,雙擊吐司文案,修改為“網絡不穩定”。

6、選擇以上元件,然后右鍵進行組合。

7、點擊該組合元件,設置為隱藏。這樣查看原型的時候默認看不到它。

8、點擊工作區空白區域,然后設置“頁面加載時”事件,添加動作“等待”,組織動作“1000ms”,代表剛進入頁面。

9、繼續添加動作“顯示”,組織動作“勾選該組合元件”。代表網絡不好告訴用戶,建議提前命名該組合元件方便找到它。

10、繼續添加動作“等待”,配置動作“等待時間2000毫秒”,代表該提示顯示一段時間。

11、最后添加動作“隱藏”,配置動作“勾選該組合元件“。

12、生成原型HTML并在瀏覽器中查看效果。

添加到Axure元件庫

不同場景下的吐司功能,標題不一樣,樣式相對固定。

相關閱讀

如何用產品思維找到奶茶店的增長點

朋友開奶茶店,作為一名窮苦的產品人,金錢上沒有辦法幫到朋友,就只能貢獻思維——用產品思維簡單分析下如何針對朋友奶茶店的現實狀況

實體聯系模型|如何用ER圖繪制業務實體(更新了一下配圖)

當你設計一個新的功能模塊,服務端童鞋一定會追問你具體有哪幾種實體以及之間的關系,如果你沒想清楚或者描述含糊,那么就有必要學習一

Airbnb的“暗黑成長史“:它如何用Growth Hack獲得早期

編者注:本文來自XDash,前盛大創新院產品經理,科技博客同步控作者,PingWest客座作者。該文章系作者正在編寫中的新書的章節段落試讀。

博物館奇妙夜,如何用互聯網思維改造傳統博物館

想靠一個漂亮的外觀來吸引參觀者,是遠遠不夠的。但國內的博物館似乎多喜歡以夸張彪悍的造型來彰顯卓爾不群,對于館類內容的發掘和增

Ubuntu下如何用命令行運行deb安裝包

如果ubuntu要安裝新軟件,已有deb安裝包(例如:iptux.deb),但是無法登錄到桌面環境。那該怎么安裝?答案是:使用dpkg命令。dpkg命令常用格式

分享到:

欄目導航

推薦閱讀

熱門閱讀

三肖必中特l三肖中特期期准免费