知其然還得知其所以然，教你用 3 步法選出合適的快捷交互方式~

文章大綱：

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

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

更多 bilibili 的設計細節(jié)：

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

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

1. 快捷方式之“拖拽”

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

① 復制

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

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

拖拽復制

② 刪除

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

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

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

微信拖拽刪除圖片

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

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

抖音就有一個好案例。

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

抖音拖拽卡片

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

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

③ 移動位置

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

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

擠壓定位

線條定位

2. 雙擊

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

體驗了 PC 端和移動端的產品，發(fā)現(xiàn)雙擊操作一般用在這 3 個地方：

放大/縮小、暫停/播放、點贊

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

3. 結合業(yè)務選擇合適的快捷方式

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

快捷公式 3 步走：

梳理流程 → 刪減步驟 → 匹配快捷方式

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

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

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

第一步：梳理流程

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

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

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

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

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

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

第二步：刪減步驟

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

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

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

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

多說一句，這里的刪除是從分析層面來說的刪除，設計中仍然可以保留。為什么呢？

因為快捷操作意味著兩點，第一用戶還不習慣，第二存在交互比較隱晦的情況，用戶發(fā)現(xiàn)不了。

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

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

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

第三步：匹配快捷方式

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

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

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

雙擊消息即可回復消息。

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

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

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

最后回顧一下：

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

歡迎關注作者的微信公眾號：餿面包