用戶界面設計課程中GUI 與TUI 設計方法的融合1

文/ 陳 嬿 （江南大學 設計學院）

引言

隨著互聯網、信息、物聯和通訊等行業的不斷成熟，交互設計、用戶界面設計、體驗設計等新興研究領域成為設計教育中不可或缺的環節；其中，用戶界面設計在本科教學中的嘗試是相對較早和發展相對成熟的。鑒于從互聯網到通訊、傳統家電、健康醫療等不同行業的“產品”屬性及其對交互技術的不同要求，用戶界面課程需要或可以涵括的內容也不盡相同。在已經開設了該課程的綜合性和藝術類院校的設計專業里，我們常常可以看到強調用戶行為習慣，同時通過信息架構、界面圖標等表現形式，結合軟件程序實現的圖形用戶界面（GUI）；或者更多關注感知，強調軟硬件結合與技術實現的實體用戶界面（TUI）。然而，由于交互技術的更新速度很快，界面設計又離不開用戶研究的支撐，加之交互設計還不是一個獨立的專業，因此開設用戶界面設計課程時，不少老師常常會面臨課時不夠以及在GUI 和TUI 之間選擇重點的困惑。文章希望通過分享筆者在江南大學本科二年級用戶界面設計課程的教學實踐，分析GUI 和TUI 設計的異同，并探索和嘗試GUI 和TUI 設計方法的融合，以建構出同時適用于GUI 和TUI 的教學路徑。

一、課程相關概念及主要面臨問題

從交互設計角度來看，用戶界面是人與“物”之間傳遞和交換信息的媒介，而這里的“物”可以包括物理存在和非物理存在2。其中，GUI 和TUI 是目前最主流和最具發展潛力的用戶界面類型，也是設計高校用戶界面設計課程的兩大主要內容。

1、GUI：圖形用戶界面

GUI 是Graphic User Interface 的簡稱，即圖形用戶界面，具體是指采用圖形方式顯示的計算機操作用戶界面。在接收到用戶或其他系統的輸入指令后，GUI 會通過輸出圖形的方式來引導用戶和計算機軟件進行交互，并借助菜單、按鈕等界面元素，以及合理的屏幕布局和顏色搭配，為用戶提供清晰、直觀、友好的界面操作環境2。GUI 比較依賴于人的視覺，同時需要用戶手動參與，例如各種APP、網站界面等等。在計算機出現后的半個世紀里，GUI 經過不斷完善，逐漸走向成熟，并完全取代命令語言用戶界面，成為現代軟件界面的主導形式。國內對GUI 的設計研究是從近幾年開始的，相關的理論研究成果還比較少；目前市場上各類圖形用戶界面書籍仍大多偏重于表達方法與表現技能等視覺效果的介紹。

2、TUI：實體用戶界面

TUI 是Tangible User Interface 的簡稱，即實體用戶界面，是指用戶通過可觸實體和真實環境與數字化信息進行交互的人機界面。它通過把日常生活中的物品轉變為人與數字世界交流的看得見摸得著的界面，將物理和信息世界兩個迥然不同的世界完美無縫地接合起來；同時通過分析產品使用環境與用戶心理愿景，充分利用人的生活經驗，直接將人們在現實生活中與物體、環境的交互動作映射為與信息空間的交互，從而幫助用戶獲得更加自然的交互體驗。從另一個角度來看，TUI 是在延續物質實體產品生命周期的同時，通過信息通訊技術使這些產品更加智能化和人性化。隨著科技產品的技術條件和社會需求的不斷提升，實體交互正成為一個迅猛發展的研究領域，越來越多擁有TUI的產品（例如任天堂Wii）將進入人們的生活。

3、用戶界面設計課程面臨的主要問題

早期的用戶界面設計課程大多關注的是硬件界面對象，典型課題有電視遙控器分析和改良、中大型硬件產品界面改良等；隨著觸摸屏技術的普及應用，GUI 受到普遍關注，被漸漸引入各大院校的界面設計課程中，并成為當前課程內容的重要組成部分；近幾年來，隨著實體用戶界面的產品實例逐漸增加，應用越發廣泛深入，許多院校也開始將實體用戶界面（TUI）作為主要教學內容，引入到用戶界面設計課程中。然而，課程的教學時間并沒有因為教學內容的大幅增加而發生改變，目前仍大多保持在40 至60 課時左右，這給全面教學和課題深入帶來不小的難度。尤其是課題實踐環節，作為設計教育中不可或缺的重要教學組成部分，是學生深入理解理論知識與鍛煉設計實踐能力的主要途徑，而目前的課時顯然無法滿足學生深入完成GUI 和TUI 兩個不同方向課題實踐的需求，這對課程教學目標的實現產生了直接影響。

除此之外，教師自身的知識結構和專業基礎也是阻礙GUI 和TUI 聯合教學一個不可忽視的原因。這是由于圖形用戶界面和實體用戶界面在信息載體、設計內容和實現技術等知識內容上存在較大差異，任課教師如果沒有跨專業的知識背景則不可能同時完成GUI 和TUI 兩大教學任務；而大多數老師出身于工業造型設計專業，少數出身于多媒體或計算機專業，再加上課時等因素的限制，因此絕大多數任課教師會在GUI 和TUI 中選擇一個自己比較熟悉的方向進行重點教學，并進行相對應的課題布置和作業輔導。

另一方面，課程的授課對象大多是本科二年級工業設計系的學生。由于受到傳統設計認知、未來職業定位、社會交際業務等因素的影響，同一班級的學生對用戶界面設計課程的認知和期望存在著較大差異。比如一部分學生會事先認定自己要做實體產品設計，想學更多實體界面的設計方法和交互技術，并覺得GUI 只是在虛擬界面上進行平面設計，自己不是很感興趣；相反的，另一部分學生則因為自身經歷、性格、喜好等諸多原因，渴求GUI 相關知識的學習，例如有的學生已經接到諸如APP的小型實際項目，但苦于不知道方法和流程，這種情況有許多。

顯然地，學生多樣化的學習需求與任課教師側重GUI 和TUI 的教學安排之間已產生直接矛盾，而內容“一邊倒”的課程教學事實上也對學生未來職業的選擇面產生一定影響，因此如何在同一門課程中將GUI 和TUI 有機地進行融合，以滿足學生不同的學習需求，成為一項頗具意義和挑戰性的教學研究課題；與此同時，對各種交互設計產品或現象（包括GUI 和TUI）進行共性分析，也具有十分重要的理論研究價值和意義。

二、GUI 和TUI 設計的異同

為了達到融合教學的目的，對TUI 和GUI 進行比較研究，以明確兩者的差異與共性，是一條可行的研究路徑。它不僅能讓我們進一步明了TUI 和GUI 設計在哪些方面可能融合，也讓我們更好地理解兩者的本質區別，為深入教學打下知識基礎。

1、差異點

通過比較分析TUI 和GUI，發現其主要區別體現在信息傳播載體、具體設計內容、原型制作方式以及設計分析過程等幾大方面。

以兩個不同的生活景象舉例，空巢老人因想念外地工作的子女，時常和老伴一起翻看子女的相冊，隨著翻看次數增多，外地子女的電腦桌面背景圖變得越來越暗，子女獲取到這種明顯的情感信息，主動問候父母；另一個場景是老人思念子女，直接用手機發短信或打電話給子女，子女回短信或直接在來電中問候父母。

這兩個場景都比較自然。其中，前一個場景使用的行為媒介是TUI，后者則使用了GUI。從上述描述中不難看出，兩者的信息傳播載體有明顯的實、虛體區別。第一個場景中，用戶隨意翻看實物（相冊），而相冊自動記錄用戶翻看的次數、時間等數字信息，并用網絡傳輸方式將這些信息傳到異地的電腦上進行可視化顯示；第二個場景中，用戶通過操作手機虛擬界面，快速完成了任務。雖然用戶的愿望和動機基本相同，但是使用了TUI 和GUI 兩種截然不同的行為媒介來達成。相對應地，TUI 和GUI 在具體設計內容與形式上也存在著較大差異。譬如想實現第一個場景中的TUI，不僅需要設計出能進行信息收集的實物本身（包括相冊造型、材質、翻頁結構、信息采集方式等），同時還需整體考慮異地信息傳輸與信息可視化顯示方式并進行原型實驗；而制作第二個場景中的GUI，則需要先了解老人的行為與認知習慣，并為他們設計出能較快找到的短信鍵以及高適應性的短信輸入方式，來做相應的行為匹配，最后通過軟件編程進行設計實現。除此之外，兩種界面在原型制作方式上也有著本質不同。GUI 通常是在信息架構基礎上，通過制作1 比1 紙上原型的方式，結合模擬操作體驗，對信息架構進行驗證和調整。它不僅要求按鍵等細節符合人機工學，而且更關注最終的軟件界面流程能否滿足用戶的各種行為需求；而TUI 原型則是更多地運用各種開源軟件，結合大量傳感芯片，來幫助實體交互功能的實現；值得注意的是，原型迭代被看作實體用戶界面設計過程中十分重要的環節，只有通過多階段的原型評估和迭代，才能最終實現理想的實體交互目標。另外，TUI 的設計分析過程主要是由語境分析、行為分析、映射分析、意義分析和合理性分析共五大環節5 組成，這與圖形用戶界面的也明顯不同，后者的設計分析過程主要是基于行為邏輯1“行為邏輯”概念由辛向陽教授提出，并在2013 中國工業教育年會、2014 韓國設計年會和2014 澳大利亞體驗設計年會上，以大會主題演講的形式公開發表。理念，通過實境調查、數據與痛點分析、情景設計與需求圖表、用戶心智模型研究和信息架構設計等環節組成。

圖1 GUI和TUI的相似點

2、相似點

雖然TUI 和GUI 在上述許多方面存在著明顯差異，但通過深入分析，不難發現兩者間也存在著少量十分有意思的相似點。如圖1所示，這些相似點主要在設計對象、設計關注點、設計理念與方法和設計流程幾方面。

首先，從本質上來看，無論TUI 還是GUI 的設計對象都是行為。一旦設計的對象是行為，GUI 和TUI 就可以被看作是實現行為的媒介，兩者的差別就不是那么重要了，只要它們在合適的場景和時間內，能夠支持合目的行為流程中應有的動作就好。

其次，GUI 的設計關注點是讓界面“智能化”，所謂“智能化”是指界面不僅知道用戶想要干什么、幫助用戶簡化操作步驟，而且還能創造出符合用戶審美認知的使用新體驗。設計師具體通過痛點分析、情景設計以及整合不同用戶的心智模型，讓最終界面流程符合大多數用戶的行為與認知習慣；而TUI 關注的是哪些界面交互行為和體驗可以通過實體交互方式進行優化和提升，以及用什么樣的技術和形式來完美實現。不難看出，兩者的設計關注點都以提升用戶體驗為最終目標，以實現自然、高效的交互行為作為考量對象。

再次，在設計理念與方法上，TUI 和GUI 同樣是基于行為邏輯理念并運用以活動為中心（ACD）的設計方法，同時還非常強調界面的示能性（Affordance）3 和用戶參與。其中，行為邏輯是指根據人的行為、目的和習慣來進行交互設計流程（包括界面操作）規劃的思維邏輯。它為流程設計提供了重要的決策依據，是最根本但卻往往被忽略的交互設計邏輯。示能性在TUI和GUI 設計中是指通過界面本身的特性，包括實物或圖形的形態特征和材質肌理色彩等視覺特性，以及觸覺、聽覺、嗅覺和味覺特性等，表達一定程度的功能暗示。從設計和操作的角度來看，示能性具有非常高的應用價值。強調多階段用戶參與則是為了在設計過程中盡可能完整地展現用戶的思維模式，并幫助設計師對界面的示能性設計進行評判和甄別，這為界面的科學性和嚴謹性設計提供了強有力的支撐。

圖2 GUI和TUI設計流程的異同

最后，GUI 的典型設計流程是從設計定位，實境調查與分析（包括數據分析與痛點分析），情景設計與需求圖表，用戶角色模型，心智模型，信息架構，紙上原型與用戶測試，靜態界面設計（包括界面風格與色彩設計、界面布局與具體內容設計、菜單與圖標等細節設計、人機工學設計等）與動態界面設計（動作等），到最終軟件實現；而TUI 的則是從設計定位，文獻、田野與用戶調查，創意設計，概念篩選，原型制作，原型評估與迭代，界面設計（包括實物造型語意設計、人機工學設計、材質色彩設計、視覺美感），到最終完成可交互實物。1不同的設計師和企業都可能有自己熟悉的GUI 或TUI 設計流程，這里指的是課程中經常用到的典型設計流程。顯而易見，TUI 和GUI 在設計定位、用戶調研、原型制作、評估迭代和界面設計這五個設計流程環節上比較類似（見圖2），盡管其相似度存在著不同程度的差異。

通過對TUI 和GUI 的異同點進行分析，我們不僅能更清晰地認識兩者在設計目標、信息載體、設計分析、工具方法以及設計流程等眾多知識內容上的不同；也欣喜地發現TUI 和GUI 在設計對象、設計關注點、設計理念與方法，以及設計流程上存在著基本的共性特征，這無疑為TUI 與GUI 的融合教學提供了可行的實踐路徑指引。

三、融合GUI 和TUI 的教學實踐探索

以下介紹一個融合TUI 和GUI 的實際教學案例，上課對象是江南大學設計學院整合創新班二年級的本科生，歷時40 課時，課程目標是讓低年級學生對現代用戶界面設計知識有一個基本了解，并讓學生掌握界面設計的一些實際技能。

1、課程設計

課程設計的主要目標是通過具體的教學管理手段實現TUI 與GUI 的融合教學，以滿足學生的多樣化學習需求，同時讓學生能較好地理解和掌握GUI 和TUI 的共性設計方法。就像在傳統工業設計階段，一旦學會基本的產品設計原理與方法，即可設計小到口紅，大到飛機的各類商品造型一樣，如果掌握了GUI 和TUI 的共性設計方法，學生就可以在今后的職業生涯中有更大的自主選擇權。

為了達到上述目標，在課程設計過程中遵循了以下幾點基本原則：（1）允許學生根據興趣自由選擇設計GUI 或TUI；（2）有效促進協同學習，用最自然的方式讓設計GUI 的學生參與到TUI 的設計過程中；相反的，讓設計TUI 的學生也參與到GUI的設計過程中；（3)不大幅增加任課教師的學習成本，包括時間和精力。這主要考慮到在目前的課程教學過程中，教師仍占據教學主導地位，如果花費他們太多時間和精力，則會產生抵觸行為，反而不利于課程教學的創新。課程設計主要通過定向選擇實踐課題、融合GUI/TUI 設計方法和團隊合作項目管理三大舉措來達成目標。

A、定向選擇實踐課題

定向選擇實踐課題指的是實踐課題的具體設計對象要求必須是既有軟件界面又有實體界面的產品類型。這種課題界定方式從一開始就規避了實踐教學中側重TUI或GUI 的問題，同時還考慮到產品界面是一個完整體系，實體和軟件用戶界面從來都是融合共生，不可分割的；而且這類產品數量非常龐大，綜觀市面上的各類商品，到處可見集軟硬件界面于一身的產品，比如單反相機、汽車導航、游戲機、媒體播放器、自動售貨機等等，因而這類課題也將學生的眼光聚焦在目前的主流商品上，具有較強的現實意義；與此同時，由于軟件和硬件界面彼此作用和關聯，人在使用這些產品的過程中往往需要同時操作軟件和實體界面才能順利完成任務，因此這類課題也有助于學生全面了解GUI 和TUI 的相關知識，并且能讓他們在課題研究過程中對軟硬件界面的緊密作用關系有一個清晰認識。

B、有機融合設計方法

圖3 新舊售票機交互模型比較（作者：整創1201 田鎮豪、楊麗蓉、陳哲妮、甄一超； 指導：陳嬿）

由于TUI 和GUI 在基于行為邏輯、強調示能性和用戶參與這幾點設計理念與方法上存在著共性，因此在課程中可以利用這一點來對兩種界面對象進行方法層面的指導，以促進TUI 和GUI 的融合教學。與此同時，由于界面設計的這些理念和知識方法較大程度上區別于以往的創意設計方法，因此如何通過課程設計降低學生的學習成本是問題的關鍵。以下分享一些教學嘗試：首先，在課程第一周先設置一個小課題，主要任務是讓學生觀察不同用戶在操作同一件商品（兼有軟硬件界面）時的行為流程，并通過照片、視頻等方式進行信息記錄，最終要求學生對其使用痛點進行簡單分析和總結。該課題基于學生原有知識經驗的基礎上，任務簡單明確，并有效地引導學生開始將人的行為作為研究對象，為后期的實踐課題鋪墊了知識基礎；其次，在大課題的設計前期，通過分享大量優秀的TUI 和GUI 作品案例，幫助學生正確理解兩者共同的設計對象——行為，理解基于行為邏輯的重要設計理念，同時引導學生運用以活動為中心的設計方法；再次，通過對不同類型的設計作品做功能語意分析，嘗試讓學生理解并掌握從形態、色彩、材質、肌理等視覺特征，到具有其他感官特征的示能設計規律和方式，從而為具體界面的示能性設計提供間接指導；最后，要求學生提交各階段用戶參與界面開發的照片或相關信息，并作為最終作業提交內容的一部分，這讓學生自覺邀請用戶參與項目的整個流程，并自然而然地從用戶反饋信息中進行設計反省和自我批判，同時深入理解用戶參與的重要性。

C、科學管理團隊合作

課程主要通過明確個人責任分工、促進團隊設計融合和定期發布設計進展三種方式對團隊項目進行管理。首先，明確個人在團隊中承擔的角色和具體分工。在學生自由組隊前，教師公布預前設想好的具體課題對象（比如ATM 自動取款機），并明確團隊必須完成包括圖形用戶界面和實體用戶界面在內的整體設計。學生可以根據興趣自由選擇軟件或實體作為個人的任務對象，并聯合其他同學組成課題小組。因此在課題小組成立前，個人就已明確自己在團隊中所承擔的具體設計任務；其次，通過設定作業評價指標來促進學生對GUI 和TUI 知識的全面學習。由于軟、硬件界面在使用過程中的順暢連接是評價產品易用性的重要指標，因此課程將“軟件顯示與實體功能操作的連貫性”作為課題實踐的重要評價標準之一。該作業指標的設立不僅能有效促進團隊內部GUI 和TUI 設計者之間的溝通和交流，也潛移默化地讓學生對GUI 和TUI 兩者進行更深入的了解，真正促成全面教學的實現；最后，定期進行課題進展發布。這主要考慮到進一步發揮協同學習的作用，不僅在團隊內部成員之間，在團隊和團隊之間也實現信息交流和知識共享。階段性課題發布不僅能有效促進各團隊的課題研究進展，而且讓各團隊了解到其他團隊在課題設計過程中所用到的研究方法和思維方式。通過這種間接學習方式，學生不斷深化著對課程相關內容的認知和記憶，最后輕松實現舉一反三的教學效果。

2、教學實踐案例——自動售票機設計

之所以選擇自動售票機作為設計對象有以下三點原因：（1）作為一件商品，自動售票機同時有著軟件界面和硬件界面，選擇該類設計對象無疑能為TUI 與GUI 聯合教學創設有利條件；（2）隨著城市快速發展和軌道交通重要性的日益提升，自動售票機也開始發揮越來越重要的作用；然而，目前國內該類產品的實體界面和軟件界面大多分別來自于產品造型設計師和軟件工程師之手，是“拼裝”的產物，帶來的結果是產品軟、硬件使用起來不順暢，用戶使用“痛點”較多。顯然，具有這種“拼裝”特性的產品為TUI 和GUI 整合設計提供了一個非常好的反面教材和研究對象；（3）大多數學生都曾經使用過這類機器，對之沒有抵觸心理，而且在當地的火車站、汽車站以及地鐵站都有一定數量的實物存在，便于學生進行實地調研和設計分析。

在公布課題后，全班學生進行自由分組并明確個人分工，限定人數為每組3 至4 人；根據同學們的興趣，每組有1 至2 人負責實體界面，而剩下的2 至3 人則具體負責軟件界面設計。根據TUI 和GUI 技術實現和表現方法的不同，組員們又分別按照各自的作業要求和最終評價指標執行設計；他們有的側重于重新定義新售票機的支付方式、預測并創新產品功能；有的則更多地研究產品的交互模型（見圖3）、信息架構，在不改變自動售票機基本功能結構的基礎上重新設計用戶界面；盡管團隊成員各自關注的重點不一樣，但是用戶研究、競品分析、用戶反饋、流程設計、項目管理等通用設計方法則適用于所有以用戶為中心的設計項目，而各團隊只需要整合成員各自的興趣和特長去協同完成它。這種方式不僅讓全班學生盡快了解項目過程和要求，也為喜歡自主思考問題的創新型學生提供了一定的發揮空間。

作為一門實踐課程，授課以項目指導和案例分享為主，并在項目進行過程中輔助以針對性的知識講座，比如GUI 設計中有關心智模型、信息架構和軟件界面三者的區別與聯系，或TUI 的關鍵知識點——語境、行為與映射分析等，都是初學者比較容易混淆的知識內容。另外，在設計實踐過程中也可以教學生一些具體的設計工具，比如說用硫酸紙進行紙上原型的制作會比較快捷和省力，用卡片分類法能幫助學生完成信息的分類和行為模擬等。

圖4 新舊地鐵售票機信息架構（作者：整創1201 田鎮豪、楊麗蓉、陳哲妮、甄一超； 指導：陳嬿）

圖5 草模分析過程

圖6 自動售票機取零方式研究

在課題實踐的4 周多時間里，學生體驗了從設計研究、信息架構（例圖4）、草模制作（例圖5）、細節推敲（例圖6）、軟件界面與實物造型設計表現（例圖7）等一系列界面設計過程，通過自己動手設計、理解講課知識和設計案例，結合小組內部交流與全班階段性匯報的方式，融合學習了TUI 和GUI 的設計方法與流程。不管是主動多一點還是被動多一點，至少他們對TUI 和GUI 已不再陌生，并津津樂道課程最終評出的優秀作品。

四、結語

圖7 整體界面設計表現（作者：整創1201 孫舒、畢竟越、劉容好；指導：陳嬿）

不難看出，盡管實現技術不同，但是TUI 和GUI 設計都與用戶的行為和體驗緊密關聯，并體現了交互設計的兩大理念，即以用戶為中心和遵循用戶行為邏輯。從以用戶為中心的角度，其設計過程和結果都強調問題導向，技術選擇以合理滿足需求、解決問題為前提，這也就是用戶界面設計課程整合TUI 和GUI 方法的依據。其實在《創造突破性產品》一書里，Cagan 和Vogel 教授提出的工程、設計和商學多學科交叉的一體化新產品開發模式6，也是基于以用戶為中心、問題導向的設計理念，通過調研挖掘用戶需求，結合專業交叉提出整體解決方案，再通過用戶反饋進行不斷調整，才最終實現讓用戶滿意的目標。從行為邏輯的角度，設計師需要更多地關注用戶體驗的流程特性和合目的性，根據典型用戶的典型路徑，運用心理學、認知學和行為學的知識，合理地設計用戶界面的信息架構以及每一個流程節點的界面圖標等。

最后，雖然這里分享的用戶界面設計課程強調了以用戶為中心、TUI 和GUI 融合的理念與方法，但是根據各個學校和專業自身的特點，尤其是當培養方案允許的時候，TUI 和GUI 完全可以分開成兩門課進行教學，從而讓學生有足夠的時間充分了解和掌握相關交互技術和技能。

[1] 王建民.圖形用戶界面設計的原則與發展趨勢探 討[J].《藝術探索》,2007年,第21 卷,第2 期,p119

[2] 方敏.《文化傳播視野下的圖形用戶界面設計研 究》，蘇州大學博士學位論文，2009：19

[3] 覃京燕、計匯文.基于TUI 的產品自然交互界面 設計方法研究[C].第五屆全國人機交互學術會 議，清華大學出版社，2009：284

[4] 李鐵萌.基于實體用戶界面的智能手機直覺花交 互方式[J].中國科技論文，2013年,第8 卷，第 10 期，p74

[5] 郝凝輝.《實體交互界面TUI 設計方法研究》，清 華大學藝術學博士學位論文，2014，p74

[6] ［美］CAGAN J.和VOGEL 著，《創造突破性產品—— 從產品策略到項目定案的創新》[M]，辛向陽、潘 龍譯，機械工業出版社，2004，p100