2017-7-3 用心設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近在做項目的時候，發現項目上對于彈出框的使用有點混亂。例如，需要給用戶一個操作提示，用彈出框來完成。用戶對這個功能不了解，加一個“查看詳情”的圖標，用戶點擊后跳出彈出框來給用戶展示詳情。用戶想查看這筆操作的詳細記錄，還是用一個彈出框來展示。因為要表現的內容不一樣（表單，文字，插畫），所以彈出框的樣式不統一，設計的一致性被打破。而且彈出框出現的頻率過高，會對用戶的正常操作流程造成干擾。所以這篇文章我對彈出框的使用做了一些總結。
什么時候使用彈出框
在我看來，項目上彈出框的使用出現混亂，歸根結底是對彈出框使用時機的不了解。因為不知道什么情況下該使用彈出框，所以會導致彈出框出現在一些不應該出現的地方。其實設計師在使用彈出框之前一定要慎重，要反復問自己這里是否必須要使用彈出框。因為彈出框會打斷用戶當前的操作流程，屬于比較強勢的干擾行為。
設計的包容性很強，彈出框可以完成的功能其實可以通過其他設計元素來代替。接下來我們來看下那些彈出框的替代者們：
彈出框與開屏廣告
目前來說，當app進行版本更新或者有新的功能（產品）上線的時候，通常會使用彈出框來提醒用戶。
其實開屏廣告完全可以替代彈出框，而且開屏廣告因為空間更大，可以更好的完成宣傳功能。
彈出框與切換頁面
我們比較常見的詳情展示頁面，這類頁面可以通過彈出框也可以通過加載一個新的頁面來承載信息。從用戶體驗的連貫性來說，用彈出框更好點。因為使用彈出框用戶還可以停留在當前頁面，頁面內容不會被刷新。而且彈出框打開速度更快，反應更及時，更容易受到用戶的青睞。
但是彈出框可以承載的信息量是有限的，如果信息過多導致用戶還要在彈出框上滑動才能看完，那么還是以一個新的頁面來展現更合適。
彈出框與toast
彈出框的一個主要功能就是反饋。有的反饋使用toast來表現更加合適，因為toast屬于一種輕量級的反饋方式，一般出現1-2秒后會自行消失。而且toast與彈出框相比對界面的遮擋很少，不會對用戶的當前操作產生很大的干擾。Toast可以出現在頁面中任何位置，能夠給用戶更具有指向型的提示，這點是彈出框所不具備的。
其實什么時候使用彈出框，是否使用彈出框取決于你要給用戶展示的信息是否重要。例如你在手機上買了一張電影票，支付失敗的結果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發現自己購買失敗，那么用戶極有可能當場卸載你的產品。
總之，重要的信息優先考慮使用彈出框。
彈出框設計原則
避免文字過多
彈出框的另一個主要功能就是用戶引導，我們都知道用戶引導本質上就是讓用戶更好的了解產品。如果想解釋一個事物，最有力的武器就是文字，但是我們不能過度依賴文字。
因為對于用戶來說他們不希望在使用過程中看到文字過多的引導提示，他們希望在短時間內就可以了解整個引導的要告知用戶的內容。這個就意味著我們要減少文字的使用，或者說要精簡文字。因為人類對于文字的閱讀速度要遠低于對于圖像的“閱讀速度”。我們在給用戶文字提示的時候一定要記住搭配其他的視覺元素。
例如，用戶引導彈出框中我們會加入一些手勢、箭頭，使得的引導更具有指向型。還有的彈出框引導會增加一些插畫，整個頁面風格變的活潑起來，刺激了用戶的閱讀欲望。
定位目標用戶群和使用場景
設計師在進行彈出框設計過程中，要考慮目標用戶群和使用場景。以目標用戶群為例，如果你的用戶大多數年齡都比較大，那么彈出框采用淺色背景可能更加合適一點，因為內容更加的直觀。而年輕用戶更傾向于深色背景的彈出框，因為更加自然和時尚。如果我們可以準確的定位到目標用戶群為兒童用戶，那么我們在彈出框背景上添加一些插畫元素。
使用場景涵蓋的范圍比較廣，包括使用的時間，使用時的網絡狀態，心理狀態和使用設備。這些都是我們在進行彈出框設計的時候需要考慮的問題。
以咕咚為例，一般來說大部分用戶對配速穩定性和快慢分析這兩個概念，都有大致的理解。為了保險起見，設計師在這里還是加了一個點擊查看詳情的圖標。在這里設計師放棄了使用彈出框，這在我看來是一個非常明智的選擇。因為用戶使用咕咚的情況多數是在戶外，沒有wifi。如果用戶不愿意打開流量的話，這個彈出框就加載不出來，這樣就會影響產品的離線體驗。
而且使用彈出框會遮蓋當前頁面信息，比如我想理解配速穩定性，但是彈出框遮擋了我的配速區間，這樣的設計很容易被用戶吐槽。
總結
設計是一個你學的越多就糾結的行業，這是一個很好的現象。糾結的根本原因是因為我們在思考，在平衡不同設計方案之間利弊。獨立思考的習慣和態度應該是一個合格設計師的基本素養，或許有的時候思考到最后我們也無法得出一個令自己滿意的方案，但是這個思考的過程對于你來說比得到那個答案可能更加重要。
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務