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

5 評論 3936 瀏覽 8 收藏 12 分鐘

在互聯網產品中,快捷方式隨處可見,比如B站的長按一鍵三連,本文總結了當中的兩大快捷方式:拖拽和雙擊,探索這兩種方式是如何使用以及設計的,并總結了3個實用步驟,幫助大家結合業務選擇合適的快捷方式。

文章大綱:

  1. 快捷方式之“拖拽”
  2. 快捷方式之“雙擊”
  3. 結合業務選擇合適的快捷方式

快捷方式在互聯網產品中隨處可見,我印象最深的是嗶哩嗶哩APP的一鍵三連,長按點贊就可以完成“點贊”“收藏”“投幣”三個動作。

本篇文章我也總結了2種常用的快捷交互方式:拖拽和雙擊,第一節和第二節咱們一起來探索這兩種快捷方式是如何使用的,第三節分享一個“快捷公式”,幫助我們在工作中結合業務選擇合適的快捷方式。

請重點關注第三節,前面兩節是專業知識,第三節是思維方式,面對其它快捷方式也可以遷移復用。

一、快捷方式之“拖拽”

拖拽被常用來解決3個問題:復制、刪除和移動位置。

1. 復制

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

例如復制文件夾、繪圖軟件復制圖層等,比起點擊鼠標右鍵后再點擊復制按鈕,拖拽會更加快。

拖拽復制??

2. 刪除

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

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

移動端拖拽刪除的常用方式是拖拽元素后,界面出現垃圾桶圖標,把元素拖拽到回收的位置松手即可刪除。

微信拖拽刪除圖片??

不過這種交互方式比較隱晦,比如微信的拖拽刪除可能很多年級稍大的人都發現不了,所以大多數產品還是選擇了常顯的刪除按鈕來處理。

拖拽刪除的交互更加適用于哪些場景呢?

抖音就有一個好案例。

抖音把拖拽刪除完美融合到了產品中,可以看看下面這張圖,這是抖音創建直播預告的界面,你可以把預告卡片放到你喜歡的位置上,也就是說拖拽這個動作是這個場景里的強動作,很容易被發現,此時再把拖拽刪除植入進來就不怕用戶發現不了。

抖音拖拽卡片??

從抖音的案例中也可以得出一個經驗,對于界面沒有常顯的交互方式,可以思考如何銜接場景使用戶更容易發現此交互。

例如移入元素顯示刪除這個交互,默認不顯示刪除按鈕,移入元素后才顯示按鈕。這個案例就把刪除交互銜接得很好,因為當用戶想試圖刪除此元素時,鼠標移入元素幾乎是一個必然發生的事情,不怕用戶找不到。

3. 移動位置

拖拽移動位置都不用多說,這已經是大眾習慣了,需要注意的是拖拽時如何讓用戶感知到拖拽。

例如把聊天消息的圖片拖拽給另一個好友時,圖片移動過去需要有明顯的意符(例如高亮)來讓用戶感知到拖拽釋放的區域。

擠壓定位??

線條定位??

二、雙擊

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

體驗了PC端和移動端的產品,發現雙擊操作一般用在這3個地方:放大/縮小、暫停/播放、點贊。

比較眼前一亮的是飛書,飛書會議里可以雙擊放大/縮小視頻畫面,比起點擊操作效率高了好幾倍。

三、結合業務選擇合適的快捷方式

了解拖拽和雙擊的常用設計方式,相當于幫我們存儲了糧草,但是什么時候用,怎么用,還需要結合實際業務來做考慮,為此我也總結了3個實用的步驟,讓你在實際設計中可以直接套用。

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

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

大家都看過直播,也發過彈幕吧,其實彈幕區就是一個小聊天室,發的彈幕就是聊天室消息,現在有一個助教的角色,職責是管理觀眾的消息,本來這個操作是在PC端完成的,電腦操作很方便。但是現在有一個場景,助教沒有配電腦,只能用手機完成消息管理操作,這是需求背景。

下面利用快捷公式來套用試試。

第一步:梳理流程

我們做設計其實就是為了解決用戶在完成一個任務過程中遇到的問題,所以一般需要先把用戶的任務流程梳理出來,所以咱們先梳理用戶流程。

需求:用戶用手機完成消息管理。

從需求中可以提煉出3個流程:回復消息、刪除消息、復制消息

然后把這3個流程一一拆解:

  1. 回復消息:長按消息→點擊回復→輸入回復內容→發送→回復成功
  2. 刪除消息:長按消息→點擊刪除→刪除成功
  3. 復制消息:長按消息→點擊復制→復制成功

其實如果我們按照拆解的流程來做,也不是不行,但是咱們不能止步于此,咱們可以進一步思考,還可以怎么優化讓流程更簡單效率更高。

第二步:刪減步驟

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

例如多余的點擊、移動端多余的手指移動、PC端多余的鼠標移動等等,都是可以考慮刪除的地方。

從第一個步驟中梳理出的流程可以發現,每個流程都要先把功能喚起后才能操作,比如回復,要先長按消息喚起回復按鈕后,再次點擊才能進入回復流程。

其實我們真正需要的是回復、刪除、復制這個最終功能,所以前面的點擊就是可以考慮刪除的動作。

多說一句,這里的刪除是從分析層面來說的刪除,設計中仍然可以保留。為什么呢?因為快捷操作意味著兩點,第一用戶還不習慣,第二存在交互比較隱晦的情況,用戶發現不了。

用戶不習慣這個問題好解決,只要這個操作能夠真正提升效率,用戶用著用著就習慣了。

交互比較隱晦的情況則需要我們多做引導和提示,幫助用戶養成習慣。

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

第三步:匹配快捷方式

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

拿回復舉例,常規的回復是長按消息→點擊回復→輸入回復消息→回復成功,第二個步驟中我們把要刪除的動作提煉了出來,即“長按”+“點擊回復”這兩個動作,下面就可以思考使用哪種快捷方式來完成這兩個動作。

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

雙擊消息即可回復消息。

但是這個交互動作比較隱晦,所以做了兩方面的兜底操作。

第一個是仍然保留長按出現回復按鈕的交互,第二個是給用戶引導,當用戶回復消息的時候提示用戶雙擊消息即可回復,幫助用戶養成快捷手勢的習慣。

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

最后回顧一下:

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

本文由 @餿面包 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. “用戶不習慣這個問題好解決,只要這個操作能夠真正提升效率,用戶用著用著就習慣了。”

    贊! 這是 UX 的核心~ 很多產品的用戶體驗很容易就失去這個核心訴求了。

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

    來自美國 回復
    1. 是這樣的,雙擊回復會有新手引導,并且不會只引導一次,文章中的圖片沒有體現出來。

      同時長按會出現回復、刪除等操作按鈕,這是比較常見的交互方式,之所以加一個雙擊,是因為助手在管理消息的時候長按操作比較慢,沒有雙擊來得干凈利落。

      來自廣東 回復
    2. 雙擊回復是以用戶想快速回復對應消息的需求為基礎吧?但是這個得具體產品、具體數據才可以知道是否好用。

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

      來自北京 回復
    3. 是個好想法,欣然接納~

      來自廣東 回復