劉 彥（南京藝術學院 工業(yè)設計學院，江蘇 南京 210013）

位置反饋的交互體驗設計方法與實踐
——以《南都六朝匯景圖》為例①

劉 彥（南京藝術學院 工業(yè)設計學院，江蘇 南京 210013）

本文簡述了基于位置反饋的交互設計概念原理、設計方法以及交互原形的搭建。并以筆者指導完成的交互設計作品《南都六朝繪景圖》為例，剖析了位置反饋交互方法所適用的用戶行為特點和交互體驗方式。

設計方法；交互體驗設計；位置反饋；VVVV；原形設計；六朝古都

引 言

六朝古都南京，自漢起先后有東吳、東晉、宋、齊、梁、陳等朝代在此建都。此外明朝、民國也建都于此。朝代的繁榮與興衰，都留在南京這座古城的記憶中。南京被視為漢族的復興之地，在中國歷史上具有特殊地位和價值。故朱偰先生②朱偰（1907—1968），中國著名經(jīng)濟學家和歷史學家，朱希祖之子；德國柏林大學博士，曾任中央大學、南京大學教授，著有《金陵古跡名勝影集》、《建康蘭陵六朝陵墓圖考》等南京六朝歷史遺跡考證論著。在比較了長安、洛陽、金陵、燕京四大古都后言：“此四都之中，文學之昌盛，人物之俊彥，山川之靈秀，氣象之宏偉，以及與民族患難相共，休戚相關之密切，尤以金陵為最?！?/p>

南京六朝博物館是在六朝宮闕城垣遺址挖掘原址上設計建造的，自2014年開館以來，展陳的核心主題就是從“城”、“人”、“事”、“美”的角度全面展示六朝歷史文化。然而由于近兩千年的侵蝕及戰(zhàn)亂等原因，歷代地面歷史遺跡大多無跡可尋，可用于陳列展示的文物類實物展品也屈指可數(shù)。同時由于大量的具有非物質屬性的歷史人文內(nèi)容，無法用實物的形式呈現(xiàn)。以數(shù)字交互展示方式更為合適。如何運用這一手段突破陳設的局限，豐富展示的內(nèi)容與形式，成為了該館的當務之急。

基于以上的實際需求，筆者團隊與該館合作，實驗性的嘗試在分析、整合展示內(nèi)容、準確定位參觀者需求與行為、合理規(guī)劃用戶體驗方式后，利用位置反饋的數(shù)字交互設計方式完成了一系列展示內(nèi)容的交互設計與設計呈現(xiàn)，增加了參觀者與展示內(nèi)容的互動體驗性。

圖1 在這個例子中，鼠標滾輪主要負責單一緯度位移位置信息發(fā)送。大多數(shù)的鼠標滾輪是有彈性的，可以平衡表面的小起伏。當鼠標固定安裝在一個導軌上時候，這一特點是非常有用的。（圖片來源： Prototyping Interfaces Interaktives Skizzieren Mit VVVV）

下文即是對這一過程中的設計方法與實踐的總結。

一、位置反饋概述

位移是和物體的位置在運動過程中的移動有關的量。位移傳感器又稱為線性傳感器，它的作用是把這種有關的量轉換為電量。位置反饋即基于這一類的設備捕捉位移信息，并將信號直接送入計算機系統(tǒng)，對信息的再輸入進行編輯，起到控制的作用。從而達到預定的目的。鼠標既是我們?nèi)粘Ｉ钪惺褂妙l率最高的位置反饋產(chǎn)品，也稱為人機交互接口設備或者交互產(chǎn)品。

1. 開發(fā)平臺與硬件

VVVV的是一款開源的原型設計和開發(fā)圖形化編程軟件。它為數(shù)字信息媒體提供物理接口，如實時動態(tài)圖像、音頻和視頻，可以同時編輯和處理許多用戶交互環(huán)境。

在實際設計開發(fā)中， 我們往往會利用已有的一些外部設備替代傳感器和開發(fā)工具， 從而節(jié)省大量的工作并能迅速的達到目標。本文所引入的交互體驗設計案例即是建立在以鼠標作為位移傳感設備，利用交互軟件VVVV作為開發(fā)工具所完成的交互原形基礎上的設計實踐。在接下來的原形設計例子中，將介紹如何利用滾輪鼠標制作單緯度的位置反饋互動控制。通過鼠標改造的硬件不僅能在VVVV開發(fā)環(huán)境中讀到精確的數(shù)值，而且這個硬件很容易的與電腦連接。

鼠標作為人機交互界面設備多年來在計算機領域廣泛使用，是非常好的替代設備。一般適用的鼠標具有三個按鍵、一個滾輪和一個光學傳感器，它們會捕捉位置信息。這些位置信息很容易在VVVV中讀出。下面的例子就利用到了鼠標滾輪讀取的信號（圖1）。

2. 相對與絕對位置

為了鼠標的位置值能夠在VVVV中正確讀取，首先需要了解鼠標窗口系統(tǒng)mouse（system window）和鼠標全局系統(tǒng)mouse（system Global）兩種定位體系。他們的區(qū)別在于， mouse（system window）旨在捕捉鼠標的位置時，僅判斷渲染窗口范圍內(nèi)（相對位置）的位置值。而mouse（system Global）的不同在于，捕捉并輸出的是當前系統(tǒng)全局（絕對位置）下位置的值。

3. 交互原形

在原形設計中我們用到的是mouse（system window）這個體系。即鼠標的位置反饋僅限于窗口的上下左右四個邊框內(nèi)（屏幕內(nèi)）。在此范圍內(nèi)支持多個位置信息的輸出。除了鼠標位移的X軸和Y軸參數(shù)外，還可以輸出鼠標上三個按鈕和鼠標滾輪的位置信息。原形中僅使用最后一個捕捉參數(shù)，即鼠標滾輪位移的X軸參數(shù)用于驗證（圖2）。

因為鼠標滾輪可以沿著一個方向無限長的滾動，接受的鼠標滾輪值是即時的大小值。也就是說，向某

圖2 鼠標滾輪滾動，在vvvv中輸出X軸參數(shù)變量。（圖片來源：VVVV）

一特定方向滾動多長，鼠標滾輪的值會不斷持續(xù)地增加或者減少。鼠標的行為從技術上看就像一個增量式編碼器（incremental Encoder）， 每次的運動遞增或者遞減。這是一個問題難點，因為定位的目的不僅僅是想知道當前鼠標的X坐標值，更重要的是需要這個值去控制畫面需要的反饋。

圖3 測量裝置。在桌面上進行標注，使用兩個膠帶，貼在顯示器前的桌面上。（圖片來源： Prototyping Interfaces Interaktives Skizzieren Mit VVVV）

圖4 mouse（system window） -1到1之間換算示意圖。（圖片來源： VVVV）

圖5 開發(fā)軟件工具VVVV，開發(fā)界面：鼠標滾輪X軸位置反饋參數(shù)轉化為畫面水平軸向白色地標線過程。（圖片來源： VVVV截屏）

圖6 原型裝置制作分解圖。（圖片來源： VVVV）

圖7-8 用戶交互體驗過程及圖形界面反饋效果（圖片來源：Prototyping Interfaces Interaktives Skizzieren Mit VVVV）

圖9 六朝宮闕城垣東南角夯土遺跡（圖片來源：南京六朝博物館）

為了能精確的掌握鼠標的位置，我們需要制造一個小的測量裝置。在桌面上進行標注，使用兩個膠帶，貼在顯示器前的桌面上。這個裝置可以動態(tài)的測量鼠標在屏幕范圍內(nèi)位移的最小值和最大值，并利用測得值換算的參數(shù)確定白色地標線（圖形界面元素）出現(xiàn)的位置（圖3）。

開發(fā)軟件VVVV可以接收到該范圍內(nèi)鼠標滾輪的參數(shù)值，并在-1到1之間（圖4）折算當前值。作為地標線出現(xiàn)的位置并在接下來圖形界面的視效設計中運用（圖5）。

4. 原形裝置制作

通過鼠標硬件的應用和VVVV程序的編輯，已經(jīng)了解了位置反饋的交互設計的原理。下一階段我們將搭建物理原型交互裝置（圖6）。

5. 用戶體驗

圖10-11 六朝更迭時間年代及時間軸上的各朝代虛擬地圖設計層級關系（作者：胡曉敏等，指導老師：劉彥）

原型搭建的目的是用簡單的結構與內(nèi)容驗證這一設計的合理性和可實現(xiàn)性。并通過用戶與原型互動測試交互過程中的用戶體驗。該例是以城市地標建筑為內(nèi)容的位置反饋互動原形裝置。體驗者控制滑塊從水平方向上不同的位置開始移動，當移動到與預設得地標建筑（熱點）位置重疊時，在建筑景觀的天際線上會出現(xiàn)白色地標線（圖形界面設計元素）， 并延遲喚醒該地標建筑的詳細信息（圖形界面設計元素）。（圖7-8）。

二、《南都六朝匯景圖》設計實踐

1.概念來源

六朝博物館在古皇宮城墻遺存考古現(xiàn)場的原址上建館。在展館地下負一層展館陳列有一段當時考古挖掘出宮城東南角夯土遺跡，由于六朝歷代的皇宮基本都是在此基礎上不斷翻建、改建、擴建，所以根據(jù)考古地層學分析，是一段可以判斷年代的熟土層①在人類活動前形成的純天然堆積的土層叫生土，考古發(fā)掘時，挖到生土才算結束；人類活動形成的叫熟土。夯土，存儲了不同朝代的大量考古信息（圖9）。

考古地層學，是一種通過判定遺址堆積②由于人類活動導致在不同時期以不同方式堆積起來的物質，可分為地層堆積和遺跡堆積。形成的先后過程或次序來研究遺存之間相對年代早晚關系的方法。根據(jù)“土質土色”區(qū)分不同堆積，根據(jù)疊壓、打破及平行關系確定不同堆積形成的先后次序。地層學的根本問題是劃分層次，確定層位關系。

圖12-13 建筑遺跡、街道交通、人文典故等元素ICON設計及信息構架（作者：胡曉敏等，指導老師：劉彥）

圖14 六朝東吳地圖（作者：胡曉敏等，指導老師：劉彥）

另一方面，源于歷代的地面遺存雖然幾乎大多損毀，無跡可尋。但根據(jù)歷代地圖志等文獻資料所記載的內(nèi)容，其方位、毗鄰，及名稱等信息可相互佐證和考證；同時一些名人典故出處大多記載有地名、街巷或者區(qū)域等位置信息。因此，可大致在今天南京城地圖上標定位置。甚至可以直接在現(xiàn)有定位服務（LBS）①基于位置的服務（LBS），它是通過移動通訊網(wǎng)絡或外部定位方式（如GPS）獲取移動終端用戶的位置信息（地理坐標，或大地坐標），在地理信息系統(tǒng)（外語縮寫：GIS、外語全稱：GeographicInformationSystem）平臺的支持下，為用戶提供相應服務的一種增值業(yè)務。產(chǎn)品上定位查詢。所以，信息整合的設計，受到上述兩方面的內(nèi)容啟發(fā)，利用位置反饋的交互設計概念由此而生。

2.設計方案

首先從朝代更替入手， 考古地層學可以通過土層里不同文化堆積物和建筑遺存從下至上斷定所屬朝代的先后順序。同時可以了解相同位置上的建筑變遷或者文化堆積的關聯(lián)性。這一特征設計中可以描述為在可視化的，以時間為單位的某一軸向上，不斷產(chǎn)生的歷代歷史變化信息的推演。在信息構架上，我們可以把每個朝代（一段特定的時間段）所具有的歷史信息內(nèi)容作為該時間段上的一個信息層級，這個信息層級我們以地圖②地圖是依據(jù)一定的數(shù)學法則，使用制圖學語言，表達事物的空間分布、聯(lián)系及時間中的發(fā)展變化狀態(tài)繪制的圖形。電子地圖是由電子計算機控制所生成的可視化的地圖。可以根據(jù)不同比例尺縮放，從而實現(xiàn)地圖信息量的增加與減少?？梢栽诘貓D上以位移的方式觀察不同位置的空間分布的信息。甚至可以生成3D的虛擬空間實景和動態(tài)標注信息等。（多維度空間布局）的方式表達，并按照年代的先后次序排序時間段建立一個軸向上（圖10-11）。

基于這一特征我們繪制了六朝、明代每個朝代都城南京的地貌特征、建筑位置、街道交通網(wǎng)絡、歷史典故，及名勝等的人文數(shù)字地圖（圖12-14）。 而這些內(nèi)容都可以以交互的方式動態(tài)的呈現(xiàn)給參觀者。

圖15 今日南京市區(qū)地圖亞克力雕刻物理地圖參照，“視窗”在該地圖上移動。（作者：胡曉敏等，指導老師：劉彥）

圖16“視窗”移動示意圖（作者：胡曉敏等，指導老師：劉彥）

圖17 “視窗”交互體驗及圖形界面熱點元素示意圖（作者：胡曉敏等，指導老師：劉彥）

3. 交互設計

用戶將以物理地圖上移動的虛擬地圖“視窗”（定制的一體機屏幕、物理裝置）的方式使用體驗?！耙暣啊钡囊苿?，可以控制“視窗”內(nèi)與物理地圖上重合位置的虛擬信息。所以，我們用壓克力板雕刻制作了一張物理地圖（圖15），然后通過用戶在上面移動“視窗”，并從“視窗”中觀察不同年代該位置地貌與人文信息，達到信息導航的體驗。這就好比拿著一個“放大鏡”去觀察地圖，不過觀測到的不是放大的內(nèi)容，而是特定朝代的人文信息。同時可以參照下面的物理地圖，比較現(xiàn)今的位置與變化。了解南京作為古都的歷史變遷，還原南京古城的歷史特征（圖16）。

圖18-19 物理裝置示意圖（作者：胡曉敏等，指導老師：劉彥）

除了實際的物理桌面上雕刻有南京現(xiàn)在的地圖，我們需要在移動“視窗” 中，放置東吳、東晉、南朝、南唐、明朝的虛擬地圖。在時間軸上推移“視窗”可以選擇不同的朝代，查看不同朝代的虛擬地圖。并且，在每張地圖上，我們也設置了熱點，當推移“視窗”與熱點重疊時，可以“放大”查看更詳細的信息（圖17-19）。例如，你不僅可以看到東吳時的地圖樣貌還有原圖，還可以查看東吳皇城太初宮的詳細介紹，看太初宮建筑的復原圖。

4.用戶體驗

從現(xiàn)今所熟知的南京市區(qū)地圖入手。首先看到六朝博物館目前位置及周邊情況，接著，用戶通過“視窗”看到該位置古代的宮闕城墻東西角的建筑特征。地理位置重合，古今建筑比較，并與周邊空間位置信息相互參照，信息之間產(chǎn)生關聯(lián)性，會明顯的增強對信息的認知度。

此外，移動與位置的反饋，即位移產(chǎn)生動態(tài)變化的位置信息，從而控制反饋。以鼠標的設計為例：操作鼠標在桌面的移動，產(chǎn)生距離、速度、頻率等的變化，很自然會建立起與屏幕上光標位置變化的關聯(lián)和隱射性，沉浸于這樣的隱射關系中，進而準確操作電腦。這是在人機（HCI）關系中，所建立的基本的認知關系。基于此規(guī)則，當用戶推移“視窗”向左、向右或者向上、向下移動，“視窗”內(nèi)顯示虛擬地圖的局部畫面向相反方向移動；同樣會產(chǎn)生自然的沉浸感，建立“視窗移動到哪里，即可以看見哪里”的沉浸感。以上兩個方面的設計都基于用戶的認知行為特點、具備很強的交互體驗性，從而提升了《南都六朝繪景圖》設計作品的用戶體驗。實現(xiàn)了我們的設計目標，即增加參觀者了解六朝人文地貌內(nèi)容的互動體驗性。（視頻鏈接：http://v.qq.com/boke/page/j/0/l/j01559mpg0l.html）（圖20-21）

圖20-21 南都六朝匯景圖用戶體驗現(xiàn)場（作者：胡曉敏等，指導老師：劉彥）

三、結束語

位置反饋交互體驗是以時間演進、空間位移、程度大小、進程推移等具有位置變化特征的內(nèi)容可視化交互設計方法。最終設計的形式，取決于信息內(nèi)容的整合與用戶體驗的方式。該方法的信息整合從空間緯度的角度劃分，一維度線性可視化，單一軸向的信息整合； 兩緯的面的可視化，水平與垂直軸向的信息整合，以作品《南都六朝匯景圖》為例；三個緯度的空間可視化，即在三維空間特征的信息整合，筆者后續(xù)設計作品中將詳細介紹。用戶體驗的方式依據(jù)信息整合特征分析目標用戶的認知與行為特點，因人而異地設計具體的用戶體驗方式，當然這背后要求設計團隊具備豐富的交互技術知識，方能準確提出不同的設計解決方案和技術支持。

（責任編輯：王 璇）

J502

A

1008-9675（2016）03-0121-05

2016-03-02

劉 彥（1977-），男，江蘇南京人，南京藝術學院工業(yè)設計學院講師，留德碩士，研究方向：工業(yè)產(chǎn)品設計、交互設計、智能硬件應用與用戶體驗研究、數(shù)字圖形界面設計研究。
①

1.南京藝術學院校級項目《文化創(chuàng)意產(chǎn)品的交互體驗設計應用與研究》（XJ2014018）；2. 江蘇省文化廳科研立項課題《信息交互設計提升文化創(chuàng)意產(chǎn)品的市場競爭力實踐研究》（15YB26）。