劉偉強(qiáng)

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

中圖分類號(hào)：G4 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：（2021）-5-318

1 引言

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

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

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

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

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

2系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

3系統(tǒng)測(cè)試

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

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

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

表1所示為瀏覽器測(cè)試實(shí)例。

4 總結(jié)

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

參考文獻(xiàn)

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

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

[3]蘇新宇. 基于用戶體驗(yàn)的移動(dòng)閱讀應(yīng)用設(shè)計(jì)研究[J]. 信息與電腦（理論版）， 2020， v.32;No.447（05）：172-174.

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

基金項(xiàng)目：2019年國(guó)家級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目（大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃）（項(xiàng)目編號(hào)：201913617012）

安徽師范大學(xué)皖江學(xué)院 安徽 蕪湖