當前位置:菜譜大全網 - 素菜食譜大全 - 如何在彈出APP中更好的使用彈出框?

如何在彈出APP中更好的使用彈出框?

設計師會使用彈出窗口,但他們可能並不特別熟悉彈出窗口背後的分類和應用。在寫這篇文章之前,我查了很多申請和資料,所以下面會有很多案例。相信看完之後,妳能對彈窗有更清晰的認識,在制定設計規範的時候也能有自己的想法。

現在有兩種彈出,壹種是模態彈出(重新提示),壹種是非模態彈出(燈光提示)。

常見的模式彈出窗口:對話框/警告、動作欄、彈出窗口/彈出窗口。

常見的非模態彈出窗口:Toast/Hud,Tips,Snackbar。

I .模態彈出窗口

對話框/警報?對話框

對話框是我們經常使用的彈出窗口。Android開發語言是Dialog和iOS開發語言Alert,壹般出現在頁面中間。對話框/警告框類型多,對用戶幹擾大。模態彈出窗口之所以是重新提示,是因為它要求用戶在繼續當前操作之前主動觸發選擇。

①?信息-選擇確定

特點:這種彈窗通常是壹些系統功能的授權,版本更新,消息通知,重要提示等。通常只有1 ~ 3個主按鈕,只需要用戶進行簡單的選擇。

②?信息輸入檢查

特點:這種彈出窗口通常輸入較少的信息或檢查信息,常用於備註輸入、規格選擇、分組選擇等。通常只有兩個按鈕:確定和取消。

③?信息通信顯示器

特點:這種彈窗通常是壹些廣告、紅包優惠、節日活動等操作性的彈窗。,主要是吸引用戶點擊參與活動。這種可操作的彈窗通常設計得很吸引人,形狀各異,會突出接收、查看等大按鈕,弱化關閉按鈕。

動作欄動作欄

Actionbar主要分為動作視圖和動作表。它們壹般都是從底部彈出,其操作和信息會比對話框類型的彈出窗口更復雜。當前頁面的這種下拉彈出窗口的好處是,可以讓用戶清晰地感知到當前的操作,比跳轉到新頁面更有安全感。順便還有壹個專門的抽屜彈窗。

①?行動?視圖操作視圖

特點:這種彈出窗口通常占用大量屏幕,以文字、圖標等形式顯示各種功能。也可以說這種彈窗就是壹個小頁面。壹般從底層彈出,不太強調所有權,多出現在購買、支付、分享等場景。

②?行動表?業務目錄

特點:操作列表比操作視圖更簡單。功能按鈕主要以文字顯示,重要敏感的功能操作壹般以主題色或紅色顯示,主要用於壹些日常控制、功能選擇、刪除、保存等場景。

③抽屜彈出窗口

特點:這種抽屜式彈出窗口壹般從左右兩側彈出,常用於壹些導航展開和目錄顯示。它可以承載更多的信息,基本上是用來放壹些不太常用的功能。

popover/彈出?浮動層

Popover是ios的開發語言,popup是Android的開發語言。浮層是指用戶點擊壹個功能後出來壹個臨時的氣泡來補充,通常伴隨著半透明的遮罩或投影基板。用戶需要點擊功能區進行操作,或者點擊空白的取消進入下壹步操作。它和上面的動作欄最大的區別是強調了歸屬,可以出現在頁面的任何地方,而動作欄壹般只出現在底部,不強調歸屬。

(1)指向浮動層

特點:這種浮層壹般會伴有小三角指向,強調歸屬。氣泡內部的功能通常以單個文本或者文本和圖標組合的形式顯示,主要應用於頂加號補充、復制、分享、轉發等場景。

②?導航屏蔽浮動層

特點:所謂導航過濾,自然離不開導航。此外,浮動層強調所有權,因此它通常與導航相連,壹般出現在頂部。

③?導向浮動層

特點:引導浮層的作用是引導用戶更好的使用產品和交互,降低用戶的學習成本。壹般在用戶第壹次進入app時出現,壹般只有壹次。點擊空白位置或者我知道浮動層會消失。

第二,非模態彈出窗口

吐司/Hud?提示

Hud是ios的控制名詞,Toast是Android的控制名詞。兩者都屬於壹種輕提示,給用戶及時的反饋,讓用戶知道自己當前的狀態。

Hud壹般只出現在屏幕中央,以毛玻璃的形式表現,內容顯示豐富。

Toast可以出現在屏幕的任何地方,通常用壹個黑色半透明的小方框來表示,內容壹般是純文本提示或者文本和圖標的組合。

①狀態提示

特點:狀態提示的Toast,壹般反饋用戶當前的操作狀態,只需1到2秒就會自動消失,場景壹般集中在成功、密碼錯誤、音量提示、靜音、清空緩存等。

②?按鍵提示

特點:與狀態提示不同,按鈕吐司提示通常是自動出現或者只有點擊觸發後才會出現,用於補充功能點的描述,讓用戶對功能有更深入的理解。

小吃店

Snackbar是Android中的壹個控件。它通常會在超時或在屏幕上滑動後自動關閉。沒有吐司輕,設置會比吐司長,可以點擊按鈕互動。

小貼士小貼士

Tips和Snackbar的主要區別在於,Tips是嵌入在頁面中的,而Snackbar是浮動在頁面上的。提示壹般讓用戶觸發關閉按鈕或點擊下方頁面消失,壹般用於用戶需要感知的通知信息,或用於投放廣告。

規範性總結

目前彈出的樣式很多,妳能想到的,想不到的,基本都可以通過技術實現。但也帶來了壹個問題,那就是“不規範”。對於上面提到的彈窗類型,妳只需要選擇幾個符合妳產品要求的類型就可以了。最好不要在壹個產品中使用多個同類型的彈窗,否則後期很難標準化和模塊化。當然,運營廣告彈窗可以另當別論。

差不多完成了...如果覺得有幫助,記得閱讀轉發哦~