網(wǎng)站建設彈窗設計的5條基本原則發(fā)布者：本站     時(shí)間：2022-05-09 11:05:00

當你將彈窗設計及使用得恰到好處時(shí)，它們就會(huì )是非常有效的用戶(hù)界面元素。它們能幫助用戶(hù)快速且便捷地達成目標。然而當錯誤使用時(shí)，彈窗卻會(huì )困擾你的用戶(hù)。知曉如何設計彈窗，會(huì )幫助你在使用時(shí)避免那些可能對用戶(hù)造成的困擾。
 

什么是彈窗？
彈窗是一個(gè)為激起用戶(hù)的回應而被設計、需要用戶(hù)去與之交互的浮層。它可以告知用戶(hù)關(guān)鍵的信息，要求用戶(hù)去做決定，抑或是涉及到多個(gè)操作。彈窗越來(lái)越廣泛地被應用于軟件、網(wǎng)頁(yè)、以及移動(dòng)設備中，它可以在不把用戶(hù)從當前頁(yè)面帶走的情況下，指引用戶(hù)去完成一個(gè)特定的操作。

彈窗設計的5條基本原則

圖1，會(huì )話(huà)過(guò)期彈窗
 
現在讓我們來(lái)看看有哪些優(yōu)秀的彈窗設計和使用方法。
 

原則1. 減少干擾
由于彈窗會(huì )中斷操作，要盡可能地少使用彈窗。突然出現的彈窗會(huì )強迫用戶(hù)去停止他們當下正在進(jìn)行的任務(wù)，并轉而專(zhuān)注于彈窗中的內容。在繼續之前，用戶(hù)必須要面對這個(gè)彈窗，否則將無(wú)法對彈窗之下的頁(yè)面進(jìn)行操作。當這個(gè)用戶(hù)必須要確認一個(gè)關(guān)鍵的操作時(shí)，這就是好的，但是在大部分情況下彈窗是不太有必要的，甚至會(huì )引起用戶(hù)反感。
 

需要確認
在你需要用戶(hù)去互動(dòng)才可繼續時(shí)，或當犯一個(gè)錯誤的成本會(huì )很高時(shí)，使用彈窗是最合適且最合理的。

彈窗設計的5條基本原則

圖2，這里告知了用戶(hù)一個(gè)情況，需要用戶(hù)確認
 
不要突然打開(kāi)彈窗
在用戶(hù)沒(méi)有做任何操作時(shí)突然打開(kāi)彈窗，是非常糟糕的設計。許多網(wǎng)站用訂閱框來(lái)轟炸它們的用戶(hù)，就如下面的例子：

彈窗設計的5條基本原則

圖3，諸如此類(lèi)的彈窗給沒(méi)有鍵盤(pán)的用戶(hù)造成了數不清的麻煩
 
彈窗的出現應該永遠基于用戶(hù)的某個(gè)操作。這個(gè)操作也許是點(diǎn)擊了一個(gè)按鈕，也許是進(jìn)入了一個(gè)鏈接，也可能是選擇了某個(gè)選項。
 

小結
不是每個(gè)選擇、設置、或細節都有必要中斷用戶(hù)當前的操作。
彈窗的備選方案有菜單以及同框內的擴展，這兩種控件都可以保持當前頁(yè)面的延續。
可不要突然跳出彈窗，應該讓用戶(hù)對彈窗的每次出現都有心理預期。
原則2. 彈窗應與現實(shí)世界相關(guān)連
彈窗應該使用用戶(hù)的語(yǔ)言（用戶(hù)熟悉的文字，短語(yǔ)和概念），而不是一些系統特有的專(zhuān)有名詞。
 

表述清晰的問(wèn)題和選項
在彈窗的內容區域，應該使用一個(gè)表述清晰的問(wèn)題或陳述，例如“清除您的存檔？”或“刪除您的賬戶(hù)？”總之，應該避免使用含有歉意的、模凌兩可的、或者是反問(wèn)式的語(yǔ)氣，如“警告！”“你確定嗎？”

彈窗設計的5條基本原則

圖4，左邊的彈窗提出了一個(gè)很模凌兩可的問(wèn)題，并且這個(gè)操作可能影響的范圍并不明確；右邊的彈窗提出的問(wèn)題相當明確，它解釋了此次操作對用戶(hù)的影響，并且提供了指向清晰的選項
 
盡可能不要給用戶(hù)提供可能產(chǎn)生混淆的選項，而應該使用那些文意清晰的選項。大部分情況下，用戶(hù)應該能夠只通過(guò)彈窗的標題和按鈕，就了解他們有哪些選項。

反例：這個(gè)按鈕的文字“不”的確回答了彈窗內的問(wèn)題，但是并沒(méi)有直接告訴用戶(hù)點(diǎn)擊后會(huì )發(fā)生什么。

彈窗設計的5條基本原則

圖5，安卓的系統彈窗 來(lái)源：MATERIAL DESIGN
 
改成這樣：肯定的操作文字“放棄” 很明確地指示了選擇這個(gè)選項的后果。

彈窗設計的5條基本原則

圖6，安卓的系統彈窗 來(lái)源：MATERIAL DESIGN
 
提供重要的信息
一個(gè)彈窗不應該把對用戶(hù)有用的信息說(shuō)得含糊不清。舉個(gè)例子，如果一個(gè)彈窗要讓用戶(hù)確認刪除某些條目，就應該把這些條目都列出來(lái)。

彈窗設計的5條基本原則

圖7，這個(gè)彈窗很簡(jiǎn)要地指明了這個(gè)操作的結果
 
另外，避免使用“了解更多”按鈕去連接到幫助文檔；在彈窗同一頁(yè)面展開(kāi)則是更好的選擇。如果還需要顯示更多的信息，則將其放在進(jìn)入彈窗之前的頁(yè)面。
 

提出有（關(guān)鍵）信息的反饋
當一個(gè)流程結束時(shí)，記得顯示一條提示信息（或視覺(jué)反饋），讓用戶(hù)知道自己已經(jīng)完成了所有必要的步驟。

彈窗設計的5條基本原則

圖8，在完成一個(gè)操作后成功的例子
 
小結
在彈窗中使用語(yǔ)意清晰的問(wèn)題和選項。
設計促進(jìn)操作完成的彈窗。
在操作完成后，提示用戶(hù)操作已經(jīng)完成了。

原則3. 講求極簡(jiǎn)
別試著(zhù)把太多東西擠在一個(gè)彈窗內。要保持干凈和簡(jiǎn)約（遵從KISS原則）。然而極簡(jiǎn)主義并不意味著(zhù)被局限住，你提供的所有信息都該是有價(jià)值并且與之相關(guān)的。
 

元素與選項的數量
彈窗絕不應該只是部分顯示在屏幕上。因此不要使用有滾動(dòng)控件的彈窗。

反例：巴克萊銀行的付款處理彈窗包括了許多的選項和元素，部分的選項只有滾動(dòng)后才能看到（特別是對于屏幕通常較小的移動(dòng)設備）

彈窗設計的5條基本原則

圖9，來(lái)源：巴克萊
 
好的例子：Stripe使用了一個(gè)簡(jiǎn)單并且聰明的彈窗，只顯示了最基本的信息，這樣不管在桌面端上還是移動(dòng)屏幕上看起來(lái)都會(huì )很不錯。

彈窗設計的5條基本原則

圖10
 
操作的數量
彈窗不該提供超過(guò)兩種選項。第三個(gè)選項，例如下圖的“了解更多”，有可能會(huì )將用戶(hù)帶離此彈窗，如此用戶(hù)將沒(méi)有辦法完成當前的任務(wù)。

彈窗設計的5條基本原則

圖11，“LEARN MORE”操作將用戶(hù)從這個(gè)彈窗指引到其它頁(yè)面，進(jìn)而把當前的彈窗置入一個(gè)不確定的狀態(tài)
 
勿將多個(gè)步驟放置在一個(gè)彈窗內
把一個(gè)復雜的任務(wù)分解成多個(gè)步驟是一個(gè)極好的想法。然而這也會(huì )給用戶(hù)傳達一個(gè)信號，這個(gè)任務(wù)太復雜了，以至于根本沒(méi)法再一個(gè)彈窗界面中完成。

彈窗設計的5條基本原則

圖12
 
如果一個(gè)交互行為復雜到需要多個(gè)步驟才能完成（如下圖的例子），那么它就有必要單獨使用一個(gè)頁(yè)面（而不是作為彈窗存在）。

彈窗設計的5條基本原則

圖13，有多個(gè)步驟的彈窗 來(lái)源：DRIBBBLE
 
小結
如果你發(fā)現你在很努力地把許多元素擠進(jìn)一個(gè)彈窗，這通常代表彈窗已經(jīng)不是最優(yōu)的設計方案了。
將那些不必要的、不能夠幫助用戶(hù)完成任務(wù)的元素或內容從彈窗中去除，以達到簡(jiǎn)化的目的。
盡量避免在彈窗內安置多個(gè)步驟。
原則4. 選擇適當的彈窗種類(lèi)
彈窗大致分兩個(gè)大類(lèi)。第一大類(lèi)為吸引用戶(hù)關(guān)注的模態(tài)彈窗，強制用戶(hù)與之交互后才能繼續。模式彈窗通常被用在獨立、強制的流程中：

當不需要上下文就可以決定怎么做的時(shí)候。
需要明確的“接受”或“取消”動(dòng)作才能關(guān)閉。在點(diǎn)擊這種彈窗的外部時(shí)，它并不會(huì )關(guān)閉。
當我們不允許此用戶(hù)的進(jìn)程處于部分完成狀態(tài)（即用戶(hù)必須完成此進(jìn)程才可做其他任何的操作）。
第二大類(lèi)則是非模態(tài)彈窗，它允許用戶(hù)通過(guò)點(diǎn)擊或輕觸周?chē)涂申P(guān)閉。

第一種模式彈窗只在特別重要的交互操作時(shí)才須使用，（比如：刪除帳戶(hù)，同意協(xié)議）。

彈窗設計的5條基本原則

圖14，模態(tài)彈窗：用戶(hù)必須輸入“DELETE”才能確認刪除
 
另外移動(dòng)系統的彈窗通常是模態(tài)的，并且含有如下的基本元素：內容，操作，和標題。

彈窗設計的5條基本原則

圖15，安卓模態(tài)彈窗
 
原則5. 視覺(jué)一致性

彈窗下的背景
當打開(kāi)一個(gè)彈窗時(shí)，后面的頁(yè)面一定要稍微地變暗。它有兩個(gè)功能，第一它把用戶(hù)的注意力轉移到了浮層上，第二它讓用戶(hù)知道后面的這個(gè)頁(yè)面是不再可用的。

彈窗設計的5條基本原則

圖16，安卓的模態(tài)彈窗
 
在調節背景深度時(shí)要注意了。如果你把它變得太暗，用戶(hù)就沒(méi)法看清背景的內容。如果你調得太淺，用戶(hù)可能會(huì )認為這個(gè)頁(yè)面仍然可操作，并且甚至不會(huì )注意到彈窗的存在。
 

清晰的關(guān)閉選項
在彈窗的右上角應該有一個(gè)關(guān)閉的選項。許多彈窗會(huì )在右上角有一個(gè)“x”的按鈕，方便用戶(hù)關(guān)閉窗口。然而，這個(gè)“x”按鈕對于一般的用戶(hù)而言并不是一個(gè)顯而易見(jiàn)的退出通道。這是由于“x”按鈕通常較小，它需要用戶(hù)準確地定位到該處，才能夠成功的退出，而這一過(guò)程通常很費事。

因而讓用戶(hù)通過(guò)點(diǎn)擊非模態(tài)彈窗的背景區域去退出，就是一個(gè)更好的方法。

彈窗設計的5條基本原則

圖17，TWITTER同時(shí)使用了點(diǎn)擊X按鈕和點(diǎn)擊背景區域的退出方式
 
避免在彈窗內啟動(dòng)彈窗
應該避免在彈窗內再啟動(dòng)附加的小彈窗，這是因為此舉會(huì )加深用戶(hù)所感知到的網(wǎng)站或app的層級深度，從而增大了視覺(jué)的復雜性。

彈窗設計的5條基本原則

圖18，反例：彈窗中的彈窗
 
小結
在大部分情景下，都允許用戶(hù)通過(guò)點(diǎn)擊或輕觸來(lái)關(guān)閉彈窗（除了模態(tài)彈窗）。
應該避免在彈窗內再啟動(dòng)附加的小彈窗（即彈窗中的彈窗）。