交互設計的好壞，影響着用戶的使用體驗。在衆多交互手勢中，有一匹黑馬，看着不那麼重要，卻嚴重影響着用戶的交互使用體驗，它就是——長按。看到這，你可能會好奇，為什麼它是黑馬？别着急，我們和作者一起去看看你就明白了。

手勢交互中的點擊、敲擊、滑動、拖拽等交互形式是作為當下互聯網最常見的操作方式，它們覆蓋用戶大部分的使用場景。

在當下每個交互手勢都在不同場景下有着成熟的使用規範，如向上/下滑動，在ios桌面編輯模式下，向上滑動意味着關閉一個正在運行的應用，像從左往右滑動則是返回應用的上一個層級。再比如按鈕大多數情況下隻能用于點擊，單次點擊後即可響應。

在這些交互方式都趨于固定的情況下，筆者認為唯獨長按的使用方法還正處于發展中。

本文将長按的交互方式分為快捷操作、數據收集、預覽、語音、吊起工具欄等五個緯度為大家分别剖析。

一、長按的交互流程

當下長按的交互方式可以針對任何控件進行交互，不管是圖片、字符、還是表格内容。反饋方式與單純的視覺反饋不同，除了視覺反饋，大多數會伴随着單次震動，從反饋上多了觸感的維度。

在某些遊戲交互中會伴随着音效刺激用戶的感官。而在大多數的産品中，用戶對某控件進行長按之後，該控件的層級則是成為當前頁面的最高層級，并伴随單次震動，同時觸發更多功能操作。

二、長按功能的類别

1. 快捷操作

交互方式：用戶通過長按吊起個性化快捷操作。

案例：IOS啟動台。

在啟動台長按應用吊起快捷操，作想必是大家最熟悉不過的。長按後除了吊起系統級别的編輯主屏、分享App、删除app以外，還會伴随該應用在特定場景下的快捷操作。而這些快捷操作又分為兩類，一種用戶的常用功能類似于微信的掃一掃、首付款以及我的二維碼。另一種則是符合産品戰略的功能，如小紅書的福利社，目的則是給予更多的曝光從而提升福利社的點擊率。

我們能清晰看到，ios的設計團隊将長按作為了用戶最高級别的操作。因為長按的操作成本從用戶習慣上高于單機與滑動。用戶針對應用長按後，該區域高亮，背景進入模糊狀态，同時調起操作。

當我們在使用長按作為交互方式時，一方面可以看到快捷操作的便捷，另一方吧也需要考慮長按s。

2. 數據收集

交互方式：長按吊起氣泡/彈窗，用戶确認。

案例：針對feed流長按，代表應用小紅書、淘寶、美團、拼多多。

feed流最重要的功能則是将最近一段時間用戶喜聞樂見的内容推薦給他，而不同平台的機制則是不同。

小紅書的是根據用戶對于筆記的互動率（點贊 關注 收藏）來判定用戶的喜好。電商類産品的權重則是偏向于用戶近期搜索以及加入購入車的商品。但僅通過用戶但行為還無法精準分析用戶喜好，此時就需要用戶介入。

用戶可以通過長按feed流對内容進行判斷，有趣的是長按後的選項中僅支持用戶不看該内容，用戶無法主觀選擇自己要看什麼内容。筆者推測是當用戶想要看某位創作者或者某個類型的内容，則會直接進行搜索，而不是針對單個内容進行判斷。

借鑒點：當我們從長按收集用戶數據的角度去思考時，我們可以将該交互作為創作者/設計師/商家與用戶溝通的一個窗口，我們不僅僅可以為用戶提供可點擊的操作。我們設想一下，當用戶在某些場景下，長按内容，将自己當下的感受直接反饋給創作者/商家或者設計師，這将是一條與評論區内容定位不同的留言。大家如果還有同樣的腦洞歡迎在評論區交流。

3. 預覽

交互方式：通過長按模組，針對内容進行快速預覽。

案例：優酷feed流/網易雲音樂歌單。

其實在用戶查看歌單的場景下，僅通過高質量的圖片以及出衆的文案，用戶依然不知道裡面的歌曲是否适合自己，所以網易雲推出了長按歌單提供預覽歌單的功能。

由于網易雲主打的評論社區也是用戶選取歌單的标準之一，因此在長按之後還未用戶提供了查看評論的快捷操作，這無疑是降低了用戶選擇個單的成本，不用點擊進入歌單然後再退出，反複切換頁面還會打斷用戶的連續性，很有可能用戶就迷失在了feed流中。

優酷針對feed流的長按設計則是更加巧妙，它不同于競品的長按判定用戶喜好，而是長按後直接預覽視頻，這在PC端類似于鼠标hover到視頻上，視頻開始預覽。

這樣的方式更優與之前的方式即用戶滑動feed流，将處于屏幕中間區域的視頻同時進行預覽，一方面這樣非常消耗後台資源，其次是會導緻用戶損失更多的流量。

通過長按預覽的方式可以更好的節省資源，用戶預覽的内容則更有針對性，暫時優酷是兩種方式都有保留，詳細在未來，會根據用戶數據反饋隻保留一種。

借鑒點：如果我們将長按預覽作為一種交互方式，那麼我們可以将該類交互方式運用到需要用戶點擊進入子層級查看詳情的場景下，如長按文件夾預覽文件内容，長按郵件預覽郵件内容，長按鍊接預覽搜索内容等等。這樣可以在我們實際工作中多一種交互可能性，也可以為用戶創造更多價值。

4. 吊起工具欄

交互方式：用戶長按空間，吊起工具欄。

案例：微信 / ios message /ios 相冊。

長按吊起工具欄在最初是為了替代PC時代下用戶鼠标右鍵的功能，但随着移動互聯網但發展，長按吊起工具欄不再是PC時代下留下來呆闆的功能，而是出現來類似于區分層級的交互方式。筆者認為将長按功能玩出花樣的是IOS的系統設計師們。大家如果想了解更多關于長按的交互方式也可以參考ios的系統設計。

在IOS的message中，當用戶長按某條短信可以吊起表情回複以及相關操作，值得學習的是位于信息頂部的工具欄設計，通過視覺處理，将信息與工具欄同時放在來同一個層級。

其次是IOS的相冊設計，用戶針對相冊進行長按，可預覽圖片以及吊起工具欄操作，這個方式主要解決了用戶在整理照片時反複點開查看的問題。隻需要長按即可在當且頁面完成操作，這樣保證來用戶的操作流暢。

在微信的單聊界面中我們也能看到長按手勢交互的存在，當用戶針對不同的信息如語音/文本/表情/英文等類别時，出現的工具欄也有所不同。如長按表情包則是提供收藏表情的操作，長按語音則是提供轉文字以及聽筒播放等操作。

長按後吊起的工具欄取決于用戶是使用場景，不得不說微信的交互設計做的是非常的細緻。

借鑒點：如果我們将長按吊起工具欄的思路運用到工作場景中時，同樣可以産生許多驚喜。比如在工具類産品中，可以将PC端右鍵的一部分操作通過長按吊起來實現，這樣可以減少相關工具欄控件吊起的功能如「…」。再比如我們可以給予用戶提供長按内容進行個性化設置的操作。

5. 語音輸入

交互方式：長按吊起語音輸入，松手則中斷輸入。

案例：即時通訊類軟件微信/QQ。

語音輸入在現有的互聯網産品中主要有兩種，最常見的是長按吊起語音輸入，松手則代表發送，此類交互方式更加适合于1v1的即時通信軟件。另一種則是點擊則開始錄制，無需長按，再次點擊則表示錄制完成，最具代表的則是駕車導航下的百度地圖。由于該場景用戶無法針對頁面進行長按，因此采用了單擊的交互方式。

即使是同類軟件下的微信和QQ，針對長按輸入的交互也有所不同。

首先是頁面樣式上，相較于QQ，微信更注重沉浸感，整個頁面做了暗處理。

在功能交互上，微信向左滑代表删除，右滑代表轉文案。而QQ在這裡正好相反，左滑代編轉文案，右滑則是删除。這兩者之間雖沒有明顯的好壞，但是筆者更傾向于QQ的交互方式。因為在用戶錄制過程中，如果放棄錄制，從左往右滑的操作正好與現在大多數産品的返回上級頁面正好對應，從這點上更符合用戶的心智。

小插曲

感謝文章粉絲朋友們的這段時間的關注與支持。筆者接下來會持續輸出産品設計的相關文章，設計羊皮卷系列也會持續更新。

我在參加人人都是産品經理2021年度作者評選，希望喜歡我的文章的朋友都能來支持我一下~

點擊下方鍊接進入我的個人參選頁面，點擊紅心即可為我投票。

每人最多可投3票，投票即有機會獲得百萬驚喜禮品&起點課堂千元豪禮哦！

投票傳送門：http://996.pm/z4ony

#專欄作家#

黑羊，人人都是産品經理專欄作家。互聯網産品交互設計師，主要針對B端設計。專注于語音交互、VR、智能硬件、翻譯等交互設計工作。擅長需求分析、用戶行為分析、用戶研究以及流程設計。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部