這些手勢(shì)交互你關(guān)注到了嗎?

2021-11-30    lanlanwork


01. 評(píng)論區(qū)雙指上滑送出“抱抱”

在聽一首喜歡的音樂時(shí),參與評(píng)論可以表達(dá)自己對(duì)音樂帶來的共鳴感,也可以看其它聽友的評(píng)論尋找知音。在網(wǎng)易云音樂的評(píng)論區(qū)隱藏著一個(gè)手勢(shì)交互,對(duì)某一條評(píng)論雙指上滑就會(huì)針對(duì)其給出擁抱,兩個(gè)小人微笑擁抱的動(dòng)畫顯示在該條評(píng)論右下角,進(jìn)而用戶頭像下方會(huì)顯示“收到了抱抱”的標(biāo)簽提示。

在不新增功能入口的同時(shí),借助雙指手勢(shì)交互來滿足需求,既能不破壞原生的結(jié)構(gòu),又能帶給用戶不一樣的操作體驗(yàn)。這個(gè)隱藏的彩蛋你是否注意到?以后在體驗(yàn)產(chǎn)品的時(shí)候除了發(fā)現(xiàn)視覺表層的可見內(nèi)容以外,也要加強(qiáng)手勢(shì)交互的操作來發(fā)現(xiàn)更多隱藏的功能。

圖片

 

02. 長(zhǎng)按激活單擊退出

iOS 的設(shè)計(jì)在手勢(shì)交互的探索上比較多,全屏的模式將手勢(shì)發(fā)揮到了極致,也帶給我們對(duì)于手勢(shì)交互的更多理解。在蘋果手機(jī)桌面,我們可以通過長(zhǎng)按激活應(yīng)用管理,單擊則會(huì)退出管理模式,操作非常便利。

無需在當(dāng)前的設(shè)計(jì)上面新增更多繁瑣的控件,手勢(shì)的借助可以使得我們的設(shè)計(jì)更加極簡(jiǎn),減少過多的內(nèi)容對(duì)用戶的干擾。

圖片

 

03. 長(zhǎng)按與時(shí)間跨度的結(jié)合

長(zhǎng)按激活功能比較常見,但是結(jié)合時(shí)間長(zhǎng)短的變化相對(duì)較少。蘋果手機(jī)桌面的應(yīng)用管理,在長(zhǎng)按應(yīng)用圖標(biāo)時(shí)會(huì)彈窗展示功能列表,繼續(xù)維持長(zhǎng)按則會(huì)進(jìn)入應(yīng)用管理,隨著長(zhǎng)按的時(shí)間跨度不一樣激活不同功能需求。

在手勢(shì)交互設(shè)計(jì)過程中,除了通過動(dòng)作的不同激活功能操作之外,也可以結(jié)合時(shí)間跨度、力度、位置等進(jìn)行組合交互,來滿足多重功能操作的需求。

圖片

 

04. 可以移動(dòng)的紅包

通過紅包吸引用戶進(jìn)而轉(zhuǎn)化是很多電商產(chǎn)品的玩法,在必要 APP 中紅包通過倒計(jì)時(shí)的形式營(yíng)造出緊迫感,促使用戶立即使用,進(jìn)而提高紅包的使用率。紅包懸浮在左側(cè)會(huì)擋住分類的展示,為了解決這個(gè)問題紅包借助滑動(dòng)手勢(shì)可以移動(dòng),用戶可以在左側(cè)導(dǎo)航欄到底部標(biāo)簽欄之間任意滑動(dòng),方便預(yù)覽分類。

單指滑動(dòng)是常用的手勢(shì)交互,精準(zhǔn)定位元素之后可以拖動(dòng)使其改變位置,不僅方便內(nèi)容的展示也不會(huì)造成底層內(nèi)容的閱讀干擾。

圖片

 

05. 同一個(gè)功能不同的手勢(shì)交互

我們?cè)谟^看視頻的時(shí)候,短視頻是單擊控制播放/暫停,而視頻播放軟件則是通過雙擊控制。由于長(zhǎng)視頻用戶需要觀看很久,容易觸屏造成誤操作,雙擊是為了形成二次確認(rèn),降低誤操作的概率。

短視頻播放由于內(nèi)容比較簡(jiǎn)短,可以通過單擊控制播放/暫停,雙擊則是更多功能的輔助,同一個(gè)功能在不同的場(chǎng)景需要配合不同的手勢(shì)。我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候,可以根據(jù)業(yè)務(wù)類型和用戶場(chǎng)景的差異借助手勢(shì)來滿足更多功能的操作,用戶習(xí)慣培養(yǎng)之后將會(huì)提高其操作體驗(yàn)度。

圖片

 

06. 通過左滑程度控制刪除

左滑動(dòng)是產(chǎn)品設(shè)計(jì)中非常普遍的手勢(shì)交互,通過左滑展開列表隱藏功能,比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊,消息列表左滑可以進(jìn)行置頂和刪除,如果繼續(xù)往左側(cè)滑動(dòng)則會(huì)實(shí)現(xiàn)自動(dòng)刪除,以此來替代點(diǎn)擊刪除圖標(biāo)完成刪除操作的步驟。通過左滑配合點(diǎn)擊刪除操作路徑多一步,而左滑程度控制刪除效率更高,針對(duì)一些消息較多的產(chǎn)品,可以方便用戶快速清理未讀消息。

圖片

 

07. 雙擊頭像“拍一拍”

在微信群聊或者與好友聊天的時(shí)候,為了重點(diǎn)提示好友,可以通過雙擊好友頭像進(jìn)行“拍一拍”,晃動(dòng)的頭像和震動(dòng)的提示加強(qiáng)好友對(duì)信息的關(guān)注度。

結(jié)合雙擊的手勢(shì)交互,在不改變當(dāng)前布局的情況下加強(qiáng)社交屬性,增強(qiáng)好友間的互動(dòng)提示,通過手勢(shì)豐富了社交體驗(yàn)。

圖片

 

08. 單擊進(jìn)入全屏模式

雖然手機(jī)逐步進(jìn)入大屏?xí)r代,但是用戶還是希望獲得更少的干擾,全屏模式的操作可以讓干擾降到最低。

百度地圖在操作后會(huì)有彈窗式的內(nèi)容呈現(xiàn),用戶可以通過單擊屏幕退出彈窗,再次單擊則會(huì)進(jìn)一步隱藏基礎(chǔ)控件,進(jìn)入全屏模式。通過單擊的手勢(shì)交互來簡(jiǎn)化內(nèi)容結(jié)構(gòu),降低干擾帶給用戶更集中的操作體驗(yàn)。

圖片

 

09. 長(zhǎng)按快速預(yù)覽精彩片段

通過愛奇藝 APP 刷劇的時(shí)候,在搜尋影視作品的過程中,可以通過長(zhǎng)按作品封面進(jìn)行快速預(yù)覽,播放精彩片段來判斷是否值得追劇。

通過長(zhǎng)按激活彈窗,可以在不改變當(dāng)前布局結(jié)構(gòu)的前提下,進(jìn)行更多功能操作。適合針對(duì)隱藏式功能,也能避免誤操作。

圖片

 

10. 長(zhǎng)按結(jié)合位置區(qū)域變化

很多影視類產(chǎn)品在全屏播放視頻時(shí),除了通過拖動(dòng)進(jìn)度條進(jìn)行快進(jìn)/倒退之外,也能通過長(zhǎng)按屏幕進(jìn)行快進(jìn)。

而騰訊視頻與之不同的是結(jié)合了屏幕區(qū)域,在全屏狀態(tài)下,左側(cè)區(qū)域長(zhǎng)按快退,右側(cè)區(qū)域長(zhǎng)按快進(jìn)。長(zhǎng)按結(jié)合位置區(qū)域變化功能狀態(tài),深入了手勢(shì)交互的操作,也能帶來不一樣的操作體驗(yàn)。

圖片

 

11. 三擊激活“輔助觸控”

單擊和雙擊的手勢(shì)交互較為常見,而三擊手勢(shì)應(yīng)用較少,有待深入探索。目前來說,帶有 Home 鍵的蘋果系列手機(jī),可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵,再次三擊隱藏快捷鍵。

通過三擊可以快速激活功能快捷鍵,減少了多個(gè)步驟路徑,也不會(huì)導(dǎo)致用戶誤操作。

圖片

 

12. 下拉程度影響功能變化

手勢(shì)下滑形成下拉刷新已經(jīng)成為產(chǎn)品設(shè)計(jì)中的基礎(chǔ)操作,為了進(jìn)一步延展功能,很多產(chǎn)品在下拉過程中根據(jù)下拉的程度判斷是刷新還是進(jìn)入二層樓(活動(dòng)或者功能模塊)。

通常是通過控制下拉的距離來做判斷,會(huì)提示“松開刷新”的字樣,如果繼續(xù)下拉則會(huì)激活功能變化。進(jìn)入二級(jí)功能界面或者二層樓活動(dòng)界面,深度的功能開發(fā)帶給用戶更多的選擇性。

圖片

 

13. 縮放預(yù)覽相冊(cè)大小

蘋果手機(jī)自帶的相冊(cè)(照片)APP,可以通過雙指縮放來改變照片預(yù)覽的大小,方便用戶在眾多照片中通過縮小快速查看,再通過放大做進(jìn)一步的選擇。借助縮放的手勢(shì)交互,方便用戶自由縮放預(yù)覽并作出快捷的操作,提高了用戶的操作體驗(yàn)感。

雙指縮放對(duì)于屏幕的縮放預(yù)覽十分便利,在很多應(yīng)用場(chǎng)景都有涉足,比如相冊(cè)、地圖、繪圖工具等。

 

14. 雙擊最大化圖片預(yù)覽

在圖片預(yù)覽的時(shí)候,可以通過雙擊最大化圖片,方便對(duì)細(xì)節(jié)的觀察。通過雙擊的手勢(shì)交互來快速放大圖片,在很多相冊(cè)應(yīng)用、電商產(chǎn)品、微信等社交產(chǎn)品中都有涉足,只要是全屏模式下預(yù)覽圖片,都可以通過該手勢(shì)交互完成縮放。

雙指縮放屬于慢動(dòng)作,而雙擊最大化屬于快速一步到位,適合查看圖片細(xì)節(jié)等操作。通常是雙擊最大化,再次雙擊恢復(fù)正常。

 

15. 手勢(shì)交互控制地圖預(yù)覽

手勢(shì)交互在地圖軟件中的運(yùn)用表現(xiàn)得淋漓盡致,對(duì)于用戶來說操作變得更加便利和快捷。

以高德地圖舉例:?jiǎn)螕羰謩?shì)可以隱藏操作欄進(jìn)入全屏模式;長(zhǎng)按固定區(qū)域會(huì)激活當(dāng)前位置定位,方便隨時(shí)查看和開始導(dǎo)航;雙擊手勢(shì)可以對(duì)地圖進(jìn)行固定倍數(shù)放大;雙指縮放可以對(duì)地圖進(jìn)行任意縮放,便于精準(zhǔn)查看位置區(qū)域等。手勢(shì)交互控制地圖預(yù)覽提升了操作便捷度,借助手勢(shì)提升了地圖類產(chǎn)品的體驗(yàn)感。

圖片

 

16. 拖動(dòng)完成自定義設(shè)置

隨著用戶對(duì)個(gè)性化的需求升級(jí),很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中,便可通過拖動(dòng)完成自定義設(shè)置。

利用壓力結(jié)合滑動(dòng)可以實(shí)現(xiàn)拖動(dòng)手勢(shì)交互,對(duì)于一些需要用戶謹(jǐn)慎操作的功能比較適合,也能有效防止誤操作。

圖片

 

17. 拖動(dòng)疊加實(shí)現(xiàn)應(yīng)用建組

當(dāng)用戶下載的應(yīng)用很多的時(shí)候,通常都會(huì)通過建組管理手機(jī)桌面上的各類應(yīng)用軟件??梢酝ㄟ^拖動(dòng)應(yīng)用疊加到其他應(yīng)用軟件上實(shí)現(xiàn)自動(dòng)建組,建組、進(jìn)組、移出等操作均可通過拖動(dòng)手勢(shì)完成,操作非常便利。

拖動(dòng)手勢(shì)交互針對(duì)一些防止誤操作的功能比較適合,相當(dāng)于二次確認(rèn)的過程。

圖片

 

18. 長(zhǎng)按滑動(dòng)實(shí)現(xiàn)多選

在百度網(wǎng)盤中可以通過單擊選擇控件對(duì)文件進(jìn)行選擇操作,也可以通過長(zhǎng)按整個(gè)區(qū)域?qū)崿F(xiàn)選中,長(zhǎng)按過程中可以結(jié)合滑動(dòng)實(shí)現(xiàn)多選。

長(zhǎng)按滑動(dòng)進(jìn)行多選針對(duì)文件較多的場(chǎng)景非常便利,也不用擔(dān)心誤操作。在一些相冊(cè)應(yīng)用中點(diǎn)擊選擇按鈕之后也可以通過滑動(dòng)實(shí)現(xiàn)多選,操作路徑多一步。無論是通過激活選擇按鈕,還是長(zhǎng)按都是起到二次確認(rèn)的作用,長(zhǎng)按滑動(dòng)操作相對(duì)更簡(jiǎn)單。

圖片

 

小結(jié)

隨著手機(jī)觸屏靈敏度的提升,手勢(shì)交互在產(chǎn)品設(shè)計(jì)中的應(yīng)用會(huì)越來越普及,特別是針對(duì)大屏手機(jī)。本期整理的關(guān)于手勢(shì)交互操作的案例僅作為拋磚引玉,還有很多的優(yōu)秀案例有待大家去發(fā)現(xiàn)和總結(jié),不足之處留言補(bǔ)全。

 

原文地址:黑馬家族(公眾號(hào))

作者:黑馬青年

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》這些手勢(shì)交互你關(guān)注到了嗎?

藍(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)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quá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ù)




分享本文至:

日歷

鏈接

個(gè)人資料

存檔