用戶界面設(shè)計(jì)課程中GUI 與TUI 設(shè)計(jì)方法的融合1

文/ 陳 嬿 （江南大學(xué) 設(shè)計(jì)學(xué)院）

引言

隨著互聯(lián)網(wǎng)、信息、物聯(lián)和通訊等行業(yè)的不斷成熟，交互設(shè)計(jì)、用戶界面設(shè)計(jì)、體驗(yàn)設(shè)計(jì)等新興研究領(lǐng)域成為設(shè)計(jì)教育中不可或缺的環(huán)節(jié)；其中，用戶界面設(shè)計(jì)在本科教學(xué)中的嘗試是相對較早和發(fā)展相對成熟的。鑒于從互聯(lián)網(wǎng)到通訊、傳統(tǒng)家電、健康醫(yī)療等不同行業(yè)的“產(chǎn)品”屬性及其對交互技術(shù)的不同要求，用戶界面課程需要或可以涵括的內(nèi)容也不盡相同。在已經(jīng)開設(shè)了該課程的綜合性和藝術(shù)類院校的設(shè)計(jì)專業(yè)里，我們常?？梢钥吹綇?qiáng)調(diào)用戶行為習(xí)慣，同時(shí)通過信息架構(gòu)、界面圖標(biāo)等表現(xiàn)形式，結(jié)合軟件程序?qū)崿F(xiàn)的圖形用戶界面（GUI）；或者更多關(guān)注感知，強(qiáng)調(diào)軟硬件結(jié)合與技術(shù)實(shí)現(xiàn)的實(shí)體用戶界面（TUI）。然而，由于交互技術(shù)的更新速度很快，界面設(shè)計(jì)又離不開用戶研究的支撐，加之交互設(shè)計(jì)還不是一個(gè)獨(dú)立的專業(yè)，因此開設(shè)用戶界面設(shè)計(jì)課程時(shí)，不少老師常常會(huì)面臨課時(shí)不夠以及在GUI 和TUI 之間選擇重點(diǎn)的困惑。文章希望通過分享筆者在江南大學(xué)本科二年級(jí)用戶界面設(shè)計(jì)課程的教學(xué)實(shí)踐，分析GUI 和TUI 設(shè)計(jì)的異同，并探索和嘗試GUI 和TUI 設(shè)計(jì)方法的融合，以建構(gòu)出同時(shí)適用于GUI 和TUI 的教學(xué)路徑。

一、課程相關(guān)概念及主要面臨問題

從交互設(shè)計(jì)角度來看，用戶界面是人與“物”之間傳遞和交換信息的媒介，而這里的“物”可以包括物理存在和非物理存在2。其中，GUI 和TUI 是目前最主流和最具發(fā)展?jié)摿Φ挠脩艚缑骖愋?，也是設(shè)計(jì)高校用戶界面設(shè)計(jì)課程的兩大主要內(nèi)容。

1、GUI：圖形用戶界面

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

2、TUI：實(shí)體用戶界面

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

3、用戶界面設(shè)計(jì)課程面臨的主要問題

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

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

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

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

二、GUI 和TUI 設(shè)計(jì)的異同

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

1、差異點(diǎn)

通過比較分析TUI 和GUI，發(fā)現(xiàn)其主要區(qū)別體現(xiàn)在信息傳播載體、具體設(shè)計(jì)內(nèi)容、原型制作方式以及設(shè)計(jì)分析過程等幾大方面。

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

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

圖1 GUI和TUI的相似點(diǎn)

2、相似點(diǎn)

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

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

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

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

圖2 GUI和TUI設(shè)計(jì)流程的異同

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

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

三、融合GUI 和TUI 的教學(xué)實(shí)踐探索

以下介紹一個(gè)融合TUI 和GUI 的實(shí)際教學(xué)案例，上課對象是江南大學(xué)設(shè)計(jì)學(xué)院整合創(chuàng)新班二年級(jí)的本科生，歷時(shí)40 課時(shí)，課程目標(biāo)是讓低年級(jí)學(xué)生對現(xiàn)代用戶界面設(shè)計(jì)知識(shí)有一個(gè)基本了解，并讓學(xué)生掌握界面設(shè)計(jì)的一些實(shí)際技能。

1、課程設(shè)計(jì)

課程設(shè)計(jì)的主要目標(biāo)是通過具體的教學(xué)管理手段實(shí)現(xiàn)TUI 與GUI 的融合教學(xué)，以滿足學(xué)生的多樣化學(xué)習(xí)需求，同時(shí)讓學(xué)生能較好地理解和掌握GUI 和TUI 的共性設(shè)計(jì)方法。就像在傳統(tǒng)工業(yè)設(shè)計(jì)階段，一旦學(xué)會(huì)基本的產(chǎn)品設(shè)計(jì)原理與方法，即可設(shè)計(jì)小到口紅，大到飛機(jī)的各類商品造型一樣，如果掌握了GUI 和TUI 的共性設(shè)計(jì)方法，學(xué)生就可以在今后的職業(yè)生涯中有更大的自主選擇權(quán)。

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

A、定向選擇實(shí)踐課題

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

B、有機(jī)融合設(shè)計(jì)方法

圖3 新舊售票機(jī)交互模型比較（作者：整創(chuàng)1201 田鎮(zhèn)豪、楊麗蓉、陳哲妮、甄一超； 指導(dǎo)：陳嬿）

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

C、科學(xué)管理團(tuán)隊(duì)合作

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

2、教學(xué)實(shí)踐案例——自動(dòng)售票機(jī)設(shè)計(jì)

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

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

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

圖4 新舊地鐵售票機(jī)信息架構(gòu)（作者：整創(chuàng)1201 田鎮(zhèn)豪、楊麗蓉、陳哲妮、甄一超； 指導(dǎo)：陳嬿）

圖5 草模分析過程

圖6 自動(dòng)售票機(jī)取零方式研究

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

四、結(jié)語

圖7 整體界面設(shè)計(jì)表現(xiàn)（作者：整創(chuàng)1201 孫舒、畢竟越、劉容好；指導(dǎo)：陳嬿）

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

最后，雖然這里分享的用戶界面設(shè)計(jì)課程強(qiáng)調(diào)了以用戶為中心、TUI 和GUI 融合的理念與方法，但是根據(jù)各個(gè)學(xué)校和專業(yè)自身的特點(diǎn)，尤其是當(dāng)培養(yǎng)方案允許的時(shí)候，TUI 和GUI 完全可以分開成兩門課進(jìn)行教學(xué)，從而讓學(xué)生有足夠的時(shí)間充分了解和掌握相關(guān)交互技術(shù)和技能。

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

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

[3] 覃京燕、計(jì)匯文.基于TUI 的產(chǎn)品自然交互界面 設(shè)計(jì)方法研究[C].第五屆全國人機(jī)交互學(xué)術(shù)會(huì) 議，清華大學(xué)出版社，2009：284

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

[5] 郝凝輝.《實(shí)體交互界面TUI 設(shè)計(jì)方法研究》，清 華大學(xué)藝術(shù)學(xué)博士學(xué)位論文，2014，p74

[6] ［美］CAGAN J.和VOGEL 著，《創(chuàng)造突破性產(chǎn)品—— 從產(chǎn)品策略到項(xiàng)目定案的創(chuàng)新》[M]，辛向陽、潘 龍譯，機(jī)械工業(yè)出版社，2004，p100