起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識APP吐司功能，如何用Axure畫出來？
吐司用來反饋信息或臨時提醒用戶，俗稱提示條。
典型應(yīng)用場景
原型畫法（無交互）
吐司通常包含背景、文案、圖標(biāo)，位于頁面中間。
1、先畫背景。從默認(rèn)元件庫拖動“矩形3”到工作區(qū)合適位置，修改尺寸為195*195，修改圓角半徑為20，修改填充色為#000000，不透明為50。
2、再畫文案。從默認(rèn)元件庫拖動“三級標(biāo)題”到背景中合適位置，然后雙擊輸入文字“吐司文案”，修改字體顏色為#FFFFFF。
3、再畫圖標(biāo)。從默認(rèn)元件庫拖動“圖片”到背景中合適位置，修改尺寸為60*60。
4、生成原型HTML并在瀏覽器中查看效果。
原型畫法（有交互）
吐司的常見交互效果：
- 觸發(fā)一定條件，顯示吐司。
- 等待了幾秒后，隱藏吐司。
以“進入新頁面都會檢測網(wǎng)絡(luò)。如果網(wǎng)絡(luò)不好，就提示用戶?！眮碇v解吐司的交互如何畫出來。
5、在之前步驟的基礎(chǔ)上，雙擊吐司文案，修改為“網(wǎng)絡(luò)不穩(wěn)定”。
6、選擇以上元件，然后右鍵進行組合。
7、點擊該組合元件，設(shè)置為隱藏。這樣查看原型的時候默認(rèn)看不到它。
8、點擊工作區(qū)空白區(qū)域，然后設(shè)置“頁面加載時”事件，添加動作“等待”，組織動作“1000ms”，代表剛進入頁面。
9、繼續(xù)添加動作“顯示”，組織動作“勾選該組合元件”。代表網(wǎng)絡(luò)不好告訴用戶，建議提前命名該組合元件方便找到它。
10、繼續(xù)添加動作“等待”，配置動作“等待時間2000毫秒”，代表該提示顯示一段時間。
11、最后添加動作“隱藏”，配置動作“勾選該組合元件“。
12、生成原型HTML并在瀏覽器中查看效果。
添加到Axure元件庫
不同場景下的吐司功能，標(biāo)題不一樣，樣式相對固定。
作者根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出3種常用的“吐司”，添加到Axure元件庫。
吐司（文字）
吐司（圖文）
吐司（圖標(biāo)）
注意事項
吐司可以只用文字表示，也可以文字加圖片。
吐司的樣式一般是圓角矩形，也可以是直角矩形。
吐司通常位于頁面中間，也可挪動位置到屏幕底部或者緊貼導(dǎo)航欄。
提供源文件下載學(xué)習(xí)https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g
相關(guān)閱讀
#專欄作家#
浪子，公眾號：浪子畫原型。擅長于APP原型設(shè)計和產(chǎn)品架構(gòu)。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels ，基于 CC0 協(xié)議
請問怎么設(shè)置吐司固定在頁面中央，就算滑動頁面吐司也不會移動
很簡單，右鍵轉(zhuǎn)換成動態(tài)面板，然后右鍵動態(tài)面板設(shè)置固定在瀏覽器中即可。
我是直接在說明中指出，點擊該按鈕出現(xiàn)toast提示“XX成功”
這樣技術(shù)也能看得懂，畫出原型自然更好。
+1 除非對TOAST有特殊要求，不然很少畫~浪費時間
是的，從快速交付的角度來說是這樣的。
不過PM應(yīng)該知道如何畫。
另外制作成元件庫之后，再畫是不浪費時間的。這個思維得有。
加上漸隱漸顯感覺會更好些
嗯，平常自己做高保真的時候會這樣做。
但是為了讓大家能夠快速學(xué)會畫吐司，這種不必要的細(xì)節(jié)略去了。