基于黃金法則的Mugeda界面設(shè)計(jì)與制作

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

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

中圖分類號(hào)：TP37? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）17-0097-02

1? 引言

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

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

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

2.1 問題提出

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

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

2.2 用戶體驗(yàn)

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

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

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

3.1 一致性

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

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

3.2 提供快捷操作功能

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

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

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

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

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

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

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

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

3.5 提供簡潔的錯(cuò)誤操作解決方案

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

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

3.6 允許撤銷操作

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

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

3.7 用戶掌控感

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

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

3.8 減少短時(shí)記憶負(fù)擔(dān)

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

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

4? 結(jié)論

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

參考文獻(xiàn)：

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

[2] 司國東，趙玉，趙鵬.移動(dòng)學(xué)習(xí)資源的界面設(shè)計(jì)模式研究[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] 焦婧，劉東，李亞文.用戶體驗(yàn)蜂窩模型在網(wǎng)絡(luò)教學(xué)中的應(yīng)用研究[J].北京聯(lián)合大學(xué)學(xué)報(bào)，2013，27（2）：27-30.

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

收稿日期：2022-02-10

作者簡介：王秀芳（1999—），女， 山東聊城人，碩士在讀，主要研究方向?yàn)榻逃浖到y(tǒng)開發(fā)。