位置反饋的交互體驗(yàn)設(shè)計(jì)方法與實(shí)踐
——以《南都六朝匯景圖》為例①

劉 彥（南京藝術(shù)學(xué)院 工業(yè)設(shè)計(jì)學(xué)院，江蘇 南京 210013）

位置反饋的交互體驗(yàn)設(shè)計(jì)方法與實(shí)踐
——以《南都六朝匯景圖》為例①

劉 彥（南京藝術(shù)學(xué)院 工業(yè)設(shè)計(jì)學(xué)院，江蘇 南京 210013）

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

設(shè)計(jì)方法；交互體驗(yàn)設(shè)計(jì)；位置反饋；VVVV；原形設(shè)計(jì)；六朝古都

引 言

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

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

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

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

下文即是對(duì)這一過程中的設(shè)計(jì)方法與實(shí)踐的總結(jié)。

一、位置反饋概述

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

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

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

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

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

2. 相對(duì)與絕對(duì)位置

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

3. 交互原形

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

因?yàn)槭髽?biāo)滾輪可以沿著一個(gè)方向無限長(zhǎng)的滾動(dòng)，接受的鼠標(biāo)滾輪值是即時(shí)的大小值。也就是說，向某

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

一特定方向滾動(dòng)多長(zhǎng)，鼠標(biāo)滾輪的值會(huì)不斷持續(xù)地增加或者減少。鼠標(biāo)的行為從技術(shù)上看就像一個(gè)增量式編碼器（incremental Encoder）， 每次的運(yùn)動(dòng)遞增或者遞減。這是一個(gè)問題難點(diǎn)，因?yàn)槎ㄎ坏哪康牟粌H僅是想知道當(dāng)前鼠標(biāo)的X坐標(biāo)值，更重要的是需要這個(gè)值去控制畫面需要的反饋。

圖3 測(cè)量裝置。在桌面上進(jìn)行標(biāo)注，使用兩個(gè)膠帶，貼在顯示器前的桌面上。（圖片來源： Prototyping Interfaces Interaktives Skizzieren Mit VVVV）

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

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

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

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

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

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

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

4. 原形裝置制作

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

5. 用戶體驗(yàn)

圖10-11 六朝更迭時(shí)間年代及時(shí)間軸上的各朝代虛擬地圖設(shè)計(jì)層級(jí)關(guān)系（作者：胡曉敏等，指導(dǎo)老師：劉彥）

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

二、《南都六朝匯景圖》設(shè)計(jì)實(shí)踐

1.概念來源

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

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

圖12-13 建筑遺跡、街道交通、人文典故等元素ICON設(shè)計(jì)及信息構(gòu)架（作者：胡曉敏等，指導(dǎo)老師：劉彥）

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

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

2.設(shè)計(jì)方案

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

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

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

圖16“視窗”移動(dòng)示意圖（作者：胡曉敏等，指導(dǎo)老師：劉彥）

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

3. 交互設(shè)計(jì)

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

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

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

4.用戶體驗(yàn)

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

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

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

三、結(jié)束語

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

（責(zé)任編輯：王 璇）

J502

A

1008-9675（2016）03-0121-05

2016-03-02

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

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