原文作者：風(fēng)箏KK

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

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

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

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

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

那么采用什么樣的設(shè)計(jì)方式才可以解決這些問(wèn)題呢？這需要一開(kāi)始設(shè)計(jì)時(shí)就選擇適當(dāng)?shù)臉邮?#xff0c;我們可以從四個(gè)方面來(lái)考慮。

目錄

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

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

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

4、選用適合的交互樣式

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

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

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

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

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

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

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

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

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

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

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

四、選用適合的交互樣式

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

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

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

五、畫(huà)重點(diǎn)

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

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

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

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

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

---

總結(jié)

以上是生活随笔為你收集整理的弹窗页面交互_UI进阶知识-信息提交类弹窗该如何设计？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。