基于黃金法則的Mugeda界面設計與制作

摘要：近年來，無論是在新媒體領域，或是在通用、教育領域，屏媒的使用愈發(fā)廣泛，H5作品的應用廣受人們的歡迎。而H5作品的設計效果直接影響觀者觀看的效果，甚至會影響用戶互動以及瀏覽的數(shù)據(jù)，因此，在設計原則的指導下開展H5作品的設計與制作變得很有必要。Ben Shneiderman提出的界面設計的八條黃金法則可為作品資源建設者提供參考與借鑒。

關鍵詞：界面設計;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設計開發(fā)平臺相比，Mugeda有獨特的類似Flash制作的時間軸，并在控件功能上研發(fā)了很多交互方式。此外，它不提供可直接進行修改的模板，開發(fā)者需要在制作作品之前進行設計構思[1]，因此，設計原則的問題就隨之而來。

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

2? 問題提出與理論基礎

2.1 問題提出

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

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

2.2 用戶體驗

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

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

3 Mugeda界面設計的黃金法則

3.1 一致性

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

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

3.2 提供快捷操作功能

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

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

3.3 提供相關信息的反饋

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

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

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

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

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

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

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

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

3.6 允許撤銷操作

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

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

3.7 用戶掌控感

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

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

3.8 減少短時記憶負擔

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

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

4? 結(jié)論

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

參考文獻：

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

[2] 司國東，趙玉，趙鵬.移動學習資源的界面設計模式研究[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)絡教學中的應用研究[J].北京聯(lián)合大學學報，2013，27（2）：27-30.

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

收稿日期：2022-02-10

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