基于OBE理论的文化教育类APP界面交互设计研究

张天爽 夏宗明

摘要：研究OBE教学理念下的文化教育类App界面设计，目的是增强用户使用时的情景代入感，以获得更佳的用户体验，从而强化对学习教育的辅助作用。文章将成果导向（OBE）的教育理念引入设计领域，建立了设计视域下成果导向（OBE）理念网状拓扑模型，并根据用户服务设计需求，总结出产品设计策略[1]。最后，以App为例进行了設计实践。利用绘制服务蓝图等分析了解到，当需求体验和操作感受研究过程作用于文化教育类App界面设计中，通过界面交互技术使学生能够更加有效地进行智能化、人性化、整体化学习，进而提高用户服务的使用和教学。其独特风格的交互反馈模式，有利于增强产品认可性，以获得更佳的用户体验，从而增强了交互体验过程中的趣味性。通过对这个课题进行专门研究，以期待更好地为同类产品的设计提供借鉴或参考。

关键词：成果导向理论 服务设计理念 服务蓝图 用户体验 界面设计

中图分类号：TB47 文献标识码：A

文章编号：1003-0069（2023）19-0036-04

Abstract：To study the interface design of cultural and educational Apps based on the OBE teaching concept，with the purpose of enhancing the sense of situational involvement of users when using，so as to obtain a better user experience，and thus strengthen the auxiliary role of learning and education. This paper introduces the results-oriented（OBE）education concept into the design field，establishes the network topology model of OBE concept under the design perspective，and according to the users service design needs，Chen Shaofan. Finally，taking App as an example，the design practice is carried out. Through the analysis of drawing the service blueprint，we learned that when the research process of demand experience and operation experience acted on the interface design of cultural and educational Apps，the interface interaction technology enabled students to learn intelligently，humanely and integratively more effectively，thus improving the use and teaching of user services.Its unique interactive feedback mode is conducive to enhancing product recognition，obtaining better user experience，and thus enhancing the fun in the interactive experience process. Through the special research on this subject，we hope to provide better reference for the design of similar products.

Keywords：Results-oriented theory Service design concept Service blueprint User experience Interface design

引言

20世纪90年代以来，智能科技的迅猛发展，加速了信息社会向知识社会的转变的背景下，公众更加愿意使用学习类App进行学习去提升自己。[2]数字化应用程序具有外形美观、操作流畅等特点受到众多学习者的广泛认同。[3]当今产品的数字化特性也丰富了对学习资源的呈现形式，增强了产品使用者对于学习目标管理的掌控度，[4]但是同时网络本身结构所存在的非单一性和传播多样性，必然增加使用者的认知偏差和行为困惑。[5]

因此，本研究根据未来设计创新的发展需求，引入OBE理念指导并构建以产出式交互制作设计模式，用于应用程序指导设计。强调以用户的学习成果为导向进行反向设计，以用户为中心来确定教学目标、教学过程、考核评价体系等。理念指导更加注重教学活动中用户的学，强调学习的产出，从而实现用户对发现问题、解决问题和创造性思维等高阶能力的培养。在此背景下广泛将移动终端设备App技术辅助于教学活动，生动有趣的交互设计方式能吸引用户参与，对加深和巩固记忆有重大帮助，从而提高用户的兴趣。

一、相关概述

（一）OBE理念

OBE理念最早于1981年由斯派蒂（Spady）首先提出的，理念注重于教育的实际需求，强调以学习产出为中心，通过合理运用关键教学资源的结构模式。该理念已广泛应用于教育课程资源建设及人才培养等方面，得到了广泛的认可。[6]在基于结果的教育（OBE）系统中，每个教学部分都围绕目标（成果）开展，可更为合理、贴切地安排时间学习和提高学习效率，使得大部分学生都能够达到最初设定的目标。

（二）OBE教学理念在文化教育类App界面交互设计中的作用

1.调节作用。文化教育学习App对用户的认知过程会产生积极或消极的影响。学习活动是认知活动，无论在主动学习还是被动接受活动中，OBE教学理念都起着一定的调节作用。首先，科学的OBE教学理念可以给用户带来快乐、自信等积极效应，促进学习活动的顺利开展。缺乏科学的概念教育时会限制用户个体发展或阻碍其他活动。其次，OBE教学理念有助于提高学习活动的水平，在制定OBE教学理念时无须添加太多复杂的因素，用户的学习印象才会增强，获得最佳的学习效果。

2.强化作用。用户在通过App进行交互作用的过程中，OBE教学理念能够作用于自我认知改变或强化和巩固人们行为，最终实现强化学习、提升学习效果的作用。同样，学习OBE理念的内容也会影响和改变消极的学习行为。对于用户来说，这种改变具有导向功能，因为用户在学习时感受到学习自己的引导因素，从而使用户主动学习，避免不良体验、纠正他们在自己学习中的不良行为等。

（三）研究意义

当前社会对知识不断追求，有赖于数字信息获得突破和克服大众化的开放系统合作平台，移动学习App系统数据采用云存储，功能完善，性能好，为广大学习者提供了高效的学习支持。但目前国内应用市场中很多研发人员往往注只注重产品的商用价值，而忽视了App中界面的界面风格、设计要素和整体布局等，无法在用户学习的同时为抓取有效信息，进而降低了对数字化学习的热情。精美的界面是需要有卓越的视觉吸引力跟适当的趣味性，交互设计必不可少的，移动端App界面的设计质量有效影响到用户的操作体验和忠诚度。因此，确保满足人们对视觉需求而不断增强的审美诉求，设计出界面友好且容易操作的交互界面，能够更好地发挥出智能学习记忆终端的重要效果，更加适应用户的使用习惯及语言标志学习。学习者可以在满意的学习环境中取得进步并且提升认知能力，从而提高用户的学习效率，提升竞争意识。

二、现状分析

（一）设计现状

1.目前市场上各类产品个性化现象严重，产品内容运用不当从而只加剧了用户在理解成本上的增加，表现在使用过程中显得操作更加困惑。但有的同类题材产品从形状到内部功能都差别，以手机期刊App和全球学术快报App首页为例，我们可以发现两款拥有相同属性的产品整体的视觉结构、首页排布同样是天差地别。相关功能各位于上下两端，排列方式也完全不相同，对比强烈的左右滑动横幅设计，设计界面的表达风格大不同。而目前App也存在很大优化的区间，产品界面交互设计研究依然出现有如交互性、定位不清晰、服务多样化、过于个性化、与其他App界面交互设计缺失等，這在后续将尝试做进一步优化和改进。

2.核心竞争力不足。产品服务本身来讲，内容才是核心。学习类App并非只是简单地将实体教材内容原样照搬到移动载体上，通过调查的数据来看，用户认为当前主要存在的问题为推广多、功能多样，使用困难、老师的教学水平落后等。[7]产品的服务缺乏准确性和有效性，这也从侧面反映出产品仍存在一些问题，高成本、稳定性差，无统一标准和操作繁琐等，从而降低了用户的情感归属感。

三、应用分析

（一）服务分析。服务理念的中心思想就是以人的需求为出发点，借助于马斯洛需求理论分析用户需求欲望的痛点、痒点和爽点就成为了产品服务的决定性因素。根据对用户对象的画像及要素分析，将各部分内容对比后得出服务蓝图框架，如图1。通过服务蓝图可以更直观地发现用户行为碰撞点存在的联系。

（二）机会点。通常情况下，体验设计可以加强记忆和认知因素，能够增加产品的基本内涵，加深产品印象，强化对产品的情感。在相对程度上加快让用户在认知上对所接触内容差异性关系的快速理解，使得整体设计更符合用户的行为习惯。

各模块之间的有效交互作用，直接影响到用户阅读和体验。在交互设计应用到智能产品之中，以用户为中心，保持界面与交互功能的统一性，能够让用户与产品间的交互作用变得更加简洁、更加高效，从而给用户带来流畅的应用体验。因此，界面设计所产生的高附加值，潜在价值才会变成现实价值，方便用户使用习惯的养成，合理促使用户付诸行动。

四、设计视域下的OBE理论原则

（一）设计原则

1.学习产出性。理论本质是以产品为成果展示为主要目的。学习产出需要根据服务流程的多元性，在横向内容层次与纵向形式层次多方面促进的学习成果的转化，从而提升使用者的学习效率，多方面完成既定目标，通过优质化体验和有效管理，以达到主动学习的效果。[8]

2.幽默有趣性。幽默能有效地让使用者在体验过程中体会到欢乐与趣味，可以更高效地增强使用者学习意识跟增加探索实践。因此，基于OBE理论的App界面交互设计应当在教育学习的新方式，展现出趣味性，特别在目标已经达成的这个时候，通过非特定的幽默方式鼓励使用者会使得交互过程产生更多兴趣。

3.主动参与性。用户可登录个人界面，将学习过程、方法心得、观点建议等以链接或发表动态进行公开分享，同时可获得满足分享条件的对应回报。主通过合理利用学习者的竞争心理及激励性机制，营造出虚拟的线上学习环境，提高用户的体验。机制里用户的学时间安排相对自由，同样能够根据个人实际合理安排的学习课程内容，获得更高的体验收益。

（二）OBE理论网状模型

当OBE理论深入解读时，能够发现其与十大好的设计基本原则存有广泛的联系，结合二者可以进一步细化设计要求，有效指导设计。能够发现基于此，得出以下网状拓扑模型，如图2所示。通过功能准确传递设计意图是产品交互设计的重要部分，是交互界面设计所遵循的原则。[9]设计传递的不准确会造成对使用者不好的使用感受，所以交互设计的目的主要应当具备清晰的视觉逻辑及理清各素之间的关系，以提高设计的可阅读性和可用性。在随着交互理念的应用和发展，人机交互方式越来越丰富。通过界面中传统的部分进行合理的设计，通过更加人性化的交互方式构建出能与用户直观互动的界面，有效提升界面中的操作体验，实现信息传递的快捷高效。

五、设计策略

通过该模型能够得到不同需求之间的相关性，提出具体的策略。[10]先由整体层出发，在完成知识运用目标的管理上，采用特合理引导的方式，把控使用者的积极情绪，对心理感受上进行加强与渗透，让使用者在情感上产生共鸣以达到学习收益的最大化。

（一）清晰、长久的目标：通过信息架构和设备交互设计，将用户的学习需求和学习目标转化为清晰并可持续执行下去的学习活动。在促进学习，激发兴趣，保持学习等方面有着相对不同程度的要素强化，以满足用户的需求，让用户更容易参与学习活动。

1.信息结构及用户心智模式：清晰的信息结构并且符合用户心智模型的产品界面，有利于用户快速读懂，减少用户界面对认知上的损失，关注于用户实现学习目标和提高学业。方便用户快速浏览学习、找到所需备考模块内容，结合线下尽快掌握考点。App则能够协助使用者学习和完善教育知识及文化理念，于是产品会更多地强化在数字化氛围下营造与文化输出，让使用者可以合理地参与到不同环境中，强化对掌握知识的熟练度，使练习效果更接近目标。[11]

2.设计流程：将长期任务拆分成一系列可执行的短期任务，根据任务需要主动、潜移默化通过创新性设计的方式吸引用户，例如，利用基本认知来区分不同的信息优先级，在一定范围内表达出用户对内容形式主次先后关系，有利于产品整体交互运行流畅合理。

（二）及时正当的操作反馈：使用者界面学习的目标管理需要产品拥有简洁易懂的整体结构及明了的可执行的活动流程，及时、准确、有价值的学习响应让使用者获取了更多的学习动力。所以，正向反馈下的交互设计需要全面思考不同影响因素，以用户的核心为中心，

强化对学习作用。[12]

通过富有趣味性的方式能够使用户更加主动地学习。产品的产出反馈能够借助于趣味化的鼓励架构模式，从用户的角度出发，通过在使用者界面上正向互动增强使用者的学习效率，最终使其达到顺利完成目标管理的目的。通过提供积极的指导和鼓励，能够吸引学习群体使用，提升用户对产品的高感度及对学习目标的长期性。

（三）合理利用注意力：文字是一种承载语言的设计，文字的视觉冲击力可拥有其他要素无法比拟的优势，在视觉展示中起到了重要作用。专业的文字起到了易读性的作用。另外，色彩作为自然的产物，为人们所熟悉，也更容易调动用户情绪，通常情况下颜色传递信息的优先级高于文字，保持色彩组合简洁有助于提升用户体验。界面色彩统一设计能够使一个界面看起来更完整和统一。

六、創新之处

（一）简化操作思维，减少用户记忆负担：

当前市场上文化教育类应用视觉风格设计表现出多样性，用户在阅读和思考上投入大量时间，在一定程度上增加了用户的认知负担。优化设计从App功能和需求出发，重新布局搭建，注重营造氛围，体现界面井然有序的美感。然后使用交互模式，可以轻松实现内容的选择、跳转和保存等操作，并且过程简单。通常用户期望产品用尽可能少操作来解决问题，所以产品都应该设计得尽可能简单、直观，给人耳目一新的视觉体验。这是让用户以尽可能少的步骤和时间尽快了解所需信息的最直接方式。

（二）清晰层级分类，提高产品使用效率：

用户在产品应用时，美观和实用是他们固定的选择。针对其他文化教育类App使用信息层次上较为混乱，信息层的任务重复，应当根据用户的需求设计规划，精准控制交互界面。设计采用线性布局和圆角的方式，分类整理信息，做到既清晰又美观。另一方面，应注重用户的操作习惯，简化呈现给用户的视觉元素，提高产品的交互效率，以改善用户的操作体验。

（三）增添新模块、动态效果和音效，打造引人入胜的互动体验：

交互设计是响应用户行为的设计。例如，如果单击弹出的下拉菜单，探索的部分将改变颜色，提醒用户不要重试无效操作，却体现出了用户交互体验的重要性。App主界面和子界面之间，要保证相互切换的流畅性与合理性。[13]例如，颜色用于引导用户的情绪，并对不同的功能主题、图形和学习内容进行分类和应用能够增加可玩性和乐趣。

七、设计实践

（一）服务应用设计信息架构

整体设计更加简洁、美观，从而极大地减轻了用户的视觉负担，符合当代用户的审美要求。 交互设计在App中的应用分为4个模块，首页模块—多为信息构架，包含内容跟需求；课程模块—主要倾向于用户体验方面；学习模块—直接影响用户体验时的沉浸度；我的模块—则为感知设计，体现用户体验。具体应用表现中主要含的大小功能结合使应用与传达更精准性，文化教育类App的架构如图3。

1.首页部分。随着交互理念的应用和发展，人机交互方式更加丰富。通过界面中功能部分进行合理的设计，通过更加简单的交互方式构建出能与用户直观互动的界面首页，有效提升界面中的人性化操作，实现信息传递的快捷高效。所以，在进行的App界面首页设计时，应当既高效合理又简洁美观，让所有操作都能清晰产生作用进而让他们随时随地地开展自主学习，满足用户的学习需求。

2.课程部分。包含了所有的互动途径的有效方式，用户可以很好地监督应用使用时的学习状态，给学习者所带来的高效学习的作用。在应用不断更新性能的同时，让用户享受到智能应用的智能化、设计性化、现代化服务，提高学习的长效性，能够超出传统教学的学习效果，并给用户带去流畅的操作体验，提高产品课程的转化率。

3.学习部分。随着智能产品的不断发展，语音识别、图像识别及行为控制等多感官的交互方式竞相出现，极大地满足了各类用户特殊情境下的学习需求，提升了学生的学习效率。产品移动端能够通过简化流程，更好地符合用户自主学习的使用习惯，该模块进行分享学习展出成果，用户可以把个人的学习成果反馈到后台，方便进行信息采集与评价，进而提升用户满意度。