但隨著大屏手機的出現、逐漸追求個性化、高效率的操作等原因,使得不少人開始習慣用“摳邊返回”的方式返回上一頁:按住屏幕左側邊緣并拖動。
無需特意將手指移動到特定的左上角位置、再點擊back圖標,隨意在屏幕左側邊緣按住并拖拽 即可返回上一頁,方便又快捷。
而且現在越來越多的手勢,賦予了用戶更多的操作自由與使用效率,也讓互聯網產品的生命力進一步得到了強化,給每個產品的功能體驗帶來了更大的發揮空間。
下面帶大家欣賞一下,各個手勢里好玩、優秀的互聯網設計案例。
一、雙指捏合
1、捏一捏就能抱抱?
之前網易(抑)云上線了一個很暖心的交互,在某條歌曲評論上用雙指捏一下,就會彈出一個“抱抱”的動畫,寫下這條評論的用戶就能收到一個“抱抱”。
夠給那些生擁有悲觀情緒(特別是抑郁癥)的人求得心靈寄托,帶來一些溫暖、安慰,表達用戶情緒,也降低產品不良風評(網抑云)。
亮點在于:運用「環境貼切」原則,雙指捏合的手勢動作聯想到了現實里的「抱一抱」動作,更符合/表達出抱一抱的情感關懷和暖心情緒。
觀點總結:產品不應該是冷冰冰的,應該給用戶探索更多的樂趣和溫度,通過「用戶關懷」助力產品口碑與印象的提升。
2、捏一捏就能伸縮?
iOS的相冊圖片,可以使用雙指捏合or分離 即可對圖片進行放大、縮小瀏覽,快速查看圖片細節。
免去用戶「需要點擊圖片后,再去縮放」的操作鏈路,大大減少操作路徑。但該交互更多符合國外操作習慣,國內還是習慣采用【點擊后再放大】方式放大圖片。
亮點在于:用同一個模塊兼容多種交互/內容,免去用戶「需要點擊圖片后,再去縮放」的操作鏈路
要點總結:可思考用一定的快捷操作來滿足不同水平的用戶需求,允許用戶定制常用功能,比如【快捷鍵、重新操作、默認值等】
二、搖一搖
1、搖一搖就能加載內容?
愛奇藝在啟動頁上的信息展示上做了創新:只需“搖一搖”即可進入對應的廣告詳情和影視劇播放頁,拋離傳統的“點擊”模式
亮點在于:利用新鮮玩法來吸引更多用戶觀看廣告、影視綜視頻,減少對啟動頁內容的抵觸情緒與用戶流失
要點總結:學會用趣味性交互 / 新的設計手法吸引用戶目光,利用新鮮感的驅使引導用戶參與,減少流失
2、搖一搖才能拍照出片?
喵喵記賬有個設計挺有意思的,按下相機拍照后,需要晃動手機來使相片成像,才能看到影像慢慢顯現。
通過連接現實生活感受,使成像過程具備儀式感與趣味性。
亮點在于:不僅只在視覺上進行擬物化,更注重與現實中類似的交互操作,使之更具真實感。
要點總結:系統的一切表現和表述,應該盡可能貼近用戶所在的環境,比如【用戶語言、使用習慣、手勢操作、生活聯想/隱喻等】
三、拖拽
1、一拖就能發送照片?
QQ里的圖片發送很有意思,只要按住想要發送的圖片并往上拖動,松手即可發送。不用像傳統的’先選中圖片,再點擊發送按鈕’,特別方便
對于發送單張圖片來說,免去了常規的跳轉頁面調取相冊的多余步驟,大大提升操作成本
亮點在于:利用手指的黃金操作熱區,賦予更加快速、便捷的操作方式,大大減少行為負荷
要點總結:對用戶重要、常用的功能可以設置「快捷操作」,提升操作效率
2、頭像還能拖出來玩的?
在即刻的個人主頁里,可以隨意地拖拽、甩動自己的頭像。松手后頭像會根據慣性回到原處。期間還帶著殘影、原來的頭像位置會顯示一個小紅心。
亮點在于:利用頭像降低了個人中心帶來’冷冰冰’的感覺,豐富產品的可玩性與互動性
要點總結:設計有趣的隱藏彩蛋,能給用戶帶來驚喜并有效拉進之間的距離
四、雙擊
· 哪里需要點哪里?
早期在抖音上看視頻時,點擊或長按屏幕上的任何位置都會顯示【愛心圖標】與【操作浮層】。
大大減少用戶的操作成本(手指與目光的移動),突顯產品的個性化服務。
2、雙擊就能控制彈幕?
B站作為國內「視頻彈幕」的始發者,它的用戶喜愛程度與操作頻率也是極高的。因此只要兩個手指雙擊屏幕,就能快速開啟或關閉彈幕。
用戶可隨時隨地開啟或關閉彈幕,無需特意找到右下角的固定入口進行操作,大大減少操作成本。
亮點在于:免去用戶需要點擊特定區域的操作負荷,增加產品操作的舒適與自由度
要點總結:系統狀態可見性:讓用戶知道【自己在做什么、處在系統的什么位置等】,并做出適當的反饋
五、滑動
1、用標尺來控制數值?
Florence里的標尺設計得很有意思,通過第一人稱下的鏡頭視角,讓用戶感知當前標尺所對應的人物清晰程度,以此來控制標尺位置。
避免用戶掌握、控制不了合適標尺的位置,提升選擇效率
亮點在于:提供參照物可讓用戶有直觀的決策依據,減少操作成本
要點總結:任何讓用戶更改/選擇的地方,都應該明確地傳達出預覽效果
2、用拖拽來控制人物動作?
Florence是一款‘模擬敘事’小游戲,里面很多的交互動作都模擬了真實生活:
比如【刷牙】,需要左右滑動屏幕來模仿真實的刷牙動作;再如【做飯】也需要滑動平底鍋來模仿炒菜動作。
亮點在于:利用交互動作來推動情節的發展,讓玩家有真實的代入感,提升游戲的趣味性。
要點總結:模擬真實生活/環境的設計,能有效提升用戶的理解能力、產品趣味性
當然還有iOS微信上的‘刪除確認’,在原有的內容基礎上表達對用戶的二次確認,避免用戶手誤造成操作失誤,減少不必要的損失發生
六、隔空手勢
華為Mate30pro 有個「隔空手勢」的交互,可以在距離屏幕20cm-40cm內進行手勢操作,如隔空翻頁、上下滑動、隔空截屏等。
提升手機的使用體驗與操作效率,特別是邊吃東西 邊玩手機(追劇看小說等)
還有優酷HD上線了一個黑科技交互【隔空手勢】,可隔著屏幕用手勢做各種操作
如「播放/暫停、全屏/半屏、快進/退15秒、亮度調節、音量調節」等操作,讓用戶不點觸摸屏幕就能操作視頻。
亮點在于:讓用戶解放雙手,無需手指觸摸到屏幕即可控制手機,可減少很多衛生問題與操作成本。
要點總結:學會利用新技術來滿足更多、高層次的用戶訴求,通過一定的設計方式來滿足不同水平的用戶需求。
– END
最后,再酷炫再方便的手勢,最多也只是錦上添花、起方便快捷的作用而已,不可能完全替代‘點擊’的位置與作用。
正如正文所說:手勢交互只適合用對業務重要、用戶常用的場景中,可以起到四兩撥千斤的,切記不可為了酷炫而隨便添加。
以上老和對【手勢操作】的一些小總結,覺得認同的麻煩幫我【點贊/在看/收藏/轉發】,寫得不對的請輕點噴~
作者:和出此嚴
轉載請注明:學UI網》有沒有發現,‘點擊 ’開始變少而各種手勢越來越多了?
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司