《HTML5觸控介面設計與開發》——1.4 神祕谷,是什麼讓觸控介面反應靈敏?

非同步社群發表於2017-05-02

本節書摘來自非同步社群《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章中瞭解更多有關“雙指縮放和其他的複雜的手勢”的知識。)


相關文章