基于IOS平台交互绘本的可视化设计

王 乾, 纪馨予

(1. 广东轻工职业技术学院 艺术设计学院, 广州 510300; 2. 广东东软学院 数字媒体与设计学院, 广东 佛山 528225)

0 引 言

随着阅读数字化的发展, 绘本书籍从简单的纸质书电子化开始逐渐融入数字媒体、 动画和音效音乐等多因素, 并成为一个重要的类别, 占有较大的市场。目前国内外学者对儿童绘本的研究内容较为翔实, 研究方向十分广泛, 但也存在一定的理论缺口, 同时在媒介融合的时代背景下, 儿童对绘本阅读体验的要求提升, 儿童绘本与儿童读者的互动和对儿童读者的高效率推送设计研究亟待重视[1-2]。虽然已有相关学者对互动绘本进行了设计探索, 也有学者尝试将 AR(Augmented Reality)、 VR(Virtual Reality)技术介入到儿童绘本的跨媒介叙事设计中[3], 但目前并没有系统的关于儿童绘本的互动叙事设计研究, 也没有形成针对性的儿童绘本对儿童读者的高效率推送设计策略。

通过对中国知网现有文献和绘本相关书籍的梳理, 笔者发现目前学者对于儿童绘本的研究主要集中于其在初等教育中的应用现状、 书籍装帧和角色设计、 出版情况分析等方面[4-9]。

新媒体时代下, 信息知识的传播渠道已经发生了翻天覆地变化, 如何在纸质书籍的基础上有效结合电子绘本的优势, 为儿童读者提供内容丰富、 形式新颖的阅读方式, 是设计者们更加关注的问题。笔者提出的基于IOS平台软件是应用设计领域的专业软件, 具有高度的扩展性和强大的自定义排版功能, 并支持形式活泼的数字页面版式设计, 可在页面布局中增添动画、 音视频及其交互形式。

1 基于IOS平台交互绘本的需求与设计

1.1 交互绘本的需求分析

1.1.1 幼儿园绘本阅读的现状

通过对幼儿园绘本阅读的现状调查分析不仅体现了目前幼儿园绘本教学的状况, 还分析了教师选择绘本的依据, 如图1所示。大多数幼儿园教师在选择图书时注重图书的趣味性和幼儿的特点。

图1 教师选择绘本的标准

从图1可以看出, 我国儿童电子书还存在以下问题： 儿童绘本产品创作内容相对单一； 相比国外,国内的电子绘本的分类还不够丰富； 儿童绘本创作缺乏想象力和创造力； 单纯只借助大量运用动画的感官刺激, 却没有在故事内容传递上下功夫； 在内容或操作上缺乏必要的延伸活动。因此, 还需要结合儿童的阅读特点为依据进行改进。

儿童阅读具有以下3个特点: 第1, 儿童很容易接受新的阅读方式； 第2, 阅读年龄越小, 阅读越娱乐化； 第3, 特别容易对触及感官刺激的动效或音效产生兴趣。所以在设计制作电子绘本时, 就需要根据上述特点开展科学的设计与制作。

1.1.2 基于IOS移动设备的电子绘本对儿童影响

儿童权益组织(CSM: Common Sense Media)调查发现, 儿童非常喜欢使用带有显示屏的移动设备, 如智能手机、 平板电脑和数字屏幕, 使用率呈爆炸式增长。为此, 美国儿科学会(American Academy of Pediatrics)曾对儿童无监控、 无节制的使用智能机、 平板电脑等带屏设备发出警告。该学会称, 父母应该做好监控, 严格将孩子每天的看屏时间限制在1～2 h内, 并建议不让两岁以下儿童接触带屏媒体设备。

对于绘本设计师, 应该具有更多的责任和义务保护孩子们的身心健康。在满足儿童操作需求和使用习惯的基础上, 设计开发更多满足儿童需求的产品和更具有教育意义的绘本作品, 逐渐培养儿童阅读者能形成正确的价值观, 不能为了获取更大的商业利益, 使设计的作品误导儿童, 养成不良的习惯或行为。在未来的移动互联网中, 儿童将成为越来越重要的用户群体。

1.1.3 为儿童而设计

1) 理解儿童。首先要接触儿童, 了解并掌握他们的行为特征, 能熟悉他们行为的真实目的。儿童的天性使然, 对未知世界始终充满强烈的好奇心, 他们大多数总是活泼好动并且带有强烈的探索和求知欲。当然他们也极易犯错, 这都是不断尝试、 探索新奇世界的结果, 所以更需要家人的关爱, 同时他们还期望能时时刻刻都引起他人的关注, 也很容易受外界环境的影响。

2) 区分年龄段。不同年龄段的儿童由于发育阶段不同, 生理和心理需求也不同。2～5岁的儿童更多的是关注基础的图像、 图形和颜色, 他们更倾向对简单声音或动作的简单模仿, 在语言和识字能力上处于发展过程。5岁～8岁的儿童已经能理解相对简单的动机, 并开始具有一定的阅读能力和自己的“小主见”, 同时具有了一定的社交网络。8～12岁的儿童记忆能力在不断提升, 不仅能较好地理解故事完整情节, 还具有一定的逻辑思维能力, 特别乐于解决遇到的问题, 逐渐形成了自我意识。不同年龄段的儿童, 观看、 阅读的内容是有很大差异的, 因各自年龄段上的兴趣点各不相同, 例如低龄段的幼儿适合简单动态的儿歌系列, 各年龄段的这种差异性十分突出。

3) 视觉发育。儿童处于身体各部分快速发育成长阶段, 身体功能不断完善中, 如果不节制的长时间盯着屏幕, 这不仅会导致视力下降, 还会严重损害眼睛的视网膜, 造成不可逆转的后果。在交互绘本中增加实时的提醒休息功能, 能很好地保护儿童视力, 免受长时间的眼睛疲劳, 还可以提醒家长做好监控。

4) 获得家长信任。 对所有的儿童产品, 虽然儿童是使用者, 但父母是直接的购买者和最终的决策者, 所以儿童的使用必须得到父母的同意。因此, 在设计之初, 互动绘本产品不仅要满足孩子的需求, 更要满足家长的需求, 特别是在内容和操作上的要求。

1.2 交互绘本的总体设计和模块功能设计

基于IOS(Input Output System)系统的交互绘本的整体结构框架可分成两个主要的客户端, 即家长端和儿童端, 其中又分五大模块。具体如图2所示。

图2 电子绘本整体结构框架图

1.2.1 阅读模块

阅读模块是整个交互绘本系统中最基本的模块, 也是最主要的模块, 在进行交互绘本阅读时首先需要考虑儿童的阅读习惯。对交互阅读的各项设置需要更符合儿童思维模式, 行为习惯, 例如在阅读时的翻页或画面的播放速度的快慢设置, 阅读文本的字体大小的设置, 出现播放音乐音效时选择尽可能舒缓不激烈的音乐, 同时对各项设置都可以根据家长权限进行功能调节。图3为交互绘本阅读模块功能示意图。

图3 阅读模块功能示意图

1.2.2 用户管理模块

根据不同用户的需求, 设计了不同的权限区分父母和孩子。如可通过家长的账户对儿童账户进行添加、 删除、 设定或监控儿童的使用情况。用户管理模块数据流程如图4所示。

图4 用户管理模块数据流程图

1.2.3 资源库模块

资源库模块是学习型模块和智能推送模块的基础, 是系统中最重要的模块之一。系统使用的SQLite轻量级数据库, 用C语言实现。在IOS系统中若需要使用SQLite则首先需要在头文件中引入sqlite3.h文件并在Xcode的自带框架中添加新的所需要的库。系统数据库包括以下4种信息属性表： 资源信息表, 学习者信息表, 用户信息表和用户资源信息。

数据库表设计完成后, 需要描述数据库中实体之间的关系, 即E-R(Entity Relation Diagram)图, 设计该系统的E-R图如图5所示。

图5 数据库实体—联系模型图

1.2.4 智能推送模块

该模块功能划分如图6所示。

图6 智能推送模块功能划分图

1.3 交互程序设计案例

互动绘本创作之初首先要确定故事主题, 在对搜集的素材进行详细的分析整理, 然后再根据故事内容进行画面分镜头的设计, 如图7所示。

图7 绘本分镜头设计

根据分镜头进行单页绘画设计和文字编辑, 如图8所示。

图8 绘画设计和文字编辑

当故事内容与图画绘制完成后, 对每个图文重组, 图文配置、 动画效果、 互动程序设计是互动绘本设计的最终整合阶段, 更是最关键所在。当然这其中也会涉及到迭代的问题。具体互动绘本设计流程如图9所示。

图9 交互绘本设计流程

交互绘本程序设计(部分)：

∥设置界面变量：

importflash.geom.Point；

importflash.display.BitmapData； importflash.geom.

Rectangle； importflash.geom.Matrix；

importflash.geom.ColorTransform；……

var_title=“TurnLeftTurnRight”； varfullscreen=“true”；

fscommand(“fullscreen”,fullscreen)； fscommand

(“setTitle”,_title)； _quality=“BEST”；

……

∥翻页设置：

vardy_start:Boolean=true； vardy_end:Boolean=true； varb_width:Number=800； vark_height:Number=500； varb_depth:

Number=2

varleft_depth_page=newArray()； varright_depth_page=newArray()； varyy_x:Number=5varyy_y:Number=8

varwt_map:Boolean=true； varfy_speed:Number=0.5； varfy_check:Number=0.2； varbtn_width=50varbtn_height=50

……

functioninleftDepthPage(){

for(vari=0；i

left_depth_page[i]=newBitmapData(book_depth,book_height,true,0)； book.gotoAndStop(i+1)；

left_depth_page[i].draw(book)；}}

functioninrightDepthPage(){

2 基于IOS平台的交互绘本的实现

2.1 阅读模块的实现

阅读模块分为文本显示、 工具栏和底部设置部分。文本显示部分主要功能为阅读学习内容。阅读功能核心代码如下：

NSString*filePath=[self filePathForFileName:fileName]；

NSString* text=[self filePathForFileName:textName]；

NSString*textPath=|NSString stringWithFormat:@“%@.txt”,text]；

if(filePath=NULL){

NSLog(@“%@ could not be opened/found”,fileName)；

retum；

∥获得文件目录

NSDictionary* docDict=[NSDictionary dictionaryWithContentsOfFile:filePath]；

if(docDict=NULL){

NSLog(@“%@ contents cannot be processed”, filePath)；

returm；

1

∥控制页码开关

docNumValue=[docDict objectForKey:ASD_SHOW_PAGE_NUMBER]；

showPageNumbers =(docNumValue&&[docNumValue intValue]!=0)；

∥目录的页码数

if(self.textName){

[[docDict objectForKey:ASD_STRING_DICT]setObject:[NSString

stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:self.textName

ofType:@“txt”]encoding:NSUTF8StringEncoding error:nil]forKey:ASD_STRING]；

-

∥设置文本编码

2.2 IOS信息推送服务

苹果公司提供的消息服务简称为APNs(Apple Push Notification Service)。当服务器想要向应用程序发送信息时, 它必须通过APNs传输, 如图10所示。信息推送过程如图11所示。

图10 IOS推送工作机制示意图

图11 信息推送处理流程图

2.3 发 布

通过Application Loader上传到distribution IPA。从Xcode中访问Application Loader, 再从Xcode中提交二进制文件即可。有关提交机制的更多信息, 可以参照IOS Development Guide。

2.4 系统性能测试

移动终端的阅读部分体现了交互绘本在IOS 系统上的主要功能。实现系统可从可用性、 稳定性和用户体验3个方面进行测试。

1) 可用性测试。其主要是对有代表性的用户进行跟踪和观察。在完成产品的典型任务后, 可用性问题就可以被定义和解决。用户的基本需求可以通过检测实现系统是否得到满足, 可以从下载互动绘本、 阅读绘本、 删除绘本3个方面进行验证。

2) 稳定性测试。从交互操作的稳定性、 极限操作的稳定性和IOS应用切换的稳定性3个方面验证了系统的稳定性。

3) 用户体验测试。除了用户亲自体验阅读, 获得很好的体验外, 最主要的是家长能对系统和整体的交互绘本感到满意, 因为儿童在使用之初, 是缺乏挑选和评判的, 更多的是家长参与体验。此外, IOS系统本身具有非常好的视图表示。它可以显示并提供各种完整稳定的视图操作。基于IOS系统本身的优势, IOS系统提供的交互可以更好地改善系统的用户体验。综上所述, 笔者所研究的基于IOS系统的交互式绘本系统在可用性、 稳定性和用户体验方面都具有良好的性能。

3 结 语

基于IOS平台的交互绘本系统, 实现了电子绘本的制作、 发布和发行等功能, 该系统包括电子绘本制作PC端, 有3部分组成的电子绘本存储管理服务器和iPad平板电脑下载阅读端。功能模块清晰, 符合当前主流市场数字图书发行阅读移动终端平台, 便于推广。交互绘本的出现, 是传统教育技术同当代科技相结合的产物, 在未来的儿童学习中扮演越来越重要的角色。因此, 研究适合儿童使用的交互绘本对今后交互绘本的发展具有深远意义。