基于“Pen + Touch”輸入模態的三維桌面系統的設計與研究

高陽，殷繼彬

?

基于“Pen + Touch”輸入模態的三維桌面系統的設計與研究

高陽，殷繼彬

摘 要：隨著自然交互技術的發展，多點觸空等新型交互方式不斷涌現。“筆+觸控（pen+touch）”交互符合用戶自然直觀的交互特點，得到更多研究者的重視。傳統的GUI桌面系統是基于鼠標和鍵盤而設計，在很多方面并不適合筆和觸控自然交互設備，并且在操作上和視覺上與真實的桌面操作迥異。因此提出了基于“Pen + Touch”輸入模態的三維桌面系統，為桌面操作賦予了更多的自然物理屬性如質量、維度、重力等，并設計了一些交互技術能夠實現目標的隨意拖動、縮放、旋轉、歸整等效果。針對三維桌面系統的可操作性，進行了用戶實驗，結果表明該系統的操作性更真實、自然。

關鍵詞：三維桌面系統；筆式輸入；觸控輸入

殷繼彬（1966-），男，昆明理工大學，計算機重點實驗室，副教授，碩士生導師，研究方向：人機交互，昆明，650500

0 引言

人機交互技術的發展使得自然直觀的交互方式越來越受到廣大用戶的青睞，特別是多點觸控技術已變得非常成熟。筆+觸控的交互模式源于對“人們單手執筆，雙手配合在書本上完成勾勒、注釋等任務”的抽象，因其自然、直觀和高效的特點已成為了研究的重點。筆的輸入精度高，常用來寫、繪制線條，觸控只需使用赤裸的手即可完成交互任務，但是存在肥手指問題。筆+觸控交互結合筆交互和觸控交互的優勢，彌補了筆交互和觸控交互單獨設計時存在的缺陷，豐富了界面設計的交互屬性，隨著硬件設備的發展以及對筆和觸控很好的支持，筆+觸控技術被認為是很有前景的交互方式。基于鍵盤和鼠標輸入的GUI桌面系統如圖1所示：

圖1　（a）傳統的GUI桌面.（b）真實的桌面. （c）三維桌面系統

Windows桌面如圖1（a）因其局限性已不再適合筆和觸控交互的設備，另外這種傳統的桌面系統局限于一個二維空間，桌面采用嚴格的層次結構進行文檔布局并且其操作方式已不再符合NUI(自然交互界面)的理念。在真實的桌面中，我們經常看到許多文檔散亂地堆疊在一起或者按照一定的順序整齊的排列如圖1（b），而且我們常使用雙手進行文檔操作，傳統的GUI界面在視覺上和操作上都無法實現這種真實的效果。因此我們提出了基于“Pen + Touch”輸入模態的三維桌面系統如圖1（c）。

在該系統中，桌面被賦予一些自然的物理屬性，這些物理屬性可以使該桌面達到真實桌面的效果。在操作桌面文檔時，我們能真實的感受到這些物理效應，就像我們操作真實的文檔一樣。另外我們研究筆和觸控的輸入特性并結合人們使用雙手操作的習慣設計了一些自然高效的交互技術對文檔進行選擇、移動、復制、刪除、縮放、縮放、歸整和排列等操作。

1 相關研究

Anand Agarawala[1]等人關于桌面系統的研究提出一種桌面隱喻：Pile、Physics和Pen。在他們的研究中，桌面被賦予了一些自然的物理屬性，而且桌面文檔的操作會受到物理特性的影響；文檔采用Pile而非File的形式進行有效的統一的組織。另外，他們設計基于筆輸入的交互技術對文檔進行選擇、移動、預覽以及Pile的創建操作。這種設計很好的模擬了真實桌面的操作行為，我們也借鑒了一些可行性的設計運用到我們的桌面系統中并進行了創新設計。

移動設備的出現使用戶可以與設備進行直接的交互。在當今的移動設備中，多點觸控技術已變得非常成熟并且已經得到了廣泛的應用，例如：一根手指的平移，兩根手指擠壓，4根手指的滑動等。Chris Harrison[2]等人通過觀察人們在現實世界中使用物理工具的行為提出了一些豐富的觸控手勢。在之前的研究中，研究者總是把筆和觸控分離開來進行研究。最近幾年，隨著硬件設備對筆和觸控很好的支持，例如：iPad，以及筆+觸控交互自然直觀的特點，研究者開始對筆+觸控交互進行探索研究，并證明了筆+觸控交互可以產生更加豐富的交互技術同時也使操作變得更加自然、高效。Ken Hinckley等人[3-4]通過觀察人們使用筆記本和紙張的手工操作行為設計了一個以記錄和剪切簿為中心的Microsoft surface應用程序模型。根據他們的研究，筆和觸控進行了明確的勞動分工，慣用手持筆書寫，雙手配合進行操作，筆和觸控產生新的交互行為。例如：筆可以當做刀子用來切割圖片；筆和觸控配合操作進行圖片的復制等。Mathias Frisch等人[5]關于筆+觸控對圖表編輯的有效性進行了研究，他們通過記錄和分析參與者使用自然的手勢完成給定的14個任務的操作行為得出筆+觸控交互對于圖表的編輯是非常有前途的。Fabrice Matulic[6]等人設計了一個基于筆+觸控交互的并且能夠支持文檔創建活動的數字桌面系統模型。所有的這些研究都表明筆+觸控交互所帶來的有效性和自然性。研究者已經對筆+觸控交互和三維桌面設計進行了相關的研究，我們在前人研究的基礎上繼續創新并設計基于“Pen + Touch”輸入模態的三維桌面系統。

2 設計目標

在此3D桌面系統設計中，為了更好的表現其交互性和真實性，我們實現以下3個設計目標：

2.1 真實的感覺

桌面的操作空間從2D擴展到了3D，并且桌面圖標采用立體的形式展示，這在視覺上給用戶一種真實感。桌面文檔與真實的文檔具有一樣的屬性，當操作此3D桌面上的文檔時如同操作真實的文檔一樣。通過對桌面的嘗試性操作，用戶可以感知桌面上的文檔受重力和摩擦力的作用；對象之間可以發生碰撞、反彈；對象可以隨意移動并相互堆積。當然，用戶也可以像貼便利貼一樣使對象吸附在墻壁上（圖1 c）。

2.2 Pen + Touch交互

我們把“Pen + Touch”交互作為主要的交互方式，并且結合人們在現實中使用雙手操作文檔的行為設計一些新穎交互技術操作文檔。我們致力于研究文檔的選擇、移動、復制、刪除、歸整等交互技術。同時避免那些有歧義性的交互設計。

2.3 自然性、易學性

我們把用戶已熟知的觸控技術加入到設計中，例如：點擊、滑動、長按等手勢，并設計符合人們操作習慣（慣用手持筆，非慣用手進行觸控操作，慣用手與非慣用手相互配合操作）的交互技術。我們避免設計復雜的交互手勢，從而減輕用戶的認知和記憶負擔，同時我們采用了適當的視覺提示使交互更易操作。這樣可以使用戶很快的從一個新手變成一個熟練操作者。

3 3D桌面原型設計

3.1 視角設計

桌面由三面墻壁圍繞而成（圖1 c），這樣就形成了一個3D的空間視角，并且墻壁也限定了文檔的可操作范圍。桌面的一端被抬起30度使桌面呈現出一定的傾斜度，這樣用戶就可以以俯視的視角觀察桌面的每一個角落以及桌面上所有的文檔。當用戶進行桌面操作時就如同在一個真實的空間中操作真實文檔一樣。

3.2 文檔圖標設計

桌面系統使用各個面被貼圖的長方體圖標來代替各種不同類型的文檔。圖標主要采用多邊形建模技術和貼圖技術實現，無論桌面中的文檔以什么樣的形式存在，用戶總可以根據文檔每個面的貼圖對其類型進行判定。桌面文檔并非采用嚴格的層次結構進行布局，而是以相對自由的方式散落在桌面上。

3.3 自然物理屬性

此3D桌面系統為桌面賦予了一些自然的物理屬性，如重力，質量，摩擦力等，使桌面文檔與真實的文檔具有相同的特性。這些物理屬性采用物理引擎組件技術實現。當操作文檔時，文檔會觸發一些物理效應，例如：文檔受重力作用停留在桌面上；當拖動文檔撞擊其它文檔時彼此會產生彈力作用；文檔受慣性而運動，受摩擦力作用靜止。這些自然的物理屬性使此桌面系統比傳統的GUI桌面更具表現力，操作更靈活、更自然，同時也對文檔的運動產生積極的影響。

4 交互技術設計

筆+觸控交互是此桌面系統的主要交互方式。在這個桌面系統中，我們通過研究筆輸入、觸控輸入以及筆和觸控的同時輸入設計了一些自然、高效的交互技術。

4.1 文檔選擇技術

我們采用了兩種選擇技術對文檔進行選取，即：區域選擇和線條選擇。這兩種選擇技術能夠根據用戶的意圖實現對任意文檔的選擇。

4.1.1 區域選擇技術

區域選擇技術主要采用掃描的原理實現。當執行此選擇時，筆和手指之間會形成一條無形的線段，這條線段的長度和角度跟隨手指與筆之間的位置變化而改變，并且線段掃描到的區域內的文檔會被選中。區域選擇技術實現了不規則區域內文檔的選擇，與Peter Brandl[7]等人提出的矩形框選擇技術和多邊形選擇技術相比其選擇的自由度更靈活。另外，區域選擇技術使用筆和手指相互配合進行操作，在操作的時間效率及便捷性上與Anand Agarawala[1]等人提出的套鎖選擇技術相比有很大改善。在此3D桌面模型中我們使用區域選擇技術對連續區域內的文檔進行選擇，如圖2所示：

圖2　GUI桌面系統.

其操作如圖2（a）所示：首先，用戶使用一根手指長按桌面的空白區域，然后使用筆在距離手指大于1cm的桌面空白位置1處圍繞手指移動到位置2處。隨著筆的移動，一個綠色的不規則的半透明區域就會顯示在桌面上，區域的大小和形狀會隨著筆的運動軌跡發生變化。當選區繪制完畢，落在區域內的文檔就會被選擇。

4.1.2 線條選擇技術

線條選擇技術是為了配合區域選擇技術進行文檔的選擇，它主要用來選擇離散分布的文檔。線條選擇技術主要采用筆的運動軌跡原理，當筆從文檔的一側劃上文檔本身并且從另一側劃出時，被劃過的文檔會被選擇。我們使用兩根手指和筆配合操作實現多個離散文檔的選擇。如圖2（b）所示：首先，用戶用兩根手指（手指之間的距離不超過1cm）按在桌面的空白區域，然后使筆在桌面上從位置1移動到位置2，有3個文檔被筆的運動軌跡劃過，則這3個文檔會被選中。

4.2 新型3D軸形菜單技術與觸發機制

此桌面系統引入了3D軸形菜單技術，通過3D軸形菜單技術我們可以很方便地通過執行相應的菜單命令進行文檔操作。3D軸形菜單分為主菜單和子菜單兩部分并且以滾動的方式顯示菜單項，這種顯示方式使用戶的注意力完全集中于菜單本身，避免了用戶視線在菜單選項間來回轉移。對于菜單命令的執行，用戶只需滑動菜單點擊即可，這樣避免了筆或手指在桌面上的大幅度移動，從而降低了用戶操作時的疲勞度。3D軸形菜單技術屏蔽了傳統菜單如條形菜單和下拉菜單操作上的缺點；而且3D菜單通過觸發顯示，這樣可以使用戶在操作時只關注任務本身。如圖3所示：

圖3　3D軸形菜單

用戶只需按照箭頭方向滾動菜單便可進行菜單項預覽，通過點擊執行菜單命令。

對于菜單的觸發，我們采用了視覺圖標提示機制。通過視覺圖標的自動顯示提示用戶是否觸發菜單，用戶只需點擊提示圖標就可以實現菜單的觸發。如圖4所示：

圖4　菜單觸發操作

文檔選擇完畢（這里我們使用區域選擇技術），當筆從桌面上抬起且手指依然停留在桌面上時，在手指的右側會彈出一個圓形的提示圖標（圖4 a），圖標會跟隨手指移動并在手指離開桌面時消失。當我們用筆點擊圖標時（圖4 b），就會彈出一個3D軸形菜單（圖4 c），當我們再次點擊圖標時，菜單會消失。

4.3 文檔的移動技術

文檔采用拖拽的方式跟隨手指或筆進行移動。如何判斷所觸摸到的文檔，我們使用了射線碰撞的原理：從手指和筆觸碰到的屏幕位置向三維空間投射一條射線，射線碰撞到的文檔圖標即為該手指或筆觸摸的文檔。對于文檔的移動，我們采用多點操作的方式，使手指和筆可以同時移動文檔。4.3.1 單一文檔移動

用戶可以使用筆拖動某一個文檔移動，如圖4a所示：筆拖動一個文檔沿著箭頭所示方向從位置1移動到位置2。當然也可以使用手指進行拖動。

4.3.2 多文檔移動

多文檔移動采用多點觸控和筆配合操作方式同時控制多個文檔的移動，如圖5所示：

圖5　文檔的移動

如圖5（b）所示：同時使用筆和手指分別拖動兩個不同的文檔分別沿著箭頭①和箭頭②的方向移動。當然我們還可以增加手指的數量（3-5個）同時控制更多的文檔在桌面上移動。

4.3.3 組文檔移動

我們使用選擇技術使文檔成為一組，被選中的文檔之間通過Hinge Joint（鏈條關節，這種關節是看不見的并且在多個文檔被選中時創建，取消選擇時銷毀）進行首尾相連成為一組。我們只需拖動其中的任意一個文檔即可使此組文檔進行整體移動。如圖5（c）所示：使用筆拖動此組文檔從位置1移動到位置2。

4.4 文檔的縮放、旋轉技術

在此桌面系統中，我們根據筆與目標文檔間的距離變化以及徑向滑動方向設計文檔的縮放并根據筆圍繞文檔的轉動方向旋轉文檔。為了避免縮放和旋轉的并發執行，我們設置了區域限制，筆在距離目標文檔2.5cm外的范圍內滑動執行文檔縮放操作，在距離目標文檔2.5cm內的范圍內轉動執行旋轉操作，如圖6所示：

如圖6（a）（b）所示：首先手指選中目標文檔，筆（距離文檔中心2.5cm之外的范圍）沿著箭頭方向遠離和靠近目標文檔對其進行縮放；如圖6（c）（d）所示：筆（距離文檔中心2.5cm的范圍內）沿著箭頭方向轉動對目標文檔進行旋轉。

4.5 文檔的復制、刪除技術

在此桌面系統中，我們使用預置的方法實現文檔的復制。預置即為把要復制的目標文件預先在系統中生成一個副本，在執行復制操作時就會在桌面上創建這個副本文件，如圖7所示：

圖7　文檔的復制和刪除操作

如圖7（a）（b）所示：使用筆長按目標文檔，然后使用一根手指按住桌面空白區域，筆沿著箭頭①移動創建出副本1，當筆繼續沿著箭頭②和箭頭③移動分別創建出副本2和副本3，從而實現了文檔的多重復制。這種復制技術與Ken Hinckley[4]等人提出的從原始物體上拖拽復制的方法以及Mathias Frisch[8]等人提出的使用兩根手指同時按住原始物體，沿著筆的移動軌跡復制的方法相比在操作和執行效率上有了很大的改進。

我們使用手指或筆拖動文檔到桌的邊緣執行刪除操作。刪除技術采用觸發器的原理并結合提示菜單實現。我們在桌面的邊緣設置觸發器，當文檔碰觸到觸發器時就會自動彈出提示菜單，通過菜單可以執行刪除操作。如圖7（c）（d）所示：使用筆拖動一個文檔到桌面的邊緣處，這時會自動彈出提示菜單，提醒用戶是否刪除。用戶使用筆點擊菜單選項，當點擊Yes按鈕，物體會被刪除，當點擊No按鈕，物體則會被彈離邊緣。這種刪除技術使文檔的刪除變得更加方便快捷，通過引入提示菜單避免了用戶誤刪除操作。相對于Mathias Frisch等人[5]提出使用筆或者手指拖動圖表節點到屏幕的邊緣進行刪除技術有很大改進。

4.6 文檔的歸整與排列技術

我們使用Pile[1]作為文檔的歸整形態。Pile作為一種新型的文檔歸整形態已經得到了研究者的認可并且其布局方式相對于File更適合此3D桌面系統。Pile中的所有文檔都依照最底層的文檔（我們稱此文檔為Reference Document，簡稱RD）進行布局和排列。對于Pile的創建，首先我們使用兩根手指（手指間距S0＜2.5cm）跨越文檔的兩側，手指之間會產生一條無形的掃描線檢測是否有文檔存在（射線檢測原理），如過存在則記錄為RD；接著我們使用筆依次選擇其它文檔就可創建Pile，并且文檔依照被選擇的順序整齊有序的在Pile中排列。依據文檔存在的不同方式，我們設計3種交互方式對不同的文檔進行歸整操作。

4.6.1 離散文檔歸整

使用筆依次點擊離散分布的文檔，文檔按照被點擊的順序依次放置在RD上，并且和RD保持相同的旋轉角度，最后被選中的文檔將會放置到Pile的到最上方，如圖8所示：

圖8　文檔的歸整操作

如圖8（a）（b）所示：首先選取RD，然后使用筆依次點擊文檔1、文檔2、文檔3和文檔4，最終所有文檔以Pile形態歸整在一起。

4.6.2 同類型文檔歸整

對于同一類型文檔，用戶只需使用筆點擊RD，當筆抬起時，桌面上所有與RD類型相同的文檔依次排列在RD上方。如圖8（c）（d）所示：桌面中所有的QQ文檔以Pile的形態歸整在一起。

4.6.3 連續文檔歸整

對于連續區域內文檔，我們結合了區域選擇技術進行實現。如圖8（e）（f）所示，使用區域選擇技術選擇連續分布的文檔，當筆抬起時，所有被選中的文檔以Pile的形態歸整在一起。

5 實現

這個桌面系統運行在一個支持筆和觸控輸入的平板電腦上。整個桌面系統的設計借助Unity 3D來實現，交互設計采用C#語言進行編程實現；桌面空間的搭建以及圖標、菜單的制作主要通過3dMax建模完成；桌面文檔的物理屬性主要借助Unity 3D物理引擎實現。

6 用戶評估和結果

為了評估此3D桌面系統的可用性及操作的復雜性，我們進行了用戶評估實驗。我們邀請10個年齡在18-25歲之間的測試者（5名男士和5名女士，其中一人的慣用手為左手，剩余所有人的慣用手為右手，并且他們都具有熟練使用筆和操縱平板電腦的能力）進行測試。

首先我們用5分鐘時間并且在沒有任何說明的情況下讓測試者根據他們自己的經驗去操作這個桌面。我們通過觀察發現，大多數測試者很容易完成一些基本的操作，例如：對象選擇、移動、縮放等。然后，我們用了10分鐘時間把測試者沒有發現的交互技術介紹給他們，并對整個桌面所有的交互技術進行了詳細的介紹。最后讓每一個用戶分別完成給定的11個操作任務，如果有測試者在操作過程中忘記的某個任務的操作方式，他們可以詢問工作人員后繼續完成后面的任務。當每個測試者完成所有的任務后，我們分別記錄他們完成的時間并且讓他們填寫一份調查問卷。

結果發現大部分測試者都能在很短的時間內完成這些任務，操作方式越簡單，就越容易完成。根據調查問卷的統計顯示，90%的測試者認為此桌面系統很容易操作并且非常喜歡這個桌面，20%的用戶表示操作存在復雜性，10%的用戶表示操作的流暢性不是很好。

7 總結

本文為桌面操作賦予了一些自然的物理屬性，同時把筆和觸控作為主要的交互方式設計并實現了基于Pen + Touch輸入模態的3D桌面原型系統，與傳統的桌面系統相比，此桌面系統更加真實、直觀。同時我們設計出的一些交互技術使桌面的操作變得高效、自然。未來，我們將進一步研究此三維桌面系統的交互技術，主要研究文檔的預覽、排序、散開以及Pile的操作，使此桌面系統更加完善。

參考文獻

[1] Anand Agarawala, Ravin Balakrishnan. Keepin' It Real: Pushing the Desktop Metaphor with Physics Piles and the Pen[J]. CHI. 2006, 1283-1292.

[2] Chris Harrison, Robert Xiao, Julia Schwarz, Scott E. Hudson. Touch Tools: Leveraging Familiarity and Skill with Physical Tools to Augment Touch Interaction. [C]CHI. 2014, 2913-2916.

[3] Ken Hinckley, Koji Yatani, Michel Pahud, et al. Pen + Touch = New Tools.[J] UIST’10. 2010, 27-36.

[4] Ken Hinckley, Jenny Rodenhouse, Koji Yatani, et al. Manual Deskterity: An Exploration of Simultaneous Pen + Touch Direct Input.[C] CHI. 2010, 2793-2802.

[5] Mathias Frisch, Jens Heydekorn, Raimund Dachselt. Investigating Multi-Touch and Pen Gestures for Diagram Editing on Interactive Surfaces.[J] ITS '09. 2009, 149-156.

[6] Fabrice Matulic, Moira C. Norrie, Heiko Schuldt, et al. Gesture-Supported Document Creation on Pen and Touch Tabletops.[J]CHI.2013, 101-106.

[7] Peter Brandl, Clifton Forlines, Daniel Wigdor, Michael Haller, et al. Combining and Measuring the Benefits of Bimanual Pen and Direct-Touch Interaction on Horizontal Interfaces,[J] ACM, 2008, 154-161.

[8] Mathias Frisch, Ricardo Langner, Raimund Dachselt. NEAT: A Set of Flexible Tools and Gestures for Layout Tasks on Interactive Displays. [J].ITS'11 2011, 1-10.

Design of 3D Desktop Interface Based on Pen + Touch Input Modalities

GaoYang, Yin Jibin
(The Key Laboratory of Computer, Kunming University of Science and Technology, Kunming 650500, China)

Abstract:With the development of natural interaction technique, the new interaction modes such as multitouch emerge constantly. Pen + Touch interaction in accordance with the natural and intuitive interaction characteristics has been made attention by more researchers. The traditional GUI desktop system is designed based on the mouse and keyboard, and isn’t suitable for the pen and touch of natural interaction devices in many aspects, moreover, it is different from the real desktop on operation and vision. So we put forward the 3D desktop system based on pen and touch input modalities which provides more natural physical properties such as mass, dimension, gravity etc to the desktop operation, in addition, we have designed a lot of interaction techniques which can implement drag, scaling, rotation and manipulation of the objects .For the operability of the 3D desktop system, we designed a user experiment and the results demonstrate that the desktop system operates more real and more natural.

Key words:3D Desktop System; Pen Input; Touch Input

收稿日期：（2015.12.01）

作者簡介：高 陽（1991-），男，昆明理工大學，計算機重點實驗室，碩士研究生，研究方向：人機交互，昆明，650500

基金項目：國家自然科學基金項目（61262042）

文章編號：1007-757X(2016)02-0005-05

中圖分類號：TP311

文獻標志碼：A