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

1.4　神秘谷，是什么讓觸摸界面反應(yīng)靈敏？

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

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

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

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

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

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

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

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

在網(wǎng)頁的用戶界面上，這種及時的反饋是同樣重要的。對于桌面電腦的網(wǎng)頁，大多數(shù)人和設(shè)備的交互是分離的：單擊后對應(yīng)的效果出現(xiàn)。對于觸摸界面，許多交互是連續(xù)的，因為它們是手勢交互。當(dāng)用戶在屏幕上用手勢操作時，不能等到手勢完畢再做反饋，因為根據(jù)用戶的理解，它們甚至?xí)J為手勢沒有生效！

我們來談?wù)劵瑒?。滑動是指在屏幕上移動手指來?zhí)行一些操作。理想的情況下，界面元素應(yīng)該隨著用戶的滑動而移動。如果是在頁面之間滑動，整個頁面應(yīng)該隨著手指移動。如果界面不動，那么在滑動結(jié)束之前，就無法知道到底發(fā)生了什么。沒有反饋的滑動手勢會像一個鍵盤，在你輸入一個字母之前，它不會有任何反饋。手勢不能等到完成時才反饋。為了讓界面感覺反應(yīng)迅速，還必須是連續(xù)的反饋，當(dāng)用戶的手指移動的時候，界面也應(yīng)該移動。

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。