如何設計良好的彈出框？這兒有一份周全總結(jié)！

王M爭：最近做項目的時候，發(fā)現(xiàn)項目上對于彈出框的使用有點紊亂。例如，必要給用戶一個操作提醒，用彈出框來完成。用戶對這個功能不了解，加一個“查看詳情”的圖標，用戶點擊后跳出彈出框來給用戶展示詳情。用戶想查看這筆操作的細致記錄，照舊用一個彈出框來展示。由于要體現(xiàn)的內(nèi)容不一樣（表單，筆墨，插畫），所以彈出框的樣式不同一，設計的同等性被打破。而且彈出框出現(xiàn)的頻率過高，會對用戶的正常操作流程造成干擾。所以這篇文章我對彈出框的使用做了一些總結(jié)。

什么時候使用彈出框

在我看來，項目上彈出框的使用出現(xiàn)紊亂，歸根結(jié)底是對彈出框使用時機的不了解。由于不知道什么情況下該使用彈出框，所以會導致彈出框出如今一些不應該出現(xiàn)的地方。其實設計師在使用彈出框之前肯定要穩(wěn)重，要反復問本身這里是否必須要使用彈出框。由于彈出框會打斷用戶當前的操作流程，屬于比較強勢的干擾舉動。

設計的包容性很強，彈出框可以完成的功能其實可以通過其他設計元素來代替。接下來我們來看下那些彈出框的替換者們：

彈出框與開屏廣告

目前來說，當app進行版本更新或者有新的功能（產(chǎn)品）上線的時候，通常會使用彈出框來提示用戶。

其實開屏廣告完全可以替換彈出框，而且開屏廣告由于空間更大，可以更好的完成宣傳功能。

彈出框與切換網(wǎng)頁

我們比較常見的詳情展示網(wǎng)頁，這類網(wǎng)頁可以通過彈出框也可以通過加載一個新的網(wǎng)頁來承載信息。從用戶體驗的連貫性來說，用彈出框更好些。由于使用彈出框用戶還可以停頓在當前網(wǎng)頁，網(wǎng)頁內(nèi)容不會被刷新。而且彈出框打開速度更快，反應更及時，更容易受到用戶的青睞。

但是彈出框可以承載的信息量是有限的，假如信息過多導致用戶還要在彈出框上滑動才能看完，那么照舊以一個新的網(wǎng)頁來顯現(xiàn)更合適。

彈出框與toast

彈出框的一個重要功能就是反饋。有的反饋使用toast來體現(xiàn)更加合適，由于toast屬于一種輕量級的反饋體例，一樣平常出現(xiàn)1-2秒后會自行消散。而且toast與彈出框相比對界面的遮擋很少，不會對用戶的當前操作產(chǎn)生很大的干擾

Toast可以出如今網(wǎng)頁中任何位置，能夠給用戶更具有指向型的提醒，這點是彈出框所不具備的。

其實什么時候使用彈出框，是否使用彈出框取決于你要給用戶展示的信息是否緊張。例如你在手機上買了一張電影票，付出失敗的效果假如用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)本身購買失敗，那么用戶極有可能當場卸載你的產(chǎn)品。

總之，緊張的信息優(yōu)先考慮使用彈出框。

彈出框設計原則

避免筆墨過多

彈出框的另一個重要功能就是用戶指導，我們都知道用戶指導本質(zhì)上就是讓用戶更好的了解產(chǎn)品。假如想詮釋一個事物，最有力的武器就是筆墨，但是我們不能過度依靠筆墨。

由于對于用戶來說他們不盼望在使用過程中看到筆墨過多的指導提醒，他們盼望在短時間內(nèi)就可以了解整個指導的要告知用戶的內(nèi)容。這個就意味著我們要削減筆墨的使用，或者說要精簡筆墨。由于人類對于筆墨的閱讀速度要遠低于對于圖像的“閱讀速度”。我們在給用戶筆墨提醒的時候肯定要記住搭配其他的視覺元素。

例如，用戶指導彈出框中我們會加入一些手勢、箭頭，使得指導更具有指向型。還有的彈出框指導會增長一些插畫，整個網(wǎng)頁風格變的活潑起來，刺激了用戶的閱讀欲望。

定位目標用戶群和使用場景

設計師在進行彈出框設計過程中，要考慮目標用戶群和使用場景。以目標用戶群為例，假如你的用戶大多數(shù)年齡都比較大，那么彈出框采用淺色背景可能更加合適，由于內(nèi)容更加的直觀。而年輕用戶更傾向于深色背景的彈出框，由于更加天然和時尚。假如我們可以正確的定位到目標用戶群為兒童用戶，那么我們在彈出框背景上添加一些插畫元素。

使用場景涵蓋的范圍比較廣，包括使用的時間，使用時的網(wǎng)絡狀況，生理狀況和使用設備。這些都是我們在進行彈出框設計的時候必要考慮的題目。

以咕咚為例，一樣平常來說大部分用戶對配速穩(wěn)固性和快慢分析這兩個概念，都有大致的理解。為了保險起見，設計師在這里照舊加了一個點擊查看詳情的圖標。在這里設計師摒棄了使用彈出框，在我看來是一個特別很是明智的選擇。由于用戶使用咕咚的情況多數(shù)是在戶外，沒有wifi。假如用戶不樂意打開流量的話，這個彈出框就加載不出來，如許就會影響產(chǎn)品的離線體驗。

而且使用彈出框會隱瞞當前網(wǎng)頁信息，比如我想理解配速穩(wěn)固性，但是彈出框遮擋了我的配速區(qū)間，如許的設計很容易被用戶吐槽。

總結(jié)

設計是一個你學的越多就糾結(jié)的行業(yè)，這是一個很好的征象。糾結(jié)的根本緣故原由是由于我們在思考，在平衡不同設計方案之間利弊。自力思考的風俗和態(tài)度應該是一個合格設計師的基本素養(yǎng)，或許有的時候思考到最后我們也無法得出一個令本身寫意的方案，但是這個思考的過程對于你來說比得到那個答案可能更加緊張。

迎接關(guān)注作者的微信公眾號：「王M爭」