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

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

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

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

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

那么采用什么樣的設(shè)計(jì)方式才可以解決這些問題呢？這需要一開始設(shè)計(jì)時(shí)就選擇適當(dāng)?shù)臉邮剑覀兛梢詮乃膫€(gè)方面來考慮。

目錄

1、當(dāng)信息較少且重要時(shí)，采用聯(lián)動(dòng)彈窗

2、當(dāng)信息較多時(shí)，考慮是否可設(shè)計(jì)為頁面

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

4、選用適合的交互樣式

1. 當(dāng)信息較少且重要時(shí)，采用聯(lián)動(dòng)彈窗

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

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

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

2. 當(dāng)信息較多時(shí)，考慮是否可設(shè)計(jì)為頁面

當(dāng)信息較多時(shí)，我們需要判斷是否必須要用彈窗來設(shè)計(jì)，直接用頁面設(shè)計(jì)會不會更好呢？那么判斷的標(biāo)準(zhǔn)其實(shí)是由當(dāng)前用戶的目的來決定的。如下圖所示：

映客登錄界面采用彈窗的方式比較合適，因?yàn)橛脩舢?dāng)前的目的是看其他精彩的內(nèi)容，采用彈窗對用戶目的干擾較小。

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

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

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

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

4. 選用適合的交互樣式

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

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

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

5. 畫重點(diǎn)

本文主要和大家分享了確定信息提交類彈窗設(shè)計(jì)樣式需要考慮的四個(gè)點(diǎn)。

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

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

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

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

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

微信公眾號：海鹽舍