《HTML5觸控介面設計與開發》——1.4 神祕谷,是什麼讓觸控介面反應靈敏?
本節書摘來自非同步社群《HTML5觸控介面設計與開發》一書中的第1章,第1.4節,作者: 【美】Stephen Woods 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。
1.4 神祕谷,是什麼讓觸控介面反應靈敏?
我有個兩歲半的兒子。他從一歲開始就能解鎖iPad並找到他想要的應用程式。他還不會說話,就會解鎖iPad。我與其他家長交流意見,發現並不是因為我的兒子智商超群。觸控介面給了孩子們直觀的感受:觸控和移動東西,是人類做的最基本的事情之一。觸控介面直觀又強大。但它也很容易令人失望。
有一個理論在機器人學裡被稱為“神祕谷”:機器人看上去越像人,就越對我們有吸引力,但當機器人的外形快要逼近真人的時候,會讓我們覺得很奇怪,甚至被嚇得毛骨悚然。“谷”是機器人與人類相似程度與人類舒適度等級的對映關係的拐點。
觸控介面讓人感覺很自然,感覺像在移動周圍真實的物體。不正確的運用時,給人的感受不是慢,而是失望。直接操縱的假象被打破時,觸控介面也不再讓使用者感覺自然。這種失望感彷彿掉進了神祕谷,使用者不再感覺自然,而是感覺怪異。
**
1.4.1 傳送長奧布萊恩和直接操縱**
像我這一代的許多人一樣,我第一次觸控介面是通過《星際迷航:下一代》。如果你沒有看過的話,可以想象一下:船上所有的控制皮膚為觸控式螢幕,實際上是多點觸控介面。顯然,這樣做的原因完全是因為預算。電影的創作者希望在所有的控制皮膚中表現大量的複雜性,但以一個脫口秀節目的預算支付不起建造這些裝置的費用。於是,他們想出了在膠片上印出介面,並在後面用燈光,創造出觸控式螢幕的外觀的方法。
傳送長奧布萊恩,也就是操縱這艘飛船的人,用三指滑動手勢來發動飛船。我覺得那個手勢真的很有趣。介面上有三個滑塊,演員會自然想到去觸控和拖動滑塊,就好像操縱真正的物體。這是人們所期望使用觸控介面的方法。當他們觸控螢幕時,能憑直覺感到,與它進行互動,就像在移動一個真正的物體。
蘋果的觸控介面指南稱這個概念為“直接操縱”,而不是通過控制器來控制。在理想情況下,觸控介面給使用者的印象是,直接操縱互動的東西。
你會注意到,當傳送長奧布萊恩的手指移動時,小指示器也在隨之移動。這就能保持直接操縱的假象。小指示器也提供反饋,表明計算機正在記錄他的動作。
1.4.2 給使用者反饋
我會想,使用者介面只需讓人感覺快,而無需真的快。只需及時響應—立即響應使用者,讓他知道有反應了。我最喜歡的例子是TiVo。不是我現在的高清電視,而是在1999年發售的TiVo。那個電視盒有一個54 MHz的CPU和僅有的16 MB的RAM。雖然TiVo有特殊的硬體對視訊編解碼,但從使用者點選一個影片到開始播放可能還是需要一段相當長的時間。TiVo的投訴有很多,但從來沒有人抱怨它的速度慢。這是因為TiVo有使用者熟悉的嗶嘣聲。
當使用者點選一個影片時,能立即聽到聲音。我不知道工程師花費了多少時間才確保聲音出現的及時性,這恰恰就是高明的地方。聲音讓使用者能立即知道機器已經收到了他的請求。
在網頁的使用者介面上,這種及時的反饋是同樣重要的。對於桌面電腦的網頁,大多數人和裝置的互動是分離的:單擊後對應的效果出現。對於觸控介面,許多互動是連續的,因為它們是手勢互動。當使用者在螢幕上用手勢操作時,不能等到手勢完畢再做反饋,因為根據使用者的理解,它們甚至會認為手勢沒有生效!
我們來談談滑動。滑動是指在螢幕上移動手指來執行一些操作。理想的情況下,介面元素應該隨著使用者的滑動而移動。如果是在頁面之間滑動,整個頁面應該隨著手指移動。如果介面不動,那麼在滑動結束之前,就無法知道到底發生了什麼。沒有反饋的滑動手勢會像一個鍵盤,在你輸入一個字母之前,它不會有任何反饋。手勢不能等到完成時才反饋。為了讓介面感覺反應迅速,還必須是連續的反饋,當使用者的手指移動的時候,介面也應該移動。
如果使用者在用手勢操作,即使在操作完畢時,介面也必須跟著移動。如果介面在手勢操作時中途停止移動了,就感覺像當機了一樣。
例如,如果你建立了一組幻燈片,使用者可以在幻燈片之間滑動,當使用者到達最後一張幻燈片時,你不會希望手勢響應停止,使用者會以為介面卡死了。而是讓使用者繼續滑動,當使用者鬆手時,應該快速地將上一張彈回。使用者得到了她的手勢已經被機器接收到的反饋,只是幻燈片已經放完了。這是蘋果如此嚴重地依賴在手勢結束時的“迅速彈回”的原因。這是告知使用者已經到了最後,而又不破壞手勢意義的唯一辦法。
規範
每個使用者介面有它的規範。在桌面上有視窗、按鈕、滾動條、關閉框。在移動介面,有一組新的規範。先行者蘋果建立了兩套UI規範。
你不需要一切都與原生的iOS應用程式完全一樣。但知道一些手勢和元素在移動領域的意義十分重要:不要使用滑動手勢來表示選擇,因為原生應用程式中這表示刪除。不要更改作業系統通常會保留的手勢(比如按下並保持一段時間表示撥出內容選單,雙指捏緊為縮小,雙擊為放大),除非你重新實現相同的基本功能。(你會在第10章中瞭解更多有關“滾動和滑動”的知識,在第11章中瞭解更多有關“雙指縮放和其他的複雜的手勢”的知識。)
相關文章
- 《HTML5觸控介面設計與開發》——2.6 總結HTML
- 《HTML5觸控介面設計與開發》——1.2 廣泛使用的裝置HTML
- 《HTML5觸控介面設計與開發》——2.3 奠定基礎的標籤HTML
- 《HTML5觸控介面設計與開發》——第1章 移動裝置概述1.1 觸控裝置和桌面裝置之間的差異HTML
- Windows 8觸控介面設計指南(中文版)Windows
- Android 多點觸控介面Android
- 小米筆記本觸控板沒反應怎麼辦 小米電腦觸控板失靈怎麼解決筆記
- win10觸控板滑鼠速度怎麼調節 win10觸控板滑鼠靈敏度如何調整Win10
- web app 觸控反饋WebAPP
- wpf 觸控 觸控後無法開啟pupup
- Jetpack Compose(7)——觸控反饋Jetpack
- [翻譯]整合滑鼠、觸控 和觸控筆事件的Html5 Pointer Event Api事件HTMLAPI
- 動態磁貼 與 觸控應用
- 觸控事件事件
- 筆記本觸控板怎麼開筆記
- Unity觸控式螢幕觸控事件定義Unity事件
- 膝上型電腦滑鼠觸控板沒反應怎麼解鎖 筆記本觸屏失靈一招解決筆記
- Windows7可能採用觸控式使用者介面Windows
- Flutter:如何響應觸控事件Flutter事件
- JS觸控事件JS事件
- 觸控“智慧城市”
- 觸控事件02事件
- 設定單點觸控splitMotionEvents
- win10筆記本觸控板怎麼失靈了 win10更新後觸控板無法使用Win10筆記
- win10觸控板快捷操作_win10觸控板手勢設定Win10
- 開發板觸控式螢幕測試
- WHQL ITO觸控式螢幕 用手指觸控世界
- Android觸控事件的應用Android事件
- HTML5觸控事件(touchstart、touchmove和touchend) (轉)HTML事件
- 觸控板觸控式螢幕禁止手指縮放,這麼處理才行
- 微信使用touchstart錄音,安卓觸發不靈敏安卓
- thinkpad觸控板手勢win10怎麼設定_win10觸控板手勢設定在哪裡ThinkPadWin10
- iPhone XS怎麼開啟輔助觸控小白點?蘋果iPhone螢幕輔助觸控使用教程iPhone蘋果
- 筆記本觸控板禁用後怎麼恢復(聯想、華碩、小米) 觸控板鎖住了怎麼解開筆記
- 筆記本觸控板手勢大全 觸控板快捷手勢筆記
- ScrollView 觸控事件View事件
- 通過程式碼控制View的觸控事件被觸發View事件
- Win10怎麼關閉觸控板 win10禁用觸控板的方法Win10