信息提交類彈窗大家應該都比較熟悉，和其他彈窗的區(qū)別在于他有輸入、選擇等操作，比如我們常見的輸入驗證碼、留言回復、充值轉賬、任務設置等。

看上去設計都比較簡單，但是當你驗收時就會發(fā)現(xiàn)問題，為什么別人的彈窗體驗如此順暢，我們的操作如此繁瑣。

常見的問題主要有：操作鍵盤擋住輸入?yún)^(qū)域，導致交互不流暢；選擇了不適合的控件，增加操作步驟。

左圖彈窗下部分的輸入框和提交按鈕都已經被鍵盤遮擋了，針對這種情況我們當前的解決方案是讓彈窗跟隨鍵盤，不過信息過多時就不太適用了。

右圖的地址采用滑動選擇的控件，每次只能查看幾個地址，當你的城市比較靠后時，就增加了操作成本。

那么采用什么樣的設計方式才可以解決這些問題呢？這需要一開始設計時就選擇適當?shù)臉邮?，我們可以從四個方面來考慮。

目錄

1、當信息較少且重要時，采用聯(lián)動彈窗

2、當信息較多時，考慮是否可設計為頁面

3、當以上都不適合時，在考慮采用傳統(tǒng)彈窗

4、選用適合的交互樣式

1. 當信息較少且重要時，采用聯(lián)動彈窗

聯(lián)動彈窗也就是彈窗和鍵盤相連，其優(yōu)勢是解決了傳統(tǒng)彈窗對內容對遮擋的問題，多用于信息較少和以輸入為主的重要場景中。如下圖所示：

轉轉發(fā)布寶貝的頁面中，設置價格時，將價格、原價、運費、包郵等信息集合到了聯(lián)動彈窗中，這樣我們只需操作一步即可完成，避免了常規(guī)彈窗中多次輸入的情況。

TIM待辦主要以信息為主，采用聯(lián)動彈窗可以讓用戶聚焦在當前輸入中，不被其他操作所干擾。

2. 當信息較多時，考慮是否可設計為頁面

當信息較多時，我們需要判斷是否必須要用彈窗來設計，直接用頁面設計會不會更好呢？那么判斷的標準其實是由當前用戶的目的來決定的。如下圖所示：

映客登錄界面采用彈窗的方式比較合適，因為用戶當前的目的是看其他精彩的內容，采用彈窗對用戶目的干擾較小。

轉轉的發(fā)布頁面由于信息量大，同時用戶當前的目的就是發(fā)布寶貝，因此采用頁面進行設計比較適合。

3. 當以上兩種都不適合時，在考慮采用傳統(tǒng)彈窗

傳統(tǒng)彈窗也就是我們常見的彈窗在屏幕中央，其優(yōu)勢是空間大，適用范圍廣，有現(xiàn)成的組件庫。但是為了有個順暢的交互效果，我們優(yōu)先考慮聯(lián)動彈窗和頁面設計的方式，如果其他兩種情況都不適合我們在考慮采用傳統(tǒng)的彈窗樣式。

滴答清單新增任務中的日期設置就是用的傳統(tǒng)彈窗樣式，盡管彈窗信息很多，但是用戶當前的目的是新增任務，如果用頁面就會對用戶目的造成干擾，因此采用彈窗的方式會更好。

4. 選用適合的交互樣式

當采用傳統(tǒng)的彈窗樣式時，為了解決我們提到的兩個問題，我們就需要選擇適合的交互樣式了。比如上面滴答清單的彈窗中，還有時間等選擇操作，這時候就不能用底部彈出的控件了，但我們可采用復合彈層的樣式，避免遮擋和彈窗跳動的問題。如下圖所示：

看到復合彈層的樣式，大家是否會覺得該方式比較復雜，但是體驗之后我發(fā)現(xiàn)操作特別順暢。同時細心的伙伴你會發(fā)現(xiàn)該交互樣式已越來越多的被使用。

微信轉賬輸入密碼頁面就是采用的傳統(tǒng)彈窗，在選擇支付方式時也是采用了復合彈層的交互效果，我們只需要一步選擇即可，相比底部互動的交互樣式節(jié)省了很多時間。

5. 畫重點

本文主要和大家分享了確定信息提交類彈窗設計樣式需要考慮的四個點。

a. 當信息較少且重要時，采用聯(lián)動彈窗進行設計，可以讓用戶專注在當前操作中，適合信息以輸入為主的情況。

b. 當信息較多時，根據(jù)用戶目的，優(yōu)先考慮是否設計為頁面。

c. 當以上兩種都不適合時，在考慮采用傳統(tǒng)彈窗。

d. 當確定采用傳統(tǒng)彈窗時，我們需要選用適合的交互樣式，例如采用復合彈窗的形式，讓操作更加順暢。

原創(chuàng)：?風箏KK

微信公眾號：海鹽舍