本文將為大家介紹如何在設(shè)計(jì)上提升產(chǎn)品的使用體驗(yàn)，讓用戶更加愿意更新產(chǎn)品。

一個(gè)新產(chǎn)品上線之后都會(huì)不斷迭代新的版本，版本更新時(shí)通常會(huì)使用彈窗形式，這類型的彈窗是屬于模態(tài)彈窗，會(huì)打斷用戶當(dāng)前的操作行為，強(qiáng)制用戶必須進(jìn)行操作回應(yīng)，才可以進(jìn)行其他操作，這種行為一定程度上造成用戶情緒的不爽，降低用戶對(duì)產(chǎn)品的好感。那我們?nèi)绾卧谠O(shè)計(jì)上提升產(chǎn)品的使用體驗(yàn)，讓用戶更加愿意更新呢？

1. 巧妙的布局

更新彈窗頁面，用戶只有兩種操作選擇，更新或關(guān)閉，而我們產(chǎn)品的目的是讓用戶去更新，在設(shè)計(jì)頁面時(shí)設(shè)計(jì)師需要有意引導(dǎo)用戶去操作更新按鈕。

1.1 常規(guī)卡片形式

這是很常見的三種更新彈窗類型，布局形式上均是插畫+文字+按鈕。先做一下簡(jiǎn)單比較分析：

• 第一種彈窗形式，“立即更新版本”按鈕設(shè)計(jì)上和第二種方式一樣，而關(guān)閉按鈕放在卡片下方，用戶很容易會(huì)點(diǎn)擊到，同時(shí)會(huì)讓用戶在短時(shí)間內(nèi)去決定是否更新版本，加大心理層面的壓力。
• 第二種彈窗形式，“立即升級(jí)”按鈕放在底部，是單手操作很容易觸及的區(qū)域，使用色塊+文字的展示方式是非常顯眼的，將關(guān)閉按鈕放在了彈窗卡片右上角位置，隱藏在了頂部的插畫里，用戶不易發(fā)現(xiàn)且不易點(diǎn)擊。
• 第三種彈窗形式，使用“更新”“跳過”文字形式來操作，通過顏色上的區(qū)別來引導(dǎo)用戶去進(jìn)行更新，文字形式的按鈕在視覺上是弱于色塊+文字形式。

通過上面的分析，顯然第二種彈窗形式是最合適的設(shè)計(jì)方案。接下來，對(duì)第二種彈窗形式運(yùn)用到的設(shè)計(jì)理論進(jìn)行拆解。

1.2 拇指熱區(qū)

上圖是陌陌App更新彈窗的拇指熱區(qū)，根據(jù)手機(jī)專家 Steve Hoober 的一項(xiàng)研究，以拇指熱圖的形式來顯示出操作手機(jī)屏幕不同區(qū)域難易程度，分為舒適區(qū)、可以觸及區(qū)、無法觸及區(qū)。設(shè)計(jì)彈窗頁面時(shí)，可以將導(dǎo)向用戶升級(jí)的操作放在舒適區(qū)，相反導(dǎo)向的可以放在無法觸及區(qū)。

格式塔理論

格式塔理論（Gestalt）強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于部分之和，意識(shí)不等于感覺元素的集合，行為不等于反射弧的循環(huán)。共包括7個(gè)原則，接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同命運(yùn)。

陌陌App更新彈窗運(yùn)用到了主體/背景原則、接近性原則、相似性原則。

主體/背景原則，使用半透明背景遮擋來弱化底層內(nèi)容信息，更新彈窗處于用戶的第一視覺層級(jí)，從而達(dá)到主次信息的區(qū)分。

接近性原則、相似性原則，彈窗內(nèi)的插畫、文字內(nèi)容、按鈕的相對(duì)距離，及其與彈窗的邊距大小，讓用戶感知到這是三個(gè)不同的信息內(nèi)容。文字內(nèi)容部分，標(biāo)題、正文通過距離及字號(hào)顏色的不同來區(qū)分信息的主次，這里又涉及到了另一個(gè)原則，涉及四大基本原則中的對(duì)比。

1.3 異形卡片形式

常規(guī)彈窗是以矩形的形狀進(jìn)行設(shè)計(jì)，用戶對(duì)于同種類型的已經(jīng)審美疲勞，看到類似彈窗會(huì)略過，并不能吸引用戶多大的注意力。

設(shè)計(jì)時(shí)嘗試使用從另一些角度考慮，像是第一個(gè)彈窗以星球火箭為插圖背景，契合了內(nèi)容標(biāo)題“主銀，發(fā)現(xiàn)新大陸”，在形式上比較新穎，一定程度上可以吸引用戶的視線。

第二個(gè)彈窗使用信封郵件的展示形式，和傳統(tǒng)形式打開信封的情景相似，容易引起用戶的共性經(jīng)歷，調(diào)起用戶的情感。用戶對(duì)產(chǎn)品會(huì)更有信任感，也會(huì)更加愿意更新。

2. 文案的魅力

• WiFi環(huán)境下更新不到30秒哦~
• 90%的小伙伴已經(jīng)更新升級(jí)，你還在等什么？
• 省流量升級(jí)（21.8M 11.6M）
• 恭喜獲得內(nèi)測(cè)體驗(yàn)資格，搶先體驗(yàn)新版內(nèi)容
• 「全新UI」輕盈靈動(dòng)，給你更清爽的視覺感受、更便捷的操作體驗(yàn)
• 【體驗(yàn)新升級(jí)】修復(fù)已知bug，追劇觀影流暢加倍
• ……

這些都是我整理收集的一些市面上產(chǎn)品更新時(shí)使用的優(yōu)秀文案，當(dāng)更新彈窗內(nèi)容信息出現(xiàn)這些文字的時(shí)候，會(huì)更加吸引用戶去更新。這些文案并不是簡(jiǎn)單的直接闡述更新的功能點(diǎn)，而是點(diǎn)到用戶的痛點(diǎn)。

WiFi環(huán)境下更新不到30秒哦~，提醒用戶更新的用時(shí)很短，不需要等待很多時(shí)間，減少用戶的顧慮。

省流量升級(jí)（21.8M 11.6M），不僅寫出此次版本更新的文件大小，而且和原本更新需要的文件進(jìn)行對(duì)比（更少了）。這種情況下，給了用戶一個(gè)心理預(yù)期，可以預(yù)計(jì)更新時(shí)間的。同時(shí)，更新所需要的流量還少了，給了用戶一種占便宜的感覺。達(dá)到了產(chǎn)品目的，也提升了用戶對(duì)于產(chǎn)品的好感。

90%的小伙伴已經(jīng)更新升級(jí)，你還在等什么？這是利用從眾心理，很多人選擇的好的概率是非常大的，同時(shí)也暗示用戶進(jìn)行這個(gè)更新操作是安全的。

這里的痛點(diǎn)是用戶不知道更新之后可以得到什么，更新需要等待需要多長時(shí)間，更新需要耗費(fèi)多少流量，簡(jiǎn)要來說就是：得到價(jià)值、所用時(shí)間、耗費(fèi)流量，在思考版本更新文案的時(shí)候可以著重從這三個(gè)方面出發(fā)考慮。得到價(jià)值不僅僅是全新功能、全新視覺，還可以是尊貴感優(yōu)越感體現(xiàn)這些心理層面的感受，等等。

3. 貼心的交互

更新功能可以從兩個(gè)點(diǎn)設(shè)計(jì)來提高產(chǎn)品的交互體驗(yàn)，我會(huì)以實(shí)例來說明這部分內(nèi)容。

3.1 充分從實(shí)際場(chǎng)景中的用戶角度出發(fā)，用戶關(guān)閉更新彈窗之后，進(jìn)行二次提示

這里可以支付寶為例：

支付寶更新彈窗，點(diǎn)擊右上角關(guān)閉之后，會(huì)在首頁出現(xiàn)一個(gè)更新提示條，這個(gè)提示是一直存在的，但是用戶可以手動(dòng)關(guān)閉。

這里以一個(gè)使用場(chǎng)景來猜測(cè)一下支付寶這樣設(shè)計(jì)原因，小林早上上班途中去便利店買了一份早餐套餐，柜臺(tái)前結(jié)賬時(shí)打開支付寶出示付款碼給店員，但是打開之后首頁彈出了一個(gè)版本更新彈窗，在這種情況下她點(diǎn)擊關(guān)閉了彈窗，出示付款碼完成支付。

類似這種場(chǎng)景的還有很多，用戶通常是需要使用到App才會(huì)打開，而彈窗直接打斷了當(dāng)前的操作，此時(shí)用戶更多的選擇關(guān)閉彈窗。

支付寶這里設(shè)計(jì)了一個(gè)更加合適的交互方案，在用戶關(guān)閉更新彈窗，在首頁出現(xiàn)一個(gè)版本更新的快捷入口提示，充分的考慮到了實(shí)際使用場(chǎng)景下的產(chǎn)品交互，設(shè)身處地的為用戶考慮，從微小細(xì)節(jié)方面提升產(chǎn)品的使用體驗(yàn)。

3.2 更新之后，進(jìn)入App首頁引導(dǎo)用戶快速的了解更新的功能

上圖是馬蜂窩App更新之后的新功能引導(dǎo)。通過這樣的設(shè)計(jì)交互方式，用戶能夠了解到新功能及一些功能的位置變化等等。這樣設(shè)計(jì)的好處是在進(jìn)行更新操作之后，用戶可以收到反饋，幫助用戶更深入的了解產(chǎn)品功能，可以加深用戶對(duì)于產(chǎn)品的印象。

這是我對(duì)更新彈窗的一些理解，歡迎有不同想法的小伙伴評(píng)論區(qū)交流。

作者：小葫圖，微信公眾號(hào)：YI易設(shè)計(jì)

本文由 @YI易設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議