文化教育类移动应用的交互体验要素研究＊

施妍 SHI Yan 吴胜宇 WU Shengyu

杭州电子科技大学，杭州 310018（Hangzhou Dianzi University，310018 Hangzhou）

文化教育类移动应用的交互体验要素研究＊

施妍 SHI Yan 吴胜宇 WU Shengyu

杭州电子科技大学，杭州 310018（Hangzhou Dianzi University，310018 Hangzhou）

在互联网时代，运用数字化方法构建儿童文化课堂成为国家重视的议题。以原创移动应用《造物弄影》为例，梳理针对小学儿童文化教育类应用的交互体验设计方法。以“体验先行、鉴赏其次”的概念，依据非物质文化遗产文化的特征和儿童的认知特征，从用户体验要素设计的5个层面即战略层、范围层、结构层、框架层和表现层，来进行非物质文化遗产文化视角下基于儿童认知的移动应用的设计体验要素研究。

非物质文化遗产；儿童认知；用户体验要素；移动应用

一、引言

在互联网时代，运用数字化技术合理、创新地保护文化遗产，成为传统文化研究的重要议题[1]。由国务院、文化部、工信部所发布的相关文件，强调要遵循学生认知规律，将文化融入儿童教学，以幼儿、小学、中学教材为重点，构建中华文化课程和教材体系。同时加大文化宣传力度，增强国家认同、民族认同、文化认同[2]。但是，现阶段的移动类数字文化产品，大多面向成年人进行设计，鲜有针对儿童文化教育的设计和研究[3][4]。

研究以“体验先行、鉴赏其次”为基本理念，基于儿童认知的特殊性，结合非物质文化遗产文化的特性，从用户体验设计要素的五大层面切入，进行非物质文化遗产文化视角下基于儿童认知的移动应用的设计体验要素研究。

研究以皮影艺术动态制作过程为主题的原创案例《造物弄影》为载体，可视化地对设计研究进行重构。中国传统文化皮影戏在2011年被联合国教科文组织列入“人类非物质文化遗产代表作名录”。此作品参展2016年米兰设计周，获得“米兰优秀奖”；获得全国数字编辑大赛一等奖、两岸电子书大赛二等奖；获得浙江省多媒体大赛课件组二等奖，作为数字文化教材得到专家认可。此作品已经在苹果App Store上线，可供下载体验。

二、研究背景

1．移动设备在儿童领域的使用现状

移动设备的交互方式自然，承载的表现形式多样，因而受到儿童青睐[5][6]。调查显示，国内大城市的儿童拥有iPad的比例高达72.69%，其中78.16%的儿童每天使用iPad的时间达1.5小时[7]。

儿童对iPad的拥有率增加，使得基于iPad的儿童教育事业飞速发展；iPad等移动设备作为电子书本的形式进入儿童的生活[8][9]。在2013年，中国儿童产业研究中心的调研报告表明，儿童教育类App市场已经形成[10]。2014 年的调查显示，App Store中热门Top200的教育类应用中，面向12岁以下儿童的占60%[11]。在2016年，研究报告显示100个移动应用中教育类应用达到53个[12]。在Apple App Store教育类应用中，针对儿童的移动应用以学科学习类为主，集中在科学、数学、语言、音乐和美术等类别，鲜有文化相关的应用；而传统文化主题下的应用又多面向成人。

2．儿童的认知特征

儿童心理学家让·皮亚杰（Jean Piaget，1896─1980）将儿童的认知发展过程分为4个阶段：0～2岁的感知运动阶段；2～7岁的前运算阶段；7～12岁的具体运算阶段；12～15岁的形式运算阶段[13]。

我国的中华文化课程和教材体系以幼儿、小学、中学教材为主，在教育部“十二五”阶段传统文化课题研发的实验教材中，非物质文化遗产类的课程主要设于小学的文化基础教育阶段[14]。此阶段儿童处于7～12岁的具体运算阶段，基本认知能力有很大提升，思维有一定的抽象能力，但抽象的思维依赖于具体事物的支持[13]。这种区别于成年人的理解能力表明其产品也应有所差异，尤其是处理儿童在理解事物方面的产品[15]。

所以在设计交互应用时，需要注意在信息的认知内化过程中，利用无意识设计和情境认知理论，来降低认知成本，增加识别效率。

3．非遗文化的活态特性及数字化

非物质文化遗产是特殊的人类遗产，与物质文化遗产不同，它是指不能用文字记载、不能外化内涵的文化类型，是一种“非物质”的，以人的活动为载体的“活态”艺术[16]。传承方式亦是“活态遗留”，在人类的认知与活动中不断更

迭[17]。

这些特性，决定了非物质文化遗产文化载体和形式的局限性。一方面，它使文化成品脆弱不稳定，易萎缩流失。另一方面，它在传播上形成时间与空间的壁垒，难以大范围传播。例如，皮影艺术是重要的世界非物质文化遗产，本质是动静相宜的艺术，被誉为“电影的先祖”[18]。然而老艺人后继无人，原有的表演形式不适应当下的娱乐方式[19]。博物馆、书籍等静态化的传播途径，又难以表现其核心内涵[20]。

随着多媒体技术的发展，非物质文化遗产迎来能保留其“活态”特性的传播新途径——移动端的数字化应用。在该领域，北京故宫博物院的文化类App取得了巨大的成功，其他博物馆也随之推出高质量应用，如上海博物馆的《纸》、《南土之金》等应用。此外，设计工作室、高校也开发了相关的文化类移动应用，如《榫卯》、《指触魔卡》等产品。

三、用户体验的要素分析

移动应用是“自助式”的产品，用户依靠物理世界已有的习惯和经验操作虚拟应用。所以，在设计过程中，设计者对目标用户的潜在意识和行为的思考就变得尤为重要。为系统化、有意识地完成这一复杂的体验过程，《用户体验的要素：以用户为中心的Web设计》一书将用户体验解构为：战略层、范围层、结构层、框架层与表现层。这5个层面自下而上呈现相互递进的关系，以基层的根本目标为指导和基础，有序地使产品由抽象走向具象[21]。五大设计要素为用户体验提供了基础构架，在此基础上，需要对每一层面解决具体的问题；并以目标用户体验为中心，将用户列入每一层面设计的考虑范围，具体化每个要素的设计过程。

其中，战略层和范围层是目标与内容，需要考虑产品中需要哪些信息，什么是有价值的信息，什么又是对用户有益的信息，可从主题和用户的角度对具体信息加以判断。结构层是信息的架构，在上一层的基础上去考虑怎样的逻辑更适合该信息的展示，怎样的架构可使信息更易被用户理解。框架层是界面、导航和信息设计，用户在这一层面与功能直接产生互动，网页设计需要在此考虑人们如何完成这个过程，而我们的产品则是考虑人们如何理解这一信息，以此通过交互过程来辅助人们对信息的理解过程。表现层是视觉设计，视觉是用户最直观可见的部分，是内容传达给用户的第一印象。这一层面的设计，一方面是装饰元素的表达要符合内容的特质，另一方面信息本身可以作为视觉元素进行表达。此外，每一层面的具体化操作并非单向独立的，视觉、内容、结构等元素，也可多层作业，通过五大层面的递进与融合来完善整体设计，打造良好的用户体验（见图1）。

图 1 用户体验的要素及具体设计方法①

四、设计方法

对于儿童文化教育类移动应用，目标是使用户更自然、愉悦地内化相关信息。用户体验要素的每一层面的表现，都将依据目标用户（7～12岁儿童）的认知特征和内容（非物质文化遗产）特征，来确立具体的设计方法，达到战略和范围层，即适应用户认知，体现文化内涵；达到结构和框架层，即基于内容的结构，助于内容理解的交互；达到表现层，即符合主题气质，显现非物质文化遗产的内涵。

1．战略层和范围层设计——确立符合文化内涵和用户特征的内容需求

（1）非物质文化遗产特征。文化遗产有物质与非物质之分，两者因价值诉求的差异衍生出截然不同的传播方式。物质文化遗产的内涵通过人对“物”的发掘研究传达给受众；非物质文化遗产的内涵通过人的活动展现出来，直接传达给受众（见图2）[16]。

图 2 物质文化遗产、非物质文化遗产传播方式的区别①

这种差异，直观地反映了非物质文化遗产文化传承的特质和要求，是活态、个性、真实的，且这种真实个性的活动本身（如制作工艺、表演艺术），恰恰是最为生动形象也是最能激起读者兴趣的内容。这意味着在内容选择上，要以其原始内容和活动本身为主，体现操作、表演等形象具体的过程本身，避免直接用描述性信息作为内容进行表达，以体现其“活”的基本内涵。

其内容的选择宜落到实处，选取真实的活动本身，避免概括性描述。这就要求内容的体量宜“小而精”而非“广而泛”。《造物弄影》摒弃了表演、唱腔、历史等内容，专注“皮影制作流程”这一知识点。对制作过程深入发掘，使用户得到最接近操作本身又鲜为人知的鲜活信息。

（2）用户特征。目标用户为7～12岁“具体运算阶段”的儿童，有基本的逻辑思维能力，但思维离不开具体事物的支持。所以内容或表现形式需基于具体事物，用形象化的方式转述内容。《造物弄影》在介绍缀结环节的使用工具时，没有直接摆出工具，而是引入工具盒的概念，用真实、具体的形象辅助表达。同时，儿童往右拖动划开盖盒，这是模拟真实的行为，以此勾起用户的好奇心和求知欲（见图3）。

图 3 模拟真实手势操作的工具箱②

2．结构层和架构层设计——使内容更易被理解的逻辑结构和交互体验

（1）结构设计。针对儿童的特性，结构采用故事化的沉浸式整体逻辑设计。情境认知理论指出知识是情境化的，不同于有意识的推理和思考的认知，强调的是一种对于文化和物理背景的认

知[22]。

成人的思维方式多习惯于书本和大多数App目录常用的指向型结构，即以章节为单位，逻辑清晰抽象，概括性强。但对于儿童而言，这样的逻辑反而打碎内容之间具象的关联性，使之变得琢磨不清、难以理解。日常书本中采用章节形式一方面是为了清晰的框架逻辑，另一方面则是由于书本这种纸质载体的形式局限。

在移动应用的设计中，需要突破书本的章节式逻辑，打造一个整体的故事空间，将内容与故事串联，以此构建沉浸式整体逻辑。

《造物弄影》采用这种故事化结构，将“皮影制作流程”定义为一个故事单元。其中不同步骤按序进行，同一步骤中通过“文图介绍/视频演示-模拟操作-相关信息”这一流程来介绍，还原一个工坊式“看-试-问”的形象体验。这不仅可以增强用户的体验感与参与感，而且在逻辑上的形象化，也使儿童对信息的理解更为容易（见图4）。

图 4 《造物弄影》结构框架图①

（2）交互设计——用行为进行阅读。用户与应用的交互，可分为“与产品的交互”和“与内容的交互”两个方面。用户与产品的交互关注产品的使用过程，强调使用过程的直观性、无障碍性，普适性；与内容的交互关注内容的阅读过程，强调内容吸收的有效性、轻松性，因内容不同而具有的独特性。后者实则为一种转变“文字阅读”为“行为阅读”的用户认知方式，这种“行为阅读”是信息经由“无意识设计”而表现出的定制化交互方式。

通过“信息-行为”的对应设计，使儿童在与信息的实践和交互过程中，通过动作无意识地理清逻辑关系，不仅记忆深刻而且脑力负担小（见图5）。例如，《造物弄影》中对影偶“样谱”进行描述时，设计者将“样谱”与“角色特点”进行结合，通过翻阅“角色特点”的行为过程自然地理解“样谱”的含义及作用（见图6）。

图 5 文字阅读与行为阅读之比较①

图 6 “样谱”的行为阅读②

3.视觉层设计——视觉基调的确立和视觉内容的表现

视觉风格首先需要符合内容主题的意向特征和整体基调，使内容和形式具有共同的文化特征，形成相互依赖的文化系统。

以《造物弄影》为例，作品基调定为古典与传统，以古铜色为主色，朱红色和姜黄色为辅助色。其界面背景采用粗糙的素纸作为纹理，图标采用窗花类古典纹样元素进行设计，字体以方正清刻本悦宋简体为主，体现古典精巧的气质。除了细小的装饰型元素外，应用中涉及的实物造型，如书籍、工具箱、刮皮架、熨斗等，风格本身与皮影的基调相去甚远。为统一风格，设计者对这些物品均做了原创绘制，使其在色调、材质和效果处理上符合整体基调。

五、总结

随着多媒体技术的不断发展和用户体验的逐步优化，移动应用仅仅拥有友好简洁的界面和交互已经难以满足用户的需求。目标用户的认知内容更需有针对性，认知过程更需轻松愉悦。对于认知水平尚不成熟的小学生儿童用户，《造物弄影》从设计的角度重点考虑了内容的选择和内容的无意识传达，采用“体验先行、鉴赏其次”的设计思路，从内容、框架、交互、视觉几个层面分别提出具体的设计方法，旨在使内容的吸收过程更自然和高效，把主动的“学”与“习”转变为自然的感知学习。

从近年来内容为王的发展趋势来看，设计者在设计时，只有充分考虑内容之于用户的实际情况，以及用户认知内容的具体规律和吸收内容的实际效果，才能在文化产品的开发中真正地体现文化价值，发挥其实际作用。

注释

① 图1、图2、图4、图5来源： 作者自绘.

② 图3、图6来源：《造物弄影》App截图.

参考文献

[1]方昊，刘燕.文化产业视野下的非物质文化遗产数字化保护与传承策略[J].山东社会科学，2015（2）：83-87.

[2]新华社.中共中央办公厅、国务院办公厅印发《关于实施中华优秀传统文化传承发展工程的意见》[EB/ OL].（2017-01-25）[2017-04-15].http://www.gov.cn/ zhengce/2017-01/25/content_5163472.htm.

[3]张煜麟.儿童读物数字化出版的现状与未来趋势[J].出版发行研究，2013（10）：14-18.

[4]谈炜萍.大数据时代少儿类APP的发展现状与运营模式研究：以二十一世纪出版社的爱童书APP为例[J].出版广角，2017（3）：14-17.

[5]徐力军.数字媒体受众的阅读体验与审美体验[J].出版广角，2015（15）：104-105.

[6]李晓珊.儿童移动应用软件的用户体验设计[J].包装工程，2012（10）：81-84.

[7]戴文静.学前儿童使用iPad情况的调查研究：以上海地区为例[D].上海：上海师范大学，2013：1.

[8]姜洪伟，钱震敏，王娴婷.基于PAD和纸书的幼儿阅读能力比较研究[J].中国出版，2016（13）：55-59.

[9]马玉慧，赵乐，李南南，王硕烁.新型移动学习资源：教育APP发展模式探究[J].中国电化教育，2016（4）：64-70.

[10]中商情报网.2012-2013年中国城市儿童生活形态与消费状况研究报告[EB/OL].（2015-04-03）[2017-04-15].http://www.doc88.com/p-6803240832195.html.

[11]李文琦，肖天悦.中国苹果商店儿童教育应用统计分析报告：下[EB/OL].（2014-02-07）[2017-04-15].http://learning.sohu.com/20140207/n394573713.shtml.

[12]易观.7月教育类AppTOP100榜单：儿童和中小学类教育App强势领先[EB/OL].（2016-10-25）[2017-04-15].http://www.yixieshi.com/61246.html.

[13]BYRNES J P.Piaget's theory[A]//HAITH M M，BENSON J B.Encyclopedia of Infant and Early Childhood Development：2.New York：Elsevier，2008：543-552.

[14]新华社.2017年国务院重大国策：全面复兴传统文化[EB/OL].（2017-02-04）[2017-04-15].http:// cbgc.scol.com.cn/rdxw/201702/t20170204_87672.html.

[15]游兰香.皮亚杰心理发展观的教育意义探析[J].福建论坛：人文社会科学版，2007（s1）：172-173.

[16]王宁.非物质遗产的界定及其价值[J].学术界，2003（4）：51-54.

[17]宋俊华.非物质文化遗产特征刍议[J].江西社会科学，2006（1）：33-37.

[18]薛正昌.皮影戏“非遗”传承者：张进绪与他的皮影家族[J].宁夏社会科学，2010（6）：127-131.

[19]徐子涵.艺术传播学视域下中国皮影艺术的传承与发展路径研究[J].东南大学学报：哲学社会科学版，2015（6）：127-134，148.

[20]钟贤权.当代皮影艺术的生存困境与现代创新[J].中华文化论坛，2013（5）：131-135.

[21]GARRETT J J.用户体验的要素：以用户为中心的Web设计[M].范晓燕，译.北京：机械工业出版社，2007：15-153.

[22]J•莱夫，E·温格.情景学习：合法的边缘性参与[M].王文静，译.上海：华东师范大学出版社，2004：3-8.

（责任编辑 孙玉萍）

On Interactive Experiencing Elements of Cultural Education Apps

In the Internet era, to transfer children’s cultural classroom to digital platform has become a nationally focused subject.With the case study of original mobile app named Zaowunongying, the paper sorts out methods for designing interactive experience on apps for primary school children cultural education.Under the conception of “experience fi rst, appreciation next”, the paper based on the children cognition characteristics probes into the mobile app user experience from perspective of intangible cultural heritage features.The user experience element design includes fi ve levels which are strategic level, extension level, structure level, framework level and presentation level.

intangible cultural heritage；children cognition；user experience elements；mobile application

J0-05

A

10.3963/j.issn.2095-0705.2017.03.011（0059-06）

2017-04-19

2016年度教育部人文社会科学研究青年基金项目（16YJC760047）；2017年度浙江省教学科学规划（高校）研究课题（2017SCG002）；2016年度国家级大学生创新创业训练计划项目（201610336020）；2014年度浙江省自然科学基金青年科学基金项目（LQ14E050010）。

施妍，博士，杭州电子科技大学数字媒体与艺术设计学院讲师；吴胜宇，杭州电子科技大学数字媒体与艺术设计学院本科生。