網(wǎng)站彈窗是什么 需要遵循哪些設(shè)計(jì)原則？

　　每個(gè)網(wǎng)站都有自己的額彈窗設(shè)定，那么什么是彈窗？設(shè)定網(wǎng)站的彈窗需要遵守什么樣的規(guī)則才是最適合的？下面就介紹下各種類型的彈窗，看看他們都遵守了什么的彈窗規(guī)則。

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

　　1.webp

　　現(xiàn)在讓我們來(lái)看看有哪些優(yōu)秀的彈窗設(shè)計(jì)和使用方法。

　　原則1. 減少干擾

　　由于彈窗會(huì)中斷操作，要盡可能地少使用彈窗。突然出現(xiàn)的彈窗會(huì)強(qiáng)迫用戶去停止他們當(dāng)下正在進(jìn)行的任務(wù)，并轉(zhuǎn)而專注于彈窗中的內(nèi)容。在繼續(xù)之前，用戶 必須要面對(duì)這個(gè)彈窗，否則將無(wú)法對(duì)彈窗之下的頁(yè)面進(jìn)行操作。當(dāng)這個(gè)用戶必須要確認(rèn)一個(gè)關(guān)鍵的操作時(shí)，這就是好的，但是在大部分情況下彈窗是不太有必要的， 甚至?xí)鹩脩舴锤小?/p>

　　需要確認(rèn)

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

　　2.webp

　　不要突然打開彈窗

　　在用戶沒(méi)有做任何操作時(shí)突然打開彈窗，是非常糟糕的設(shè)計(jì)。許多網(wǎng)站用訂閱框來(lái)轟炸它們的用戶，就如下面的例子：

　　3.webp

　　彈窗的出現(xiàn)應(yīng)該永遠(yuǎn)基于用戶的某個(gè)操作。這個(gè)操作也許是點(diǎn)擊了一個(gè)按鈕，也許是進(jìn)入了一個(gè)鏈接，也可能是選擇了某個(gè)選項(xiàng)。

　　小結(jié)

　　不是每個(gè)選擇、設(shè)置、或細(xì)節(jié)都有必要中斷用戶當(dāng)前的操作。

　　彈窗的備選方案有菜單以及同框內(nèi)的擴(kuò)展，這兩種控件都可以保持當(dāng)前頁(yè)面的延續(xù)。

　　可不要突然跳出彈窗，應(yīng)該讓用戶對(duì)彈窗的每次出現(xiàn)都有心理預(yù)期。

　　原則2. 彈窗應(yīng)與現(xiàn)實(shí)世界相關(guān)連

　　彈窗應(yīng)該使用用戶的語(yǔ)言（用戶熟悉的文字，短語(yǔ)和概念），而不是一些系統(tǒng)特有的專有名詞。

　　表述清晰的問(wèn)題和選項(xiàng)

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

　　4.webp

　　盡可能不要給用戶提供可能產(chǎn)生混淆的選項(xiàng)，而應(yīng)該使用那些文意清晰的選項(xiàng)。大部分情況下，用戶應(yīng)該能夠只通過(guò)彈窗的標(biāo)題和按鈕，就了解他們有哪些選項(xiàng)。

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

　　5.webp

　　改成這樣：肯定的操作文字“放棄” 很明確地指示了選擇這個(gè)選項(xiàng)的后果。

　　6.webp

　　提供重要的信息

　　一個(gè)彈窗不應(yīng)該把對(duì)用戶有用的信息說(shuō)得含糊不清。舉個(gè)例子，如果一個(gè)彈窗要讓用戶確認(rèn)刪除某些條目，就應(yīng)該把這些條目都列出來(lái)。

　　7.webp

　　另外，避免使用“了解更多”按鈕去連接到幫助文檔；在彈窗同一頁(yè)面展開則是更好的選擇。如果還需要顯示更多的信息，則將其放在進(jìn)入彈窗之前的頁(yè)面。

　　提出有（關(guān)鍵）信息的反饋

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

　　小結(jié)

　　在彈窗中使用語(yǔ)意清晰的問(wèn)題和選項(xiàng)。

　　設(shè)計(jì)促進(jìn)操作完成的彈窗。

　　在操作完成后，提示用戶操作已經(jīng)完成了。

　　原則3. 講求極簡(jiǎn)

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

　　元素與選項(xiàng)的數(shù)量

　　彈窗絕不應(yīng)該只是部分顯示在屏幕上。因此不要使用有滾動(dòng)控件的彈窗。

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

　　9.webp

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

　　10.webp

　　操作的數(shù)量

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

　　11.webp

　　Learn More”操作將用戶從這個(gè)彈窗指引到其它頁(yè)面，進(jìn)而把當(dāng)前的彈窗置入一個(gè)不確定的狀態(tài)

　　勿將多個(gè)步驟放置在一個(gè)彈窗內(nèi)

　　把一個(gè)復(fù)雜的任務(wù)分解成多個(gè)步驟是一個(gè)極好的想法。然而這也會(huì)給用戶傳達(dá)一個(gè)信號(hào)，這個(gè)任務(wù)太復(fù)雜了，以至于根本沒(méi)法再一個(gè)彈窗界面中完成。

　　12.webp

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

　　小結(jié)

　　如果你發(fā)現(xiàn)你在很努力地把許多元素?cái)D進(jìn)一個(gè)彈窗，這通常代表彈窗已經(jīng)不是最優(yōu)的設(shè)計(jì)方案了。

　　將那些不必要的、不能夠幫助用戶完成任務(wù)的元素或內(nèi)容從彈窗中去除，以達(dá)到簡(jiǎn)化的目的。

　　盡量避免在彈窗內(nèi)安置多個(gè)步驟。

　　原則4. 選擇適當(dāng)?shù)膹棿胺N類

　　彈窗大致分兩個(gè)大類。第一大類為吸引用戶關(guān)注的模態(tài)彈窗，強(qiáng)制用戶與之交互后才能繼續(xù)。模式彈窗通常被用在獨(dú)立、強(qiáng)制的流程中：

　　當(dāng)不需要上下文就可以決定怎么做的時(shí)候。

　　需要明確的“接受”或“取消”動(dòng)作才能關(guān)閉。在點(diǎn)擊這種彈窗的外部時(shí)，它并不會(huì)關(guān)閉。

　　當(dāng)我們不允許此用戶的進(jìn)程處于部分完成狀態(tài)（即用戶必須完成此進(jìn)程才可做其他任何的操作）。

　　第二大類則是非模態(tài)彈窗，它允許用戶通過(guò)點(diǎn)擊或輕觸周圍就可關(guān)閉。

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

　　另外移動(dòng)系統(tǒng)的彈窗通常是模態(tài)的，并且含有如下的基本元素：內(nèi)容，操作，和標(biāo)題。

　　15.webp

　　安卓模態(tài)彈窗

　　原則5. 視覺(jué)一致性

　　彈窗下的背景

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

　　16.webp

　　安卓的模態(tài)彈窗

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

　　清晰的關(guān)閉選項(xiàng)

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

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

　　17.webp

　　Twitter同時(shí)使用了點(diǎn)擊x按鈕和點(diǎn)擊背景區(qū)域的退出方式

　　避免在彈窗內(nèi)啟動(dòng)彈窗

　　應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗，這是因?yàn)榇伺e會(huì)加深用戶所感知到的網(wǎng)站或app的層級(jí)深度，從而增大了視覺(jué)的復(fù)雜性。

　　18.webp

　　反例：彈窗中的彈窗

　　小結(jié)

　　在大部分情景下，都允許用戶通過(guò)點(diǎn)擊或輕觸來(lái)關(guān)閉彈窗（除了模態(tài)彈窗）。

　　應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗（即彈窗中的彈窗）。

　　總結(jié)

　　希望這些有關(guān)彈窗的使用案例和使用方法還算有趣，并能在你們?cè)O(shè)計(jì)原型時(shí)派上用場(chǎng)。要記住，用戶體驗(yàn)是為用戶而做的設(shè)計(jì)，而非為技術(shù)。要想知道什么樣 的設(shè)計(jì)最適合你的用戶、最適合他們將進(jìn)行的任務(wù)，其實(shí)不是一件難事：你只需要模仿那些領(lǐng)先產(chǎn)品的彈窗，然后找到你的用戶做一些相關(guān)的測(cè)試。

    更多新聞資訊，可以訪問(wèn)2898站長(zhǎng)資源平臺(tái)建站欄目：http://afrimangol.com/web/ 謝謝！