涂 俊，鮑 海，李曉娟

南開大學(xué)文學(xué)實(shí)驗(yàn)教學(xué)中心，天津 300071

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

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

1 計(jì)算機(jī)網(wǎng)頁界面設(shè)計(jì)的分析研究

1.1 傳統(tǒng)鼠標(biāo)操作下的界面設(shè)計(jì)分析

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

由于鼠標(biāo)是單點(diǎn)選擇、精確定位模式，所以它所能實(shí)現(xiàn)的行為動(dòng)作很有限，一般情況下只能憑借鼠標(biāo)上的三個(gè)按鍵做幾個(gè)簡(jiǎn)單動(dòng)作：左單擊選擇，雙擊選擇，右單擊選擇，滾輪滾動(dòng)，鼠標(biāo)拖拽。當(dāng)進(jìn)行復(fù)雜的多任務(wù)操作時(shí)，只能靠一些按鈕和菜單欄來實(shí)現(xiàn)。如：頁面內(nèi)容過長(zhǎng)，我們不得不增加一個(gè)滾動(dòng)條來進(jìn)行移動(dòng)操作；在進(jìn)行頁面間的切換時(shí)我們也不得不增加前進(jìn)和后退的按鈕去實(shí)現(xiàn)相互間的切換選擇；當(dāng)然幫助、關(guān)閉按鈕的存在也變得理所應(yīng)當(dāng)?shù)鹊龋ㄈ鐖D1）。

圖1 鼠標(biāo)操作可實(shí)現(xiàn)的動(dòng)作示意圖

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

1.2 多點(diǎn)觸控下的界面設(shè)計(jì)分析

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

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

圖2 多手勢(shì)圖（來源于蘋果官網(wǎng)）

目前平板電腦上對(duì)于多點(diǎn)觸控技術(shù)有了較多的應(yīng)用，一些網(wǎng)站基于這種觸摸式的平板電腦做了單獨(dú)的界面設(shè)計(jì)。由于選擇目標(biāo)的模式不同，多點(diǎn)觸控下的用戶界面的架構(gòu)布局與鼠標(biāo)點(diǎn)擊下的界面有很大的不同，每一個(gè)版塊兒的出現(xiàn)都需要考慮到手指的大小，以便于準(zhǔn)確做出選擇。例如新浪網(wǎng)就針對(duì)不同的載體分別提供網(wǎng)頁版、iPad 版和手機(jī)版的用戶界面。

1.3 小結(jié)

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

2 多點(diǎn)觸控操作下的網(wǎng)頁界面設(shè)計(jì)趨勢(shì)研究

2.1 多手勢(shì)的研究分析

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

圖3 手勢(shì)旋轉(zhuǎn)示意圖

2.2 觸摸點(diǎn)的形狀和大小

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

圖4 手指觸摸點(diǎn)的形狀示意圖

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

2.3 文字與圖標(biāo)

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

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

圖5 鼠標(biāo)操作接觸點(diǎn)與手指觸控接觸點(diǎn)在文字上的變化

鼠標(biāo)點(diǎn)擊模式下，對(duì)于部分按鈕，如關(guān)閉，返回，最大化，最小化，幫助等等這些基本功能只能靠增加一些圖標(biāo)來實(shí)現(xiàn)。因此，鼠標(biāo)下的網(wǎng)頁界面總是有很多的圖標(biāo)需要用戶點(diǎn)擊，而在多點(diǎn)觸控模式下，部分圖標(biāo)功能僅僅依靠手勢(shì)就能夠?qū)崿F(xiàn)。

2.4 布局模式

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

2.4.1 過渡型階段

考慮到用戶早已習(xí)慣了傳統(tǒng)的鼠標(biāo)點(diǎn)擊操作，用戶需要對(duì)復(fù)雜的手指觸控慢慢適應(yīng)，這樣通常會(huì)有一種過渡型的界面樣式。以新浪的新聞首頁為例，做了一些探索式的頁面布局設(shè)計(jì)。

方案一（如圖6），頁面整體采用兩欄式的分欄方式，考慮到人手的特性和人們?nèi)粘５男袨榱?xí)慣，避免用戶操作時(shí)手會(huì)遮擋部分內(nèi)容，導(dǎo)航條放置在界面最下部，手指左右滑動(dòng)實(shí)現(xiàn)導(dǎo)航信息的來回切換。正文板塊兒以圖文結(jié)合的方式，每個(gè)板塊兒的空間足夠用戶去觸控點(diǎn)擊。圖片新聞采用大圖顯示方式，滑動(dòng)三個(gè)手指能夠?yàn)g覽不同的資訊。

圖6 方案一：導(dǎo)航和滑動(dòng)式

方案二（如圖7），導(dǎo)航信息的出現(xiàn)是通過點(diǎn)擊左上角的彈出式按鈕，每個(gè)導(dǎo)航標(biāo)題設(shè)計(jì)成能夠明確代表該導(dǎo)航的圖標(biāo)，這樣導(dǎo)航便以一種更加清晰直觀的形式呈現(xiàn)給用戶。

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

2.4.2 革新型階段

革新式階段沒有傳統(tǒng)的菜單列表，沒有明確分欄形式，所有信息統(tǒng)一在一個(gè)無限大的界面中。需要強(qiáng)調(diào)的是基于鼠標(biāo)操作的界面是分頁式或者標(biāo)簽式的分層級(jí)方式，而基于多點(diǎn)觸控的界面的發(fā)展趨勢(shì)是“zoom in”（放大）或“zoom out”（縮?。纯s放式的分級(jí)方式。用戶通過縮放界面去尋找自己所需要的信息，利用多個(gè)手指的手勢(shì)實(shí)現(xiàn)復(fù)雜的任務(wù)操作。

圖7 方案二：按鈕和滑動(dòng)式

方案三（如圖8），采用移動(dòng)及縮放式布局。頁面沒有明確的分欄及列表菜單，菜單采取模塊式布局，信息內(nèi)容呈現(xiàn)在小的板塊兒里面，用戶通過多手指的“zoom in”（放大）和“zoom out”（縮?。﹣砜刂撇藛渭皟?nèi)容的呈現(xiàn)方式。板塊與板塊之間可以拖動(dòng)，用戶可以根據(jù)自己的需求去定制新聞板塊兒的位置。

圖8 方案三：移動(dòng)及縮放式

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

圖9 方案四：旋轉(zhuǎn)和滑塊式

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

圖10 方案五：斜拉式

4 結(jié)論

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

[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 談多點(diǎn)觸摸屏技術(shù).微型計(jì)算機(jī)，2007，8.

[4] 楊大松.產(chǎn)品形態(tài)的設(shè)計(jì)語言探討.合肥聯(lián)合大學(xué)學(xué)報(bào)，1998，8 (4) :53.

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

[6] 李樂山.Human-Computer Interface Design 人機(jī)界面設(shè)計(jì)[M].北京：科學(xué)出版社，2004.

[7] 付永剛，張鳳軍，戴國(guó)忠.雙手交互界面研究進(jìn)展.計(jì)算機(jī)研究與發(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] 張帆，羅琦，宮曉東.網(wǎng)頁界面設(shè)計(jì)藝術(shù)教程.人民郵電出版社，2002.