您現在的位置是:電腦技術吧?>? 編程技術 ??>??最早做隔空手勢,隔空手勢感應app??>??正文詳情

最早做隔空手勢,隔空手勢感應app

鮮于易夢2019-11-07 13:52:11 人圍觀
簡介隔空手勢電視羨慕鐵人電影中的酷手勢操作其實,它背后的互動思維遠遠超出了你的想象未來的交互方式將會發生巨大的變化,而gap手勢是一個完全陌生的領域今天的好文章來自于Expp

羨慕鋼鐵俠電影中酷炫的手勢操作?其實背后的交互思考遠遠超出你的想象!未來的交互方式會發生顛覆性的全新改變,隔空手勢就是一個完全陌生的領域。

今天這篇好文來自專門研究手勢交互的Exipple,不僅解釋了手勢與觸控操作的區別,還附上7個實戰設計心得,趨勢就在這,不進則退,建議UI、交互的同學花十分鐘學習一下。

  未來的交互是多重方式的。

但結合觸控和隔空手勢(還可能有語音輸入)的方式,并非典型的UI設計任務。

  在Exipple,我們的設計師與工程師協作打造各種環境中的界面,能夠響應手勢交互和用戶移動等物理屬性。

我們從迭代式的設計、研發和評估過程中受益良多,我愿意在此分享我們在手勢交互中的領悟與心得。

  (FC Barcelona博物館中一堵交互式視頻墻的照片)  設計易于發現的手勢  手勢通常被認為是與屏幕和物體交互的自然方式,我們會談論在移動設備屏幕上雙指縮放地圖,還有在電視前揮手切換到下一部電影。

但這些手勢真的那么自然嗎?  對于從沒體驗過某種交互方式的用戶而言,手勢是陌生的領域。

雖然我們都本能地了解在觸屏上查看地圖細節該如何操作,但是想一想,如果在遠處觀看一塊大屏幕呢?如果有人告訴你,你不用觸碰屏幕,可以通過手部運動,以一種很自然直觀的方式放大地圖,你會首先嘗試什么手勢?遇到這種問題時,我們每個人對自然的手勢都有各自的定義。

  未來的交互是多重方式的  設計要易于發現,這點非常重要。

要確保提供正確的設計符號線索,幫助用戶輕松發現手勢操作方式。

這些可以是視覺提示,表明什么樣的手勢觸發什么樣的動作。

反復使用后,這些探索性的提示就不必保留了,因為用戶已經學會了這種手勢。

  還可以設計動畫,漸進式地揭示某種不同的交互方式。

例如,要確保用戶了解到他們可以不必觸碰屏幕,在遠處就能操作,為此我們創造了一個菜單,當手指向屏幕時它就能顯示更多信息。

起初圖片以一種隨意的方式懸浮排列(A圖)。

靠近伸手指向這些圖片,能顯示出每張圖片其實是一個分類,包含更多內容(B圖)。

  為什么不能直接把觸控操作搬過來  去年我們做了一個小小的非正式研究。

我們邀請了一些人到工作室來,向他們展示了一些熟悉的電視界面:菜單和圖標、地圖、網格、輪播圖。

讓他們想象應該如何在遠處通過隔空手勢操作這些界面。

  這些界面實際上是一系列微型的手勢交互原型。

我們收集他們的期望,讓他們探索一番并給我們反饋。

其中顯示出一種清晰的模式,他們的期望基本都來源于移動設備上熟悉的手勢。

所有的參與者,都將手機上的心理模型應用到隔空手勢上。

有時候,通過對界面操作的期望,我們甚至能從中區分出iOS和Android用戶。

  最直觀的未必最有效易用。

  但我們很快就遭遇了挑戰:最直觀的未必最有效易用。

例如,鼠標是一種高精度設備,提供一種精確控制。

人的肢體在三維空間中隔空移動就沒這么精確。

我們覺得自己的手在X軸上移動,但實際上我們在另外兩個維度上也在微微運動。

  我們無法指望達到相同的精確度。

專注于精確細致的移動,會不可避免地導致某種緊張而且伸直手肯定不是自然的交互方式。

  觸碰屏幕時,觸點就是起點一個參照點。

想象一下,典型的雙指縮放和雙手隔空構成類似的操作,兩者有什么區別。

縮放等級的參考點變得模糊不定。

你也不能松開屏幕來停止操作,所以起始點和結束點都變得模棱兩可。

  應該避免的例子:等同于雙指縮放的隔空手勢。

  不要嘗試把觸控手勢直接變成隔空手勢,盡管它們更熟悉和容易。

手勢交互需要一種全新的方式一種起初陌生,但最終能夠讓用戶極盡掌控、并使用戶體驗設計走得更遠的方式。

  去掉亂跳的指針  如果你在項目中運用計算機視覺技術(例如通過Kinect、Asus、Orbecc等帶有深度傳感器的相機捕捉動作),你就知道,無法100%實現手和手指的位置追蹤。

  其他的技術或許能提供更高的精確度,但它們通常需要用戶穿戴特殊的設備。

隨著我們手部運動,計算機并不能持續看見我們的手,結果就導致了我們所謂的手抖:看起來像屏幕上的指針或箭頭緊張顫抖。

  去掉指針這種反饋形式,提供一種替代方案。

  設計另一種指針或箭頭起不到多大作用,因為它仍然需要在屏幕上追蹤手部運動。

你可以要求開發者過濾這些微妙的手部運動來避免這種效果。

但是,這種解決方案要付出很高的代價,喪失了某些響應和精確度,并且會導致指針與手有輕微的延遲,降低用戶對于界面的操控感。

喪失用戶的操控感,我們承擔不起。

  那應該怎么辦?  去掉指針。

觸摸屏上也不需要指針。

去掉指針這種反饋形式,提供一種替代方案。

讓圖片和物體彈出來,立即響應用戶的手部運動,不需要任何指針。

  這會從根本上改變你思考用戶界面的方式。

這不是網頁,也不是移動端觸摸屏體驗。

  敞開思路  要嘗試解放思想,從你熟悉的標準網頁和移動UI模式中解脫出來。

忘了按鈕思考動作。

想象一下,不再有屏幕了,你要用手勢來控制周圍環境中的設備。

你要如何讓電視機降低音量?如何點亮電燈?  象征性和形象的手勢,例如用食指做出噓的手勢降低電視音量,這就簡單直接、富于表達力。

這或許有些依賴特定場景,也需要用戶學習,但一旦用戶學會了,他們就很容易記住和使用。

  我們創造了一些成功的手勢來控制媒體播放:

  要在手勢和它所觸發的動作之間建立聯系。

這些可以基于容易記憶的含義或者視覺參考。

這并不容易因為你需要考慮例如文化環境這樣的方面。

比如說,在某個國家或文化中被普遍接受的一種手勢表達,在另一個國家中或許有冒犯的意味。

在某些環境中非常突出的象征,在其他場合或許就沒有幫助。

  依靠形象化的手勢創造所有類型的交互,可能會導致太多的手勢要記憶。

要將它們當做快捷、有力的快速觸發方式值得分配給那些需要用戶頻繁重復的操作。

  減少錯誤識別  對于計算機而言最大的挑戰,就是區分真正的意圖,和那些人們自然做出的偶然手勢,例如與人交談時手部四處移動。

  很容易會意外觸發動作,讓界面在不該變化時發生改變,導致不穩定的體驗。

作為UI設計師,你得與開發者密切配合,找出哪些有意義、哪些沒有,就能避免哪些錯誤的識別。

  好的起點是:手勢設計總是要與特定場景和需要遇到的狀況聯系起來。

是否正在播放音樂?那么手勢就可以觸發。

如果沒有,那就什么也不做。

  忘了按鈕思考動作。

  要區分手勢和意外手部運動,時間是個重要的因素。

例如,如果我指著某個物體超過1秒,就意味著我的確想要操作它。

  距離也是另一個因素。

如果你在為博物館或參觀中心設計一套互動裝置,你可能想讓它識別足夠靠近的參與者的手勢,相對忽略那些站在遠處的旁觀者。

  避免疲勞  就像字面意思,感受手勢造成的影響并不容易。

你得一遍遍觀察用戶,理解你所創造的體驗給人帶來的真實感受。

  簡單幾點需要記住:  1、除非你在設計物理游戲或鍛煉項目,否則要確保人們不必太頻繁或太長時間舉起手臂、抬起雙手。

  2、要確保手部軌跡和UI元素間距離的比例足夠舒適,尤其對于大屏幕。

這意味著用戶可以毫不費力指向屏幕的任何部分。

  一個例子,小范圍動作對應屏幕上更大范圍的區域,讓觸達更加輕松。

  3、使用雙手比單手交互更不容易感到疲勞。

  可以把某只手作為慣用手,用來觸發操作(比如顯示出滑塊)。

然后用另一只手來輔助(調整滑塊的數值)。

要考慮到你不必用單手來完成所有操作,可以探索更多的組合。

  保持一致,左右手都要觸發相同動作  最后,用戶通過右手觸發的任何操作,也應當能夠用左手觸發。

這不僅是為了方便右撇子和左撇子,這種一致性也幫助人們學習和接受。

所以如果你學會了某個手勢,你可以用任意一只手觸發不必記住要用哪只手。

  一致性要貫穿你整個概念,就像其他所有UX項目一樣。

成功創造了手勢 動作的組合后,可以考慮是否需要在其他用戶場景下啟用類似動作。

一旦熟悉了,用戶會期望使用相同的手勢。

  要創造易于發現和記憶的統一的手勢語言。

  有了這些手勢交互的規范,你就可以開始探索這塊相對未知的創意領域了。

一旦理解了這些區別,就能結合隔空手勢和觸控手勢,創造獨特流暢的用戶交互。

版權聲明:本文由 鮮于易夢 整理編輯。

原標題:隔空手勢,交互設計視頻

轉載注明出處:http://www.dn9ww09s.icu/program/11435.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦組裝有哪些配件,電腦組裝需要哪些配件

    電腦組裝有哪些配件,電腦組裝需要哪些配件 相關圖片自己組裝電腦需要買哪些配件現在,無論是單機游戲還是網絡游戲,對電腦配置的要求都很高但是筆記本和品牌機的價格很高關鍵是電腦配置很低這是致命的說,視頻卡通常是低端或集...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里智能手機的功能越來越發達,所以在我們的日常生活中,我們可以用智能手機做很多事情,有時候我們可以用智能手機拍漂亮的照片,從而留下漂亮的照片作為記...

  • 虛線css,css長條虛線

    虛線css,css長條虛線 相關圖片HTML虛線單擊鏈接時,將出現一個虛線框即使它被松開,它仍然存在。有時看起來很難看因為它不好看,所以不要用它如何擺脫它方法1在ie下,可以使用它的私有HTML屬性:hidehtml一條虛線...

  • tf卡和SD卡,什么是tf卡什么是sd卡

    tf卡和SD卡,什么是tf卡什么是sd卡 相關圖片tf卡怎么用目前市場上常用的數據存儲卡分為TF卡和SD卡它們是同一張存儲卡TF卡和SD卡是兩種容易被用戶混淆的存儲卡一般來說,它們不僅大小不同,而且用途也不同TF卡和SD卡內存卡tf卡...

  • 用戶行為研究方法,行為型模式

    用戶行為研究方法,行為型模式 相關圖片消極使用行為本文介紹了JavaScript行為在Dreamweaver中的操作和使用,希望對您有所幫助I.在Dreamweaver中將JavaScript行為附加到頁面的方產品使用行為...

  • cpu散熱器用什么好,哪種cpu散熱器比較好

    cpu散熱器用什么好,哪種cpu散熱器比較好 相關圖片cpu原裝散熱器好嗎計算機硬件的發展給計算機帶來了更高的性能體驗和更舒適的使用體驗同時,高能耗的CPU和顯卡也散發出更多的熱量,用戶對散熱的要求也在不斷提高散熱器提供良好...

  • 什么是樣式表,webcss樣式表

    什么是樣式表,webcss樣式表 相關圖片內部樣式表如果你想成為一名CSS專家,僅僅背誦一堆選擇器是不夠的,還需要提高CSS樣式表的可讀性、開發效率和可維護性在這里,Jina Bolton將分享她關于如何創建性感div樣式表...

  • 處理器amd和intel哪個好,intel與amd處理器對比

    處理器amd和intel哪個好,intel與amd處理器對比 相關圖片amd cpu眾所周知,對于普通人來說,個人電腦的組裝應該是極其復雜的,尤其是在沒有經驗的情況下因為要使它成為一個龐大的系統,需要裝配大量的零件但是,也出現了很多問題,其中...

  • 式設計,卡片式設計 網頁

    式設計,卡片式設計 網頁 相關圖片設計網頁我要在前言中寫卡片的類型這是客戶在上一期與我討論需求時說的第一個需求點毫無疑問,這張卡在個人電腦和手機上都非常出色從網上購物中心到社交媒體網站,卡片設計已...

  • 電腦顯示器品牌排行,電腦顯示器選什么牌子好

    電腦顯示器品牌排行,電腦顯示器選什么牌子好 相關圖片顯示器品牌隨著這個社會的發展,可以看出無論是家庭還是企業都離不開計算機,尤其是大屏幕顯示的臺式機,其用戶體驗比筆記本電腦更高電腦主機決定性能,而顯示器決定畫面效果...

熱評文章

  • 查看電腦系統,怎樣查看電腦系統

    查看電腦系統,怎樣查看電腦系統 相關圖片電腦怎么恢復出廠設置操作系統是用戶與計算機之間的接口,也是計算機硬件與其它軟件之間的接口許多人不知道他們的計算機系統是XP還是win7,win8還是其他系統如何檢查現在,小編帶...

  • diy電腦配件,組裝電腦教程

    diy電腦配件,組裝電腦教程 相關圖片diy電腦配件安裝隨著計算機硬件的不斷普及,擁有一臺個人電腦已不再是遙不可及的夢想,特別是對于一些熱衷于組裝自己DIY電腦的資深電腦愛好者來說,這不僅節省了很多不必要的開...

  • 空格,如何打空格

    空格,如何打空格 相關圖片空格是什么字符方法1:按住Ctrl Shift 空格鍵方法2:在菜單欄中,編輯--首選參數--常規方法3:切換到代碼嘗試,輸入要鍵入的空格空格符號代碼復制...

  • 筆記本電腦屏幕亮度,筆記本電腦屏幕不亮

    筆記本電腦屏幕亮度,筆記本電腦屏幕不亮 相關圖片筆記本電腦亮度快捷鍵調整筆記本電腦屏幕使其更柔和可以保護您的眼睛另外,適當調低筆記本電腦屏幕的亮度更節能,特別是在使用筆記本電池時,還可以提高筆記本電腦的續航力如...

  • css,css寬

    css,css寬 相關圖片css inline隨著智能手機的增多,手機網站也可以更加個性化最近,在自己的手機網站的改版中,我們遇到了網站圖片大小的問題,而且手機屏幕比較小如何讓上傳的不同規則的圖片在手機...

  • 電腦機箱加裝風扇,電腦機箱風扇怎么裝

    電腦機箱加裝風扇,電腦機箱風扇怎么裝 相關圖片機箱風扇一般裝幾個沒關系。現在,小編和你機箱風扇需要裝嗎...

  • 交互動效,ui交互動效

    交互動效,ui交互動效 相關圖片ui交互動效必修課首先,我想你會有以下問題:什么是微觀互動來自uxpin(一個在線交互原型工具)的Carrier cosins給出了以下定義:微觀交互是交互設備上單個交互過程的細prd交互動效...

  • 筆記本關機慢,筆記本關機很慢

    筆記本關機慢,筆記本關機很慢 相關圖片筆記本藍屏怎么關機雖然筆記本電腦是一種很好的電器,但在使用過程中總會出現一些小問題如果我們不能解決這些問題,我們將永遠心煩意亂,所以有必要掌握一些電腦維修的小知識...

  • 錨記鏈接,網頁錨記鏈接

    錨記鏈接,網頁錨記鏈接 相關圖片錨點鏈接使用命名錨定,可以在文檔中設置標記,這些標記通常放置在文檔中特定主題的頂部然后,您可以創建指向這些命名錨的鏈接,如果網頁中有很多內容并且網頁很長,則可以快...

  • 電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決

    電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決 相關圖片電腦慢卡 怎樣解決雖然計算機的使用過于落后,但計算機運行緩慢的問題是不可避免的,特別是在最關鍵的時候,計算機被卡住了這是一件很麻煩的事情,但是由于錢已經熟悉了舊電腦...

關注微信

变脸官网查询