基于H5移動學習平臺界面的情感化設(shè)計研究

摘要：數(shù)字化學習資源在移動學習領(lǐng)域受到了廣泛關(guān)注和應(yīng)用，數(shù)字化學習資源的開發(fā)和設(shè)計也是當下教育研究的熱點話題之一。通過HTML5（以下簡稱“H5”）技術(shù)開發(fā)的移動學習平臺的界面情感化設(shè)計，具有交互性和情感化的雙重特點，增強了學習體驗，促進學習者更加有效學習。基于此，本文介紹了情感化設(shè)計和H5移動學習平臺，闡述了移動學習資源設(shè)計的理論基礎(chǔ)，并從視覺層面、交互層面、思維層面，提出了基于H5移動學習平臺界面情感化設(shè)計原則，最后根據(jù)本能、行為和反思水平的設(shè)計層面，分別總結(jié)出了相關(guān)策略，以期為移動學習發(fā)展提供理論參考。

關(guān)鍵詞：移動學習；H5移動學習平臺；界面設(shè)計；情感化設(shè)計

移動學習平臺為方便大眾能夠隨時隨地利用通勤、排隊等碎片化時間進行學習。目前，市面上涌現(xiàn)了大量功能強大的移動學習平臺，但其界面設(shè)計存在著風格單一、圖像呆板、布局固化等問題。而基于H5移動學習平臺的界面情感化設(shè)計能夠增強學習者的體驗，能幫助學習者有效、有趣、人性化地學習。

一、相關(guān)概述

（一）情感化設(shè)計

情感是人類價值觀和判斷力形成的基礎(chǔ)[1]。所謂的情感化設(shè)計，就是通過形狀、色彩、肌理等各種要素，將情感融入設(shè)計作品中[2]，在使用產(chǎn)品的過程中，激發(fā)消費者對此的聯(lián)想，產(chǎn)生共鳴的同時，獲得精神上的滿足和情感上的愉悅[3]。情感化設(shè)計（Emotional Design）是展現(xiàn)以人為本的設(shè)計理念，強調(diào)在產(chǎn)品的設(shè)計和開發(fā)過程中將情感體驗充分融入作品的每一個細節(jié)中，因此學習者在使用產(chǎn)品的過程中能夠感受到舒適、滿足和快樂，進而提高產(chǎn)品的學習者體驗和口碑。

（二）H5移動學習平臺

H5，即Hyper Text Markup Language 5的縮寫，是一種構(gòu)建Web內(nèi)容的語言描述方式。目前，H5開發(fā)平臺很多且功能越來越強大，集成了“前后端”所需要的大部分功能，可以實現(xiàn)零代碼制作[4]。作為支持移動學習的工具，H5移動學習平臺的無需下載、即點即用和交互功能為學習者帶來了舒適的學習體驗。H5移動學習平臺能夠根據(jù)知識點確定學習內(nèi)容，以關(guān)鍵點貫穿重難點、以優(yōu)化教師授課、以學生自主學習為目的，從操作界面、程序靈活性和教育思想等各方面，提供更有效的學習課件和學習工具，也為教育信息化改革提供了新途徑。

二、H5移動學習平臺界面情感化設(shè)計的理論基礎(chǔ)

（一）人本主義理論

情感化設(shè)計注重人的感受和體驗，與人本心理學有著十分緊密的聯(lián)系。人本學派強調(diào)人的本性及其主觀經(jīng)驗的重要性，主張心理學必須從人的本性出發(fā)研究人的心理。馬斯洛提出的需求理論由低級到高級分別是生理的需要、安全的需要、歸屬與愛的需要、尊重的需要、自我實現(xiàn)的需要。其中，歸屬與愛的需要、尊重的需要和自我實現(xiàn)的需要都反映了H5移動學習平臺界面情感化設(shè)計的不同層次水平。

（二）聯(lián)通主義學習理論

聯(lián)通主義認為學習是連接專門節(jié)點和信息源的過程，而這個學習過程僅僅只是人本身的活動。聯(lián)通主義知識觀的核心理念在于知識被視為一種動態(tài)變化的過程，以片段形式分布于網(wǎng)絡(luò)之中。相應(yīng)的學習觀念則強調(diào)學習是一個連續(xù)的、知識網(wǎng)絡(luò)形成的過程，在這個過程中，人與外部關(guān)系的建立和知識網(wǎng)絡(luò)的建立顯得尤為重要[5]。H5移動學習平臺運用聯(lián)通主義學習，以學習者為起點，組成個人的網(wǎng)絡(luò)。聯(lián)通主義關(guān)注外部知識源的聯(lián)結(jié)，而這個聯(lián)結(jié)需要依靠承載學習資源和學習材料的設(shè)備，那么H5移動學習平臺作為移動學習的載體之一，其界面情感化的設(shè)計與知識的結(jié)網(wǎng)連通息息相關(guān)。

（三）多媒體學習理論

多媒體學習是知識構(gòu)建的重要環(huán)節(jié)，強調(diào)學習者需主動積極運用視覺與聽覺途徑，將新知識與原有的知識體系進行有效地整合。但是，一旦視覺、聽覺通道產(chǎn)生過多需要加工的元素，就會對學習產(chǎn)生阻礙作用。理查德·梅耶的多媒體學習理論[6]重點探討關(guān)于學習、教學和技術(shù)三方面的關(guān)系，即探討人類學習機制、協(xié)助他人學習的方法以及多媒體學習資源設(shè)計。這一理論以其簡潔明了、實用性強之特點，能夠有效指導H5移動學習平臺界面情感化設(shè)計。

三、基于H5移動學習平臺界面情感化設(shè)計原則

2005年，美國心理學家唐納德·諾曼（Donald Arthur Norman）在《情感化設(shè)計》一書中從人類腦部運作的觀點提出情感設(shè)計理論，認為人的大腦運作可分為本能的、行為的、反思的共三層次[7]。實質(zhì)上，他將設(shè)計分為本能水平的設(shè)計、行為水平的設(shè)計與反思水平的設(shè)計。因此，H5移動學習平臺界面需要圍繞視覺層面、交互層面、反思層面三方面分析設(shè)計原則。

（一）視覺層面原則

視覺層面包含了從內(nèi)涵、圖形、文字、布局和色彩五個因素[8]對H5移動學習平臺界面的情感因素進行分析。色彩是人類表達情感的媒介，屬于APP外在的視覺表達[9]。在情感化設(shè)計時，H5移動學習平臺界面首先需要確保視覺層面達到舒適、美觀的效果，符合當下的審美觀念，并注入積極正向的情感。因此，針對這五點提出以下視覺層面的具體要求：內(nèi)涵豐富、圖形簡潔、色彩合理、文字精準、布局合理。根據(jù)移動學習“片段性”的特點，H5移動學習平臺界面設(shè)計在視覺層面應(yīng)當遵循頁面舒適美觀、內(nèi)容短小精悍的原則。

（二）交互層面原則

在H5移動學習平臺界面情感化設(shè)計中，交互層面的設(shè)計同樣至關(guān)重要。為了提高學習者體驗，提出以下具體要求：功能性明確、理解性簡單、使用性友好。H5移動學習平臺界面的交互屬于人機交互，要求界面簡單大方、有條理以及有清晰明確的指示。若H5移動學習平臺的界面混亂不清，容易導致錯誤操作，不便于學習者的學習。一旦H5移動學習平臺界面設(shè)計過于繁瑣，勢必會將眾多潛在學習者阻隔在外。因此，在符合學習者的操作基礎(chǔ)上，界面的設(shè)計需要在交互的時候展現(xiàn)出情感態(tài)度。例如，在學習者進行作答時，回答正確可以設(shè)置動態(tài)界面或者圖標提示。由此可見，H5移動學習平臺界面情感化設(shè)計在交互層面應(yīng)當遵循傳遞有效信息、及時反饋交互信息的原則。

（三）反思層面原則

為了在H5移動學習平臺界面情感化設(shè)計中更好地體現(xiàn)反思層面，提出以下具體要求：情感記憶鮮明、愉悅度高激發(fā)學習者學習興趣。H5移動學習平臺界面的情感化設(shè)計需要做到以下三點：

1.促使學習者對當前界面產(chǎn)生感知，賦予其可控性，建立操作預期，從而降低迷茫與等待的情緒；

2.讓學習者感知當前界面，滿足學習者的個體歸屬感、尊重感，以最終滿足自我實現(xiàn)的需要；

3.真正關(guān)懷學習者，以“活”的界面去嵌入移動學習當中。

由此可見，H5移動學習平臺在界面情感化設(shè)計應(yīng)當遵循感知學習者的體驗、滿足學習者的個體歸屬感的原則。

四、基于H5移動學習平臺界面情感化設(shè)計策略

H5移動學習平臺往往具備精美的視覺界面設(shè)計、順暢的交互體驗以及激發(fā)學習者情感共鳴的元素。基于此，下文依據(jù)本能、行為和反思水平的設(shè)計層面提出了基于H5移動學習平臺界面的情感化設(shè)計策略。

（一）本能反應(yīng)的喚醒：視覺元素的情感化設(shè)計

界面設(shè)計應(yīng)當考慮到內(nèi)涵、色彩、圖形、文字與布局五個要素的搭配和運用，以達到情感化的目的。本能層直接反饋的是視覺感官的刺激，對應(yīng)H5移動學習平臺外在的美觀性，以學習者的視覺感受為中心的同時，以學習者審美特點為需求。

1.設(shè)計具有典型性和代表性圖標形象

在視覺層面上的情感設(shè)計，需要設(shè)計具有典型、有代表性的圖標形象，賦予學習者熟悉的視覺感受，通過設(shè)計有代表性的IP形象或者具有學科特色的logo標志，達到視覺識別和即刻認知的效果。例如，“歡樂苗繡”H5案例采用了重慶彭水苗族的繡花圖標，結(jié)合苗族繡娘IP形象貫穿整個頁面。學習用戶打開即可感受到苗繡文化帶來的視覺沖突，直接明確學習主題，點擊頁面便能在線結(jié)合設(shè)計專屬的繡帛，傳承苗繡技藝。

2.依據(jù)學習內(nèi)容統(tǒng)一色彩和風格基調(diào)

設(shè)計人員需要依據(jù)學習內(nèi)容，明確和統(tǒng)一整體界面的色彩和風格基調(diào)，強調(diào)規(guī)范化設(shè)計；采用動畫效果展示設(shè)計情感化沖突，注重趣味性和情感表達相融合，使學習者能感受到H5頁面所傳達的知識內(nèi)容及所蘊含的文化精神內(nèi)涵。例如，“春天飛花令”H5案例以詩詞的形式，整體色彩為綠色，風格基調(diào)統(tǒng)一為春日景色，大背景采用卡通風景，有柳絮舞動、細節(jié)飛花的畫面，讓學習者能夠感受到中國詩詞的美好和中華文化的精神內(nèi)涵。

（二）行為互動的建立：交互體驗的情感化設(shè)計

1.支持人機交互反饋和學習數(shù)據(jù)記錄

行為層注重的是交互操作和即時反饋，對應(yīng)H5移動學習平臺層面中人機交互的操作性，以學習者的流暢體驗為界定標準，實現(xiàn)視覺、交互與反思層面的平衡。沒有及時反饋的交互不屬于真正意義上的交互。要想達到人機交互必反饋的目標，設(shè)計人員需要設(shè)計有趣的交互效果，讓學習者可以與頁面進行互動，以增加學習者的參與度和黏性。例如，學習者可以使用滑動屏幕、點擊按鈕等方式來觸發(fā)動畫效果或者交互式學習游戲等。同時，在使用H5移動學習過程中，平臺支持有效記錄學習者的在線學習情況，并形成過程性學習數(shù)據(jù)。

2.契合學習者的需求以突顯學習成效

在交互層次的情感化設(shè)計，設(shè)計人員需要以客觀事實為基礎(chǔ)，適合學習者的需求和明確學習的任務(wù)要求，進行符合預期的設(shè)計，以達到基本成效。與Flash技術(shù)制作的交互課件不同，H5移動學習平臺能將各種課件形式融合起來，實現(xiàn)圖文并茂、音視頻有機結(jié)合。具體來說，學習者可以在課堂中或者隨時隨地通過掃二維碼的方式，訪問H5課件進行移動學習；教師則可以在H5課件中展現(xiàn)的關(guān)鍵點知識、設(shè)置專項練習或布置作業(yè)，明確學習要求的教學，更易于讓學習者接受和理解，也有利于提升學習成效。

（三）思維認同的深化：思維層面的情感化設(shè)計

1.引起學習者情感共鳴以加深情感記憶

設(shè)計人員需要結(jié)合學習內(nèi)容，以故事化、情境化的方式引發(fā)學習者的共鳴，使得學習者在使用H5移動學習平臺時，不僅能夠獲得知識，還能在情感上產(chǎn)生深刻的記憶。設(shè)計人員可以運用場景、角色等元素，構(gòu)建學習者與內(nèi)容之間的情感聯(lián)系，讓學習者在學習過程中產(chǎn)生代入感，從而加深對知識的理解和情感的記憶。例如，由騰訊和共青團中央聯(lián)手打造的H5案例——“70年，能為祖國做些什么？”，先以視頻的形式展示祖國發(fā)生的巨大變化，后運用一鏡到底的長圖形式講述祖國一些系列大事件，引起學習者愛國情和自豪感兩者的強烈共鳴，號召學習者擔任起中華民族偉大復興的時代使命。由此可見，設(shè)計人員需要以媒體工具為媒介，真正地引起學習者情感共鳴，以此加深其情感記憶。

2.強化學習者高階思維以促進深度學習

在H5移動學習界面設(shè)計中，如何呈現(xiàn)學習內(nèi)容背后的深層精神、文化內(nèi)涵，激發(fā)學習者的深層思考和高階思維，是迫切需要去解決的問題。設(shè)計人員需要給予學習者智能化、個性化的界面設(shè)計，從情感價值觀念上給予學習者正向情緒引導，運用象征、隱喻和故事等手法，增強界面的情感內(nèi)涵，以達到深層多次交互的學習，促進深度學習。例如，“中華傳統(tǒng)節(jié)日”H5案例以互動問答的形式，引導學習者深入了解我國傳統(tǒng)節(jié)日的由來、習俗和意義。設(shè)計者運用豐富的視覺元素和文字描述，展示了節(jié)日背后的文化內(nèi)涵。學習者在完成問答的過程中，不僅提高了自己的文化素養(yǎng)，還對中華傳統(tǒng)文化產(chǎn)生了更深入地思考、認同和熱愛。由此可見，基于反思水平的情感化設(shè)計與價值引導能夠強化學習者的高階思維，促進其深度學習。

五、結(jié)束語

H5移動學習平臺界面情感化設(shè)計是提升學習者學習體驗的重要手段，在一定程度上能夠提升學習的交互性、沉浸性，并賦予H5移動學習平臺生命力。在實際應(yīng)用中，設(shè)計人員需根據(jù)具體的學習內(nèi)容、目標群體和教學場景，靈活調(diào)整和優(yōu)化情感化設(shè)計策略，通過情感化設(shè)計，讓H5移動學習平臺成為學習者喜愛的學習工具，注重學習者的情感反饋，使新媒體時代下的移動學習更具人性化和生動性，助推教育信息化進一步改革和發(fā)展。

作者單位：歸妙玲 北部灣大學

參考文獻

[1]Helander，M.G，ThamM.P.（2003）.Hedonomics-afFectivehumanfactorsdesign[M].Ergonomics，46（13/14），1269-1272.

[2]許利劍.情感化設(shè)計的評價指標研究[D].南京：南京理工大學.2008.

[3]李征. 情感設(shè)計與人本設(shè)計[J]. 裝飾，2004（6）：15-15.

[4]莫葵鳳，鄭小軍，朱育賢，等.H5移動微課的創(chuàng)新設(shè)計與快速開發(fā)[J].中國教育信息化，2019（4）：34-36.

[5]馬麗琴.移動學習資源設(shè)計與開發(fā)[J].教育信息化論壇，2019，3（07）：80-81.

[6][美]理查德·E·邁耶著.多媒體學習[M].牛勇，邱香譯.北京：商務(wù)印書館，2006.

[7]唐納德.諾曼.設(shè)計心理學[M].北京：中信出版社，2003.

[8]趙亞偉.手機APP界面的情感化設(shè)計研究[D].濟南：山東大學，2014.

[9]藍子易.基于情感化設(shè)計的APP界面設(shè)計研究[D].唐山：華北理工大學，2022.