UI界面設計

APP互動彈窗設計的5條基本原則

6771

今天和大家分享的是彈窗在設計中的應用。彈窗是鏈接產(chǎn)品交互與用戶操作的常用方式，它既能處理用戶的「即時任務」，也能作為提示通知用戶的當前操作反饋或狀態(tài)，但你真的足夠了解它嗎？

背景

前兩天一個小伙伴咨詢我“彈窗”問題，說現(xiàn)在主管讓他把產(chǎn)品正在使用的彈窗梳理下，整理成規(guī)范。這讓他感覺無從下手，彈窗不就是一個彈窗么,怎么做才能讓你的彈窗變得有意義呢？

我們大多數(shù)普通設計師每天工作都處在一個點上，單純做好交互或者視覺本身，也就是我們常說的單點；但是高級設計師卻可能需要解決線的問題，不止是某個點的某個問題；到資深設計師階段，你還可能需要解決面的問題，設計專家做的可能就是面的事情。

很多人可能會有這個疑問，怎么做事情才叫由從點到線，以上面整理彈窗規(guī)范為例，看似一個簡單需求，我們是如何體現(xiàn)它的設計價值？接下來我分享一個我之前項目的彈窗案例，希望可以幫助大家打開這個思路！

1.定制彈窗尺寸

既然是彈窗需求，那么首先就是如何去確定尺寸。大家也可以問問自己，你拿到這個項目，會如何確定尺寸？大多數(shù)人，可能通過看競品來參考，這是一個方法；但是有沒有更科學的做法呢？

百度指數(shù)

百度指數(shù)能幫助我們查到很多不錯的數(shù)據(jù)，比如屏幕分辨率，手機占用率等！在真正著手設計一個彈框時,市面上各種各樣尺寸的屏幕分辨率，如果你希望以一個尺寸適配所有屏幕分辨率，那可以參考以下數(shù)據(jù)：

這是兩年前統(tǒng)計數(shù)據(jù)，現(xiàn)在可能有更新，大家主要借鑒其思路：

通過這個數(shù)據(jù)，我們可以得出安卓主流分辨率720X1280，1080X1920；蘋果是750X1334，640X1136，那么只要我們彈窗能在640X1136下顯示完整，在其他尺寸上應該都沒有問題。

如上圖，市面上手機主流分辨率最小的是640X1136px,只要保證彈窗在這個尺寸顯示正常, 其他尺寸也就不會有問題。根據(jù)以往經(jīng)驗，彈窗寬度640px是足夠有余的。高度上以iPhone為例，去掉系統(tǒng)頂部和底部導航條的高度后，可以得出:1334 - 128(導航欄+狀態(tài)欄) - 98px(底部導航欄高度) = 1108px；保證彈窗高度在這個范圍內(nèi)顯示完整即可。

2.梳理彈窗類型

在日常工作中，我們經(jīng)常通常需要考慮哪種類型的彈窗適合當前業(yè)務場景或需求？是用系統(tǒng)的彈窗，還是自己做一個特殊樣式？

這需要你對彈窗類型有一個比較全面的了解，就能很快分辨什么時候使用什么類型彈窗更適合。

彈窗特性

▲提示型:也叫操作反饋，一般是完成某項任務后交互的一個反饋信息，不需要點擊一般是自動消失，一般后面沒有蒙版，單獨一個小浮層設計時，注意一致性原則

▲引導操作:一般需要引導用戶去操作下一步，如引導用戶去分享，引導用戶去下單購買，引導用戶去查看商品，這種彈窗需要重點強調彈窗行動點，吸引用戶參與

▲信息確認型:一般是需求用戶確認信息，通常是比較簡單的操作，并不需要一個單獨頁面來表現(xiàn)，彈框是一個很好的銜接方式。這種彈窗一般采用偏系統(tǒng)的設計，同樣記往保持視覺上的統(tǒng)一性: 顏色，間距，文案風格等。交互上，因為這個頁面需要吸引用戶更多關注信息內(nèi)容上，一般采取貼近原生系統(tǒng)彈窗的設計風格即可。

3.融合品牌感

很多人好奇，一個普通彈窗要怎么融合品牌感？其實在一個場景設計中，每個地方都可以去融合品牌因素進去。

過去我們對蒙版顏色沒有仔細關注的階段，也許顏色使用上不是純黑#000，就是純白#fff。其實蒙版的顏色及透明度完全可以再進一步搭配，例如產(chǎn)品是藍色調性的，就可以在黑色中混入一點品牌藍色；產(chǎn)品是輕盈的，那就采用白色或淡灰色，或者嘗試用淺一些的顏色搭配高一點透明度等等，根據(jù)產(chǎn)品的調性設計出適合產(chǎn)品氣質的蒙版。

看看別人怎么做的

▲Tumblr的蒙版顏色采用了它的品牌色(54,70,93,95)

▲Twitch的蒙版顏色在黑色中混入了一點紫色rgba(32,28,43,9)，與它的品牌色相符。

4.彈窗未來趨勢

移動在影響著人們生活，也同時引領著設計趨勢；這些年產(chǎn)品都在追求多終端的一致性。之前也提到過，視覺表現(xiàn)方面，將會有更多產(chǎn)品為了在大屏幕下有更好的視覺效果，做出針對性的設計。隨著產(chǎn)品愈來愈追求簡潔，UI也變得愈來愈輕盈，甚至透明。彈框也許不再被限制在卡片上。市面上也已經(jīng)有不少產(chǎn)品嘗試使用這種手法，以整個屏幕來取代底色卡片。這些也許是未來的一個趨勢, 值得設計師們?nèi)リP注。