• 上傳作品
    • 上傳經驗
    • 上傳即刻

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題後@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

收集成長值
輸入邀請碼
先看看別人的即刻>

如何更好的使用彈窗?

原創文章 分類: 經驗/觀點 版權:
12784 744 499 30
2019-07-29
143.4
首頁推薦


彈窗在設計中運用的非常廣泛,基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊,所以就想總結分享一下。

設計師都會使用彈窗,但對于彈窗背後的分類及運用可能還不是特別了解,在寫這篇文章之前,我查看了很多應用及資料,所以下面會有大量的案例,相信大家看完可以對彈窗的認識更明確,做設計規範的時候也能有自己的想法。


現在的彈窗分爲兩種,一種是模態彈窗(重提示),一種是非模態彈窗(輕提示)。

常見的模態彈窗:Dialog/Alert、Actionbar、Popover/Popup

常見的非模態彈窗:Toast/Hud、Tips、Snackbar

Image title

一、模態彈窗


Dialog/Alert  對話框

對話框是我們常用的彈窗,安卓開發語言是Dialog,iOS開發語言Alert,它通常出現在頁面的中間,對話框/警示框的類別非常多,對用戶的幹擾比較大。前面之所以說模態彈窗是一種重提示,是因爲它需要用戶主動觸發選擇才可以繼續當前的操作。


① 信息-選擇確定

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


下圖舉例分析:

iOS詢問是否刪除APP,就屬于重要提示彈窗,它一般會用在像刪除、確認提交...一些比較重要的功能操作中。

小紅書的這個是否允許使用網絡彈窗,大家一定在許多APP中都見過,這屬于一個系統自帶的授權彈窗。

馬蜂窩與天貓的消息提醒彈窗,一個屬于初次使用APP時,系統自帶的彈窗,一個屬于使用後期APP爲了推送消息,主動提示你開啓消息通知。

有錢花和愛奇藝的版本升級彈窗,都屬于偏運營類的彈窗,這一類的彈窗通常會弱化暫不升級的按鈕,突出升級主按鈕。

Image title

Image title

Image title


② 信息-輸入勾選

特點:這類彈窗通常是輸入一些比較少的信息或者勾選信息,常用于備注輸入、規格選擇、分組選擇等,通常只有確定和取消兩個按鈕。


下圖舉例分析:

微博對于已關注人的分組及備注,都屬于信息輸入及勾選類彈窗,操作通常都比較簡單。

Image title


③ 信息-傳達展示

特點:這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗,主要是吸引用戶點擊及參加活動,這類運營彈窗通常會設計的比較吸引人,造型各異,會突出領取、查看等大按鈕,弱化關閉按鈕。


下圖舉例分析:

拼多多和餓了麽這類的紅包優惠彈窗,就不多說了,大家都懂,它們最主要的目的就是吸引用戶點擊,提升購買率。

美團的變黃送好禮彈窗,屬于一次比較大的品牌升級,它主要目的是讓用戶更好的了解並接受品牌色升級。整體的元素及動效設計都非常清晰,視覺感很強。

支付寶的這個猜世界杯贏螞蟻積分的彈窗,屬于活動彈窗,它的整體設計非常貼合主題。

Image title

Image title


Actionbar操作欄

Actionbar主要分爲Action Views和Action Sheets。它們通常是由底部彈出,它的操作及信息會比對話框類型的彈窗更多更複雜。這種當前頁面的下拉彈窗好處就是,可以讓用戶清楚的感知當前的操作,比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。


① Action Views操作視圖

特點:這類視圖彈窗通常占屏比較多,以文字、圖標等形式展示各種功能,也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出,不太強調歸屬,大多出現在購買、支付、分享等場景。


下圖舉例分析:

百度網盤的這個+號擴展彈窗比較特殊,它也可以說是浮層,占滿整個屏幕,它最吸引人的還是它的小動效。

京東購買時的彈窗和支付寶付款時的彈窗,都是比較典型的,在各種電商産品及付款頁面用的非常多。

轉轉這個的鍵盤與輸入爲一體的彈窗,設計的非常人性化,讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。

網易雲音樂的分享彈窗就是典型的以文字與圖標來展示功能的。

微信讀書的底部閱讀設置彈窗,比較特殊,爲了使用戶沉浸閱讀,它是比較隱藏的,而且非常輕量化。

Image title

Image title

Image title


② Action Sheets 操作列表

特點:操作列表相對于操作視圖,它更單一。主要是以文字展示功能按鈕,重要敏感的功能操作一般會用主題顔色或紅色顯示,主要運用在一些日常控件、功能選擇、刪除、保存等場景。


下圖舉例分析:

Keep的選擇日期,屬于iOS原生控件,非常常見。

淘寶的選擇地址彈窗,整個展示的非常清晰全面,而且用戶每選擇一項,就會有相應的顯示。

支付寶和天貓超市的兩種列表彈窗,就不多說了,簡單的功能選擇都會采用這種。

Image title

Image title



③ 抽屜式彈窗

特點:這種抽屜式彈窗一般從左右兩邊彈出,經常運用在一些導航擴展和目錄展示中,它能承載比較多的信息,基本上都是用來放一些不太常用的功能。


下圖舉例分析:

微信讀書及一些其他閱讀類産品,由于目錄很長,而且一般是從上到下浏覽的,所以基本都采用了這種抽屜式彈窗。

小紅書的這個抽屜式彈窗,以圖標和文字的形式展示了一些不是很常用的功能,爲我的頁面節約了不少空間。

Image title


Popover/Popup 浮層

Popover是ios的開發語言,popup是安卓的開發語言,浮層是指,用戶點擊某個功能後浮出一個臨時氣泡對其作出補充,它通常會伴隨著半透明的遮罩或者投影襯底,用戶需要點擊功能區域操作,或者點擊空白處取消,才能進入下一步操作。它與上面操作欄的最大區別就在于,它更強調歸屬,可以出現在頁面的任何地方,而操作欄一般只出現在底部,不強調歸屬。


① 指向浮層

特點:這類的浮層一般伴隨有小三角指向,強調歸屬。氣泡裏面的功能通常以單一的文字或文字與圖標結合的形式來展示,主要運用在頂部加號補充、複制、分享轉發等場景。


下圖舉例分析:

支付寶和美團的頂部加號補充浮層,展示形式是差不多的,只是UI樣式不一樣,一個是白色氣泡黑色半透明遮罩,一個是深灰色氣泡。

微信讀書和微信的選擇文字氣泡,在文字複制中很常見,通常會與其他轉發收藏小功能一起出現。


Image title

Image title


② 導航篩選浮層

特點:所謂導航篩選,自然是與導航分不開的,再加上浮層是比較強調歸屬的,所以它通常會與導航連在一起,一般出現在頂部。


下圖舉例分析:

美團的導航篩選,因爲選項及開關很多,所以它的底部會有兩個主按鈕,一個完成,一個重置。

餓了麽的這個只有一個功能選項,所以它一般是直接選擇就收起浮層了。

Image title


③ 引導浮層

特點:引導浮層的作用就是引導用戶更好的使用産品及交互,降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候,一般只會出現一次,點擊空白位置或我知道了浮層就會消失。


下圖舉例分析:

QQ音樂與微醫的引導浮層都是用戶首次進入應用時,給出的功能搬家提醒浮層。

Image title



二、非模態彈窗


Toast/Hud 提示框

Hud是ios的控件名詞,Toast是安卓的控件名詞,它們都屬于一種輕提示,給予用戶及時反饋,讓用戶知道自己當前所處的狀態。

Hud一般只出現在屏幕的中央,以毛玻璃的樣式表現,內容展示比較富豐富。

Toast可以出現在屏幕任意位置,通常以黑色半透明的小框來表現,內容一般是純文字提示或者文字與圖標結合提示。


① 狀態提示

特點:狀態提示的Toast,它們一般都是反饋用戶當前操作的狀態,只出現1到2秒就會自動消失,場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。


下圖舉例分析:

移動的屬于操作遇阻提示。

京東的屬于操作成功反饋。

iOS的音量控制屬于毛玻璃Hud。

微信的清除緩存屬于正在操作狀態。

Image title

Image title


② 按鍵提示

特點:按鍵Toast提示與狀態提示不同,它們一般自動出現或者點擊觸發才會出現,用于對功能點的補充說明,讓用戶對功能有更深的了解。


下圖舉例分析:

螞蟻森林裏點擊樹木就會出現相關信息,當然它也會自動出現,點擊其他區域也會自動消失。 

知乎的消息標簽不僅有小紅點提示,還會在上方自動出現數字提示。

Image title


Snackbar

Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉,它沒有Toast那麽輕量,設置出現的時間會比Toast長,而且可以點擊按鈕進行交互。


下圖舉例分析:

UC浏覽器的Snackbar,是在提示用戶上滑,來查看更多內容,它需要滑動或者超時才能關閉。

京東的Snackbar,是在爲用戶推薦商品,提示用戶點擊箭頭來查看喜歡的商品,它比UC浏覽器多了一個關閉的按鈕。

Image title


Tips提示

Tips與Snackbar最主要的區別就是:Tips它是內嵌在頁面上的,而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失,一般用于需要用戶感知到的通知信息,或者植入廣告。


下圖舉例分析:

百度網盤在下載視頻時,就會出現一個Tips的提示,讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告,但它抓住了用戶的場景及心理,觀看廣告的幾率大大提升。

愛奇藝的Tips提示就屬于重要通知提示了,提示用戶VIP即將到期,續費可優惠,它們都有一個主按鈕及關閉按鈕,需要用戶主動觸發提示才會消失。

Image title



規範總結

目前的彈窗樣式非常多,你能想到的,你想不到的基本都可以技術實現。但這同時也帶來一個問題,那就是“不規範”。以上提到的彈窗種類,你只需要選擇符合你産品要求的幾個類型,最好不要在一個産品中運用多個同種類型的彈窗,否則後期會很難規範及組件化,當然運營廣告類彈窗可以另當別論。

差不多就寫完了...大家覺得有幫助的話,記得點在看和轉發~



微信公衆號:小梓的設計筆記

  • 收藏

    744人已收藏

小梓_xiaozi

微信公衆號:小梓的設計筆記

400粉絲/3關注

老馬識途叫獸當仁不讓lv.1首頁新秀原創小生
私信
交互設計-Theory2018-作品合集
2
Yifan_D

總結得很棒!

精彩!

小梓_xiaozi

小梓_xiaozi

微信公衆號:小梓的設計筆記

老馬識途叫獸當仁不讓lv.1首頁新秀原創小生
499 收藏744

掃描二維碼
去手機端查看海報

小梓_xiaozi

TA已經獲得9枚勳章啦

  • 成就勳章

    • 特別勳章

    • 身份勳章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群衆開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了