有沒有發現,“點選”開始變少而各種手勢越來越多了?

語言: CN / TW / HK

編輯導語:不知道大家日常在使用手機APP時,有沒有發現這樣一個現象:“點選”的手勢變少了,取而代之的是互動滑動效果。這樣設計的意圖是什麼?本文對此展開分析,並列舉了一些各個手勢裡好玩、優秀的網際網路設計案例。

不知道大家有沒有發現,現在APP上的‘點選’現在越來越少了(除了在一些必要的操作行為/鏈路上),取而代之的是各式各樣的手勢互動。

就拿‘返回上一頁’來說:APP裡傳統的返回上一頁,點選螢幕左上角的‘Bcak’圖示,這是早期互聯網裡人們慣有的操作方式。

但隨著大屏手機的出現、逐漸追求個性化、高效率的操作等原因,使得不少人開始習慣用“摳邊返回”的方式返回上一頁:按住螢幕左側邊緣並拖動。

無需特意將手指移動到特定的左上角位置、再點選back圖示,隨意在螢幕左側邊緣按住並拖拽即可返回上一頁,方便又快捷。

而且現在越來越多的手勢,賦予了使用者更多的操作自由與使用效率,也讓網際網路產品的生命力進一步得到了強化,給每個產品的功能體驗帶來了更大的發揮空間。

下面帶大家欣賞一下,各個手勢裡好玩、優秀的網際網路設計案例。

01 雙指捏合

1. 捏一捏就能抱抱?

之前網易(抑)雲上線了一個很暖心的互動,在某條歌曲評論上用雙指捏一下,就會彈出一個“抱抱”的動畫,寫下這條評論的使用者就能收到一個“抱抱”。

夠給那些生擁有悲觀情緒(特別是抑鬱症)的人求得心靈寄託,帶來一些溫暖、安慰,表達使用者情緒,也降低產品不良風評(網抑雲)。

亮點在於:運用「環境貼切」原則,雙指捏合的手勢動作聯想到了現實裡的「抱一抱」動作,更符合/表達出抱一抱的情感關懷和暖心情緒。

觀點總結:產品不應該是冷冰冰的,應該給使用者探索更多的樂趣和溫度,通過「使用者關懷」助力產品口碑與印象的提升。

2. 捏一捏就能伸縮?

iOS的相簿圖片,可以使用雙指捏合or分離 即可對圖片進行放大、縮小瀏覽,快速檢視圖片細節。

免去使用者「需要點選圖片後,再去縮放」的操作鏈路,大大減少操作路徑。但該互動更多符合國外操作習慣,國內還是習慣採用【點選後再放大】方式放大圖片。

亮點在於:用同一個模組相容多種互動/內容,免去使用者「需要點選圖片後,再去縮放」的操作鏈路

要點總結:可思考用一定的快捷操作來滿足不同水平的使用者需求,允許使用者定製常用功能,比如【快捷鍵、重新操作、預設值等】

02 搖一搖

1. 搖一搖就能載入內容?

愛奇藝在啟動頁上的資訊展示上做了創新:只需“搖一搖”即可進入對應的廣告詳情和影視劇播放頁,拋離傳統的“點選”模式。

亮點在於:利用新鮮玩法來吸引更多使用者觀看廣告、影視綜影片,減少對啟動頁內容的牴觸情緒與使用者流失。

要點總結:學會用趣味性互動 / 新的設計手法吸引使用者目光,利用新鮮感的驅使引導使用者參與,減少流失。而且更多有趣、創意的設計案例,可上:有蛋案例youdananli.com近千個行業/大廠裡的優秀案例、知識模型。

2. 搖一搖才能拍照出片?

喵喵記賬有個設計挺有意思的,按下相機拍照後,需要晃動手機來使相片成像,才能看到影像慢慢顯現。

通過連線現實生活感受,使成像過程具備儀式感與趣味性。

亮點在於:不僅只在視覺上進行擬物化,更注重與現實中類似的互動操作,使之更具真實感。

要點總結:系統的一切表現和表述,應該儘可能貼近使用者所在的環境,比如【使用者語言、使用習慣、手勢操作、生活聯想/隱喻等】

03 拖拽

1. 一拖就能傳送照片?

QQ裡的圖片傳送很有意思,只要按住想要傳送的圖片並往上拖動,鬆手即可傳送。不用像傳統的’先選中圖片,再點擊發送按鈕’,特別方便。

對於傳送單張圖片來說,免去了常規的跳轉頁面調取相簿的多餘步驟,大大提升操作成本。

亮點在於:利用手指的黃金操作熱區,賦予更加快速、便捷的操作方式,大大減少行為負荷。

要點總結:對使用者重要、常用的功能可以設定「快捷操作」,提升操作效率。

2. 頭像還能拖出來玩的?

在即刻的個人主頁裡,可以隨意地拖拽、甩動自己的頭像。鬆手後頭像會根據慣性回到原處。期間還帶著殘影、原來的頭像位置會顯示一個小紅心。

亮點在於:利用頭像降低了個人中心帶來’冷冰冰’的感覺,豐富產品的可玩性與互動性。

要點總結:設計有趣的隱藏彩蛋,能給使用者帶來驚喜並有效拉進之間的距離。

04 雙擊

1. 哪裡需要點哪裡?

早期在抖音上看影片時,點選或長按螢幕上的任何位置都會顯示【愛心圖示】與【操作浮層】。

大大減少使用者的操作成本(手指與目光的移動),突顯產品的個性化服務。

2. 雙擊就能控制彈幕?

B站作為國內「影片彈幕」的始發者,它的使用者喜愛程度與操作頻率也是極高的。因此只要兩個手指雙擊螢幕,就能快速開啟或關閉彈幕。

使用者可隨時隨地開啟或關閉彈幕,無需特意找到右下角的固定入口進行操作,大大減少操作成本。

亮點在於:免去使用者需要點選特定區域的操作負荷,增加產品操作的舒適與自由度。

要點總結:系統狀態可見性:讓使用者知道【自己在做什麼、處在系統的什麼位置等】,並做出適當的反饋。而且更多有趣、創意的設計案例,可上:有蛋案例youdananli.com近千個行業/大廠裡的優秀案例、知識模型。

05 滑動

1. 用標尺來控制數值?

Florence裡的標尺設計得很有意思,通過第一人稱下的鏡頭視角,讓使用者感知當前標尺所對應的人物清晰程度,以此來控制標尺位置。

避免使用者掌握、控制不了合適標尺的位置,提升選擇效率。

亮點在於:提供參照物可讓使用者有直觀的決策依據,減少操作成本。

要點總結:任何讓使用者更改/選擇的地方,都應該明確地傳達出預覽效果。而且更多有趣、創意的設計案例,可上:有蛋案例youdananli.com近千個行業/大廠裡的優秀案例、知識模型。

2. 用拖拽來控制人物動作?

Florence是一款‘模擬敘事’小遊戲,裡面很多的互動動作都模擬了真實生活:比如【刷牙】,需要左右滑動螢幕來模模擬實的刷牙動作;再如【做飯】也需要滑動平底鍋來模仿炒菜動作。

亮點在於:利用互動動作來推動情節的發展,讓玩家有真實的代入感,提升遊戲的趣味性。

要點總結:模擬真實生活/環境的設計,能有效提升使用者的理解能力、產品趣味性。

當然還有iOS微信上的‘刪除確認’,在原有的內容基礎上表達對使用者的二次確認,避免使用者手誤造成操作失誤,減少不必要的損失發生。

06 隔空手勢

華為Mate30pro 有個「隔空手勢」的互動,可以在距離螢幕20cm-40cm內進行手勢操作,如隔空翻頁、上下滑動、隔空截圖等。

提升手機的使用體驗與操作效率,特別是邊吃東西 邊玩手機(追劇看小說等)。

還有優酷HD上線了一個黑科技互動【隔空手勢】,可隔著螢幕用手勢做各種操作。

如「播放/暫停、全屏/半屏、快進/退15秒、亮度調節、音量調節」等操作,讓使用者不點觸控式螢幕幕就能操作影片。

亮點在於:讓使用者解放雙手,無需手指觸控到螢幕即可控制手機,可減少很多衛生問題與操作成本。

要點總結:學會利用新技術來滿足更多、高層次的使用者訴求,通過一定的設計方式來滿足不同水平的使用者需求。

最後,再酷炫再方便的手勢,最多也只是錦上添花、起方便快捷的作用而已,不可能完全替代‘點選’的位置與作用。

正如正文所說:手勢互動只適合用對業務重要、使用者常用的場景中,可以起到四兩撥千斤的,切記不可為了酷炫而隨便新增。

#專欄作家#

和出此嚴,微信公眾號:和出此嚴,人人都是產品經理專欄作家。一枚在鵝廠成長中的“90後老幹部”,主產各種接地氣的互動/產品乾貨。以做產品的方式,寫好每一篇文章。

本文原創釋出於人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash,基於CC0協議。

給作者打賞,鼓勵TA抓緊創作!