案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

2 評(píng)論 4510 瀏覽 33 收藏 9 分鐘

深度思考用戶體驗(yàn)——設(shè)計(jì)如何讓用戶能同時(shí)做好多件事?這篇文章作者從分割屏幕布局、再續(xù)操作容易度、忽略非重要操作三大方面描述目前一些設(shè)計(jì)的科學(xué)性,為你帶來設(shè)計(jì)靈感。推薦對(duì)交互設(shè)計(jì)感興趣的童鞋閱讀。

時(shí)間對(duì)于我們每個(gè)人來說都極為重要和珍貴。隨著生活節(jié)奏的加速,很多產(chǎn)品也都開始注重和考慮對(duì)于用戶時(shí)間的節(jié)省和分配。本文重點(diǎn)分享三種在交互設(shè)計(jì)中幫助用戶「同時(shí)做幾件事」的設(shè)計(jì)方法,以及其對(duì)應(yīng)的優(yōu)秀案例:

  • 分割屏幕的布局
  • 更容易再續(xù)操作
  • 忽略非重要操作

希望會(huì)為你帶來更多的設(shè)計(jì)靈感。

01 分割屏幕的布局

通過將屏幕的布局進(jìn)行分割處理,可同時(shí)呈現(xiàn)多項(xiàng)內(nèi)容,讓用戶自由選擇任務(wù)主次,同時(shí)處理多項(xiàng)任務(wù)。分屏設(shè)計(jì)很常見,但其中的體驗(yàn)細(xì)節(jié)卻依舊值得研究和優(yōu)化。

案例1

微信在 Pad 端的分屏布局考慮得很周到,看微信視頻時(shí)支持分屏功能,還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機(jī)尺寸,體驗(yàn)順暢,看視頻、接微信兩不誤:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例 2

bilibili 在移動(dòng)端的視頻通過小窗模式可以不間斷播放,不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式,正在播的視頻,在被臨時(shí)打斷退出視頻后,還可以用音頻的方式繼續(xù)播放:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例 3

微信的新功能,在你閱讀文章時(shí)依舊能看到朋友發(fā)來的微信消息,可以直接在當(dāng)前頁面回復(fù)消息,避免你在看文章時(shí)閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”,一會(huì)兒再做處理:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例4

微信視頻號(hào)改版后,點(diǎn)擊視頻號(hào)下方的博主名稱和頭像,下方彈窗會(huì)彈出該博主的主頁和其他視頻,而當(dāng)前正在播放的視頻會(huì)漸漸呈現(xiàn)小屏播放,視頻內(nèi)容不會(huì)被遮擋,既不影響觀看,也不影響用戶探索該博主的其他視頻內(nèi)容:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例 5

在微信訂閱號(hào)中展示的視頻內(nèi)容可以通過劃到右下角變成小窗播放音頻,既可以聽內(nèi)容,也不影響你繼續(xù)瀏覽訂閱號(hào)的其他內(nèi)容:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

02 更容易再續(xù)操作

產(chǎn)品可以讓操作更容易被用戶管理和掌控,在被打斷后很容易被用戶重新再續(xù),給用戶足夠的掌控感。在一些特殊情況下,幾件事可以交替、穿插地處理,同時(shí)進(jìn)行。

案例 1

釘釘?shù)囊苿?dòng)端浮窗功能,向右滑動(dòng)退出正在操作的頁面時(shí),就會(huì)出現(xiàn)添加浮窗區(qū)域,用于收錄未做完的操作。同時(shí)顯示出已添加浮窗的內(nèi)容數(shù)量,最多添加 5 個(gè):

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例2

微信的浮窗功能也可以幫助用戶更快捷地收錄未及時(shí)閱讀的內(nèi)容,在打開時(shí)還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時(shí)間來閱讀長(zhǎng)篇文章,可以更合理地掌控閱讀節(jié)奏:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例3

微信讀書 App 會(huì)在你跳讀到其他章節(jié)時(shí),在頁面下方顯示“返回原進(jìn)度”的按鈕,方便你在跳讀后回來繼續(xù)閱讀:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例4

網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點(diǎn)開一封郵件,頁面上方會(huì)增加一個(gè)類似瀏覽器標(biāo)簽頁的 Tab,你可以通過它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時(shí),同時(shí)又收到了其他的新郵件,去查看新郵件之后,可以通過 Tab 直接回到郵件編輯頁面,繼續(xù)編寫剛才的郵件:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例5

使用釘釘發(fā)起會(huì)議邀請(qǐng),如果中途退出,系統(tǒng)幫助你自動(dòng)保存。再發(fā)起會(huì)議邀請(qǐng)時(shí)也會(huì)給出上次操作的提示,幫你續(xù)寫內(nèi)容:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

03 忽略非重要操作

用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù),將更多的時(shí)間用在其他事情而非無法控制的等待上。

案例1

iOS 系統(tǒng)中,當(dāng)你在不同 App 之間傳遞文件時(shí),如果文件過大,彈窗的“取消”按鈕會(huì)在幾秒鐘之后變成“隱藏”,用戶點(diǎn)擊后可以繼續(xù)做其他操作,并不妨礙后臺(tái)的文件傳輸。

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例2

微信在接收超大文件時(shí),增加了“發(fā)送給朋友”的選項(xiàng),你不必等待文件在自己這邊下載完成后再發(fā)送,可以直接發(fā)送源文件給對(duì)方,同時(shí)下載:

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

案例3

微信撥打語音的界面,在等待好友接聽的過程中,你可以看到對(duì)方朋友圈的動(dòng)態(tài),緩解無聊的等待,也為即將進(jìn)行的語音聊天提供了話題

案例錦囊|設(shè)計(jì)怎樣讓用戶「同時(shí)」做好多件事?

專欄作家

元堯,微信公眾號(hào):長(zhǎng)弓小子,人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗(yàn)設(shè)計(jì)師,清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負(fù)責(zé)國(guó)內(nèi)最大開源組件庫(kù)Ant Design組件的設(shè)計(jì)和運(yùn)營(yíng)工作,目前負(fù)責(zé)國(guó)際業(yè)務(wù)線B端產(chǎn)品體驗(yàn)設(shè)計(jì)和組件庫(kù)的搭建工作。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 最后那個(gè)微信打語音的界面我也沒見過

    來自北京 回復(fù)
  2. 為啥微信那個(gè)看文章能在當(dāng)前頁面回復(fù)朋友消息的功能我從來都沒有見過???

    來自上海 回復(fù)