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

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

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

吐司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元件庫

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

相關閱讀

如何用編程思維快速完成產品設計?

舒舟(阿里巴巴1688事業部):人們普遍認為,流程和工具不重要,重要的是想法和思路。話雖如此,不過我認為流程和工具也能反映一個設計師的設

如何用新浪微博做淘寶客,三步實現破零

第一步,注冊一個有趣味的微博名字,如減肥瘦身百科,護膚美妝百科,美食營養百科。這樣做的目的是便于搜索,目前也是女生關注最多的話題。

如何用數據來做渠道效果的分析(工具篇)

日前和幾個 BD 朋友聊天,聽到說“現在很多渠道投放的效果猶如霧里看花,點擊很多,激活很少,留存更是骨感……”想到自己對當下的統計后

如何用柵格系統布局頁面?

什么是柵格系統?主流網站如何使用柵格系統?如何用柵格系統布局頁面呢?如果很著急,需要馬上使用柵格,可用:http://grid.guide在線柵格工

網站制作教程:新手如何用PageAdmin建立一個網站

PageAdmin是國內很知名的建站系統,國內超過30%的網站都是由PageAdmin搭建而成,現在很多公司或單位都沒有自己的獨立網站,利于pageadm

分享到:

欄目導航

推薦閱讀

熱門閱讀

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