劉偉強

摘要：該設計是一種利用層疊樣式表和JavaScript工具實現(xiàn)的基于HTML5語言的交互式“故事打印機”，通過本地存儲的方法解決無網(wǎng)絡時的問題，同時能夠適應各種版本或者分辨率不同的瀏覽器，擁有其較好的移植性。

中圖分類號：G4 文獻標識碼：A 文章編號：（2021）-5-318

1 引言

根據(jù)中國互聯(lián)網(wǎng)信息中心調(diào)查顯示，中國網(wǎng)民比例接近97%，移動互聯(lián)網(wǎng)用戶的規(guī)模逼近8億。隨著5G時代的來臨，各種移動終端會變得更加智能化、普遍化。因此，人們對手機的依賴性也越來越顯著，手機等電子產(chǎn)品的過度使用問題已經(jīng)成為了一個研究焦點，如何有效的減少電子產(chǎn)品的非必要使用時間需要被社會所重視。

近年來，對于電子產(chǎn)品的過度使用的應對方案層出不窮，衍生了各類醫(yī)療電子產(chǎn)品，但執(zhí)行效果并不顯著。為了解決過度使用智能電子產(chǎn)品問題，本文設計一款基于HTML5網(wǎng)頁設計觸摸電子屏，本設計注重良好的用戶體驗，在形成心理暗示的同時提供便攜式閱讀，擁有廣闊的市場前景。

HTML5開發(fā)平臺只是提供了產(chǎn)品開發(fā)的編程語言環(huán)境，產(chǎn)品的誕生是用戶需求所驅(qū)動的，了解用戶的需求是產(chǎn)品開發(fā)的關鍵，在注重功能實現(xiàn)的同時，更注重與用戶的友好交互。因此，本設計主要創(chuàng)新如下：

1）HTML5頁面開發(fā)在實現(xiàn)基礎功能的同時兼容各種瀏覽器版本，并且對于不同的系統(tǒng)界面有著自適應功能。

2）在用戶交互設計中注重用戶體驗與傳統(tǒng)的頁面設計相比，交互性更強，在實現(xiàn)隨機打印“故事”的同時，硬件方面也與用戶有著交互體驗。

2系統(tǒng)詳細設計與實現(xiàn)

利用分治思想，將項目拆封為各個組件，組件再次拆分為更簡單的模塊，逐層降低系統(tǒng)的復雜度，不僅可以使得系統(tǒng)擁有更好的拓展性和可維護性，同時提高模塊的復用度，極大的提高代碼的編寫速度，減少了不必要的重復性工作。如圖1所示，為系統(tǒng)設計框架示意圖。

導航欄（Header）設計：以Header作為主盒子，內(nèi)嵌三個盒子分別為logo（導航欄標識），nav（導航欄選項），burger（折疊菜單），采用柵格布局左側(cè)占1/3，右側(cè)占2/3，個元素垂直居中。

輪播頁面（Glide）設計：以Glide作為輪播組件，在底部和左右兩側(cè)都設有切換按鈕方便用戶進行頁面的置換，使用Animejs動畫庫，對內(nèi)部元素進行動畫設計，通過監(jiān)聽事件，當發(fā)現(xiàn)界面切換時對每個子元素的出現(xiàn)順序時間，效果進行調(diào)控

打印界面（content-wrapper）設計：根據(jù)功能實現(xiàn)要求，將頁面劃分為四欄（choose-members），并為每一欄增加按鈕（choose-member），在index.js文件下通過事件監(jiān)聽，在頁面的點擊bottom時，調(diào)用doPrint（）打印標記區(qū)域的內(nèi)容，并設計隨機數(shù)，進而選擇內(nèi)部存儲的不同內(nèi)容。

底部信息界面（footer）設計：以footer作為主盒子，再細分四個小盒子，讓設計分為三欄，布局方式依然采用柵格布局，為方便用戶返回頂層添加了返回鏈接，1，2，3是包括了備案信息，聯(lián)系方式等信息。

自適應網(wǎng)頁設計：為了方便不同的硬件設施，在分辨率改變的情況下，響應式布局實現(xiàn)了對頁面元素的差異化控制，通過對Css樣式表的修改，在不同分辨率下客觀觀察布局實現(xiàn)對頁面元素的彈性變化，如圖2所示。

3系統(tǒng)測試

1.網(wǎng)頁之間的跳轉(zhuǎn)。通過監(jiān)聽事件，當鼠標點擊功能按鍵，或者探索更多時，能夠流暢的跳轉(zhuǎn)到目標頁面。

2.打印功能。當用戶點擊功能頁面的相關按鈕時，通過調(diào)用窗口的doPrint（），實現(xiàn)隨機打印，并顯示在當前窗口，用戶可以提前預覽到相關內(nèi)容。

3.通過瀏覽的的開發(fā)者選項，更改服務器的代理 ，可以觀察到在不同的瀏覽器下，網(wǎng)頁能夠完整的顯示，并且功能并沒有任何影響，在響應式布局的調(diào)控下，可以滿足大部分分辨率顯示效果。

表1所示為瀏覽器測試實例。

4 總結(jié)

本文利用基于HTML5與JavaScript網(wǎng)頁設計兼容大部分的操作性系統(tǒng)和瀏覽器，有效的節(jié)省了開發(fā)成本，同時可跨平臺，且版本的迭代容易。后期會根據(jù)用戶實時需求進行功能的修改與增添，同時借助云服務器進行后臺的搭建與維護。

參考文獻

[1]孫素華. Dreamweaver CS5 Flash CS5 Photoshop CS5網(wǎng)頁設計從入門到精通[M]. 中國青年電子出版社， 2011.

[2]黃濤， 王艷慧， 關鴻亮. 基于Android的"社交+自適應推薦"閱讀APP設計與實現(xiàn)[J]. 軟件導刊， 2020， v.19;No.209（03）：134-138.

[3]蘇新宇. 基于用戶體驗的移動閱讀應用設計研究[J]. 信息與電腦（理論版）， 2020， v.32;No.447（05）：172-174.

[4]張明勇. BOPPPS教學模型下基于超星學習通在線學習平臺的混合式教學實踐研究——以《HTML5 & CSS3》網(wǎng)頁設計課程為例[J]. 武漢船舶職業(yè)技術學院學報， 2019， 018（004）：67-73.

基金項目：2019年國家級大學生創(chuàng)新創(chuàng)業(yè)訓練計劃項目（大學生創(chuàng)新創(chuàng)業(yè)訓練計劃）（項目編號：201913617012）

安徽師范大學皖江學院 安徽 蕪湖