本節書摘來自異步社區《HTML5觸摸界面設計與開發》一書中的第1章，第1.4節,作者： 【美】Stephen Woods 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

1.4　神秘谷，是什么讓觸摸界面反應靈敏？

我有個兩歲半的兒子。他從一歲開始就能解鎖iPad并找到他想要的應用程序。他還不會說話，就會解鎖iPad。我與其他家長交流意見，發現并不是因為我的兒子智商超群。觸摸界面給了孩子們直觀的感受：觸摸和移動東西，是人類做的最基本的事情之一。觸摸界面直觀又強大。但它也很容易令人失望。

有一個理論在機器人學里被稱為“神秘谷”：機器人看上去越像人，就越對我們有吸引力，但當機器人的外形快要逼近真人的時候，會讓我們覺得很奇怪，甚至被嚇得毛骨悚然?！肮取笔菣C器人與人類相似程度與人類舒適度等級的映射關系的拐點。

觸摸界面讓人感覺很自然，感覺像在移動周圍真實的物體。不正確的運用時，給人的感受不是慢，而是失望。直接操縱的假象被打破時，觸摸界面也不再讓用戶感覺自然。這種失望感仿佛掉進了神秘谷，用戶不再感覺自然，而是感覺怪異。
**
1.4.1　傳送長奧布萊恩和直接操縱**
像我這一代的許多人一樣，我第一次觸摸界面是通過《星際迷航：下一代》。如果你沒有看過的話，可以想象一下：船上所有的控制面板為觸摸屏，實際上是多點觸摸界面。顯然，這樣做的原因完全是因為預算。電影的創作者希望在所有的控制面板中表現大量的復雜性，但以一個脫口秀節目的預算支付不起建造這些設備的費用。于是，他們想出了在膠片上印出界面，并在后面用燈光，創造出觸摸屏的外觀的方法。

傳送長奧布萊恩，也就是操縱這艘飛船的人，用三指滑動手勢來發動飛船。我覺得那個手勢真的很有趣。界面上有三個滑塊，演員會自然想到去觸摸和拖動滑塊，就好像操縱真正的物體。這是人們所期望使用觸摸界面的方法。當他們觸摸屏幕時，能憑直覺感到，與它進行交互，就像在移動一個真正的物體。

蘋果的觸摸接口指南稱這個概念為“直接操縱”，而不是通過控制器來控制。在理想情況下，觸摸界面給用戶的印象是，直接操縱交互的東西。

你會注意到，當傳送長奧布萊恩的手指移動時，小指示器也在隨之移動。這就能保持直接操縱的假象。小指示器也提供反饋，表明計算機正在記錄他的動作。

1.4.2　給用戶反饋
我會想，用戶界面只需讓人感覺快，而無需真的快。只需及時響應—立即響應用戶，讓他知道有反應了。我最喜歡的例子是TiVo。不是我現在的高清電視，而是在1999年發售的TiVo。那個電視盒有一個54 MHz的CPU和僅有的16 MB的RAM。雖然TiVo有特殊的硬件對視頻編解碼，但從用戶點擊一個影片到開始播放可能還是需要一段相當長的時間。TiVo的投訴有很多，但從來沒有人抱怨它的速度慢。這是因為TiVo有用戶熟悉的嗶嘣聲。

當用戶點擊一個影片時，能立即聽到聲音。我不知道工程師花費了多少時間才確保聲音出現的及時性，這恰恰就是高明的地方。聲音讓用戶能立即知道機器已經收到了他的請求。

在網頁的用戶界面上，這種及時的反饋是同樣重要的。對于桌面電腦的網頁，大多數人和設備的交互是分離的：單擊后對應的效果出現。對于觸摸界面，許多交互是連續的，因為它們是手勢交互。當用戶在屏幕上用手勢操作時，不能等到手勢完畢再做反饋，因為根據用戶的理解，它們甚至會認為手勢沒有生效！

我們來談談滑動?；瑒邮侵冈谄聊簧弦苿邮种竵韴绦幸恍┎僮?。理想的情況下，界面元素應該隨著用戶的滑動而移動。如果是在頁面之間滑動，整個頁面應該隨著手指移動。如果界面不動，那么在滑動結束之前，就無法知道到底發生了什么。沒有反饋的滑動手勢會像一個鍵盤，在你輸入一個字母之前，它不會有任何反饋。手勢不能等到完成時才反饋。為了讓界面感覺反應迅速，還必須是連續的反饋，當用戶的手指移動的時候，界面也應該移動。

如果用戶在用手勢操作，即使在操作完畢時，界面也必須跟著移動。如果界面在手勢操作時中途停止移動了，就感覺像死機了一樣。

例如，如果你創建了一組幻燈片，用戶可以在幻燈片之間滑動，當用戶到達最后一張幻燈片時，你不會希望手勢響應停止，用戶會以為界面卡死了。而是讓用戶繼續滑動，當用戶松手時，應該快速地將上一張彈回。用戶得到了她的手勢已經被機器接收到的反饋，只是幻燈片已經放完了。這是蘋果如此嚴重地依賴在手勢結束時的“迅速彈回”的原因。這是告知用戶已經到了最后，而又不破壞手勢意義的唯一辦法。

規范
每個用戶界面有它的規范。在桌面上有窗口、按鈕、滾動條、關閉框。在移動界面，有一組新的規范。先行者蘋果創建了兩套UI規范。

你不需要一切都與原生的iOS應用程序完全一樣。但知道一些手勢和元素在移動領域的意義十分重要：不要使用滑動手勢來表示選擇，因為原生應用程序中這表示刪除。不要更改操作系統通常會保留的手勢（比如按下并保持一段時間表示呼出內容菜單，雙指捏緊為縮小，雙擊為放大），除非你重新實現相同的基本功能。（你會在第10章中了解更多有關“滾動和滑動”的知識，在第11章中了解更多有關“雙指縮放和其他的復雜的手勢”的知識。）

總結

以上是生活随笔為你收集整理的《HTML5触摸界面设计与开发》——1.4　神秘谷，是什么让触摸界面反应灵敏？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。