基于H5移動(dòng)學(xué)習(xí)平臺(tái)界面的情感化設(shè)計(jì)研究

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

關(guān)鍵詞：移動(dòng)學(xué)習(xí)；H5移動(dòng)學(xué)習(xí)平臺(tái)；界面設(shè)計(jì)；情感化設(shè)計(jì)

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

一、相關(guān)概述

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

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

（二）H5移動(dòng)學(xué)習(xí)平臺(tái)

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

二、H5移動(dòng)學(xué)習(xí)平臺(tái)界面情感化設(shè)計(jì)的理論基礎(chǔ)

（一）人本主義理論

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

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

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

（三）多媒體學(xué)習(xí)理論

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

三、基于H5移動(dòng)學(xué)習(xí)平臺(tái)界面情感化設(shè)計(jì)原則

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

（一）視覺層面原則

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

（二）交互層面原則

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

（三）反思層面原則

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

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

2.讓學(xué)習(xí)者感知當(dāng)前界面，滿足學(xué)習(xí)者的個(gè)體歸屬感、尊重感，以最終滿足自我實(shí)現(xiàn)的需要；

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

由此可見，H5移動(dòng)學(xué)習(xí)平臺(tái)在界面情感化設(shè)計(jì)應(yīng)當(dāng)遵循感知學(xué)習(xí)者的體驗(yàn)、滿足學(xué)習(xí)者的個(gè)體歸屬感的原則。

四、基于H5移動(dòng)學(xué)習(xí)平臺(tái)界面情感化設(shè)計(jì)策略

H5移動(dòng)學(xué)習(xí)平臺(tái)往往具備精美的視覺界面設(shè)計(jì)、順暢的交互體驗(yàn)以及激發(fā)學(xué)習(xí)者情感共鳴的元素?；诖耍挛囊罁?jù)本能、行為和反思水平的設(shè)計(jì)層面提出了基于H5移動(dòng)學(xué)習(xí)平臺(tái)界面的情感化設(shè)計(jì)策略。

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

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

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

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

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

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

（二）行為互動(dòng)的建立：交互體驗(yàn)的情感化設(shè)計(jì)

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

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

2.契合學(xué)習(xí)者的需求以突顯學(xué)習(xí)成效

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

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

1.引起學(xué)習(xí)者情感共鳴以加深情感記憶

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

2.強(qiáng)化學(xué)習(xí)者高階思維以促進(jìn)深度學(xué)習(xí)

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

五、結(jié)束語(yǔ)

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

作者單位：歸妙玲 北部灣大學(xué)

參考文獻(xiàn)

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

[2]許利劍.情感化設(shè)計(jì)的評(píng)價(jià)指標(biāo)研究[D].南京：南京理工大學(xué).2008.

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

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

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

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

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

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

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