拖拽、雙擊用得好,青銅也能變王者!

5 評(píng)論 4016 瀏覽 8 收藏 12 分鐘

在互聯(lián)網(wǎng)產(chǎn)品中,快捷方式隨處可見(jiàn),比如B站的長(zhǎng)按一鍵三連,本文總結(jié)了當(dāng)中的兩大快捷方式:拖拽和雙擊,探索這兩種方式是如何使用以及設(shè)計(jì)的,并總結(jié)了3個(gè)實(shí)用步驟,幫助大家結(jié)合業(yè)務(wù)選擇合適的快捷方式。

文章大綱:

  1. 快捷方式之“拖拽”
  2. 快捷方式之“雙擊”
  3. 結(jié)合業(yè)務(wù)選擇合適的快捷方式

快捷方式在互聯(lián)網(wǎng)產(chǎn)品中隨處可見(jiàn),我印象最深的是嗶哩嗶哩APP的一鍵三連,長(zhǎng)按點(diǎn)贊就可以完成“點(diǎn)贊”“收藏”“投幣”三個(gè)動(dòng)作。

本篇文章我也總結(jié)了2種常用的快捷交互方式:拖拽和雙擊,第一節(jié)和第二節(jié)咱們一起來(lái)探索這兩種快捷方式是如何使用的,第三節(jié)分享一個(gè)“快捷公式”,幫助我們?cè)诠ぷ髦薪Y(jié)合業(yè)務(wù)選擇合適的快捷方式。

請(qǐng)重點(diǎn)關(guān)注第三節(jié),前面兩節(jié)是專(zhuān)業(yè)知識(shí),第三節(jié)是思維方式,面對(duì)其它快捷方式也可以遷移復(fù)用。

一、快捷方式之“拖拽”

拖拽被常用來(lái)解決3個(gè)問(wèn)題:復(fù)制、刪除和移動(dòng)位置。

1. 復(fù)制

單純依靠拖拽完成復(fù)制的操作比較少,一般會(huì)配合alt鍵使用,按住alt鍵后拖拽即可復(fù)制。

例如復(fù)制文件夾、繪圖軟件復(fù)制圖層等,比起點(diǎn)擊鼠標(biāo)右鍵后再點(diǎn)擊復(fù)制按鈕,拖拽會(huì)更加快。

拖拽復(fù)制??

2. 刪除

PC端拖拽刪除很常見(jiàn),一般是直接把刪除對(duì)象直接拖到垃圾桶或者回收站。

我主要想講一講移動(dòng)端的拖拽刪除,目前移動(dòng)端拖拽刪除還不算普及,但是用起來(lái)效率卻異常高,所以也找了幾個(gè)移動(dòng)端的案例。

移動(dòng)端拖拽刪除的常用方式是拖拽元素后,界面出現(xiàn)垃圾桶圖標(biāo),把元素拖拽到回收的位置松手即可刪除。

微信拖拽刪除圖片??

不過(guò)這種交互方式比較隱晦,比如微信的拖拽刪除可能很多年級(jí)稍大的人都發(fā)現(xiàn)不了,所以大多數(shù)產(chǎn)品還是選擇了常顯的刪除按鈕來(lái)處理。

拖拽刪除的交互更加適用于哪些場(chǎng)景呢?

抖音就有一個(gè)好案例。

抖音把拖拽刪除完美融合到了產(chǎn)品中,可以看看下面這張圖,這是抖音創(chuàng)建直播預(yù)告的界面,你可以把預(yù)告卡片放到你喜歡的位置上,也就是說(shuō)拖拽這個(gè)動(dòng)作是這個(gè)場(chǎng)景里的強(qiáng)動(dòng)作,很容易被發(fā)現(xiàn),此時(shí)再把拖拽刪除植入進(jìn)來(lái)就不怕用戶(hù)發(fā)現(xiàn)不了。

抖音拖拽卡片??

從抖音的案例中也可以得出一個(gè)經(jīng)驗(yàn),對(duì)于界面沒(méi)有常顯的交互方式,可以思考如何銜接場(chǎng)景使用戶(hù)更容易發(fā)現(xiàn)此交互。

例如移入元素顯示刪除這個(gè)交互,默認(rèn)不顯示刪除按鈕,移入元素后才顯示按鈕。這個(gè)案例就把刪除交互銜接得很好,因?yàn)楫?dāng)用戶(hù)想試圖刪除此元素時(shí),鼠標(biāo)移入元素幾乎是一個(gè)必然發(fā)生的事情,不怕用戶(hù)找不到。

3. 移動(dòng)位置

拖拽移動(dòng)位置都不用多說(shuō),這已經(jīng)是大眾習(xí)慣了,需要注意的是拖拽時(shí)如何讓用戶(hù)感知到拖拽。

例如把聊天消息的圖片拖拽給另一個(gè)好友時(shí),圖片移動(dòng)過(guò)去需要有明顯的意符(例如高亮)來(lái)讓用戶(hù)感知到拖拽釋放的區(qū)域。

擠壓定位??

線條定位??

二、雙擊

雙擊交互操作也是老朋友了,尤其是移動(dòng)端,很多APP都有雙擊操作的快捷手勢(shì),甚至有些操作只能用雙擊完成,例如抖音直播間點(diǎn)贊操作,我第一次用的時(shí)候還真沒(méi)找到點(diǎn)贊的按鈕…

體驗(yàn)了PC端和移動(dòng)端的產(chǎn)品,發(fā)現(xiàn)雙擊操作一般用在這3個(gè)地方:放大/縮小、暫停/播放、點(diǎn)贊。

比較眼前一亮的是飛書(shū),飛書(shū)會(huì)議里可以雙擊放大/縮小視頻畫(huà)面,比起點(diǎn)擊操作效率高了好幾倍。

三、結(jié)合業(yè)務(wù)選擇合適的快捷方式

了解拖拽和雙擊的常用設(shè)計(jì)方式,相當(dāng)于幫我們存儲(chǔ)了糧草,但是什么時(shí)候用,怎么用,還需要結(jié)合實(shí)際業(yè)務(wù)來(lái)做考慮,為此我也總結(jié)了3個(gè)實(shí)用的步驟,讓你在實(shí)際設(shè)計(jì)中可以直接套用。

快捷公式3步走:梳理流程 → 刪減步驟 → 匹配快捷方式

為了方便理解,我拿一個(gè)實(shí)際工作中的案例舉例,部分敏感信息做了修改。

大家都看過(guò)直播,也發(fā)過(guò)彈幕吧,其實(shí)彈幕區(qū)就是一個(gè)小聊天室,發(fā)的彈幕就是聊天室消息,現(xiàn)在有一個(gè)助教的角色,職責(zé)是管理觀眾的消息,本來(lái)這個(gè)操作是在PC端完成的,電腦操作很方便。但是現(xiàn)在有一個(gè)場(chǎng)景,助教沒(méi)有配電腦,只能用手機(jī)完成消息管理操作,這是需求背景。

下面利用快捷公式來(lái)套用試試。

第一步:梳理流程

我們做設(shè)計(jì)其實(shí)就是為了解決用戶(hù)在完成一個(gè)任務(wù)過(guò)程中遇到的問(wèn)題,所以一般需要先把用戶(hù)的任務(wù)流程梳理出來(lái),所以咱們先梳理用戶(hù)流程。

需求:用戶(hù)用手機(jī)完成消息管理。

從需求中可以提煉出3個(gè)流程:回復(fù)消息、刪除消息、復(fù)制消息

然后把這3個(gè)流程一一拆解:

  1. 回復(fù)消息:長(zhǎng)按消息→點(diǎn)擊回復(fù)→輸入回復(fù)內(nèi)容→發(fā)送→回復(fù)成功
  2. 刪除消息:長(zhǎng)按消息→點(diǎn)擊刪除→刪除成功
  3. 復(fù)制消息:長(zhǎng)按消息→點(diǎn)擊復(fù)制→復(fù)制成功

其實(shí)如果我們按照拆解的流程來(lái)做,也不是不行,但是咱們不能止步于此,咱們可以進(jìn)一步思考,還可以怎么優(yōu)化讓流程更簡(jiǎn)單效率更高。

第二步:刪減步驟

第二步是刪減步驟,也就是把一些繁瑣的動(dòng)作刪除。

例如多余的點(diǎn)擊、移動(dòng)端多余的手指移動(dòng)、PC端多余的鼠標(biāo)移動(dòng)等等,都是可以考慮刪除的地方。

從第一個(gè)步驟中梳理出的流程可以發(fā)現(xiàn),每個(gè)流程都要先把功能喚起后才能操作,比如回復(fù),要先長(zhǎng)按消息喚起回復(fù)按鈕后,再次點(diǎn)擊才能進(jìn)入回復(fù)流程。

其實(shí)我們真正需要的是回復(fù)、刪除、復(fù)制這個(gè)最終功能,所以前面的點(diǎn)擊就是可以考慮刪除的動(dòng)作。

多說(shuō)一句,這里的刪除是從分析層面來(lái)說(shuō)的刪除,設(shè)計(jì)中仍然可以保留。為什么呢?因?yàn)榭旖莶僮饕馕吨鴥牲c(diǎn),第一用戶(hù)還不習(xí)慣,第二存在交互比較隱晦的情況,用戶(hù)發(fā)現(xiàn)不了。

用戶(hù)不習(xí)慣這個(gè)問(wèn)題好解決,只要這個(gè)操作能夠真正提升效率,用戶(hù)用著用著就習(xí)慣了。

交互比較隱晦的情況則需要我們多做引導(dǎo)和提示,幫助用戶(hù)養(yǎng)成習(xí)慣。

例如飛書(shū)按住Ctrl+A的時(shí)候不會(huì)選中全文,而是需要連續(xù)按住Ctrl+A才能選中全文。這就是一個(gè)和大眾習(xí)慣的交互不同的地方,但是飛書(shū)在用戶(hù)按下Ctrl+A的時(shí)候會(huì)給用戶(hù)提示,我使用了幾次之后也就養(yǎng)成了習(xí)慣,習(xí)慣是可以培養(yǎng)的。

第三步:匹配快捷方式

最后一個(gè)步驟就是匹配快捷方式,也就是用快捷方式來(lái)代替刪減的步驟,達(dá)到提升操作效率的目的。

拿回復(fù)舉例,常規(guī)的回復(fù)是長(zhǎng)按消息→點(diǎn)擊回復(fù)→輸入回復(fù)消息→回復(fù)成功,第二個(gè)步驟中我們把要?jiǎng)h除的動(dòng)作提煉了出來(lái),即“長(zhǎng)按”+“點(diǎn)擊回復(fù)”這兩個(gè)動(dòng)作,下面就可以思考使用哪種快捷方式來(lái)完成這兩個(gè)動(dòng)作。

考慮到消息頁(yè)面存在大量上下翻頁(yè)瀏覽的行為,意味著點(diǎn)擊操作可能容易誤觸,所以最后決定使用雙擊來(lái)作為快捷回復(fù)的方式。

雙擊消息即可回復(fù)消息。

但是這個(gè)交互動(dòng)作比較隱晦,所以做了兩方面的兜底操作。

第一個(gè)是仍然保留長(zhǎng)按出現(xiàn)回復(fù)按鈕的交互,第二個(gè)是給用戶(hù)引導(dǎo),當(dāng)用戶(hù)回復(fù)消息的時(shí)候提示用戶(hù)雙擊消息即可回復(fù),幫助用戶(hù)養(yǎng)成快捷手勢(shì)的習(xí)慣。

通過(guò)3個(gè)步驟就可以把快捷方式給梳理出來(lái),其實(shí)做任何事情都有章可循,只要掌握了思路,就能舉一反三。

最后回顧一下:

  • 拖拽常用于復(fù)制、刪除、移動(dòng)位置
  • 雙擊常用于:放大/縮小、暫停/播放、點(diǎn)贊
  • 快捷公式3步走:梳理流程→刪減步驟→匹配快捷方式

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

題圖來(lái)自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. “用戶(hù)不習(xí)慣這個(gè)問(wèn)題好解決,只要這個(gè)操作能夠真正提升效率,用戶(hù)用著用著就習(xí)慣了。”

    贊! 這是 UX 的核心~ 很多產(chǎn)品的用戶(hù)體驗(yàn)很容易就失去這個(gè)核心訴求了。

    來(lái)自北京 回復(fù)
  2. 我怎么感覺(jué)雙擊回復(fù)更不好用呢 首先不容易發(fā)現(xiàn),移動(dòng)端的聊天記錄長(zhǎng)按更容易發(fā)現(xiàn)(受微信影響),很少有人雙擊消息把;其次回復(fù)功能使用雙擊的交互,那么刪除、多選等功能如何喚起呢

    來(lái)自美國(guó) 回復(fù)
    1. 是這樣的,雙擊回復(fù)會(huì)有新手引導(dǎo),并且不會(huì)只引導(dǎo)一次,文章中的圖片沒(méi)有體現(xiàn)出來(lái)。

      同時(shí)長(zhǎng)按會(huì)出現(xiàn)回復(fù)、刪除等操作按鈕,這是比較常見(jiàn)的交互方式,之所以加一個(gè)雙擊,是因?yàn)橹衷诠芾硐⒌臅r(shí)候長(zhǎng)按操作比較慢,沒(méi)有雙擊來(lái)得干凈利落。

      來(lái)自廣東 回復(fù)
    2. 雙擊回復(fù)是以用戶(hù)想快速回復(fù)對(duì)應(yīng)消息的需求為基礎(chǔ)吧?但是這個(gè)得具體產(chǎn)品、具體數(shù)據(jù)才可以知道是否好用。

      基于此還不如在消息后面加一個(gè)回復(fù)按鈕呢,具備通用性(釘釘好像就是),且一個(gè) icon 具備了減少操作(雙擊)和快捷(迅速回復(fù))兩個(gè)特點(diǎn)。

      來(lái)自北京 回復(fù)
    3. 是個(gè)好想法,欣然接納~

      來(lái)自廣東 回復(fù)