摘要：近年來，無論是在新媒體領(lǐng)域，或是在通用、教育領(lǐng)域，屏媒的使用愈發(fā)廣泛，H5作品的應(yīng)用廣受人們的歡迎。而H5作品的設(shè)計效果直接影響觀者觀看的效果，甚至?xí)绊懹脩艋右约盀g覽的數(shù)據(jù)，因此，在設(shè)計原則的指導(dǎo)下開展H5作品的設(shè)計與制作變得很有必要。Ben Shneiderman提出的界面設(shè)計的八條黃金法則可為作品資源建設(shè)者提供參考與借鑒。

關(guān)鍵詞：界面設(shè)計;Mugeda;黃金法則;用戶體驗;H5

中圖分類號：TP37? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）17-0097-02

1? 引言

H5作品隨著移動互聯(lián)網(wǎng)時代的快速發(fā)展愈發(fā)流行，H5能夠滿足人們目前能夠接觸到的多種媒體形式，包括文本、圖像、音頻、視頻以及圖標、網(wǎng)頁、動畫等。Mugeda作為專業(yè)級H5交互動畫內(nèi)容制作云平臺，擁有業(yè)界最為強大的動畫編輯能力和最為自由的創(chuàng)作空間。與其他H5設(shè)計開發(fā)平臺相比，Mugeda有獨特的類似Flash制作的時間軸，并在控件功能上研發(fā)了很多交互方式。此外，它不提供可直接進行修改的模板，開發(fā)者需要在制作作品之前進行設(shè)計構(gòu)思[1]，因此，設(shè)計原則的問題就隨之而來。

與Mugeda類似的眾多H5交互平臺，處在移動設(shè)備的載體上，從界面設(shè)計的視角看，這種技術(shù)特性會限制發(fā)布內(nèi)容的布局設(shè)計、導(dǎo)航設(shè)計、交互設(shè)計，尤其是信息如何呈現(xiàn)的問題[2]，此外，手機屏幕空間的大小對于呈現(xiàn)復(fù)雜的內(nèi)容時相對比較困難。

2? 問題提出與理論基礎(chǔ)

2.1 問題提出

現(xiàn)有研究大多數(shù)關(guān)注Mugeda技術(shù)操作以及功能實現(xiàn)層面，而忽略了設(shè)計的美觀性以及帶給人們的認知負荷。作品的設(shè)計與制作過程遵循一定的設(shè)計原則，才能發(fā)揮其較大的價值。

無論是應(yīng)用在營銷宣傳的推廣方面，還是在教育課件以及音視頻報道等方面的應(yīng)用，設(shè)計原則的選擇都會影響最終Mugeda作品的質(zhì)量，從而影響作品的視覺呈現(xiàn)以及觀看效果，甚至涉及用戶互動數(shù)據(jù)以及瀏覽行為數(shù)據(jù)的監(jiān)控。Shneiderman從受眾出發(fā)，基于對用戶角度的認知提出用戶界面設(shè)計的八條黃金法則，充分體現(xiàn)了交互系統(tǒng)中人與計算機有效交互的策略[3]。針對手機端觀看Mugeda作品而言，手機屏幕是相對于其他設(shè)備最小的一個終端，并且尺寸多種多樣，用戶通過移動終端設(shè)備進行翻閱報道、答題測試、觀看視頻等，是一種典型的交互方式，因此設(shè)計的好壞直接影響用戶交互的體驗。

2.2 用戶體驗

用戶體驗自Donald Norman提出以來，眾多學(xué)者提出關(guān)于用戶體驗的理論、方法與模型。Donald Norman將用戶體驗劃分為本能層面、行為層面以及反思層面[4]。Whitney Quesenbery等提出用戶體驗的5E設(shè)計原則，即有效性（Effective）、效率（Efficient）、吸引（Engaging）、容錯（Error Tolerant）、易學(xué)（Easy to learn）[5]。指導(dǎo)Web界面設(shè)計實踐最著名的為Peter Morville總結(jié)的用戶體驗蜂巢模型，它揭示了用戶除了可用性需求之外的更多體驗需求[6]。

作為重要的理論基礎(chǔ)，要在使用黃金法則設(shè)計和制作Mugeda作品時將“以用戶為中心”的思想貫穿始終。

3 Mugeda界面設(shè)計的黃金法則

3.1 一致性

在設(shè)計界面的功能和操作時，可以利用圖標、顏色、菜單的層次結(jié)構(gòu)、行為召喚、用戶流程圖來實現(xiàn)一致性。規(guī)范界面中信息表現(xiàn)的方式可以減少用戶認知負擔(dān)，用戶體驗易懂清晰且流暢。

當(dāng)無關(guān)的信息被排除時，觀者對于作品的關(guān)注度更高，這里的信息包括詞語、畫面和聲音。若在本來就狹窄的手機屏幕頁面上再添加不必要的信息，觀者的瀏覽效果會大打折扣。

3.2 提供快捷操作功能

提供給用戶更加快捷完成任務(wù)的方法，他們可以更輕松地瀏覽和操作用戶界面，尤其是對于相對煩瑣的操作。

Mugeda提供跳轉(zhuǎn)功能，快速地跳轉(zhuǎn)到指定頁面，當(dāng)瀏覽完所有信息，可設(shè)置直接跳轉(zhuǎn)首頁繼續(xù)瀏覽，不必退出重新進入界面。處于舞臺編輯區(qū)域制作，點擊所要觸發(fā)跳轉(zhuǎn)的元素，點擊行為按鈕，即添加或編輯行為。行為包括動畫或媒體播放控制、屬性控制、微信定制、手機功能、數(shù)據(jù)服務(wù)。觸發(fā)條件包括點擊、滑動、拖動、自定義觸發(fā)等。

3.3 提供相關(guān)信息的反饋

用戶每完成一個關(guān)鍵操作，需要在合理的時間給出適當(dāng)且人性化的反饋，然后用戶才能感知并進入下一步操作。反饋有很多類型，例如聲音提示、觸摸感、語言提示，以及各種類型的組合。例如在設(shè)計多頁問卷時，應(yīng)該告訴用戶進行到哪個步驟，保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。

此原則比較適用于答題測試類作品，當(dāng)答題者回答錯誤時，可給予關(guān)于此題的提示，若回答正確，可給予答題者以鼓勵。Mugeda制作時可將內(nèi)容與所給反饋放在同一頁，反饋放置于時間軸最后一幀，通過選項跳轉(zhuǎn)至幀并停止來實現(xiàn)。

3.4 設(shè)計含結(jié)束提示的流程

避免用戶在瀏覽作品或操作頁面時產(chǎn)生疑惑與猶豫，必要時需要在頁面添加引導(dǎo)。例如，用戶在終端設(shè)備上完成支付后，看到“謝謝購買”消息提示會感到滿足和安心。

在Mugeda中同樣可通過頁內(nèi)的幀跳轉(zhuǎn)來應(yīng)用此原則，當(dāng)用戶填寫完整所有必填信息后，在結(jié)束頁內(nèi)的提交按鈕上添加行為，提示“您已填寫完整所有信息”或“感謝參與”等字樣。

3.5 提供簡潔的錯誤操作解決方案

在設(shè)計作品時應(yīng)該盡量考慮如何減少用戶犯錯誤的機會，但如果用戶操作時發(fā)生不可避免的錯誤，不能只報錯而不提供解決方案。若作品內(nèi)容較復(fù)雜且目錄較多時，需確保為用戶提供簡單、直觀的分步說明，以引導(dǎo)他們輕松快速地解決問題。例如，用戶在填寫表單時忘記填寫某個輸入框時，可以以較小字號提示或星號標記這個輸入框以提醒用戶。

Mugeda提供點贊、投票、拖放容器等多種控件以及表單功能，在制作時設(shè)計出錯誤操作的解決方案，用戶會更專注于內(nèi)容本身，同時避免后臺數(shù)據(jù)冗余的發(fā)生。

3.6 允許撤銷操作

設(shè)計人員應(yīng)為用戶提供明顯的方式來讓用戶恢復(fù)之前的操作，無論是單次動作、數(shù)據(jù)輸入還是整個動作序列后都應(yīng)允許進行返回操作，即用戶可獲得控制權(quán)。Shneiderman認為此功能可有效減輕用戶的焦慮，當(dāng)用戶知道由于操作失誤導(dǎo)致的錯誤可以被撤銷時，用戶會滿懷信心地去大膽探索。

在涉及重要信息填寫操作時，開發(fā)者需設(shè)置返回按鈕或重置按鈕，允許用戶清空之前填寫的內(nèi)容，或在最后一步操作之前詢問用戶是否確認。

3.7 用戶掌控感

設(shè)計時應(yīng)考慮如何讓用戶主動去使用，而不是被動接受，要讓用戶感受他們對界面的操作與內(nèi)容具有掌控感，在設(shè)計時按照他們預(yù)期的方式來獲得他們的信任。

此原則適合營銷推廣或宣傳推廣類作品，當(dāng)用戶對界面的操作以及內(nèi)容了如指掌時，用戶會更愿意繼續(xù)瀏覽，繼而達到推廣數(shù)據(jù)的目的。

3.8 減少短時記憶負擔(dān)

人的記憶力是有限的，短時記憶的容量一般為7±2個組塊，短時記憶是通過復(fù)述來保持信息的[7]。因此，界面設(shè)計應(yīng)當(dāng)盡可能簡潔，保持適當(dāng)?shù)男畔哟谓Y(jié)構(gòu)，讓用戶去再認信息而不是去回憶，再認通過感知線索讓相關(guān)信息重現(xiàn)。例如，一般選擇題比簡答題更容易，因為選擇題只需要對正確答案再認，而不是從記憶中提取。

比如教育類作品，當(dāng)瀏覽一定信息后，在后面的內(nèi)容中適當(dāng)?shù)卦O(shè)置一些返回功能可供學(xué)習(xí)者再認知識。同時，設(shè)計者需保證對應(yīng)的文本與畫面出現(xiàn)在時間軸的單個圖層或多個圖層的同一幀，切忌相繼出現(xiàn)，從而減輕學(xué)習(xí)者的認知負荷。此外，不要添加過多或無關(guān)的人物形象或卡通形象等，不僅由于屏幕本身的局限性，而且會使學(xué)習(xí)者轉(zhuǎn)移注意力。

4? 結(jié)論

任何一個H5作品被設(shè)計出來都應(yīng)有其遵循的設(shè)計原則與使用規(guī)則，一個優(yōu)秀的H5作品更應(yīng)該符合人們的認知，并且具有一定的美學(xué)基礎(chǔ)，甚至能夠達到開發(fā)設(shè)計者關(guān)于用戶體驗或營銷數(shù)據(jù)的目的。以Ben Shneiderman提出的界面設(shè)計的八條黃金法則為基礎(chǔ)，設(shè)計并制作不同類型的Mugeda作品，以期為開發(fā)者、設(shè)計者提供參考與借鑒，創(chuàng)作更優(yōu)秀的H5界面。

參考文獻：

[1] 陳海燕.初探H5移動微課設(shè)計開發(fā)原則[J]. 讀書文摘（中），2020（4）：1.

[2] 司國東，趙玉，趙鵬.移動學(xué)習(xí)資源的界面設(shè)計模式研究[J].電化教育研究，2015，36（2）：71-76.

[3] Shneiderman B.Designing the user interface[M].3rd Ed.Pearson Education，Inc，1998.

[4] Norman D.Emotional design：why we love （or hate） everyday things[M].New York： Basic books，2004.

[5] Quesenbery W， Brooks K. Storytelling for User Experience： Crafting Stories for Better Design[M].New York： Rosenfeld Media，2010.

[6] 焦婧，劉東，李亞文.用戶體驗蜂窩模型在網(wǎng)絡(luò)教學(xué)中的應(yīng)用研究[J].北京聯(lián)合大學(xué)學(xué)報，2013，27（2）：27-30.

[7] 但菲，劉野.心理學(xué)[M].北京：北京師范大學(xué)出版社，2011.

收稿日期：2022-02-10

作者簡介：王秀芳（1999—），女， 山東聊城人，碩士在讀，主要研究方向為教育軟件系統(tǒng)開發(fā)。