基于多點觸控操作的網頁界面設計趨勢研究

涂 俊，鮑 海，李曉娟

南開大學文學實驗教學中心，天津 300071

在計算機語境下，多點觸控 (Multitouch 或Multi-Touch)是一項接口技術，它通過在設備表面多點的壓力和手勢允許用戶進行輸入[1]。Moseovich 對多點觸控技術是這樣定義的：在同一個應用界面上，沒有鼠標、鍵盤，而是通過人的手勢、手指和其它外在物理設備直接與電腦進行交互，實現多點、多用戶在同一時間直接與虛擬的環(huán)境交互[2]。多點觸控技術把任務分解為兩個方面的工作[3]，一是同時采集多點信號，二是對每路信號的意義進行判斷，也就是所謂的手勢識別，從而實現屏幕識別人的五個手指同時做的點擊、觸控動作。

在過去，一直是依賴鼠標鍵盤的單點選擇方式支配著我們與計算機互動，在實現一些選擇功能時，只能憑借按鈕和鼠標的點擊拖拽。多點觸控技術的出現和流行，擴展了多種手勢的應用，用戶通過手勢與計算機進行交互操作，極大地提高了信息傳遞的效率，給予用戶最自然的操作體驗。這樣一來，使得計算機的界面樣式、用戶的使用習慣以及用戶與計算機的交互操作方式都發(fā)生了重大變革。蘋果、微軟等大公司均在不斷推出有關多點觸控方面的新產品，不斷做著各種嘗試。但針對計算機屏幕的多點觸控技術尚在開發(fā)和試驗中。隨著新技術的成熟，時下針對鼠標鍵盤傳統(tǒng)點擊輸入方式的計算機界面設計在未來必然會做很大的變革，因此有必要研究在多點觸控操作下的網頁界面設計趨勢。

1 計算機網頁界面設計的分析研究

1.1 傳統(tǒng)鼠標操作下的界面設計分析

在觸控技術還沒有形成以前，對于計算機的控制我們只能依賴第三方設備進行操控，鼠標鍵盤一直是人們輸入信息的主要方式。它主要有以下特征：1）鼠標選擇方式是一種單點選擇模式，一次只能選擇一個目標，需要很多按鈕、圖標以及供選擇的菜單來完成復雜的交互操作；2）鼠標指針是一種精確定位技術，只有在鼠標指針準確地懸浮于目標點之上才能進行點擊選擇；3）操作中也會經常通過鼠標懸浮來實現一些功能操作，如懸浮變色、懸浮下拉菜單、懸浮更換圖片等等；4）鼠標操作模式下的目標點只要方便鼠標點擊選擇就行，一般都相對較小。

由于鼠標是單點選擇、精確定位模式，所以它所能實現的行為動作很有限，一般情況下只能憑借鼠標上的三個按鍵做幾個簡單動作：左單擊選擇，雙擊選擇，右單擊選擇，滾輪滾動，鼠標拖拽。當進行復雜的多任務操作時，只能靠一些按鈕和菜單欄來實現。如：頁面內容過長，我們不得不增加一個滾動條來進行移動操作；在進行頁面間的切換時我們也不得不增加前進和后退的按鈕去實現相互間的切換選擇；當然幫助、關閉按鈕的存在也變得理所應當等等（如圖1）。

圖1 鼠標操作可實現的動作示意圖

當前網頁界面設計是基于鼠標點擊方式，鼠標點擊選擇的目標點是像素級別的，它的目標點不必很大，所以每個要選擇的目標點都較小，只需要能夠選中即可。人們的瀏覽習慣通常是從左往右，從上往下，所以左邊的內容往往比右邊的更能引起人的注意，上面的內容比下面的更容易引起人注意。鼠標控制下的頁面導航、標題、圖標等可供點擊選擇的重要的東西總是以上部和左邊為主。

1.2 多點觸控下的界面設計分析

多點觸控是利用手指去直接與電腦觸控來進行操作，相對于鼠標具有自己的特征：1）多點觸控是一種多點選擇模式，用戶可以使用多指與系統(tǒng)進行交互操作，在選擇任務時也可以同時選擇多個，通過不同的手勢實現各種各樣復雜的操作命令；2）多點觸控是一種模糊定位技術，目標選擇的時候，它不能像鼠標那樣可以精確地選擇目標；3）多點觸控通過人的手勢、手指直接與電腦進行交互操作，面對目標點用戶只需要決定是否要點擊，不會有諸如鼠標那種懸浮的狀態(tài)；4）手指的大小要遠遠大于鼠標指針的大小，所以對于標題、按鈕、圖標等頁面元素的大小相對于鼠標下的界面元素要大；5）由于人手不具備半透明性，多點觸控對操作目標可能會存在不可避免的遮擋性。

蘋果開發(fā)生產的觸控板，對于多點觸控手勢有了一些應用。微軟推出的surface，在超大顯示設備上，多點觸控技術也有了一定的應用；蘋果推出的Multi-Touch 觸控板、Multi-Touch 鼠標對多點觸控技術也做了很多嘗試，圖2 是蘋果運用的一些多點觸控上手勢。

圖2 多手勢圖（來源于蘋果官網）

目前平板電腦上對于多點觸控技術有了較多的應用，一些網站基于這種觸摸式的平板電腦做了單獨的界面設計。由于選擇目標的模式不同，多點觸控下的用戶界面的架構布局與鼠標點擊下的界面有很大的不同，每一個版塊兒的出現都需要考慮到手指的大小，以便于準確做出選擇。例如新浪網就針對不同的載體分別提供網頁版、iPad 版和手機版的用戶界面。

1.3 小結

人機交互是伴隨著計算機的出現而產生的一門綜合學科。人機交互從人適應計算機發(fā)展到計算機來不斷適應人的需求[4]，多點觸控下的界面設計，允許用戶利用人本身的內在感覺和認知技能，通過多手勢和手指以非精確的方式與計算機進行交互操作。根據不同的功能采用不同的手勢行為，在整個流程體驗過程中只需要用手直接觸控屏幕便可以實現很多復雜的任務，這種交互方式具有更強大的表達能力，自然性，便捷性和高效性。Sears 和Shneiderman[5]的實驗表明，對于單目標的選擇任務，直接觸摸的性能要優(yōu)于鼠標。多點觸控顯示屏允許用戶直接用手和手指在顯示的對象上操作，而不必思考屏幕上的鼠標光標的相關位置或指針的移動。而多點觸控下的界面信息需要重新整合，總結出一套針對多點觸控的信息流，用戶可以更加方便快捷地做出選擇。

2 多點觸控操作下的網頁界面設計趨勢研究

2.1 多手勢的研究分析

多點觸控技術是基于手的觸控來實現人與計算機的交互操作，手部操作是整個交互過程的靈魂，因此，用戶的手勢表達一定得符合人們的日常行為習慣和認知體驗，能夠清楚表達意思并被用戶輕松采納的簡單手勢。例如（如圖3），旋轉這一行為操作，一只手或兩只手圍繞著一個中心旋轉即可實現圖片元素的旋轉，這非常符合我們生活中的認知心里。當然，由于發(fā)展時間有限，對于手勢目前沒有一種公認的標準規(guī)范，對于同一個功能，不同的產品有著不同的手勢操作。如蘋果的一些手勢操作和微軟的一些手勢操作就不統(tǒng)一，在用戶實現同樣的命令時，困擾他們的是究竟采用哪種手勢可以進行操作，對于用戶認知形成了一些障礙。因此手勢還需要更進一步的完善和發(fā)展。

圖3 手勢旋轉示意圖

2.2 觸摸點的形狀和大小

每個人的手指大小是不同的，同樣的一個人每個手指的大小也有很大的差異性，這就會對觸摸點的大小有很大的影響。在實際操作中，決定使用哪個手指去表現手勢也要考慮到手指的特性和人機工程學。人們在實際使用過程中，手指的觸摸方式分為兩種——垂直觸摸和傾斜觸摸，垂直觸摸發(fā)生在當手直接向下點擊界面時，相反，傾斜觸摸需要與界面形成一定的角度。鑒于多指多行為動作的需要，在進行交互操作時發(fā)生更多的還是傾斜觸控。如圖4 所示，當手指傾斜地觸控界面時形成的區(qū)域，形狀和操作方向，手指觸控的區(qū)域略小于人的手指的大小，觸控感應到的形狀是橢圓形[6]。

圖4 手指觸摸點的形狀示意圖

在GUI 設計中每個正方形的目標點的每個邊至少應該是11.52 mm（28.76px），在設計圓形觸摸點時 ，半徑也應該大于5.76mm（14.38px）。蘋果在iPhone 人機界面指南中，建議的最低目標尺寸為44 像素寬44 像素高。當然這些只是針對iphone 和ipad 這種小尺寸的顯示設備而言的，是可以完成點擊操作的規(guī)范。在設計計算機界面時還要考慮點擊時最舒適的尺寸規(guī)范，界面中的按鈕和文件元素應該以成人手指決定16mm-20mm（45px-57px）。

2.3 文字與圖標

在網頁界面設計中，文字是最重要的構成元素之一，具有比其他視覺元素更加易于辨識的信息傳達的明確性[7]。因此在網頁界面設計中，對于文字的處理一定要符合瀏覽者的使用情況，基于用戶的操作方式，網頁中的文字主要包括標題、正文信息、文字鏈接幾種主要形式，對于不存在鏈接的標題和正文信息只要滿足基本的平面版式要求，能夠清晰準確地傳達信息即可。

而在多點觸控下那些需要點擊的文字鏈接相對于鼠標下會發(fā)生很大的變化，圖5 中左邊是在鼠標精確定位下的文字編排，用戶可以準確地選擇目標對象，右邊換成是手指觸控，用戶無法精確地去選擇單一的目標，在操作上造成無法避免的誤差。因此多點觸控下的網頁，鏈接文字間的行距一定要滿足手指觸控的要求。

圖5 鼠標操作接觸點與手指觸控接觸點在文字上的變化

鼠標點擊模式下，對于部分按鈕，如關閉，返回，最大化，最小化，幫助等等這些基本功能只能靠增加一些圖標來實現。因此，鼠標下的網頁界面總是有很多的圖標需要用戶點擊，而在多點觸控模式下，部分圖標功能僅僅依靠手勢就能夠實現。

2.4 布局模式

鼠標點擊模式下的選擇目標是像素級的，多點觸控下觸控點的大小相較于鼠標點擊要大很多，因此目前的列表選擇方式就變得不那么方便。手勢的操作比鼠標操作更加豐富，可以實現復雜的多任務操作。通過人們的生活經驗可知，用手指去做旋轉，滑動，掐捏這些動作會更加自然舒適，因此對于傳統(tǒng)的單點點擊操作應該盡可能去減少，網絡界面是一個無限大的系統(tǒng)，而不是去一級一級地進行列表式操作，更多的是利用多個手指的拖拽，旋轉，縮放，點擊目標，尋找用戶自己感興趣的信息。

2.4.1 過渡型階段

考慮到用戶早已習慣了傳統(tǒng)的鼠標點擊操作，用戶需要對復雜的手指觸控慢慢適應，這樣通常會有一種過渡型的界面樣式。以新浪的新聞首頁為例，做了一些探索式的頁面布局設計。

方案一（如圖6），頁面整體采用兩欄式的分欄方式，考慮到人手的特性和人們日常的行為習慣，避免用戶操作時手會遮擋部分內容，導航條放置在界面最下部，手指左右滑動實現導航信息的來回切換。正文板塊兒以圖文結合的方式，每個板塊兒的空間足夠用戶去觸控點擊。圖片新聞采用大圖顯示方式，滑動三個手指能夠瀏覽不同的資訊。

圖6 方案一：導航和滑動式

方案二（如圖7），導航信息的出現是通過點擊左上角的彈出式按鈕，每個導航標題設計成能夠明確代表該導航的圖標，這樣導航便以一種更加清晰直觀的形式呈現給用戶。

上述方式是過渡型的界面樣式，它們依然局限在傳統(tǒng)的列表操作。這種過渡型的階段，只是在圖標和文字的大小，內容板塊兒的大小和位置，導航信息的位置和形式上做了一些調整。

2.4.2 革新型階段

革新式階段沒有傳統(tǒng)的菜單列表，沒有明確分欄形式，所有信息統(tǒng)一在一個無限大的界面中。需要強調的是基于鼠標操作的界面是分頁式或者標簽式的分層級方式，而基于多點觸控的界面的發(fā)展趨勢是“zoom in”（放大）或“zoom out”（縮小），即縮放式的分級方式。用戶通過縮放界面去尋找自己所需要的信息，利用多個手指的手勢實現復雜的任務操作。

圖7 方案二：按鈕和滑動式

方案三（如圖8），采用移動及縮放式布局。頁面沒有明確的分欄及列表菜單，菜單采取模塊式布局，信息內容呈現在小的板塊兒里面，用戶通過多手指的“zoom in”（放大）和“zoom out”（縮小）來控制菜單及內容的呈現方式。板塊與板塊之間可以拖動，用戶可以根據自己的需求去定制新聞板塊兒的位置。

圖8 方案三：移動及縮放式

方案四（如圖9），采用局部縮放的旋轉和滑塊式布局，滿足分級界面的要求。新聞分類信息采用輪盤的形式，觸控點是一種弧線式的運動方式，用戶利用多個手指轉動輪盤去選擇不同的新聞內容，右側標尺顯示每個新聞分類的下一級標題，通過倆個手指的“zoom in”（放大），能夠看到更多詳細的新聞資訊。右側的這些小的新聞信息都是可以移動的，用戶可以根據自己的喜好去移動相應的信息條目。

圖9 方案四：旋轉和滑塊式

方案五（如圖10），采用斜拉式布局，能夠充分滿足手臂的作業(yè)域，并且圍繞關節(jié)形成扇形的活動區(qū)域。沒有明確的分欄形式，沒有繁瑣的列表式操作，多點觸控下用戶只需要運用多個手指沿著斜線方向滑動即可看到不同的新聞資訊。用戶利用五個手指不斷地抓捏，分類信息的顯示會變得更加全面，同時頁面也能夠顯示出更多的新聞類別，當找到自己感興趣的新聞時，他只需要倆個手指的擴張便可以瀏覽到詳細的新聞資訊。整個操作過程中，用戶始終都是運用多個手指抓取、擴張來瀏覽信息，減少了很多單點點擊的動作。

圖10 方案五：斜拉式

4 結論

隨著多點觸控技術的不斷進步，以計算機為平臺的觸摸屏必然會成為一種趨勢，這是符合文化潮流社會發(fā)展的必然結果。只是當下受到一些技術的限制，無法滿足大眾的需求，但是很多大的公司都在不斷做著嘗試，如蘋果公司推出的iphone、ipad 以及微軟公司生產的surface 等。多點觸控的真正意義不僅僅是提供了一種全新的界面操作方式，而且用戶在人機交互方式上也有了一種革新式的改變。從此，計算機界面不再是依靠鼠標單點選擇目標任務，而是轉變成一種多點甚至是多任務的操作形式，界面本身就是一個無限大的系統(tǒng)平臺，用戶在尋找信息的時候很少去單點點擊操作，更多的是通過多種手勢的滑動、縮放、點擊。

[1] Multitouch. URL: http://searchconsumerization.techtarget.com/definition/multi-touch.

[2] Moscovich, T.Multi-touch Interaction in Conference on Human Factors in Computing Systems, ACM New York, NY, USA, 2006.

[3] 陳忠民.指尖上的科技-由iPhone 談多點觸摸屏技術.微型計算機，2007，8.

[4] 楊大松.產品形態(tài)的設計語言探討.合肥聯合大學學報，1998，8 (4) :53.

[5] J.Canny. The Future of Human-Computer Interaction. Queue，2006，4:24-3.

[6] 李樂山.Human-Computer Interface Design 人機界面設計[M].北京：科學出版社，2004.

[7] 付永剛，張鳳軍，戴國忠.雙手交互界面研究進展.計算機研究與發(fā)展，2005(4)：604-612.

[8] Sears, A. and B. Shneiderman. High Precision Touchscreen.Design Strategies and Comparisons with a Mouse. International Journal of Man-Machine Studies.1991. 34593-613.

[9] Wang, F. and Ren, X. Empirical evaluation for finger input properties in multi-touch interaction.Proceedings of the conference on Human factors in computing systems, ACM (2009),1063-1072.

[10] 張帆，羅琦，宮曉東.網頁界面設計藝術教程.人民郵電出版社，2002.