設(shè)計(jì)彈窗的一點(diǎn)思路

時(shí)間：2023-07-22 13:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 13:36:01 來源：網(wǎng)站運(yùn)營(yíng)

設(shè)計(jì)彈窗的一點(diǎn)思路：

本文說什么？

由于彈窗設(shè)計(jì)形式豐富多彩，本文將會(huì)聊到“泛彈窗”的設(shè)計(jì)思路?！胺簭棿啊卑ú痪窒抻冢盒「?、側(cè)拉層、插入式面板、替換式面板、對(duì)話框等。也會(huì)提到新頁面或彈窗的選擇。

什么時(shí)候會(huì)用彈窗？

當(dāng)用戶對(duì)內(nèi)容進(jìn)行探索時(shí)，行為由“瀏覽多個(gè)”改變?yōu)椤熬湍硞€(gè)查看更多、編輯、新增、刪除等”。因此，設(shè)計(jì)師會(huì)需要使用不同類型的彈窗來匹配場(chǎng)景的切換。

如何抉擇？從如下兩點(diǎn)出發(fā)試試？

• 內(nèi)容量

能承載多少內(nèi)容，彈窗作為一個(gè)容器，義不容辭。因此，結(jié)合設(shè)計(jì)的功能內(nèi)容，從而設(shè)定：大小。

• 頓挫感

在用戶行為場(chǎng)景發(fā)生改變時(shí)的會(huì)考量使用彈窗，將影響或限制用戶行為，從而引導(dǎo)或提示用戶完成任務(wù)。因此，需考量前后場(chǎng)景的關(guān)系，從而設(shè)定出現(xiàn)和關(guān)閉的形式，是否能匹配恰當(dāng)?shù)念D挫感。




舉幾個(gè)栗子？那些常見場(chǎng)景....

---

No.1：“看看更多”，對(duì)頁面某點(diǎn)想進(jìn)一步了解。

上網(wǎng)看內(nèi)容，互聯(lián)網(wǎng)使命之一，從小浮層、到插入式面板、到側(cè)拉面板、到新頁面等等等等，各種“看”的場(chǎng)景和彈窗設(shè)計(jì)只有想不到，沒有做不到。




具體場(chǎng)景舉例：用戶瀏覽列表頁面，對(duì)某個(gè)內(nèi)容概述感興趣，然后想查看它的完整內(nèi)容。對(duì)比淘寶和本站的交互，就算相同場(chǎng)景，設(shè)計(jì)上也有差異化。

淘寶：查看搜索寶貝結(jié)果，對(duì)某個(gè)寶貝感興趣。此時(shí)，打開了瀏覽器新頁面，查看寶貝詳情。

本站：查看首頁問答列表，對(duì)某個(gè)問答感興趣，此時(shí)，某答案模塊展開，閱讀全文。

將瀏覽器新標(biāo)簽頁（淘寶栗子）和當(dāng)前模塊展開收起（本站栗子）的交互提煉后（如下圖），從內(nèi)容量和頓挫感進(jìn)行分析。




內(nèi)容量：

淘寶單個(gè)寶貝詳情：通常內(nèi)容量相當(dāng)大（包括視頻、n多圖），用新頁面承載豐富內(nèi)容格式相對(duì)穩(wěn)定，擴(kuò)展性相對(duì)高。

本站單個(gè)答案詳情：偶爾內(nèi)容較多（圖文結(jié)合），偶爾內(nèi)容較少（長(zhǎng)文字），當(dāng)前頁面展開收起承載即可。但當(dāng)列表頁過長(zhǎng)時(shí)，分段加載的交互會(huì)由于網(wǎng)絡(luò)因素，偶爾出現(xiàn)卡頓的情況；




頓挫感：

瀏覽器新標(biāo)簽頁：頓挫感強(qiáng)（由于從列表頁到詳情頁，是新開或刷新整個(gè)頁面內(nèi)容，關(guān)閉時(shí)通用關(guān)閉或刷新整個(gè)頁面內(nèi)容，因此視覺沖擊力較強(qiáng)）；

當(dāng)前模塊展開收起：頓挫感弱，且對(duì)多次查看列表頁面不同模塊的行為流的引導(dǎo)性較強(qiáng)（由于單個(gè)內(nèi)容詳情頁是插入到當(dāng)前位置，用戶可收起也可不收起，對(duì)當(dāng)前頁面其他內(nèi)容沒有影響）；




總的，對(duì)于查看詳情的功能。淘寶由于寶貝詳情頁內(nèi)容量相當(dāng)大，選擇了內(nèi)容承載性高，頓挫感較強(qiáng)的新頁面交互；本站由于單個(gè)答案內(nèi)容量有多有少，選擇了內(nèi)容承載性較弱，頓挫感較弱的展開收起的交互，但對(duì)多次查看列表內(nèi)容的行為有正向引導(dǎo)。

---

No.2：“確認(rèn)要?jiǎng)h除嗎？”逆向操作的二次提示。

再看個(gè)相當(dāng)相當(dāng)常見的交互，類似于下圖手淘上刪除訂單的設(shè)計(jì)....

內(nèi)容量：一句提示+確認(rèn)+取消，小浮層即可承載。

頓挫感：從頁面中心出現(xiàn)一個(gè)浮層且半蒙下方內(nèi)容，制造出強(qiáng)烈的視覺焦點(diǎn)，其次，關(guān)閉操作局限于“確認(rèn)”“取消”兩個(gè)按鈕區(qū)，頁面其他位置點(diǎn)觸無效，制造出強(qiáng)迫的操作引導(dǎo)。

然而，此類設(shè)計(jì)適用于所有的刪除場(chǎng)景嗎？

刪除場(chǎng)景真的都需要給用戶強(qiáng)烈的頓挫感，從而打斷當(dāng)前的用戶行為流嗎？

是不是個(gè)好問題？又看手淘購(gòu)物車中的刪除功能（如下圖），如此悄然無聲的刪除，不需二次確認(rèn)，甚至連toast“刪除成功”反饋也沒有。為什么？因?yàn)樗娴牟惶枰?。往?gòu)物車中加寶貝一鍵添加，那刪寶貝也一鍵刪除。（不管你們購(gòu)物車滿不滿，反正我購(gòu)物車一年四季都很容易滿）購(gòu)物車刪除操作似乎具有更多正向意義，為了能放入當(dāng)下更多想要的，刪了那些老早加入的現(xiàn)在不想要的。

Tips:設(shè)計(jì)彈窗前務(wù)必想想用戶的行為場(chǎng)景，此時(shí)此刻真的需要頓挫感嗎？為什么？如果真的必要，需要多重？

---

No.3：“寫想法、發(fā)微博、發(fā)照片、寫文章”，總之不想看了，有料要表達(dá)。

最后聊個(gè)較少卻很重要的場(chǎng)景，內(nèi)容輸出。

相比瀏覽和編輯，新內(nèi)容的創(chuàng)造相對(duì)需要花更多的精力。但這也恰好是很多產(chǎn)品期望用戶干的事，越多的用戶創(chuàng)造內(nèi)容，對(duì)產(chǎn)品粘性、活躍度都是相當(dāng)有幫助的。

猜下本站“寫下你的問題”所用彈窗是否必須通過關(guān)閉結(jié)束流程？點(diǎn)擊黑色蒙層能退出嗎？

同類場(chǎng)景的設(shè)計(jì)，本站的設(shè)計(jì)是可以的，單擊叉或黑色蒙層，都能輕松結(jié)束創(chuàng)建。就這么讓用戶做了一半不做了？不需要提示用戶內(nèi)容寫了一半的內(nèi)容還要不要？

設(shè)計(jì)彈窗的頓挫感確實(shí)能起到對(duì)用戶行為的引導(dǎo)和限制，但這不是我們要脅用戶必須做某件事的手段。很多時(shí)候我們不小心就會(huì)落入這樣的迷思：“我很想讓用戶這樣做，所以要這樣設(shè)計(jì)”。這時(shí)候，要么換個(gè)思路？如何讓用戶更輕松的去做我想要的？

因此，本站在這個(gè)功能上做了記憶能力。關(guān)閉彈窗后再打開，依舊能記住用戶上次問了一半的問題，刷新瀏覽器，也還是在的。




Tips：讓用戶很愿意達(dá)成我們的期待。

---

最最重要的最后再提下：

• 結(jié)合的“前后用戶行為場(chǎng)景關(guān)系”和“產(chǎn)品功能內(nèi)容”，設(shè)計(jì)彈窗的內(nèi)容量和頓挫感。
• 設(shè)計(jì)彈窗前務(wù)必想想用戶的行為場(chǎng)景，此時(shí)此刻真的需要頓挫感嗎？為什么？如果真的必要，需要多重？
• 設(shè)計(jì)彈窗的頓挫感確實(shí)能起到對(duì)用戶行為的引導(dǎo)和限制，但這不是我們要脅用戶必須做某件事的手段。讓用戶很愿意達(dá)成我們的期待。

好了，擱筆～