有沒(méi)有發(fā)現(xiàn),‘點(diǎn)擊 ’開(kāi)始變少而各種手勢(shì)越來(lái)越多了?

2022-9-29    seo達(dá)人


圖片

但隨著大屏手機(jī)的出現(xiàn)、逐漸追求個(gè)性化、高效率的操作等原因,使得不少人開(kāi)始習(xí)慣用“摳邊返回”的方式返回上一頁(yè):按住屏幕左側(cè)邊緣并拖動(dòng)。

圖片

無(wú)需特意將手指移動(dòng)到特定的左上角位置、再點(diǎn)擊back圖標(biāo),隨意在屏幕左側(cè)邊緣按住并拖拽 即可返回上一頁(yè),方便又快捷。

而且現(xiàn)在越來(lái)越多的手勢(shì),賦予了用戶更多的操作自由與使用效率,也讓互聯(lián)網(wǎng)產(chǎn)品的生命力進(jìn)一步得到了強(qiáng)化,給每個(gè)產(chǎn)品的功能體驗(yàn)帶來(lái)了更大的發(fā)揮空間。

圖片

下面帶大家欣賞一下,各個(gè)手勢(shì)里好玩、優(yōu)秀的互聯(lián)網(wǎng)設(shè)計(jì)案例。

圖片

 

一、雙指捏合

1、捏一捏就能抱抱?

之前網(wǎng)易(抑)云上線了一個(gè)很暖心的交互,在某條歌曲評(píng)論上用雙指捏一下,就會(huì)彈出一個(gè)“抱抱”的動(dòng)畫,寫下這條評(píng)論的用戶就能收到一個(gè)“抱抱”。

夠給那些生擁有悲觀情緒(特別是抑郁癥)的人求得心靈寄托,帶來(lái)一些溫暖、安慰,表達(dá)用戶情緒,也降低產(chǎn)品不良風(fēng)評(píng)(網(wǎng)抑云)。

圖片

亮點(diǎn)在于:運(yùn)用「環(huán)境貼切」原則,雙指捏合的手勢(shì)動(dòng)作聯(lián)想到了現(xiàn)實(shí)里的「抱一抱」動(dòng)作,更符合/表達(dá)出抱一抱的情感關(guān)懷和暖心情緒。

觀點(diǎn)總結(jié):產(chǎn)品不應(yīng)該是冷冰冰的,應(yīng)該給用戶探索更多的樂(lè)趣和溫度,通過(guò)「用戶關(guān)懷」助力產(chǎn)品口碑與印象的提升。

 

2、捏一捏就能伸縮?

iOS的相冊(cè)圖片,可以使用雙指捏合or分離 即可對(duì)圖片進(jìn)行放大、縮小瀏覽,快速查看圖片細(xì)節(jié)。

圖片

免去用戶「需要點(diǎn)擊圖片后,再去縮放」的操作鏈路,大大減少操作路徑。但該交互更多符合國(guó)外操作習(xí)慣,國(guó)內(nèi)還是習(xí)慣采用【點(diǎn)擊后再放大】方式放大圖片。

亮點(diǎn)在于:用同一個(gè)模塊兼容多種交互/內(nèi)容,免去用戶「需要點(diǎn)擊圖片后,再去縮放」的操作鏈路

要點(diǎn)總結(jié):可思考用一定的快捷操作來(lái)滿足不同水平的用戶需求,允許用戶定制常用功能,比如【快捷鍵、重新操作、默認(rèn)值等】

 

二、搖一搖

1、搖一搖就能加載內(nèi)容?

愛(ài)奇藝在啟動(dòng)頁(yè)上的信息展示上做了創(chuàng)新:只需“搖一搖”即可進(jìn)入對(duì)應(yīng)的廣告詳情和影視劇播放頁(yè),拋離傳統(tǒng)的“點(diǎn)擊”模式

圖片

亮點(diǎn)在于:利用新鮮玩法來(lái)吸引更多用戶觀看廣告、影視綜視頻,減少對(duì)啟動(dòng)頁(yè)內(nèi)容的抵觸情緒與用戶流失

要點(diǎn)總結(jié):學(xué)會(huì)用趣味性交互 / 新的設(shè)計(jì)手法吸引用戶目光,利用新鮮感的驅(qū)使引導(dǎo)用戶參與,減少流失

 

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

喵喵記賬有個(gè)設(shè)計(jì)挺有意思的,按下相機(jī)拍照后,需要晃動(dòng)手機(jī)來(lái)使相片成像,才能看到影像慢慢顯現(xiàn)。

通過(guò)連接現(xiàn)實(shí)生活感受,使成像過(guò)程具備儀式感與趣味性。

圖片

亮點(diǎn)在于:不僅只在視覺(jué)上進(jìn)行擬物化,更注重與現(xiàn)實(shí)中類似的交互操作,使之更具真實(shí)感。

要點(diǎn)總結(jié):系統(tǒng)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境,比如【用戶語(yǔ)言、使用習(xí)慣、手勢(shì)操作、生活聯(lián)想/隱喻等】

 

三、拖拽

1、一拖就能發(fā)送照片?

QQ里的圖片發(fā)送很有意思,只要按住想要發(fā)送的圖片并往上拖動(dòng),松手即可發(fā)送。不用像傳統(tǒng)的’先選中圖片,再點(diǎn)擊發(fā)送按鈕’,特別方便

對(duì)于發(fā)送單張圖片來(lái)說(shuō),免去了常規(guī)的跳轉(zhuǎn)頁(yè)面調(diào)取相冊(cè)的多余步驟,大大提升操作成本

圖片

亮點(diǎn)在于:利用手指的黃金操作熱區(qū),賦予更加快速、便捷的操作方式,大大減少行為負(fù)荷

要點(diǎn)總結(jié):對(duì)用戶重要、常用的功能可以設(shè)置「快捷操作」,提升操作效率

 

2、頭像還能拖出來(lái)玩的?

在即刻的個(gè)人主頁(yè)里,可以隨意地拖拽、甩動(dòng)自己的頭像。松手后頭像會(huì)根據(jù)慣性回到原處。期間還帶著殘影、原來(lái)的頭像位置會(huì)顯示一個(gè)小紅心。

圖片

亮點(diǎn)在于:利用頭像降低了個(gè)人中心帶來(lái)’冷冰冰’的感覺(jué),豐富產(chǎn)品的可玩性與互動(dòng)性

要點(diǎn)總結(jié):設(shè)計(jì)有趣的隱藏彩蛋,能給用戶帶來(lái)驚喜并有效拉進(jìn)之間的距離

 

四、雙擊

· 哪里需要點(diǎn)哪里?

早期在抖音上看視頻時(shí),點(diǎn)擊或長(zhǎng)按屏幕上的任何位置都會(huì)顯示【愛(ài)心圖標(biāo)】與【操作浮層】。

大大減少用戶的操作成本(手指與目光的移動(dòng)),突顯產(chǎn)品的個(gè)性化服務(wù)。

圖片

 

2、雙擊就能控制彈幕?

B站作為國(guó)內(nèi)「視頻彈幕」的始發(fā)者,它的用戶喜愛(ài)程度與操作頻率也是極高的。因此只要兩個(gè)手指雙擊屏幕,就能快速開(kāi)啟或關(guān)閉彈幕。

用戶可隨時(shí)隨地開(kāi)啟或關(guān)閉彈幕,無(wú)需特意找到右下角的固定入口進(jìn)行操作,大大減少操作成本。

圖片

亮點(diǎn)在于:免去用戶需要點(diǎn)擊特定區(qū)域的操作負(fù)荷,增加產(chǎn)品操作的舒適與自由度

要點(diǎn)總結(jié):系統(tǒng)狀態(tài)可見(jiàn)性:讓用戶知道【自己在做什么、處在系統(tǒng)的什么位置等】,并做出適當(dāng)?shù)姆答?

 

五、滑動(dòng)

1、用標(biāo)尺來(lái)控制數(shù)值?

Florence里的標(biāo)尺設(shè)計(jì)得很有意思,通過(guò)第一人稱下的鏡頭視角,讓用戶感知當(dāng)前標(biāo)尺所對(duì)應(yīng)的人物清晰程度,以此來(lái)控制標(biāo)尺位置。

避免用戶掌握、控制不了合適標(biāo)尺的位置,提升選擇效率

圖片

亮點(diǎn)在于:提供參照物可讓用戶有直觀的決策依據(jù),減少操作成本

要點(diǎn)總結(jié):任何讓用戶更改/選擇的地方,都應(yīng)該明確地傳達(dá)出預(yù)覽效果

 

2、用拖拽來(lái)控制人物動(dòng)作?

Florence是一款‘模擬敘事’小游戲,里面很多的交互動(dòng)作都模擬了真實(shí)生活:

比如【刷牙】,需要左右滑動(dòng)屏幕來(lái)模仿真實(shí)的刷牙動(dòng)作;再如【做飯】也需要滑動(dòng)平底鍋來(lái)模仿炒菜動(dòng)作。

圖片

亮點(diǎn)在于:利用交互動(dòng)作來(lái)推動(dòng)情節(jié)的發(fā)展,讓玩家有真實(shí)的代入感,提升游戲的趣味性。

要點(diǎn)總結(jié):模擬真實(shí)生活/環(huán)境的設(shè)計(jì),能有效提升用戶的理解能力、產(chǎn)品趣味性

當(dāng)然還有iOS微信上的‘刪除確認(rèn)’,在原有的內(nèi)容基礎(chǔ)上表達(dá)對(duì)用戶的二次確認(rèn),避免用戶手誤造成操作失誤,減少不必要的損失發(fā)生

圖片

 

六、隔空手勢(shì)

華為Mate30pro 有個(gè)「隔空手勢(shì)」的交互,可以在距離屏幕20cm-40cm內(nèi)進(jìn)行手勢(shì)操作,如隔空翻頁(yè)、上下滑動(dòng)、隔空截屏等。

提升手機(jī)的使用體驗(yàn)與操作效率,特別是邊吃東西 邊玩手機(jī)(追劇看小說(shuō)等)

圖片

還有優(yōu)酷HD上線了一個(gè)黑科技交互【隔空手勢(shì)】,可隔著屏幕用手勢(shì)做各種操作

如「播放/暫停、全屏/半屏、快進(jìn)/退15秒、亮度調(diào)節(jié)、音量調(diào)節(jié)」等操作,讓用戶不點(diǎn)觸摸屏幕就能操作視頻。

圖片

亮點(diǎn)在于:讓用戶解放雙手,無(wú)需手指觸摸到屏幕即可控制手機(jī),可減少很多衛(wèi)生問(wèn)題與操作成本。

要點(diǎn)總結(jié):學(xué)會(huì)利用新技術(shù)來(lái)滿足更多、高層次的用戶訴求,通過(guò)一定的設(shè)計(jì)方式來(lái)滿足不同水平的用戶需求。

 

– END

最后,再酷炫再方便的手勢(shì),最多也只是錦上添花、起方便快捷的作用而已,不可能完全替代‘點(diǎn)擊’的位置與作用。

正如正文所說(shuō):手勢(shì)交互只適合用對(duì)業(yè)務(wù)重要、用戶常用的場(chǎng)景中,可以起到四兩撥千斤的,切記不可為了酷炫而隨便添加。

以上老和對(duì)【手勢(shì)操作】的一些小總結(jié),覺(jué)得認(rèn)同的麻煩幫我【點(diǎn)贊/在看/收藏/轉(zhuǎn)發(fā)】,寫得不對(duì)的請(qǐng)輕點(diǎn)噴~


作者:和出此嚴(yán)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》有沒(méi)有發(fā)現(xiàn),‘點(diǎn)擊 ’開(kāi)始變少而各種手勢(shì)越來(lái)越多了?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔