基于中介論的動態(tài)界面設計理論和教學實踐研究

羅軍

摘要：動態(tài)界面一方面通過交互操作實現(xiàn)“工具中介”，另一方面通過“符號中介”傳達意義，兩者是雙向互動的過程，稱為“雙向中介”。研究以維果茨基的“中介論”和“活動論”為理論基礎，以iPad的5種代表性操作為研究對象，分另U使用“工具中介”和“符號中介”的觀點分析其交互特色和符號意義。理論通過推出一款APP的原型設計應用于教學實踐，證實了理論的可靠性，而具有符號意義的視覺運動能夠作為打動消費者情感需求的重要設計手段。

關鍵詞：動態(tài)界面 視覺運動 中介 符號學

中圖分類號：TP311.5文獻標識碼：A

文章編號：1003-0069（2018）12-0102-03

Abstract： The visual motion of the motion interface affects the fluency of interaction and the user experience. To study the manifestation and function of visual movement and the significance of aesthetics and culture are beneficial to theoretically further enhancing the importance of interface design to emotional design research. Based on Vygotsky's "intermediary theory" and "theory of activity"， taking the iPad's five representative operations as the research object， the study use "tool intermediary” and "Symbolic Intermediary" perspectives to analyze its interactive features and symbols significance. On the one hand， the dynamic interface realizes “Tool Intermediary” through interactive operations， on the other hand， conveys meaning through “Symbolic Intermediary”，its the two-way interactive processes called “two-way Intermediary”. This theory introduces a prototype design application of APR It is confirmed that the theory has reliability and visual movement with symbolic meaning， which can be used as an important design method to impress consumers1 emotional needs.

Keywords： Motion Interface Visual motion Intermediary Semeioloqy

引言

“動態(tài)媒體界面”是指完全執(zhí)行動態(tài)圖形程序的虛擬界面（以下簡稱“動態(tài)界面”），自2010年以來，國內(nèi)藝術設計學科對動態(tài)界面設計理論研究已取得了明顯的進展，成果大多集中在網(wǎng)頁、扁平化圖形設計、手機界面等類型上，內(nèi)容以探討功能設計為主。而據(jù)近三年核心期刊檢索結果，關于動態(tài)界面的研究已顯示出多元化的走勢，虛擬服務、多模式操控、情感化設計、文化性建構正成為新的研究熱點。

我們注意到近三年成果有“一個現(xiàn)象”和“兩個趨勢”，“一個現(xiàn)象”是指關于視覺審美、設計理念、設計原則、用戶分析等傳統(tǒng)的大類研究仍占主流，“兩個趨勢”一是指越來越多的研究開始投向娛樂、民生、廣告等熱點產(chǎn)品主題，研究對象是與此密切相關的虛擬服務界面，二是指各種分散的熱點研究，如多模式操控、文化性建構在跨學科理論支持下，逐漸發(fā)展壯大。

國外人文學科對動態(tài)界面的理論研究開展較早也較為活躍，與國內(nèi)側重于關注專業(yè)界面設計和熱點產(chǎn)品開發(fā)相比，國外研究更側重從哲學、心理學層面，探討虛擬運動的規(guī)律及其美學價值。從研究的多樣性角度看，國內(nèi)藝術學科缺少這種從橫向層面貫穿各種動態(tài)界面的思辨型研究，因此，豐富研究手段，拓展理論依據(jù)，揭示動態(tài)界面“運動”的視覺效應是本文的研究目的。

本研究使用哲學“中介論”研究動態(tài)界面“運動”的視覺交互意義、符號象征與隱喻，嘗試突破以往主要利用藝術學方法研究動態(tài)界面的局限，試圖將研究進一步引向深入。研究將把對“中介論”的分析與理論發(fā)展轉變?yōu)榭蓪嵤┑慕虒W手段，并借以推出一項設計教學實驗，達到驗證理論具有一定可靠性的目標。

一、社會文化學一般理論綜述

研究的理論基礎是維果茨基的“中介論”和“活動論”。“中介論”認為所有的人類活動都是通過符號、物質工具和人工制品的“中介”才能與世界發(fā)生聯(lián)系，例如，心理活動以符號和語言為中介，而勞動則是以物質工具為中介。維果茨基學派的Wertsch[1]認為，任何工具與人工制品都是一種經(jīng)人類文化創(chuàng)造和歷史演化而來的“中介手段”（Intermediary Methods），他進一步細分出心理活動中存在著兩種中介，一為外顯的中介，即語言或符號，如：圖表、地圖、圖解等，是經(jīng)人創(chuàng)造，可傳授推廣的中介;另一種則是內(nèi)隱的中介，是個體內(nèi)在意識創(chuàng)造出來聯(lián)系兩個刺激物的工具，因內(nèi)容高度抽象，而無法交流和傳播。例如：個性化的符號標記、口訣、行話即為內(nèi)隱的中介。

按沃茨的觀點，數(shù)字產(chǎn)品及其界面是一種中介手段，對“行為”（Action）和“活動”（Activity）的設計是界面設計的中心任務，而真正理解兩者，唯有將其置于特定的文化、歷史和制度環(huán)境中。Wartofski[2]進一步將“中介手段”發(fā)展為“人工中介物”（Intermediary Artifacts），并將其區(qū)分為三個層級：一級制品是物質生產(chǎn)工具，二級制品是一級制品的產(chǎn)品，以藝術品為代表的是三級制品，是經(jīng)主體自覺加工，想象和創(chuàng)造出來的精神產(chǎn)品，能夠影響人們的世界觀和實踐方式。而本文研究的動態(tài)界面則是一種貫穿于三個層級的中介制品。

動態(tài)界面不僅是一種引入了多媒體標準、多模式文本語言、包含符號化的色彩、字體和運動在內(nèi)，具有社交功能的人工制品，它更具有象征性，同語言符號、物質工具一樣在人類活動中充當中介作用。這一特點與人機交互領域的研究視角有很大區(qū)別，后者通常從認知學和功能主義的角度分析研究界面。

一般的人機交互研究視界面為一種能執(zhí)行某種功能的一級制品，其工具屬性是研究出發(fā)點，研究方向通常集中在可用性和易用性上，并不關注對文化傳播、符號學的研究。運動和動畫甚至還被看作負面的元素，被學術研究回避。如著名的可用性專家Nielsen曾提出“減少使用動畫，提高搜索與瀏覽效率”的觀點。[3]

從近三年來文獻檢索情況來看，國外人文學科對界面視覺運動的關注表現(xiàn)在對哲學思辨、美學體驗的探討上。例如，Ryo[4]探索了界面設計的美學，類比了戲劇和舞蹈表演，認為界面運動如同肢體語言一樣，不僅可以敘事，更重要的是能夠傳遞與激發(fā)感情，因此，界面的視覺運動以及運動對用戶情感的影響，兩者關系不可分割，“流暢性”和“柔韌性”是兩個設計評價標準。然而，Deny[5]指出，肢體動作與界面元素的運動有很大區(qū)別，后者的運動是完全程序化的。

一般認為“用戶參與”（Customer Participation）是在產(chǎn)品或服務生產(chǎn)過程中顧客承擔一定生產(chǎn)者角色的為獲得情感、個人實現(xiàn)等心理層面需求的資源（智力、體力、資金、感情等）投入行為。如何通過界面設計方法提升用戶參與？Escudem[7]認為，用戶的社會文化、教育、性格背景干差萬別，不可能達成一種能喚起積極心理體驗的通行的設計方法，不過，他指出了“意義”和“感覺”可作為設計價值的突破口，能夠喚起一定的積極的心理反應，“意義和感覺在本質上是相互聯(lián)系的共同體，意義指出了感覺具有可描述性;感覺則是主體對可感知對象的評價”;Ryo[8]則認為，體驗既不是人工制品的彳寺點，也不是用戶的生理彳寺點，體驗產(chǎn)生在使用過程中，并且這種主觀感受不可預測，但是，設計師有責任了解用戶的社會文化背景，需求和愿望，創(chuàng)造出有利于提升用戶參與的體驗環(huán)境，并對動作和動作的意義給出明確的指示。

為了闡述界面設計方法如何促進用戶參與，我們需要總結界面中介的活動機制，它包括如何執(zhí)行操作、如何傳達符號意義兩方面的內(nèi)容。

二、工具中介和符號中介

為闡述界面中介的活動機制，研究首先區(qū)分了工具中介和符號中介的概念和作用。

維果茨基“活動論”認為工具是實現(xiàn)目的的手段，“一種實現(xiàn)解決方法的輔助手段”[9];維果茨基學派的列昂捷夫肯定了這個觀點，他對“活動”（Activity）進行了細分，活動可分為動作（Action）和操作（Operation），工具是一系列動作和操作實施的對象。在工具和符號的作用上，維果茨基認為工具是“外向型的，它引起客體的變化;符號是內(nèi)向型的，它不引起客體的變化，而是影響人的行為”。[11]本文使用的“工具中介”詞，也是將界面及其運動視為一種工具。

符號即意義，符號中介的作用有別于工具中介，其重點在于溝通用戶與傳達意義。電影、圖像、音樂等任何產(chǎn)品都能夠傳達意義，其本身也是符號。正如符號學家羅蘭.巴特所言“所有的社會存在物都具有意義”。[12]符號的意義并非一成不變，而是在社會實踐中不斷地演變和重構。因此，產(chǎn)品或是界面的意義，可能因國家、群體和個體的不同，而有很大的區(qū)別。

工具與符號的區(qū)別既清晰又模糊，或者說兩者根本就是一個統(tǒng)一體。Paul和AndSOn[13]則指出，“清晰的工具行為和符號行為只存在于理論上的直尺刻度中”，他把符號中介與工具中介之間的互動稱為“綜合性中介”。執(zhí)此觀點者還有Mir0nenk0[14]，他也認為兩者不存在明顯的界限。

三、雙向中介的概念

“雙向中介”是指動態(tài)界面既可以充當工具中介，也可以當作符號中介。根據(jù)不同的產(chǎn)品、用戶和使用環(huán)境，界面的符號中介和工具中介作用會發(fā)生相應的變化。例如，有些界面表達的是視覺表現(xiàn)性、審美性、符號性，而另一些界面更強調工具性和任務性。

“雙向中介”的互動關系模型（如圖1），在非使用狀態(tài)下，工具和符號面積相等，中間的灰色模糊邊界顯示了兩者之間存在著一個使用行為和用戶闡釋用途互動過程，闡釋過程伴隨著使用行為而產(chǎn)生和延續(xù)。反映在灰色邊界上，隨著闡釋過程和使用行為的此消彼長，灰色邊界時而收縮或時而增長。

四、案例分析

本文選取了一系列代表性動態(tài)界面案例，用雙向中介理論進行分析，試圖發(fā)現(xiàn)界面的工具性和符號性之間的聯(lián)系，驗證并完善理論。

在眾多類型的動態(tài)界面中，我們選擇了iPad的界面，理由有二：1.鑒于研究主題是雙向中介理論，所以案例必須同時具有工具性和符號性的特點，而iPad平臺擁有豐富的資源，為研究提供了便利;2.iPad的應用界面設計長期以來被認為是行業(yè)的標桿，各種效仿源自于此，一些經(jīng)典的動效簡單而自然，集成了研究雙向中介的種種可能性。

我們從iPad選擇了5個代表性的操作案例，力圖揭示iPad動效在心理學、符號學上的意義。

（一）打開與放大圖片：第一個案例是iPad的相冊應用，用戶可以用“縮放手勢”預覽、打開、放大、旋轉圖片。根據(jù)工具中介的觀點，由于iPad采用了電容觸摸屏技術，支持用戶使用直接和趣味性的手勢進行操作。

“經(jīng)驗隱喻”是本文為了進一步分析動效如何向用戶傳達意義而使用的一個修辭學術語，“經(jīng)驗隱喻”的實質就是通過對一類事物的經(jīng)驗來理解或推理另一事物的經(jīng)驗，由于人的身體經(jīng)驗（直接經(jīng)驗）是一切認知的基礎，以此為“中介”必然具有隱喻性。因此，“縮放手勢”隱喻了人們在現(xiàn)實中搬運、移動、打開、拉扯物體的身體經(jīng)驗，使虛擬的動作成為一種工具性的操作。

（如圖2）在打開與放大圖片的操作中，“縮放手勢”主要發(fā)揮了工具中介的作用，其結果增加了工具區(qū)域，同時收縮了符號區(qū)域。

（二）上下滑動相冊界面：當手指在相冊界面上下垂直方向滑動瀏覽日寸，界面的右下角就會出現(xiàn)一個灰色滑塊，滑塊的位置隨著用戶瀏覽位置的變化而上下變化，當瀏覽到達界面底部時，灰色滑塊就會停止運動，如果用戶仍然堅持下滑，這時不僅會感到“阻力”，而且灰色滑塊還會出現(xiàn)向上的反彈，長度變長。

“反彈”是界面虛擬出的“力量”，隱喻的是物理中的“作用力等于反作用力”，現(xiàn)實中大量存在著這類體驗，比如劃船、用球撞擊地面、跳高、打彈弓等。除此以外，iPad還把大量的現(xiàn)實體驗搬入界面，讓用戶在操作中體驗虛擬的物理力，使界面操作變得簡單和趣味。

（如圖3）“虛擬力”反映了“符號中介”逐漸強勢的過程，手指下滑至界面底部，滑塊停止運動，工具中介結束;繼續(xù)下滑，觸發(fā)符號中介，不僅感到“阻力”，而且滑塊輕微“反彈”，符號中介再次提示瀏覽已達界面盡頭。“虛擬力”并不是一種支持上下滑動的力量，其作用是借助趣味的符號語言傳達“底部”的意義。

（三）打開與切換應用：這個案例與打開應用的方式，以及“多任務切換”有關。

用戶打開應用只需要手指輕觸應用圖標即可，如果要切換至另一個已在后臺運行的應用，有多種選擇方式：

A.按Home鍵回到屏幕主頁，或者在當前界面用五個手指向內(nèi)做一個捏合的動作即可回到屏幕主頁（相當于按一次Home鍵）。然后輕觸應用圖標。B.從iOS7開始，系統(tǒng)開始支持“多任務管理”一用四個手指在主屏上向上滑動，即可從下方調出多任務欄（相當于按二次Home鍵），然后點按應用圖標。C.在打開多個應用后，四指在當前應用界面向左或向右滑動來切換多個應用。

在主頁面上，四指上滑將調出多任務欄，切換應用會造成另一種運動：滑動當前應用界面向左轉動，直至退后完全成為背景，同時下一個應用從屏幕右邊背景轉出成為前景，如此循環(huán)。從工具中介角度看，使用滑動手勢切換程序，造成界面的循環(huán)轉動;而從符號中介角度看，這種轉動隱喻了類似走馬燈的多面性。

在用戶已經(jīng)打開了多個應用的前提下，四指在任一界面左右水平滑動，將導致又一種空間關系的產(chǎn)生：所有的應用界面呈一字排開，并隨著手勢滑動的緩急，而周而復始地水平運動，如同處于一條傳送帶上。

滑動切換應用能夠讓用戶選擇“歷史記錄”中（按最近一次使用進行降序排序）的應用，這是iPad為一些需要在2-3個應用頻繁切換的用戶所提供的功能，比使用“多任務欄”更有效。但如果用戶要選擇的應用并非“歷史記錄”中應用，他就不得不瀏覽其他不需要的應用，反而降低了使用效率。因此，滑動切換能否讓用戶髙效處理任務，取決于用戶的任務目標是否清晰，應用是否已在后臺運行，否則，“多任務欄”是更好的選擇。

從符號中介角度看，iPad在切換應用功能上呈現(xiàn)了兩種不同的空間運動：一、使用多任務欄切換應用，“多任務欄”隱喻的是人査閱書架的動作，應用出現(xiàn)形式是循環(huán)地“涌現(xiàn)”和“推遠”，但這些應用很可能不是用戶所需要的，它更適合初期展開的任務;而使用滑動手勢切換，它隱喻的是人隨手翻閱參考書的動作，用戶可以方便地看到歷史記錄應用的相鄰關系，這種方式更適用于已經(jīng)全面展開，并且有穩(wěn)定的工作模式的任務。

（如圖1）在這個案例中，手勢操作引發(fā)了界面運動，完成了工具中介的作用，也在同時傳達了運動的意義，隱喻了兩種類型的空間轉換，以此發(fā)揮了符號中介的功能，所以，工具中介和符號中介的作用幾乎是相等的。

（四）移動和編輯應用：在iPad主界面，手指輕觸應用圖標約停頓一秒，圖標隊列便出現(xiàn)輕微的“扭曲”，隨即一個“x”出現(xiàn)在圖標的左上角，此時用戶既可拖放并重新排列圖標，也可輕觸“x”刪除這個圖標。

在這個案例，“扭曲”的符號意義更明顯，（如圖3）iPad使用了“擬人”的手法——應用圖標因為“害怕”被刪除和移動，于是“嚇得發(fā)抖”產(chǎn)生“扭曲”，通過幽默的動畫效果向用戶傳達了應用可刪除、可移動的意義。

（五）iBooks電紙書應用：iBooks的主界面是一個虛擬的書架，上面排放著用戶下載的書籍。按左上角“Store”按鈕，書架立刻翻轉，顯示出位于另一面的在線書店。

手勢觸發(fā)了書架的翻轉，界面空間轉入在線書店，這是一個工具中介動作，但從符號中介角度看，翻轉的意義并不簡單。“互文性”是本文引用的另一個修辭學術語，其本意是指各種文本之間的相互借鑒、參照和解釋氣此處的文本不僅是一本書，也可以是電影、圖片、服裝等任何待解讀的媒體，比如，正文與注釋和典故就是一種典型的互文關系，互文性拓展了知識的邊界。在這里，翻轉的書架隱喻了神秘、魔幻和深藏的財富，與用戶在《蝙蝠俠》《奪寶奇兵3》等電影以及《魔獸世界》游戲中產(chǎn)生的密室印象建立了互文關系。而且，具有一定趣味性的動效，也有助于將用戶的購物情緒維持在一個相對興奮、好奇的狀態(tài)。

五、教學實踐應用

基于“雙向中介”論的研究，本研究在《界面原型設計》課上推出了一項設計實驗，分別對工具中介和符號中介進行驗證。該課程為每年11月份開課，考慮到第二年的春節(jié)，我以“送禮”為主題，要求學生用較短的時間，提交一款基于移動平臺的簡易社交應用的原型設計，設計包含兩個階段，第一階段應連貫體現(xiàn)四個基本工具性動作：一、添加;二、選擇;三、輸入;四、發(fā)送。

為了培養(yǎng)學生快速表達方案的能力，我示范了用定格動畫來闡釋原型設計的方式，旨在更直觀地分析動作和運動的聯(lián)系，避免學生在一開始陷入細節(jié)的設計。

（如圖4）原型設計采用了iOS常見的表單界面，依次采用以下手勢：

A.點擊“添加”，觸發(fā)了界面運動B.新界面從屏幕右邊進入C.鍵盤從下方彈出，用戶輸入接收方IDD.用戶輸入禮物名稱E.用戶或點擊通訊錄圖標，通訊錄從下方彈出，可從QQ、微信通訊錄中選擇接收方F.用戶確認選擇接收方G.用戶或點擊禮物來源圖標，購物APP從下方彈出，用戶可從中選擇禮物H.完畢后用戶發(fā)送該禮物。

第二階段，設計將通過表現(xiàn)運動的符號意義，制造趣味化的運動效果達到闡釋符號意義的目的。

（如圖5）：

I-0接H點擊“0K”發(fā)送禮物，“發(fā)送”引起了界面的三維運動，運動將表單界面快速折疊，隱喻了寄送包裹的動作，呈現(xiàn)了運動的符號意義。

P、Q紙造型的樹隱喻了祈愿樹，禮物被放置在祈愿樹下。

R.接收方轉動祈愿樹，選擇并點擊自己的禮物。

S-X禮物被選中，自動打開，接收方確認接收。這里，作為禮物的魔方具有符號意義——它可以是任何一種在線購物，例如互動游戲、音視頻、電子書、電子賀卡、紅包等。

結論

研究發(fā)現(xiàn)，案例一，手勢動作直接導致相應的視覺運動，這種運動與基本的界面操作相關，主要發(fā)揮的是“工具中介”作用;案例二、四，手勢動作直接導致了相應的視覺運動，但“工具中介”和“符號中介”存在著操作的先后秩序，和因停頓造成的運動中斷，而符號中介在中斷后都呈現(xiàn)了主導的作用。案例三，“工具中介”和“符號中介”幾乎是同時發(fā)生的，作用相等;案例五，“工具中介”和“符號中介”的界限是模糊的，用戶對動作的體驗，以及對運動的符號意義的理解程度，與自身的文化背景，所積累的閱讀經(jīng)驗有重要的關系。

研究指出了“雙向中介”應用于實驗和產(chǎn)品設計方法的可能性，促進設計師從符號和工具兩方面去思考如何通過視覺運動打動消費者的情感需求。為了提升用戶的參與性，設計師需要超越純功利性的設計目標，去理解用戶的使用動機與背景和所處文化背景，把界面當作一個具有豐富內(nèi)涵的文化產(chǎn)品進行設計。正如諾曼所指出的，“一個功能出色界面很可能也是一個有趣的界面”。[15]

基金項目：本文系南京工業(yè)大學2016年社科研究基地項目“工業(yè)設計創(chuàng)新系統(tǒng)理論研究基地”階段性研究成果（項目編號SKJD005）;2017年南京工業(yè)大學教育教學改革研究課題“以整合技能為目標的數(shù)字媒體藝術專業(yè)培養(yǎng)方案改革研究”[南工教（2017）115號]階段性成果。

參考文獻

[1]WertschJ.Voices of the mind：a sociocultural approach to mediated action[D].Cambridge：Harvard UniversityPress，1991.

[2]WartofskiM.Models：representation in scientific understanding[D].Dordrecht：Reidel Piiblisliing，1979.

[3][美]尼爾森：瀟湘工作室譯，Web可用性設計[D].北京：人民郵電出版社，2000：135.

[4][8]RyoK.Multi Modal Biometric for Theater Application-Face and Fingerprint[J].

Computers and composition，2014（4）：413，433.

[5]DenyJ.Designing guidance for interpreting dynamic visualizations：Generating versus reading explanations[J].Journal of Research in Science Teacliing.2005（2）：147.

[6]粟路軍.國外有關顧客參與的研究綜述與發(fā)展方向[J].湖南財政經(jīng)濟學院學報，2013⑶：61.

[7]EscuderoC.Agents for the User Interface[C].Proceedings of the 1st international conference on Intelligent user interfaces.New York：ACM Press.1997：362.

[9][10][11]王光榮、郭本禹：文化的詮釋：維果茨基學派心理學[D].濟南：山東教育出版社，2009：87+101+123.

[12][法]巴爾特：李幼蒸譯，符號學原理[D].北京：中國人民大學出版社，2008：76.

[13]PolkD，AndsonEM.Integrated Mediation[J].Computational Cognitive Science，2003（7）：357.

[14]MironenkoIA.Concerning Interpretations of Activity Theory[J].Integrative Psychological and Behavioral Science.2013（4）：376.

[15][美]諾曼：付秋芳等譯，情感化設計[D].北京：電子工業(yè)出版社，2005：194.

[16]張芮.兒童教育類游戲卡通形象及界面設計初探[J].設計，2017，30⑷：137-139.

[17]孔祥富，謝勝楠.基于無意識行為在交互界面設計中的研究[J].設計，2017，30（5）：70-71.