用户界面设计课程中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