“ 经典阅读” 网络平台实现了“ 读、感、审、查” 的一站式服务:“ 读” — — 学生可以在线获取图书电子全文或者馆藏资源; “ 感” — — 学生可在线提交读书报告, 抒写阅读感悟; “ 审” — — 教师在线“ 评审” 学生提交的读书报告, 给出评语以及成绩; “ 查” — — 学生在线查询评审进度以及评审结果。“ 读” 与“ 阅” 是学生使用频率最高、最贴近学生的两个功能, 但在便捷性、交互性以及可视化等方面仍然存在不足, 具体表现为:

(1) 内容管理不灵活。图书的馆藏信息、全文链接作为图书简介内容的一部分, 更新不便, 而且图书总体信息展示布局受限。

(2) 资源聚合程度低。目前页均显示图书数量仅为5册, 单位信息的信息展示粒度偏低, 导致学生无法在短时间对“ 经典阅读” 推荐书目有全面掌握。

(3) 用户浏览体验差。图书信息、读书报告都只是内容的简单堆砌, 而无条理、美感可言, 如图1所示:

图1

	Figure Option ViewDownloadNew Window
	图1 旧版图书信息与读书报告展示页面

(4) “ 学分” 驱动多于“ 平台” 驱动。学生提交读书报告的动力多来自于创新学分, 而非平台的吸引力, “ 经典阅读” 网络平台的载体作用多于平台效应, 平台自身魅力不足以留住学生。

上述问题都极大地制约着“ 经典阅读” 网络平台充分发挥其平台效应, 使“ 经典阅读” 教学过程仍然是点对点的阅读交流而缺少学生与学生之间的碰撞, 致使教学活动呆板甚至流于形式, 教学效果差强人意。因此通过“ 经典阅读” 网络平台资源揭示与信息展示的优化, 可以充分发挥平台在激发学生的阅读积极性和主动性方面的作用, 不仅是平台自身丰富和发展的需求, 更是教师为改善教学质量的紧迫需求之所在。

“ 信息可视化” 最早出现在由Robertson等^[4]于1989年发表的文章中。根据维基百科的定义, 信息可视化(Information Visualization)是一个跨学科领域, 旨在研究大规模非数值型信息资源的视觉呈现, 如软件系统之中众多的文件或者程序代码, 以及利用图形图像方面的技术与方法, 帮助人们理解和分析数据。信息可视化技术可以理解成是将数据信息转化成视觉形式的过程, 实质是将文字、数据转换成图、表强化信息展示信息效果的过程^[5]。

根据Shneiderman^[6]的分类, 信息可视化的数据可分为: 一维数据、二维数据、三维数据、多维数据、时代数据、层次数据和网络数据。本文的研究对象是多维数据, 针对多维数据的可视化技术, 有基于几何的可视化方式^{[7, 8, 9, 10]}、基于图标的可视化方式以及基于动画的多维可视化方式^{[13, 14, 15, 16, 17]}, 三种方式各有优缺点, 基于动画的多维可视化技术具有较强的直观性, 动画能够更好地吸引用户的注意力, 而且更加紧凑动态的展示方式能够极大地提升单位面积的信息展示粒度, 提升用户单位时间获取的信息量; 不仅如此, 动画还能够提升用户的兴趣度, 让用户更享受浏览的过程^[18]。

由于“ 经典阅读” 图书总数较大, 为了便于读者在第一时间对所有图书有总体全面了解, 因此设计提供在一个页面对10大类图书进行总览式显示, 如图2所示。因其样式看起来像网格或棋盘, 称为棋盘式展示。实现方案是从各类目所有的图书中选出最具代表性的5本图书推荐给读者, “ 点击查看更多” 按钮用于进入特定类目的所有图书。

图2

	Figure Option ViewDownloadNew Window
	图2 棋盘式总览页面

具体实现过程依赖于Drupal^[21]的区块与模块, 10大类目概览由10个结构相同的区块构成。在Views^[22]的配置界面, 将同一效果应用于10个区块, “ Style” 均选择“ Grid” , 如图3所示。“ Items to display” 的值设置为5, 表示各类目推荐的图书为5本。若“ Use pager” 选择为“ 是” , 则在类目下出现页码, 通过点击页码或者“ 上/下一页” 、可实现所有书目的预览, 这里为更好地引导读者进入类目下所有图书, 提高网站趣味性和简洁性, “ Use pager” 的值设为“ 否” 。“ Block settings” 中“ Admin” 的“ Fields” 用于设置展示项, 这里选择“ 图书图片” 和“ 书名” 作为展示项, 并将它们都指向相应的图书链接。“ Sort criteria” 用于选择排序方式, 这里按照图书统计数据进行排序, 从高到低将访问量最多的书目推荐入棋盘。“ Clone” 功能非常简便实用, 用于页面克隆, 若想创建两个内容或结构相同的页面, 可以使用此功能快速创建, “ Clone display” 用于对特定区块的克隆。

图3

	Figure Option ViewDownloadNew Window
	图3 “ 经典书目” 栏目总览页面Views的设置

以中国现当代文学为例, 类目下所有图书的规则瀑布流效果如图4所示(由于书目过多, 这里只截取部分页面效果)。10大类目中, 含书目最多的类目为中国现当代文学, 共78本, 每行5本图书(最后一行为3本), 共16行; 含书目最少的类目下有图书30余本(共7行)。从最终可视化效果可以看到, 瀑布流使得10大类目下的所有图书展示清晰明了, 省去了用户翻页和页面刷新的时间。

瀑布流是通过编辑相应页面的Views实现的。将“ Basic setting” 中的“ Style” 选择为“ Grid” , 配置“ Grid” 时将“ Number of columns” 设为5, 即每行展示5本图书。由于不同类目下图书数量不同, 若要显示出相应类目下所有的图书, 将“ Items per page” 设为“ 不限” 。“ Sort criteria” 与热门图书推荐的排序方式不同, 这里将书目node按照node的ID排序, 与热门推荐区别开, 使得所有的书目都有被用户浏览的机会。

图4

	Figure Option ViewDownloadNew Window
	图4 中国现当代文学所有图书瀑布流效果

热门书目筛选出浏览次数TOP N的图书, 通过滑动图片流进行展示。用户通过左右滑动鼠标即可浏览热门图书书封, 点击书封可进入图书详情页面或提交读书报告, 如图5所示:

图5

	Figure Option ViewDownloadNew Window
	图5 热门图书显示效果

滑动图片流的实现流程概括起来包括三个步骤: 安装Drupal模块及其依赖模块, 启用模块, 配置模块参数。步骤详细阐释如下:

(1) 安装Views Slideshow ImageFlow以及Views Slideshow模块。Views Slideshow包含三种图片流展示方式, SingleFrame、ThumbnailHover和ImageFlow。Views Slideshow ImageFlow主要用于ImageFlow效果的加强。

(2) 启用上述两个模块, 保存设置使启用有效。

(3) 配置“ 悦读书院” 首页Views的滑动图片流模块参数。配置选项如图6所示, 主要的配置项是最后三项。Image focus multiplier(中央图片放大倍数)用于设置滑动到中间的图片放大为原图片的多少倍, 由于所有书封都是120* 160像素的合适大小, 过度放大会造成图片失真, 所以这里设置为1.0, 即与原图片大小相同。Scrollbar width multiplier(滚动条宽度)设置为0.6, 即滚动条宽度为整个滑动图片流宽度的三分之二。Image focus max (展示在中央图片两侧的图片张数)设置为4, 即中央图片两侧各有4张图片, 通过滑动鼠标, 可以看到所有的20本推荐书目。

图6

	Figure Option ViewDownloadNew Window
	图6 Views Slideshow ImageFlow效果的配置

图书信息的数据结构从根本上决定着图书信息管理的灵活性和便捷性。优化前图书信息是以类别为根目录的树状结构, 如图7所示, 类别作为总导航, 图书作为二级节点, 包括书封、作者、图书简介三项内容, 图书简介正文部分包含馆藏链接和全文链接。其不便之一在于图书的类别无法修改, 而经典书目类别却会随着书目的增减而相应增减或修改; 不便之二在于当链接IP等发生变化时, 图书的馆藏与全文信息无法批量修改, 需要逐条修改。为解决这一问题, 本文设计了如图8所示的碎片化数据结构, 图书节点之间相互独立(而非兄弟节点), 图书的类别作为图书属性, 并且馆藏链接、全文链接成为独立的字段。

图7

	Figure Option ViewDownloadNew Window
	图7 原图书信息数据结构(注: 图书简介包含馆藏链接和全文链接)

图8

	Figure Option ViewDownloadNew Window
	图8 碎片化数据结构

信息碎片化处理调用了Drupal的CKEditor、CCK、Taxnomy以及import模块。实现过程需要新建Book内容类型, 利用CKEditor和CCK为该内容类型添加书封、作者、简介、类别、馆藏链接和全文链接字段。其中, 类别字段提供下拉菜单选项, 需要利用Taxnomy添加下拉选项。import模块实现原有书目、读书报告的导出和导入。

图书信息布局直接影响信息提示的直观度。如图9(a)所示, 仅内容的堆叠既不美观, 而且空间利用率低, 更不利于学生在第一时间看到重要信息; 而图9(b)将重要内容单独在右侧进行展示, 使学生在打开网页第一屏就可以看到所有的信息。

图9

	Figure Option ViewDownloadNew Window
	图9 图书信息版式对比

本文对Drupal的node.tpl.PHP进行模板覆写, Book类型修改后的样式生成一个新文件, 命名方式为node-XXX.tpl.PHP(XXX为该类书籍名称), 实现Book类型内容的定制化呈现, 修改前的书目页面如图10(a)所示, 修改后的书目页面如图10(b)所示。

图10

	Figure Option ViewDownloadNew Window
	图10 图书信息改版前后对比

核心代码如下:

< div class="content">

< br/>

< font size="4"> < B> < ?PHP print $node-> field_now_story
[0]['value'] ?> < /B> < /font> < B> < font size="2"> < ?PHP print
$node-> field_now_author
[0]['value'] ?> < /B> < /font>

< table>

< td width=300>

< ?PHP print theme_imagefield_image($node-> field_

now_image[0]) ?> < br/> < /td>

< td width=1 style="background-color: #B22222"> < /td>

< td>

< ?PHP if($node-> field_collection[0]['display_url']!="http://
10.106.0.79/HappyReading/") { ?>

//如果有馆藏资源链接则显示, 否则不显示

< img src="< ?PHP print $GLOBALS['base_url'].'/misc/search.
png' ?> " alt="alttext" title="" width="25" height="25" />

< a href="< ?PHP echo $node-> field_collection[0]
['display_url'] ?> "> 馆藏资源< /a>

< ?PHP }

if($node-> field_fulltext[0]['display_url']!="
http://10.106.0.79/HappyReading/") { ?>

//如果有查看全文链接则显示, 否则不显示

< br/> < img src="< ?PHP print $GLOBALS['base_url'] .
'/misc/passage.png' ?> " alt="alttext" title="" width="25"
height="25" />

< a href="< ?PHP echo $node-> field_fulltext[0]['display_url'] ?> ">
查看全文< /a>

< ?PHP } ?> < br/>

< div class="links"> < img src="< ?PHP print $GLOBALS
['base_url'] . '/misc/submit.png' ?> " alt="alttext" title=""
width="25" height="25" />

< ?PHP if ($links): ?> < ?PHP print $links; ?> < /div> < ?PHP
endif; ?> < br/>

//$links变量是提交读书报告和投票功能

< /table>

< br/>

< font size="2"> < B> 摘要< /B> < /font> < br/>

< ?PHP print $node-> field_now_content[0]['value'] ?> < br/>

< font size="2"> < B> 读书报告< /B> < /font> < br/>

< /div>

如图11(a)所示, 读书报告的列表式显示存在明显的缺陷, 不仅页面不美观, 而且信息量有限。读者从读书报告的标题第一时间获取的信息量非常有限, 致使读书报告的点击浏览量低。为了提高读书报告的曝光率, 增强内容的吸引力, 平台设计摘要式展示方式, 抽取读书报告开头的部分内容进行展示, 如图11(b)所示:

图11

	Figure Option ViewDownloadNew Window
	图11 读书报告改版前后对比

具体布局修改需要修改Drupal的Comments模块的comment-folded.tpl, 布局方面, 将读书报告之间用浅线进行分离, 增加层次感; 内容方面, 提取前200字作为摘要, 显示在标题下面, 读者可以第一时间获知文章大体内容。