刘伟强

摘要：该设计是一种利用层叠样式表和JavaScript工具实现的基于HTML5语言的交互式“故事打印机”，通过本地存储的方法解决无网络时的问题，同时能够适应各种版本或者分辨率不同的浏览器，拥有其较好的移植性。

中图分类号：G4 文献标识码：A 文章编号：（2021）-5-318

1 引言

根据中国互联网信息中心调查显示，中国网民比例接近97%，移动互联网用户的规模逼近8亿。随着5G时代的来临，各种移动终端会变得更加智能化、普遍化。因此，人们对手机的依赖性也越来越显著，手机等电子产品的过度使用问题已经成为了一个研究焦点，如何有效的减少电子产品的非必要使用时间需要被社会所重视。

近年来，对于电子产品的过度使用的应对方案层出不穷，衍生了各类医疗电子产品，但执行效果并不显著。为了解决过度使用智能电子产品问题，本文设计一款基于HTML5网页设计触摸电子屏，本设计注重良好的用户体验，在形成心理暗示的同时提供便携式阅读，拥有广阔的市场前景。

HTML5开发平台只是提供了产品开发的编程语言环境，产品的诞生是用户需求所驱动的，了解用户的需求是产品开发的关键，在注重功能实现的同时，更注重与用户的友好交互。因此，本设计主要创新如下：

1）HTML5页面开发在实现基础功能的同时兼容各种浏览器版本，并且对于不同的系统界面有着自适应功能。

2）在用户交互设计中注重用户体验与传统的页面设计相比，交互性更强，在实现随机打印“故事”的同时，硬件方面也与用户有着交互体验。

2系统详细设计与实现

利用分治思想，将项目拆封为各个组件，组件再次拆分为更简单的模块，逐层降低系统的复杂度，不仅可以使得系统拥有更好的拓展性和可维护性，同时提高模块的复用度，极大的提高代码的编写速度，减少了不必要的重复性工作。如图1所示，为系统设计框架示意图。

导航栏（Header）设计：以Header作为主盒子，内嵌三个盒子分别为logo（导航栏标识），nav（导航栏选项），burger（折叠菜单），采用栅格布局左侧占1/3，右侧占2/3，个元素垂直居中。

轮播页面（Glide）设计：以Glide作为轮播组件，在底部和左右两侧都设有切换按钮方便用户进行页面的置换，使用Animejs动画库，对内部元素进行动画设计，通过监听事件，当发现界面切换时对每个子元素的出现顺序时间，效果进行调控

打印界面（content-wrapper）设计：根据功能实现要求，将页面划分为四栏（choose-members），并为每一栏增加按钮（choose-member），在index.js文件下通过事件监听，在页面的点击bottom时，调用doPrint（）打印标记区域的内容，并设计随机数，进而选择内部存储的不同内容。

底部信息界面（footer）设计：以footer作为主盒子，再细分四个小盒子，让设计分为三栏，布局方式依然采用栅格布局，为方便用户返回顶层添加了返回链接，1，2，3是包括了备案信息，联系方式等信息。

自适应网页设计：为了方便不同的硬件设施，在分辨率改变的情况下，响应式布局实现了对页面元素的差异化控制，通过对Css样式表的修改，在不同分辨率下客观观察布局实现对页面元素的弹性变化，如图2所示。

3系统测试

1.网页之间的跳转。通过监听事件，当鼠标点击功能按键，或者探索更多时，能够流畅的跳转到目标页面。

2.打印功能。当用户点击功能页面的相关按钮时，通过调用窗口的doPrint（），實现随机打印，并显示在当前窗口，用户可以提前预览到相关内容。

3.通过浏览的的开发者选项，更改服务器的代理 ，可以观察到在不同的浏览器下，网页能够完整的显示，并且功能并没有任何影响，在响应式布局的调控下，可以满足大部分分辨率显示效果。

表1所示为浏览器测试实例。

4 总结

本文利用基于HTML5与JavaScript网页设计兼容大部分的操作性系统和浏览器，有效的节省了开发成本，同时可跨平台，且版本的迭代容易。后期会根据用户实时需求进行功能的修改与增添，同时借助云服务器进行后台的搭建与维护。

参考文献

[1]孙素华. Dreamweaver CS5 Flash CS5 Photoshop CS5网页设计从入门到精通[M]. 中国青年电子出版社， 2011.

[2]黄涛， 王艳慧， 关鸿亮. 基于Android的"社交+自适应推荐"阅读APP设计与实现[J]. 软件导刊， 2020， v.19;No.209（03）：134-138.

[3]苏新宇. 基于用户体验的移动阅读应用设计研究[J]. 信息与电脑（理论版）， 2020， v.32;No.447（05）：172-174.

[4]张明勇. BOPPPS教学模型下基于超星学习通在线学习平台的混合式教学实践研究——以《HTML5 & CSS3》网页设计课程为例[J]. 武汉船舶职业技术学院学报， 2019， 018（004）：67-73.

基金项目：2019年国家级大学生创新创业训练计划项目（大学生创新创业训练计划）（项目编号：201913617012）

安徽师范大学皖江学院 安徽 芜湖