一種球形人機界面設計

趙風景， 趙 陽， 曾祥緒， 胡 靜， 孫 誠

（1.上海電機學院 電子信息學院，上海200240；2.上海華虹NEC電子有限公司二廠，上海201203）

隨著社會信息化的不斷發展，人類對信息處理操作的效率和趣味性提出了更高的要求。觸摸屏技術的成熟為信息處理操作的便捷和趣味性提供了新的拓展空間[1]。蘋果公司應用多點觸屏的特點開發了適合手指觸控的人機界面，開創了智能手機和平板電腦界面的全新時代，成就了其在IT行業的翹楚地位[2-3]。谷歌公司用其開源的操作系統引導眾多的生產廠商和應用程序開發者推出了大批各具特色的觸控界面，奪得了智能手機和平板電腦市場的半壁江山[4]。微軟公司即將推出的Windows 8和Windows Phone 8針對多點觸屏進行了創新設計，其別具一格的人機界面不僅會令智能手機界面面目一新，還將進一步推進掌上電腦、平板電腦、筆記本電腦、臺式電腦等信息終端設備的界面和配置更新換代，甚至也會影響到服務器類產品[5]。事實上，隨著信息技術不斷發展，人與計算機之間的界面總是在不斷進化。第1代人機界面主要應用開關、按鈕、連接器和指示燈的組合來進行人機交互[6]。當人們能夠通過電傳打字機或鍵盤和顯示器以字符序列方式與計算機進行對話時[7]，此時的人機界面已經進化到了第2代。第3代人機界面的主要特征體現在圖形窗口和鼠標的應用[8]。當前，兼具輸入和輸出雙向功能的多點觸屏被大量用于各類信息終端設備上[9]，其操控畫面和操控方式體現了手指操作的獨特風格，揭示出第5代人機界面的到來。

本文提出一種球形人機界面，適用于配備多點觸屏的信息終端操作系統主界面、文件（資源）管理器界面、搜索界面以及多種應用程序界面，應用本界面能簡化信息處理接續操作的步驟，提高操作的效率和趣味性。

1 界面設計

以使用智能手機為例，用戶進行一項通常的信息處理任務時的操作步驟包括：① 通過主屏幕或應用程序屏幕查找并啟動所需的應用程序；② 當程序啟動完畢后，用該程序查找并打開需要處理的數據文件；③ 打開數據文件后，查找并進入到該數據文件上次的處理位置；④ 進行本次信息處理；⑤ 結束本次信息處理時，關閉該數據文件和應用程序。

把上述這組操作定義為一次（個）信息作業。一次信息作業也可使用如下的操作步驟：① 通過主屏幕或應用程序屏幕查找并啟動文件（資源）管理器程序；② 用文件（資源）管理器程序查找需要處理的數據文件；③ 找到數據文件后，選擇應用程序打開該數據文件；④ 打開數據文件后，查找并進入到該數據文件上次的處理位置；⑤ 進行本次信息處理；⑥ 結束本次信息處理時，關閉該數據文件、應用程序和文件（資源）管理器程序。

由上述操作步驟可見，一次信息作業需要通過多項操作步驟才能完成。一項通常的信息處理任務經常需要經過多次信息作業才能完成，如果能精簡信息作業中的操作步驟，將顯著地提高信息處理操作的效率。為了簡化信息作業的操作步驟，并使操作直觀、方便、有趣[10-15]，本文設計一種球形人機界面，如圖1所示。

圖1 地球儀形人機界面示意圖Fig.1 Globe-shaped interface

圖1中的球形界面把屏幕分為區域1和區域2。區域1的球面為滾動操控區，由r行s列單元組成，其中r，s為正整數。圖1中，r＝s＝5，故區域1劃分為25個單元，這些單元分別用1～15、-1～-10來表示各單元的排序序號。每個單元用于操控和滾動展示一個信息作業標識，一個信息作業標識代表一項信息處理任務，如，信息作業標識11代表一項文件壓縮任務，信息作業標識12代表一項圖像處理任務，信息作業標識13代表一項文檔編輯任務。在默認情況下，區域1中的單元1顯示該區域最新結束的信息作業標識，該區域此前一次結束的信息作業標識則顯示在單元2內，依次類推；當區域1的信息作業標識的數量≥25時，單元-1顯示區域1內結束時間最早的信息作業標識，該區域此后一次結束的信息作業標識則顯示在單元-2內，依次類推，其他的信息作業標識暫不顯示。

區域2為固定操控區，也劃分成多個單元，每個單元用于操控與顯示一個固定的信息作業標識。用戶能在區域2的每個單元內自定義信息作業標識，用于顯示常用的信息作業最新動態并可對其進行操控。一個信息作業標識只能出現在一個區域內，當區域2中單元定義了一個信息作業標識后，該信息作業標識同時從區域1中消失。

信息作業標識的數據結構元素包括信息作業的名稱、程序圖標、窗口小部件、作業現場示意圖、操作位置示意圖以及其他作業關聯數據。其中，作業關聯數據包含該信息作業的用戶ID號、程序地址、主文件及關聯文件地址、關閉前的作業現場數據、關閉前的操作位置數據、主文件關閉時間以及其他相關數據。

一個信息作業標識能呈現出多種外形并自動變換，以適應所在單元的面積及形狀[16]。最小的外形可用小尺寸的窗口小部件，但默認為數據文件名稱和應用程序圖標的組合，其顯示的信息量和占用的面積最小，可作為作業標識出現在區域1頂部行和底部行各單元內的顯示形式。最大的外形可用大尺寸的窗口小部件，默認為數據文件名稱、程序圖標、作業現場示意圖以及操作位置示意圖的組合，其顯示的信息量和占用的面積最大，可作為作業標識出現在區域1中間一行各單元內的顯示形式。其他外形展示的面積和信息量大小則介于上述兩者之間，用于作業標識出現在區域1中其他各行單元內的顯示形式。打開作業標識時，系統根據作業關聯數據啟動信息作業使用的程序，打開信息作業使用的數據文件，恢復數據文件關閉前的現場，定位數據文件關閉前的操作位置等事項，以便用戶能夠接續處理該項信息處理任務。如圖1中的信息作業標識11所示的是一個小外形的作業標識，在默認情況下，該作業標識所在位置表示其作業結束時間在區域1內排序第6。如果打開作業標識11，則“winzip.exe”程序打開數據文件“aa.zip”，并進入到“aa.zip”文件關閉前的操作位置處，用戶可以立即繼續進行文件的后續壓縮操作。

作業標識12為一個默認的中等外形的作業標識，該標識表示該信息作業由“照片查看器”程序處理，數據保存在文件“k.jpg”文件中。在默認狀態下，作業標識12所在的位置表示其作業結束時間最早。打開作業標識12，則“照片查看器”程序打開數據文件“k.jpg”，恢復該數據文件關閉前的編輯現場，并進入到關閉前的編輯位置處，用戶可以立即繼續進行本圖像的后續處理操作。

作業標識13為一默認的大外形作業標識，表示該信息作業經過“Word”程序處理，數據保存在數據文件“a.doc”中。在默認狀態下，該位置放置最新關閉的信息作業標識。打開作業標識13，則“Word”程序打開“a.doc”文件，顯示該文件關閉前的編輯現場，并將當前編輯位置定位到“a.doc”文件關閉前的編輯位置處，使得用戶可以立即接續編輯此文件。上述表明，最新關閉的信息作業其作業標識總是顯示在屏幕的中心位置，顯示面積最大，能夠直觀識別的信息最多，操作也最為快捷。

對于上述人機界面，設計了如下操作方法。

方法1 用物體（如手指、觸控筆等[17]，下同）按壓設備上指定按鈕，或單擊區域2中指定的作業標識，則該球形界面激活，用最新數據和默認方式顯示在屏幕上。

方法2 用物體雙擊球形界面的作業標識，如，連續接觸作業標識2次且間隔時間與停留時間都＜0.05s，則該作業標識打開；若單擊作業標識，則該作業標識當選為當前作業標識。

方法3 用物體在球形界面內滑動后并未立即抬起，則整個球形界面跟隨物體滑動的方向和速度滾動顯示，并隨物體動而動，隨物體停而停。

方法4 用物體在球形界面內滑動后立即抬起，則球形界面跟隨物體滑動方向和速度進行連續不斷地滾動顯示，這種連續滾動顯示隨物體滑動的開始而開始，直到物體再次接觸到該球形界面時才停止。

2 進程設計

為了設計相關進程，需要對信息作業及相關概念的定義作進一步限定：

一次信息作業指：① 用戶對一個數據文件從打開到關閉的所有授權操作（其中該數據文件定義為該信息作業的主文件）；② 如果用戶對一個數據文件從打開到關閉的所有授權操作結果必須記錄到以該文件為主的若干文件中，則這些操作及其派生的對這組文件的信息處理操作同屬一次信息作業，該數據文件同時也為該信息作業的主文件；③ 如果一個應用程序文件的運行不涉及其他文件，或只能并總是隱含使用一個或一組數據文件，則用戶從該程序打開到關閉用其所作的所有授權操作即為一次信息作業，此程序文件定義為該信息作業的主文件；④ 用戶定義的其他信息作業。

信息作業的主文件名默認為該信息作業名。用戶首次打開信息作業主文件定義為該信息作業開始；用戶第2次及以后打開信息作業主文件定義為該信息作業接續；若信息作業主文件當前處于關閉狀態，則定義為該信息作業關閉；信息作業關閉前關聯的應用程序定義為該信息作業程序。

為了實現上述球形界面顯示和操作效果，需要創建4個進程。

進程1 用于生成或更新球形界面。該球形界面由r行s列單元組成，其中r，s為正整數，其值根據球形界面所在屏幕的尺寸與分辨率確定。

進程2 用于生成或更新信息作業序列。當信息作業的關閉時，進程2生成或更新該信息作業標識；當信息作業接續時，進程2隱藏該信息作業標識；當刪除信息作業主文件時，進程2刪除該信息作業標識。每當生成、更新、刪除或隱藏一個信息作業標識時，進程2都要按排列規則對信息作業標識重新進行排序，以形成新的信息作業序列。信息作業序列的默認排列規則是，除區域2內信息作業標識外，現有其余的信息作業標識按信息作業關閉時間倒序排列。用戶也可選定其他的排列規則，排列時，用戶選定的排列規則優先。

進程3 用于生成m行n列的作業矩陣，其中m，n為正整數，m恒等于r或n恒等于s，兩者之中只能選擇其一。若設定m恒等于r，則進程3用信息作業序列元素依序從頭逐列填充作業矩陣，直到信息作業序列最后一個元素或到達作業矩陣設定列數n的最大值nmax為止，其中n和nmax的最小值為s；若設定n恒等于s，則逐行填充該作業矩陣，直到信息作業序列最后一個元素或到達作業矩陣設定行數m的最大值mmax為止，其中m和mmax的最小值為r；作業矩陣中未填充作業標識的元素用空白填充。

進程4 響應用戶的操控動作，調整作業矩陣元素與球形界面單元的對應關系。默認的初始對應關系為作業矩陣前r／2行s列元素依次顯示在球形界面下（右）半部分，作業矩陣最后r／2行s列則依次顯示在球形界面上（左）半部分。

當用物體在球形界面上進行滑動操作時，在內部4個進程的協同作用下，作業矩陣元素首、尾行相連，左、右列相接，按照環形結構滾動顯示在球形界面上。

3 選項設計

由圖1的區域1單元排列次序可見，用戶在瀏覽信息作業序列時，主要操縱地球儀形畫面各單元內的作業標識進行板塊式上、下漂移，這時的作業標識連續展現在面積大小不同的各單元格內，作業標識顯示外形呈現出由小變大、再由大變小動畫效果。但是，地球儀畫面左、右滾動更為常見。為了以左、右滾動為主來操控球形畫面，需要將區域1的單元次序設計成如圖2所示，同時還可對圖中單元所顯示的作業標識外形進行重新安排。當用戶按圖2所示來瀏覽信息作業序列時，就會以左、右滾動為主來操控球面。圖2畫面可作為用戶一種選擇項，當圖1和圖2的畫面相互變換時，其內部數據結構和算法調整量不大。

若將圖3所示的棱柱面作為區域1圖案的選項，則區域1畫面無論左、右或上、下滾動都會呈現出走馬燈效果。由于圖3所示棱柱面的各單元都是矩形，其內的作業標識外形變化時，畫面失真小，畫面伸縮和變形算法也相對簡單，但該畫面的滾動效果未必像圖1、圖2那樣有趣。也可以把圖3設計為單一棱柱面，即當左、右轉動時呈現為立式棱柱面，當上、下轉動時呈現為橫向棱柱面，其動態顯示畫面則更接近走馬燈的效果。

如果把圖4所示的足球畫面作為區域1圖案的選項，則又另具一番情趣。不過，該圖案的單元行列數不整齊，把該畫面從上到下近似地劃分為5行，其中間一行有5個單元，頂行和底行均有3個單元，其余行有4個單元。根據行列劃分，作業矩陣元素和作業標識外形需要映射到畫面單元。

球形界面作為通用瀏覽器使用通過信息作業序列元素的屬性代換來實現。

圖4 足球形界面示意圖Fig.4 Football-shaped interface

4 結 語

按照信息作業序列元素的數據結構、更新方法和排序規則，本文設計的球形人機界面可以作為操作系統的主界面顯示用戶的信息作業最新信息，又能簡化用戶信息作業操作的接續步驟。球形人機界面中心單元面積最大，圍繞在中心單元周圍的單元面積向外則逐漸減小。通過界面的滾動，既能展現信息作業更多信息，又能使其縮小為圖標，或隱藏于幕后，以有效利用屏幕顯示面積。該球形界面操控靈活簡便，顯示效果形象有趣，作業標識意義明確簡練，體現了人機界面的友好性能。球形人機界面的數據結構和算法適合表達多種信息序列元素，可以作為通用瀏覽器使用。球形人機界面的畫面具有多種可供選擇的圖案，能夠在較大范圍內適應不同用戶審美心理和操作習慣，也便于廠商推出個性化產品。

[1] Burt J.iPad，iPhone drive touch-Screen display market：IHS iSuppli[EB／OL] .（2012-03-28）[2012-05-02] .http：∥ www.eweek.com／c／a／Mobile-and-Wireless／iPad-iPhone-Drive-Touch-Screen-Display-Market-IHS-iSuppli-809277／.

[2] Parker J.5years in：The evolution of the iPhone OS[EB／OL] .（2012-06-29）[2012-07-12] .http：∥reviews.cnet.com／8301-19512＿7-57463858-233／5-years-in-the-evolution-of-the-iphone-os／.

[3] Degusta M.Are smart phones spreading faster than any technology in human history？[EB／OL] .（2012-05-09）[2012-06-03] .http：∥www.technologyreview.com／news／427787／are-smart-phones-spreading-faster-than-any／.

[4] Jumptap，Inc.Android and iPhone now hog 91%of mobile OS market share[EB／OL] .[2012-05-06] .http：∥www.jumptap.com／home-page-news／android-and-iphone-now-hog-91-of-mobile-os-market-share／.

[5] Microsoft Co.Windows 8release preview[OL] [2012-07-12] .http：∥windows.microsoft.com／en-US／windows-8／release-preview.

[6] Wikipedia.ENIAC[EB／OL] .[2012-07-22] .http：∥en.wikipedia.org／wiki／ENIAC.

[7] Wikipedia.Teleprinter[EB／OL] .[2012-07-22] .http：∥en.wikipedia.org／wiki／Teleprinter.

[8] Edwards B.The computer mouse turns 40[EB／OL] （2008-12-09）[2010-11-25] .http：∥ www.macworld.com／article／1137400／mouse40.html.

[9] Maisto M.iPhone has earned apple 150billion over last five years：Report[EB／OL] .（2012-06-27）[2012-07-02] .http：∥ www.eweek.com／c／a／Mobile-and-Wireless／iPhone-Has-Earned-Apple-150-Billion-Over-Last-Five-Years-Report-260668／.

[10] 羅仕鑒，龔茱茱，朱上上.面向用戶體驗的手持移動設備軟件界面設計[J] .計算機輔助設計與圖形學學報，2010，22（6）：1033-1041.

[11] 張乙申.人性化用戶界面的設計要素[J] .中國證券期貨，2011（4）：207.

[12] 趙風景.列車自動監控軟件的設計問題[J] .上海電機學院學報，2011，14（4）：257-261.

[13] 史 爽.三網融合條件下人機界面中圖形的設計原則[J] .吉林藝術學院學報，2011（1）：29-33.

[14] 羅仕鑒，朱上上，應放天，等.手機界面中基于情境的用戶體驗設計[J] .計算機集成制造系統，2010，16（2）：239-248.

[15] 韓春明，王寒寒.意境之美：3G手機界面設計研究[J] .合肥工業大學學報：社會科學版，2011，25（1）：91-94.

[16] 汪海波，薛澄岐，佘 醒，等.圖形用戶界面的隱喻設計研究[J] .安徽建筑工業學院學報：自然科學版，2011，19（3）：93-96.

[17] Song H Y，Benko H，Guimbretierc E，et al.Grips and gestures on a multi-touch pen[C] ∥Proceedings of the 2011Annual Conference on Human Factors in Computing System.New York，NY，USA：ACM，2011：1323-1332.