H5 頁面設(shè)計（Mugeda版）全套教學(xué)課件

現(xiàn)代

編著技術(shù)數(shù)字第1章認(rèn)識H5頁面H5頁面設(shè)計（Mugeda版）（微課版）全套可編輯PPT課件1.1H5概述1.2H5頁面的設(shè)計原則1.3H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1631.1.1H5是什么而H5則是HTML5的縮寫，HTML5是第5代超文本標(biāo)記語言的簡稱。，使用HTML5制作的頁面不僅視覺效果有較大的提升，還具有較強的可操作性與互動性，并且展示方式多樣、表現(xiàn)形式豐富、視聽效果好。HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）“超文本”指的是頁面內(nèi)可以包含圖片、鏈接、音樂、程序等非文字元素，“標(biāo)記”則代表這些超文本必須通過起始標(biāo)簽和結(jié)束標(biāo)簽進(jìn)行標(biāo)記?！?022大話之旅”H5頁面1.1.2H5頁面的基本特點H5頁面可以在各種操作系統(tǒng)（如Windows、macOS、iOS和Android等）和不同設(shè)備（如計算機設(shè)備、移動設(shè)備和智能電視等）上展示，具有極強的兼容性。兼容性強支持多媒體互動性強H5頁面中可以包含文字、圖像、動畫、音頻、視頻等媒體元素，設(shè)計師可以綜合應(yīng)用多種媒體元素設(shè)計出具有吸引力的H5頁面，從而更好地傳遞信息，提升用戶體驗。H5頁面可以通過手勢交互、硬件交互（如攝像頭、陀螺儀等）以及技術(shù)交互（如滑動、拖動、點擊等）等方式，實現(xiàn)更多樣化、個性化的互動，以增強用戶的參與感，提升用戶體驗和留存率。1.1.3H5頁面的應(yīng)用活動宣傳產(chǎn)品展示或推廣品牌宣傳公益宣傳1.1.4H5頁面的風(fēng)格扁平化風(fēng)格水墨風(fēng)格實景風(fēng)格1.1.4H5頁面的風(fēng)格科技風(fēng)格卡通風(fēng)格混合風(fēng)格1.2H5概述1.1H5頁面的設(shè)計原則1.3H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1.2.1一致性原則一致性原則貫穿H5頁面設(shè)計的全過程，在設(shè)計H5頁面時，頁面的版式、文字字體，以及圖片或圖形的顏色、風(fēng)格、色調(diào)等要做到基本統(tǒng)一和協(xié)調(diào)；在展示頁面內(nèi)容時，內(nèi)容主題和動效風(fēng)格設(shè)置需要保持一致等?！癆E動效設(shè)計”課程的H5頁面該頁面均以藍(lán)色為背景色，以黃色和黑色為輔助色，采用扁平化風(fēng)格，以及與風(fēng)格統(tǒng)一的圖形和文字元素，直觀地展現(xiàn)了課程信息。1.2.2簡潔性原則在設(shè)計H5頁面時需始終堅持簡潔性原則，可對內(nèi)容進(jìn)行刪減并簡化布局，專注于核心內(nèi)容的展示，避免過多的裝飾和復(fù)雜的元素，同時適當(dāng)留白，使頁面看起來清晰和整潔，以幫助用戶更好地理解H5頁面中的內(nèi)容?！耙活w膠囊的神奇之旅”H5頁面該頁面在內(nèi)容上采用圖文搭配的方式，圖片直觀、簡潔，無過多裝飾，直接展現(xiàn)需要傳達(dá)的內(nèi)容；簡明、扼要的文字則對圖片內(nèi)容進(jìn)行解釋，使頁面更加清晰、易懂。1.2.3條理性原則在設(shè)計H5頁面前需要梳理內(nèi)容，分清主次關(guān)系，先展示比較簡單的內(nèi)容，然后依次展示更復(fù)雜的內(nèi)容，由易到難，循序漸進(jìn)。為了避免用戶難以理解內(nèi)容，在進(jìn)行H5頁面設(shè)計時最好做到“一個頁面只講一件事”。“騰訊應(yīng)急”H5頁面”該H5頁面共5個場景，分別為校園、家庭、鄉(xiāng)村、社區(qū)、企業(yè)，各場景內(nèi)容主次分明、條理清楚。1.2.4切身性原則切身性原則需要設(shè)計師從用戶熟悉的生活和熱點事件中尋找突破點或共鳴點，并將其以創(chuàng)意的方式呈現(xiàn)出來。例如運用動畫、插畫、互動性元素等來營造令人印象深刻的視覺效果，引發(fā)用戶共鳴，加深用戶印象，從而達(dá)到信息傳播的目的。品牌招商H5頁面該H5頁面以用戶切身關(guān)注的問題為出發(fā)點（如牧場、牧草、土地和奶牛等是否優(yōu)質(zhì)），然后通過對產(chǎn)品的詳細(xì)介紹，使用戶能感受到該品牌對這些問題的注重程度，引發(fā)用戶的共鳴和認(rèn)同。1.2.5創(chuàng)新性原則運用圖片、視頻、動畫等媒體元素，使頁面更加生動、有趣；或是通過講述一個有趣的故事或在頁面中呈現(xiàn)一個生動的場景，以彰顯頁面的設(shè)計感。使用不同的字體、大小、顏色和樣式，創(chuàng)造出獨特的視覺效果，也可以使用有趣的文案和口號來吸引用戶的注意力，并激發(fā)他們的興趣?！胺蛉舜伞の骱{(lán)”H5頁面該頁面采用插畫的方式將產(chǎn)品融入生活場景中，在具有美觀性的同時也具有創(chuàng)新性。1.3H5概述1.1H5頁面的設(shè)計原則1.2H5頁面的設(shè)計規(guī)范1.4H5頁面的設(shè)計流程1.3.1頁面尺寸手機是最常見的終端設(shè)備之一，設(shè)計H5頁面時可根據(jù)特定手機型號的屏幕尺寸進(jìn)行設(shè)計。雖然型號不同的手機尺寸不同，但目前H5頁面普遍采用的頁面尺寸是在640像素×1136像素的基礎(chǔ)上，減去微信或瀏覽器觀看時的手機頂部高度128像素，得到最終的H5頁面尺寸640像素×1008像素。1.3.2頁面適配為了確保制作完成后的H5頁面能夠適配不同屏幕尺寸的手機，很多H5制作工具或平臺都有“自動適配”功能，只需選擇一種手機屏幕尺寸進(jìn)行設(shè)計，即可實現(xiàn)對其他手機屏幕尺寸的適配。為了避免使用“自動適配”功能后，仍出現(xiàn)部分頁面邊緣區(qū)域無法完整顯示的情況出現(xiàn)，設(shè)計師可以將重要內(nèi)容居中放在安全框中（安全框指手機屏幕中可以完整顯示內(nèi)容的安全區(qū)域，該區(qū)域不會被屏幕裁剪或者遮擋），以確保其在各種屏幕上都能夠清晰展示。為了測試頁面適配效果，可以生成二維碼并在手機端進(jìn)行預(yù)覽，這樣可以更準(zhǔn)確地判斷頁面在手機上的實際顯示效果，以進(jìn)行調(diào)整和優(yōu)化。0102031.3.3文件大小Mugeda平臺要求一張圖片不超過10MB，一個視頻不超過20MB。當(dāng)圖片或視頻過大時，可對素材進(jìn)行壓縮。圖片壓縮視頻壓縮壓縮視頻可以使用專業(yè)的多媒體文件處理軟件，如格式工廠等。也可使用一些在線編輯器來完成，如Video2Edit等，設(shè)計師無須下載和安裝，只需在其網(wǎng)站首頁選擇“壓縮影片”選項，打開“在線壓縮視頻”頁面，將需要壓縮的視頻拖動到紫色的方塊中，在其下方還可設(shè)置文件大小和格式，單擊“開始”按鈕后便可壓縮視頻。1.4H5概述1.1H5頁面的設(shè)計原則1.2H5頁面的設(shè)計規(guī)范1.3H5頁面的設(shè)計流程1.4.1明確設(shè)計目的在設(shè)計之初，客戶往往會提供設(shè)計需求，設(shè)計師需要先仔細(xì)閱讀設(shè)計需求，理解H5頁面的整體目標(biāo)和設(shè)計目的。明確到底要做什么，需要在其中表達(dá)什么內(nèi)容，并將重點信息羅列出來，確定H5頁面所要實現(xiàn)的具體目標(biāo)，如宣傳企業(yè)形象、提高品牌知名度、推廣產(chǎn)品或服務(wù)等，為H5頁面的內(nèi)容策劃提供方向。1.4.2策劃內(nèi)容1.構(gòu)建內(nèi)容大綱用戶分析了解目標(biāo)用戶的年齡、性別、受教育程度、興趣和行為習(xí)慣，分析目標(biāo)用戶的需求和期望，確定內(nèi)容大綱中需要包含的關(guān)鍵信息。品牌分析了解品牌的核心價值觀、聲譽和風(fēng)格定位，確定H5頁面應(yīng)體現(xiàn)品牌的哪些信息，以及如何對品牌進(jìn)行宣傳與推廣。產(chǎn)品分析了解產(chǎn)品的功能、賣點和定位，確定H5頁面應(yīng)展示產(chǎn)品的哪些方面，如何提升更多用戶對產(chǎn)品的了解程度，以及如何營銷和推廣產(chǎn)品。1.4.2策劃內(nèi)容2.規(guī)劃結(jié)構(gòu)和內(nèi)容根據(jù)內(nèi)容大綱，對主要內(nèi)容的相關(guān)性和從屬關(guān)系進(jìn)行組織和劃分，考慮哪些內(nèi)容需要在同一頁展示，哪些內(nèi)容可以分散到不同頁面中展示。根據(jù)內(nèi)容的數(shù)量和相關(guān)性，確定H5頁面的結(jié)構(gòu)和頁數(shù)?？紤]整體的敘述邏輯和頁面間的銜接性，確保用戶能夠順利瀏覽和理解每一頁內(nèi)容。根據(jù)設(shè)計目的和內(nèi)容需求，確定每一頁的重點和焦點，明確每一頁要傳達(dá)的主題和核心信息。根據(jù)內(nèi)容大綱和設(shè)計需求，決定每項內(nèi)容的呈現(xiàn)形式，如文本、圖片、視頻、動畫等，考慮如何利用空間和媒體元素來傳達(dá)信息，以吸引用戶的注意力。組織相關(guān)內(nèi)容劃分頁面結(jié)構(gòu)確定每一頁的核心內(nèi)容決定內(nèi)容的呈現(xiàn)形式1.4.2策劃內(nèi)容3.選擇內(nèi)容風(fēng)格選擇合適的風(fēng)格能夠提升H5頁面的吸引力、可讀性和用戶體驗。不同的內(nèi)容其適合的風(fēng)格存在差別，設(shè)計師可以從目標(biāo)用戶和品牌的需求等方面進(jìn)行考慮。另外，不同風(fēng)格的設(shè)計效果不同，設(shè)計師應(yīng)注意選擇合適的表現(xiàn)方式，如扁平化風(fēng)格強調(diào)簡潔和平面化，常采用簡單、明快的圖形和色塊來表現(xiàn)。1.4.2策劃內(nèi)容4.組織和布局內(nèi)容設(shè)計師常通過軟件或手繪的方式繪制H5頁面原型圖，在繪制原型圖的過程中，設(shè)計師還可與企業(yè)管理者、產(chǎn)品管理者、內(nèi)容策劃者等溝通，確保在進(jìn)行H5頁面的設(shè)計時能夠更加全面地了解設(shè)計內(nèi)容、設(shè)計難點和設(shè)計周期等情況。1.4.3搜集素材完成原型圖的繪制后，需要根據(jù)原型圖標(biāo)注的內(nèi)容來搜集素材，常見的素材有文案、圖片、視頻、音效等。通常來說，與企業(yè)產(chǎn)品和活動相關(guān)的文字、圖片、視頻等資源，主要由企業(yè)提供，設(shè)計師也可以前往企業(yè)進(jìn)行拍攝與錄制等；頁面設(shè)計的裝飾素材、美化素材，如頁面背景、按鈕、圖標(biāo)等素材，可以通過網(wǎng)絡(luò)下載，或由設(shè)計師自行設(shè)計。1.4.4進(jìn)行頁面設(shè)計在Mugeda中選擇合適的模板，并將之前搜集的素材添加到編輯器中，替換模板內(nèi)容。使用模板設(shè)計H5頁面使用圖像工具設(shè)計H5頁面直接使用Mugeda設(shè)計H5頁面使用圖像工具設(shè)計H5頁面時多使用Photoshop、Illustrator等。在設(shè)計時可根據(jù)原型圖的要求繪制頁面，再將完成后的頁面導(dǎo)入Mugeda中。Mugeda是一款專業(yè)的H5編輯器，設(shè)計師可直接在其中使用各種工具繪制和調(diào)整圖形，添加媒體文件與文字等，完成H5頁面的設(shè)計。1.4.5進(jìn)行交互設(shè)計使用模板設(shè)計的H5頁面，大多已經(jīng)包含交互效果。而對于使用圖像工具或直接使用Mugeda設(shè)計的H5頁面，則要根據(jù)需求依次對頁面中的元素添加動畫、音效、互動等，使其具有交互效果。在Mugeda中為節(jié)約用水H5頁面添加預(yù)設(shè)動畫1.4.6生成和發(fā)布H5完成H5的交互設(shè)計后，即可預(yù)覽完成后的效果。若需要將H5發(fā)布到微信或網(wǎng)頁中，可在發(fā)布頁面通過二維碼或鏈接的方式生成與發(fā)布H5。節(jié)約用水H5廣告的發(fā)布頁面祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第2章Mugeda的基本操作H5頁面設(shè)計（Mugeda版）（微課版）2.1初識Mugedea2.2新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.1.1認(rèn)識Mugeda平臺Mugeda除了可用于H5的制作外，還可用于一站式制作有關(guān)App、微信公眾號、網(wǎng)頁等的內(nèi)容，以及編輯與處理圖片、視頻、數(shù)據(jù)圖表等素材，充分滿足大部分內(nèi)容生產(chǎn)者的需求。Mugeda內(nèi)置功能強大的API，擁有業(yè)界較強的動畫編輯能力和較為自由的創(chuàng)作空間，設(shè)計師和團(tuán)隊在瀏覽器中就可以直接使用Mugeda創(chuàng)建表現(xiàn)力豐富的交互動畫，高效地完成H5的制作發(fā)布、賬號管理、協(xié)同工作、數(shù)據(jù)收集等。2.1.2Mugeda的優(yōu)勢和功能Mugeda的操作界面干凈、簡潔，設(shè)計師易上手，學(xué)習(xí)成本不高。操作簡單提供可視化制作工具支持跨平臺Mugeda提供了直觀的可視化制作工具，讓設(shè)計師可以在不編寫代碼的情況下，通過拖曳、調(diào)整屬性和設(shè)置參數(shù)等簡單的操作，完成復(fù)雜的交互設(shè)計。Mugeda制作的H5作品可在多種平臺和設(shè)備上播放，設(shè)計師可通過生成二維碼或者導(dǎo)出發(fā)布的方式，將作品分享給其他人，讓他們可以隨時隨地瀏覽H5作品。1.Mugeda的優(yōu)勢2.1.2Mugeda的優(yōu)勢和功能2.Mugeda的功能云計算功能矢量造型功能動畫設(shè)計功能導(dǎo)出功能企業(yè)賬號和團(tuán)隊管理功能2.2初識Mugedea2.1新建、管理和發(fā)布H52.3模板管理與素材管理2.4Mugeda中的H5編輯器界面2.2.1新建H5頁面登錄Mugeda后，在工作臺首頁的左側(cè)導(dǎo)航窗格中，單擊“新建作品”按鈕，在打開的下拉列表中羅列了可新建的作品類目。選擇“H5（專業(yè)版編輯器）”選項后，將自動打開Mugeda的H5編輯器界面，并自動打開“新建”對話框，其中羅列了常用的H5頁面尺寸，若需要重新自定義尺寸，可在“自定義”欄中輸入W和H的數(shù)值，然后單擊“創(chuàng)建”按鈕，完成新建操作。01022.2.2管理H5作品1.新建文件夾在“H5作品”頁面中單擊“新建文件夾”按鈕，打開“新建文件夾”對話框。在該對話框的“文件夾名稱”文本框中輸入文件夾名稱，單擊“確定”按鈕。然后，可發(fā)現(xiàn)在作品的左側(cè)有一個新建的文件夾。2.2.2管理H5作品2.移動H5作品選擇要移動的H5作品，此時可發(fā)現(xiàn)選擇的H5作品的左上角的復(fù)選框呈選中狀態(tài)，此時在頁面右側(cè)將出現(xiàn)“移動到”按鈕，單擊該按鈕，打開“移動H5”對話框，在其中選擇目標(biāo)文件夾，單擊“確定”按鈕。此時將出現(xiàn)“提示”對話框，提示是否進(jìn)行移動操作，單擊“確定”按鈕，可發(fā)現(xiàn)H5作品已經(jīng)移動到選擇的目標(biāo)文件夾中。2.2.2管理H5作品3.重命名H5作品為了便于識別H5作品，可對其進(jìn)行重命名操作。選擇要重命名的H5作品，單擊右下角的按鈕，此時可發(fā)現(xiàn)名稱欄呈可編輯狀態(tài)，在其中輸入新的名稱，然后單擊其他空白區(qū)域，完成重命名操作。2.2.2管理H5作品4.刪除H5作品選擇要刪除的H5作品，單擊作品上方的按鈕，或直接單擊頁面右上角的按“刪除”鈕，會打開“刪除項目”對話框，單擊“確定”按鈕，完成刪除操作。2.2.3發(fā)布H5作品發(fā)布H5作品查看發(fā)布結(jié)果任何作品在第一次發(fā)布時都將顯示發(fā)布進(jìn)度，發(fā)布成功后顯示“發(fā)布成功！”提示，并會在“發(fā)布地址”欄中顯示作品的地址。2.3初識Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.4Mugeda中的H5編輯器界面2.3.1將H5作品轉(zhuǎn)換為模板在“我的作品”頁面中選擇要轉(zhuǎn)換為模板的H5作品，單擊按鈕，按鈕下方會彈出下拉列表，選擇“轉(zhuǎn)為私有模板”選項，彈出模板轉(zhuǎn)換成功提示對話框，單擊“查看”按鈕，進(jìn)入“我的模板”頁面，查看新生成的模板。2.3.2模板管理預(yù)覽模板選擇需要預(yù)覽的模板，單擊“預(yù)覽”按鈕，可在打開的頁面中預(yù)覽模板效果。編輯模板選擇需要編輯的模板，單擊“使用”按鈕，打開“選擇編輯器”對話框。然后根據(jù)需要選擇對應(yīng)的編輯方式，即可進(jìn)入編輯頁面中編輯模板。共享模板選擇需要共享的模板，單擊其下方的“共享”超鏈接，在打開的提示對話框中單擊“確認(rèn)”按鈕，即可在團(tuán)隊與企業(yè)賬號內(nèi)部成員之間共享該模板。2.3.3素材管理編輯素材選擇需要編輯的素材，單擊按鈕，打開“編輯圖片文件”頁面，在其中可對素材進(jìn)行刪除、打開、選擇、裁剪、旋轉(zhuǎn)、導(dǎo)出等操作。編輯文件夾在“素材庫”頁面中，單擊“新建文件夾”按鈕，可新建一個文件夾。若要編輯文件夾，可單擊選中的文件夾右側(cè)的按鈕，利用彈出的下拉列表中的選項進(jìn)行添加子文件夾、編輯文件夾名、刪除文件夾等操作。2.4初識Mugedea2.1新建、管理和發(fā)布H52.2模板管理與素材管理2.3Mugeda中的H5編輯器界面2.4.1菜單欄1.“文件”菜單項“文件”菜單項中包括對H5頁面進(jìn)行管理和對文件資源進(jìn)行基本處理的命令。2.“編輯”菜單項“編輯”菜單項中包括H5頁面基本編輯操作的相關(guān)命令，設(shè)計師可通過這些命令增強H5頁面效果，從而創(chuàng)造出豐富多樣的交互內(nèi)容。2.4.1菜單欄3.“視圖”菜單項“視圖”菜單項主要用于調(diào)整Mugeda各個窗口（面板）的顯示與隱藏情況?！?.“動畫”菜單項動畫”菜單項主要用于對動畫進(jìn)行插入與編輯操作。VS2.4.1菜單欄“拓展工具”菜單項主要用于對第三方應(yīng)用軟件進(jìn)行相關(guān)操作?！皫椭辈藛雾椫饕糜跒樵O(shè)計師提供有關(guān)Mugeda的幫助和支持。5.“拓展工具”菜單項6.“幫助”菜單項2.4.2工具欄工具欄默認(rèn)位于菜單欄的下方，主要展示了常用工具。2.4.3“時間線”面板“時間線”面板是用來對畫面進(jìn)行精確控制的操作區(qū)，可通過把圖層、圖像、幀按時間進(jìn)行組合和播放來形成動畫?！皶r間線”面板可用于制作多種動畫，如關(guān)鍵幀動畫、進(jìn)度動畫、變形動畫、遮罩動畫等，是制作動畫的關(guān)鍵。2.4.4工具箱工具箱集合了H5頁面設(shè)計過程中頻繁使用的工具，包含選擇、媒體、繪制、預(yù)置考題、控件、表單、微信七大工具板塊。2.4.5“頁面編輯”面板“頁面編輯”面板主要用于展示H5作品各頁面的縮略圖，以及進(jìn)行插入、刪除、預(yù)覽和復(fù)制等操作。2.4.6頁面編輯區(qū)頁面編輯區(qū)位于“頁面編輯”面板和“屬性”面板之間，頁面編輯區(qū)主要由頁面適配方式、手機型號、舞臺縮放和舞臺4個部分組成。2.4.6頁面編輯區(qū)1.頁面適配方式選擇好適配方式后，頁面編輯區(qū)中會出現(xiàn)一個方框指示指定設(shè)備的安全框。如果舞臺上添加的內(nèi)容超出了指定設(shè)備的安全框，方框會顯示為紅色，以提示設(shè)計師需要調(diào)整元素位置；如果沒有元素超出安全框，方框會顯示為綠色。為了方便設(shè)計師更好地編輯內(nèi)容，防止內(nèi)容在設(shè)備上超出可見顯示范圍（安全框），Mugeda提供了顯示屏幕適配范圍的輔助線。設(shè)計師只需單擊頁面適配方式右側(cè)的下拉按鈕，在打開的下拉列表中將顯示各種適配方式，設(shè)計師可根據(jù)手機型號選擇合適的適配方式。2.4.6頁面編輯區(qū)2.手機型號“無”選項的效果“華為Mate40”選項的安全框效果“小米2”選項的安全框效果2.4.6頁面編輯區(qū)3.舞臺縮放4.舞臺舞臺位于頁面編輯區(qū)中間，是設(shè)計H5頁面的核心區(qū)域，也是H5作品的顯示窗口。發(fā)布H5作品后，用戶只能瀏覽舞臺中的內(nèi)容，而舞臺四周灰色區(qū)域中的內(nèi)容將不會顯示。VS舞臺縮放主要用于調(diào)整舞臺的縮放比例，方便H5設(shè)計師在創(chuàng)作過程中觀察作品局部的細(xì)節(jié)或查看H5作品的整體效果。2.4.7“屬性”面板基礎(chǔ)屬性主要用于對基礎(chǔ)屬性，如作品尺寸、填充色、邊框色、邊框類型、透明度、透視度等進(jìn)行設(shè)置。高級屬性主要用于對預(yù)置動畫、濾鏡、動作等進(jìn)行設(shè)置。專有屬性主要用于設(shè)置在舞臺上所選元素的特有屬性，所選元素不同，其屬性內(nèi)容也存在區(qū)別。祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第3章繪制與調(diào)整圖形H5頁面設(shè)計（Mugeda版）（微課版）3.1繪制圖形3.2調(diào)整圖形3.3圖形的排列與組合3.1.1直線繪制直線繪制斜線繪制豎線繪制直線后，在右側(cè)的“屬性”面板中可設(shè)置直線的基本屬性，包括長、寬、高，以及填充顏色、位置等。除此之外，在“端點”下拉列表中可設(shè)置端點樣式，包括尖角、圓角、方角。3.1.2矩形繪制矩繪制正方形矩形可用作H5頁面的背景裝飾，增強頁面的美感和層次感；也可用于繪制圖表和展示進(jìn)度條；還可用作圖片或文字的容器，以方便在頁面中凸顯圖片和文字。在工具箱中選擇“矩形”工具或按【R】鍵，在舞臺上按住鼠標(biāo)左鍵不放并向某個方向拖曳可繪制矩形。如果拖曳的同時按住Shift】鍵，可繪制正方形。3.1.3橢圓繪制圓“OPPOR9s拍照體驗季”H5頁面效果橢圓可以用來強調(diào)H5頁面中的重點內(nèi)容或元素，也可作為背景或是裝飾元素以提升頁面美觀度。在工具箱中選擇“橢圓”工具或按【E】鍵，在舞臺上按住鼠標(biāo)左鍵不放并拖曳至某個方向可繪制橢圓，如果拖曳的同時按住【Shift】鍵，可繪制圓形。該頁面采用圓形作為基本框架，將主要內(nèi)容放在圓形內(nèi)使視覺效果更加集中。3.1.4圓角矩形繪制圓角矩形并設(shè)置專有屬性在工具箱中選擇“圓角矩形”工具或是按【O】鍵，在舞臺上按住鼠標(biāo)左鍵不放并拖曳至某個方向可繪制圓角矩形。繪制完成后，在右側(cè)的“屬性”面板中，除了可設(shè)置基本屬性如長、寬、高、填充色、邊框色、邊框類型等外，還可在“專有屬性”欄中設(shè)置圓角半徑、背景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、端點、接合等。3.1.5多邊形選擇“多邊形”工具或按【P】鍵，在舞臺上按住鼠標(biāo)左鍵不放并拖曳，可繪制多邊形。多邊形可用來強調(diào)H5頁面中的關(guān)鍵區(qū)域及高亮交互元素，常用于頁面背景的制作。繪制完成后，同樣可以在右側(cè)的“屬性”面板中設(shè)置多邊形的屬性，其設(shè)置方法與其他圖形類似。3.1.6曲線使用“曲線”工具可繪制各種帶有弧度的圖形，如彎曲的河流、月亮等圖形；也可繪制圖表，如折線圖、曲線圖、雷達(dá)圖等，獨特的曲線形狀能起到提高辨識度和美觀度的作用。在工具箱中選擇“曲線”工具或按【C】鍵，在舞臺中單擊確定起點，將鼠標(biāo)指針移動到線段的終點位置，按住鼠標(biāo)左鍵不放，進(jìn)行拖動將出現(xiàn)控制柄，拖動控制柄可調(diào)整所繪線段的弧度，使其形成曲線效果。3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（1）新建文件（2）繪制橢圓（3）設(shè)置寬和高3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（4）調(diào)整顏色（5）繪制曲線（6）取消邊框效果3.1.7實戰(zhàn)案例：制作旅行網(wǎng)圖標(biāo)（7）繪制并調(diào)整山脈形狀的顏色（8）繪制輪船形狀（9）繪制其他圖形3.2繪制圖形3.1調(diào)整圖形3.3圖形的排列與組合3.2.1調(diào)整圖形平滑度在Mugeda中調(diào)整圖形平滑度時可先選擇需要調(diào)整的圖形，然后編輯圖形的節(jié)點。使用“選擇”工具在舞臺中單擊想要調(diào)整的圖形即可選擇該圖形，然后選擇“節(jié)點”工具，此時可發(fā)現(xiàn)選擇的圖形將顯示所有的節(jié)點。調(diào)整圖形平滑度還可通過重置、刪除和添加節(jié)點來完成，選擇要編輯的節(jié)點，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“節(jié)點”命令，在彈出的子菜單中羅列了“重置選中節(jié)點”“刪除選中節(jié)點”“添加節(jié)點（細(xì)分）”3種命令。3.2.2變換圖形形態(tài)重置選中的節(jié)點刪除選中的節(jié)點添加節(jié)點3.2.3實戰(zhàn)案例：繪制小貓形狀（1）繪制小貓的大致輪廓（2）填充顏色并重置選中節(jié)點（3）調(diào)整冰添加節(jié)點3.2.3實戰(zhàn)案例：繪制小貓形狀（4）繪制小貓耳朵（5）繪制小貓眼睛（6）繪制其他細(xì)節(jié)3.3繪制圖形3.1調(diào)整圖形3.2圖形的排列與組合3.3.1排列使用Mugeda的排列功能可以調(diào)整圖形的上下順序。只需選擇要排列的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“排列”命令，在彈出的子菜單中羅列了“上移一層”“下移一層”“移至頂層”“移至底層”命令，根據(jù)需要選擇排列命令即可調(diào)整圖形排列順序。3.3.2對齊選擇需要對齊的圖形（2個及以上），單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“對齊”命令，在彈出的子菜單中選擇相應(yīng)的對齊命令即可進(jìn)行對齊；或選擇【編輯】/【對齊】命令，在彈出的子菜單中選擇對齊命令，也可對齊圖形。3.3.3變形選擇需要變形的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“變形”命令；或選擇【編輯】/【變形】命令，在彈出的子菜單中選擇相應(yīng)的變形命令即可進(jìn)行變形操作3.3.4組合選擇同一個圖層中需要組合的圖形，選擇【對象】/【組】/【組合】命令，或按【Ctrl+G】組合鍵，或單擊鼠標(biāo)右鍵后在彈出的快捷菜單中選擇【組】/【組合】命令，即可組合所選對象。組合后單擊該組中的任何一個對象，都將選擇該組的所有對象。除此之外，若需要重新編輯組合中的圖形，可選擇【對象】/【組】/【取消組合】命令，取消圖形組合。3.3.5合并合并就是對兩個或兩個以上的圖形（注意該圖形主要指在Mugeda中繪制的可編輯圖形）進(jìn)行合并、相交或裁剪處理，使其成為一個新的圖形。選中兩個或兩個以上的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“合并”命令，在彈出的子菜單中羅列了“合并”“相交”“用上層物體裁剪”“用下層物體裁剪”4個命令。3.3.5合并合并相交用上層物體裁剪用下層物體裁剪3.3.6實戰(zhàn)案例：繪制音樂圖標(biāo)（1）繪制形狀并用上層物體裁剪（2）繪制圓角矩形并用上層物體裁剪（3）翻轉(zhuǎn)圖形并繪制不同大小的矩形，對齊冰復(fù)制和移動矩形祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字現(xiàn)代

編著技術(shù)數(shù)字第4章添加媒體文件與文字H5頁面設(shè)計（Mugeda版）（微課版）4.1添加媒體文件4.2輸入與編輯文字4.1.1添加圖片批量上傳：單擊“批量上傳”選項卡，將要上傳的多個圖片拖曳到“批量上傳”選項卡下的空白處，此時空白處將會出現(xiàn)綠色虛線框，釋放鼠標(biāo)即可添加圖片，稍等片刻便可在空白處查看添加的圖片。選擇【文件】/【導(dǎo)入】/【圖片（PNG/JPG/GIF/SVG）】命令，或選擇“導(dǎo)入圖片”工具。4.1.1添加圖片掃碼上傳輸入網(wǎng)址單擊“輸入網(wǎng)址”選項卡，在地址欄中輸入要上傳的圖片文件鏈接，單擊“抓取”按鈕，彈出提示對話框，單擊“確定”按鈕。單擊“掃碼上傳”選項卡，使用手機或者其他移動終端掃描出現(xiàn)的二維碼，然后在移動終端中選擇需要上傳的圖片，單擊“確定”按鈕，即可將移動終端中的圖片上傳到素材庫中。4.1.2添加音頻/音效在Mugeda中添加音頻/音效主要使用“導(dǎo)入聲音”工具，選擇該工具后，將自動打開“素材庫”對話框，選擇要添加的音頻/音效，單擊“添加”按鈕。4.1.3添加視頻在Mugeda中添加視頻可選擇“導(dǎo)入視頻”工具，將打開“素材庫”對話框，選擇要添加的視頻，然后單擊“添加”按鈕，完成視頻的添加。4.1.4添加幻燈片選擇“幻燈片”工具，然后在舞臺上拖曳鼠標(biāo)，繪制出一個幻燈片圖形，選擇該圖形，在“屬性”面板中可設(shè)置幻燈片的寬度、高度、透明度等，在“專有屬性”欄中可設(shè)置幻燈片的展示方向、顯示方式、自動播放，以及添加圖片列表等。4.1.5添加網(wǎng)頁選擇“網(wǎng)頁”工具，然后在舞臺上拖曳鼠標(biāo)，繪制出一個網(wǎng)頁圖形，選擇該圖形，在“屬性”面板中可設(shè)置網(wǎng)頁的寬度、高度、透明度等，在“專有屬性”欄的“網(wǎng)頁地址”輸入框內(nèi)輸入網(wǎng)址可添加網(wǎng)頁。添加網(wǎng)頁后，單擊工具欄的“內(nèi)容共享”按鈕，用手機掃描出現(xiàn)的二維碼，即可查看網(wǎng)頁效果4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面①添加文件夾②上傳并添加背景圖片4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面③上傳音樂④添加新頁面⑤調(diào)整圖片后繪制幻燈片圖形4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面⑥添加幻燈片⑦選擇幻燈片⑧添加視頻⑨添加圖片4.1.6實戰(zhàn)案例：制作旅行宣傳H5頁面預(yù)覽效果4.1.7添加圖表①使用圖表工具繪制矩形框

②顯示曲線圖表

③編輯圖表數(shù)據(jù)4.1.7添加圖表④選擇圖表類型

⑤設(shè)置圖表內(nèi)容4.1.8添加虛擬現(xiàn)實在工具箱中選擇“虛擬現(xiàn)實”工具，在舞臺上拖動鼠標(biāo)，繪制一個虛擬現(xiàn)實圖形，然后會自動打開“導(dǎo)入全景虛擬場景”對話框。4.1.9添加直播在工具箱中選擇“直播”工具，在舞臺上拖曳鼠標(biāo)，繪制一個直播圖形，選中直播圖形，在“屬性”面板“專有屬性”欄的“直播地址”輸入框中輸入直播地址（僅支持手機播放直播流內(nèi)容，PC端無法直接預(yù)覽）。4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面①添加素材并新建頁面②添加場景③設(shè)置場景1熱點4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面⑤調(diào)整圖片大?、尢砑訄D表并選擇圖表類型④設(shè)置場景2熱點4.1.10實戰(zhàn)案例：制作年中總結(jié)H5頁面⑧添加直播⑦設(shè)置圖表內(nèi)容添加媒體文件4.14.2輸入與編輯文字4.2.1輸入文字在Mugeda中輸入文字可先選擇“文字”工具，在舞臺中單擊，將出現(xiàn)文本框。刪除文本框中的默認(rèn)內(nèi)容“Text”，即可輸入需要的文字內(nèi)容，如輸入“大會開始”文字。輸入文字后，在文本框以外的舞臺任意位置單擊以結(jié)束編輯狀態(tài)，文字將被完整地顯示出來。4.2.2編輯文字設(shè)置預(yù)置文本、文字樣式、字體、大小、垂直對齊、文字超出時、行高、字間距等，都可通過“屬性”面板中的“專有屬性”欄進(jìn)行操作。此外，在“字體”下拉列表中向上拖動右側(cè)的滑塊，將出現(xiàn)“云字體”選項，單擊“選擇云字體”按鈕，即可上傳或選擇使用云字體（僅支持TTF格式）。4.2.3實戰(zhàn)案例：制作七夕節(jié)H5頁面①輸入文字②調(diào)整文字屬性③拖動文字調(diào)整點4.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面④復(fù)制并修改文字⑤輸入并編輯文字⑥直排顯示文字現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第5章幀動畫與動畫技術(shù)H5頁面設(shè)計（Mugeda版）（微課版）5.1幀動畫5.2特型動畫5.3預(yù)置動畫5.1.1幀的基本類型播放標(biāo)記：該標(biāo)記是一條黃色的指示線，主要有兩個作用，一是瀏覽動畫，二是選擇指定的幀。幀編號：用于提示當(dāng)前幀數(shù)，每10幀顯示一個編號。幀刻度：每一個刻度代表一個幀。5.1.1幀的基本類型關(guān)鍵幀關(guān)鍵幀是指在動畫播放過程中，定義了動畫關(guān)鍵變化環(huán)節(jié)的幀。關(guān)鍵幀在“時間線”面板中以黑色小圓表示?？瞻钻P(guān)鍵幀空白關(guān)鍵幀就是關(guān)鍵幀中沒有任何對象，它主要用于在關(guān)鍵幀與關(guān)鍵幀之間形成間隔?？瞻钻P(guān)鍵幀在“時間線”面板中以白色小圓表示，若在空白關(guān)鍵幀中添加內(nèi)容，該空白關(guān)鍵幀將會變?yōu)殛P(guān)鍵幀。普通幀普通幀是指常用幀，它在“時間線”面板中以灰色方塊表示，具有過濾和延長內(nèi)容顯示的功能。普通幀越多，關(guān)鍵幀與關(guān)鍵幀之間的過渡就越緩慢。0102035.1.2幀的基本操作1.插入幀插入關(guān)鍵幀插入普通幀單擊想要插入普通幀的位置，選擇【動畫】/【插入幀】命令，或按【F5】鍵。單擊想要插入關(guān)鍵幀的位置，選擇【動畫】/【插入關(guān)鍵幀】命令，或按【F6】鍵。2.選擇幀編輯幀前，需要選擇該幀。若要選擇一個幀，可以單擊該幀將其選中。若要選擇多個連續(xù)的幀，可以拖動鼠標(biāo)框選。5.1.2幀的基本操作選擇要復(fù)制的幀后，可以通過【動畫】/【復(fù)制幀】命令，或按【Ctrl+C】組合鍵復(fù)制幀；定位鼠標(biāo)指針到需要粘貼的位置后，再通過【動畫】/【粘貼幀】命令，或按【Ctrl+V】組合鍵粘貼幀。3.復(fù)制幀、粘貼幀4.刪除幀選擇要刪除的幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除幀（可多選）”命令，或按【Ctrl+F5】組合鍵，可刪除普通幀；選擇“刪除關(guān)鍵幀（可多選）”命令，或按【Ctrl+F6】組合鍵，可刪除關(guān)鍵幀。5.1.3關(guān)鍵幀動畫關(guān)鍵幀動畫是通過設(shè)定動畫的起點幀和終點幀兩個關(guān)鍵幀，然后通過軟件自動生成動畫過程的動畫形式。制作時在終點幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入關(guān)鍵幀動畫”命令，此時起點幀和終點幀之間的區(qū)域?qū)⒊示G色顯示，然后通過調(diào)整終點幀或起點幀上的圖形，可生成連續(xù)的動畫效果，而起點幀和終點幀的中間區(qū)域為過渡幀。5.1.4序列幀動畫序列幀動畫是把多張靜態(tài)圖片按指定順序播放，使畫面具有連貫性的動畫。單擊需要添加序列幀動畫的幀位置，打開“素材庫”對話框，勾選“全選”“以序列幀形式添加”復(fù)選框，單擊“添加”按鈕，此時舞臺中將生成序列幀動畫。5.1.5實戰(zhàn)案例：制作汽車公司H5進(jìn)入頁和首頁①添加序列幀動畫素材并查看效果②復(fù)制并粘貼關(guān)鍵幀5.1.5實戰(zhàn)案例：制作汽車公司H5進(jìn)入頁和首頁③添加圖層⑤調(diào)整文字④設(shè)置文字專有屬性5.1.5實戰(zhàn)案例：制作汽車公司H5進(jìn)入頁和首頁⑥新建頁面⑧輸入并設(shè)置文字⑦添加背景幀動畫5.15.2特型動畫5.3預(yù)置動畫5.2.1元件動畫元件動畫就是將這些元件看作一個一個的“零件”，然后用這些“零件”進(jìn)行拼裝，從而快速組成完整的動畫。制作元件動畫的方法為：選擇要轉(zhuǎn)換為元件的圖形，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“轉(zhuǎn)換為元件”命令，將圖形轉(zhuǎn)換為元件。雙擊元件，進(jìn)入該元件的編輯頁面，在其中可編輯元件中的內(nèi)容。打開“元件”面板，在其中可進(jìn)行元件的新建、復(fù)制、導(dǎo)入、導(dǎo)出以及新建文件夾、導(dǎo)出至元件庫、編輯元件、添加到繪畫板、刪除元件等操作。5.2.2路徑動畫路徑動畫即對象沿著繪制的路徑運動的動畫。在制作時需先在舞臺中添加一個圖形，然后在“時間線”面板中進(jìn)行路徑的編輯。①②③④⑤⑥⑦5.2.3進(jìn)度動畫進(jìn)度動畫主要按照圖形的繪制順序或文字的編輯順序來實現(xiàn)動態(tài)效果，可實現(xiàn)繪制線條過程的效果和文字打字機的效果。在制作時可繪制多個線性圖形，然后在“時間線”面板中確定路徑的終點幀，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入進(jìn)度動畫”命令。繪制圖形后插入進(jìn)度動畫5.2.4變形動畫1.形狀變形動畫形狀變形動畫可以實現(xiàn)將一個形狀變成另一個形狀的動畫效果。以將矩形變?yōu)槿切螢槔上仁褂谩熬匦巍惫ぞ呃L制矩形，然后確定終點幀，并在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入變形動畫”命令。選中終點幀，使用“節(jié)點”工具拖動矩形上方的錨點，使矩形變成三角形。5.2.4變形動畫2.文字變形動畫文字變形動畫可以讓文字實現(xiàn)由聚集到展開的效果，其主要通過設(shè)置關(guān)鍵幀上文本屬性的變化，如字體顏色、字體大小、行間距、字間距等，從而達(dá)到文字變形的效果。只需使用“文字”工具在舞臺上輸入文字，然后確定終點幀，并在該幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入變形動畫”命令。在“屬性”面板的“專有屬性”欄中調(diào)整字體、大小、對齊方式等。5.2.5遮罩動畫遮罩層用于控制顯示的范圍及形狀，被遮罩層則主要顯示動畫內(nèi)容，如遮罩層中是一個橢圓圖形。被遮罩層是一個卡通場景，則用戶只能看到這個橢圓中所顯示的卡通場景效果制作遮罩動畫時，可先選擇需要作為遮罩層的圖層，在“時間線”面板中單擊“轉(zhuǎn)為遮罩層”按鈕，將普通圖層轉(zhuǎn)換為遮罩層；若需要只顯示被遮罩層，可單擊“添加到遮罩層”按鈕；若要顯示遮罩內(nèi)容，可單擊“切換遮罩顯示”按鈕。5.2.6實戰(zhàn)案例：制作H5加載動畫①導(dǎo)入素材并調(diào)整順序②轉(zhuǎn)換圖形為元件③向下拖曳圖形④插入關(guān)鍵幀動畫5.2.6實戰(zhàn)案例：制作H5加載動畫⑤調(diào)整氣球并插入關(guān)鍵幀動畫⑥調(diào)整氣球并插入關(guān)鍵幀動畫⑦插入其他關(guān)鍵幀動畫5.2.6實戰(zhàn)案例：制作H5加載動畫⑧自定義路徑⑨調(diào)整路徑線⑩縮小文字5.2.6實戰(zhàn)案例：制作H5加載動畫?新建“遮罩”圖層并插入關(guān)鍵幀?繪制圓角矩形并粘貼圖層?新建遮罩圖層后插入關(guān)鍵幀動畫?移動被遮罩元素?轉(zhuǎn)為遮罩層5.2.6實戰(zhàn)案例：制作H5加載動畫?輸入文字和插入進(jìn)度動畫?調(diào)整其他幀?添加濾鏡5.3幀動畫5.1特型動畫5.2預(yù)置動畫5.3.1添加預(yù)置動畫在“屬性”面板中單擊“預(yù)置動畫”后的圖標(biāo)，可打開“添加預(yù)置動畫”面板，其中羅列了進(jìn)入、強調(diào)、退出3種動畫類型。添加預(yù)置動畫需要先選擇添加預(yù)置動畫的素材，單擊素材右側(cè)的圖標(biāo)。將鼠標(biāo)指針移動到預(yù)置動畫選項上可在舞臺上查看該動畫效果，單擊選擇預(yù)置動畫，便可完成預(yù)置動畫的添加，添加后在素材右側(cè)將會顯示該動畫的藍(lán)色圖標(biāo)5.3.2設(shè)置預(yù)置動畫添加預(yù)置動畫后，單擊素材右側(cè)的藍(lán)色圖標(biāo)，或單擊“屬性”面板“高級屬性”欄中所選擇動畫右側(cè)的按鈕，可打開“動畫選項”對話框，在其中設(shè)置時長、延遲和方向后，單擊“確定”按鈕。除此之外，在“高級屬性”欄中拖動“自動播放”“循環(huán)播放”右側(cè)的滑塊還可設(shè)置播放方式。5.3.3自定義預(yù)置動畫若Mugeda自帶的預(yù)置動畫不符合設(shè)計需求，可先在“時間線”面板中制作需要的動畫效果，然后在完成后的動畫的過渡幀上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“保存為預(yù)置動畫”命令。打開“修改計時”對話框，在其中可設(shè)置時長、延遲等信息，單擊按鈕。再次打開“添加預(yù)置動畫”面板，便可在“自定義”選項卡中查看添加的預(yù)置動畫。5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁①選擇預(yù)置動畫②通過“屬性”面板設(shè)置預(yù)置動畫5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁③選擇“螺旋進(jìn)入”預(yù)置動畫④設(shè)置動畫選項5.3.4實戰(zhàn)案例：制作元旦H5頁面首頁⑤效果預(yù)覽現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第6章行為、觸發(fā)條件與控件H5頁面設(shè)計（Mugeda版）（微課版）6.1行為與觸發(fā)條件6.2控件6.1.1認(rèn)識行為在H5頁面中，行為指的是用戶與頁面之間的交互和響應(yīng)。H5頁面通常包含了各種動態(tài)元素和交互功能，通過用戶的操作或事件觸發(fā)，頁面會產(chǎn)生相應(yīng)的響應(yīng)和動作，這些響應(yīng)和動作就是頁面中的行為。在Mugeda中，行為主要用于解決幀鏈接和頁鏈接的問題，以及物體與物體之間的關(guān)聯(lián)問題。點擊按鈕滑動頁面播放音/視頻6.1.2編輯行為在Mugeda中，行為可以添加到任意元素上，設(shè)計師只需選擇任意的圖形，單擊按鈕或按【X】鍵，打開“編輯行為”對話框，在左側(cè)的“行為”欄中羅列了常用的行為選項。6.1.3設(shè)置觸發(fā)條件選擇符合需求的行為后，在“編輯行為”對話框的右側(cè)可設(shè)置行為的觸發(fā)條件。觸發(fā)條件與行為相對應(yīng)，是控制行為的方式。①選擇觸發(fā)條件②設(shè)置參數(shù)“播放聲音”行為的觸發(fā)條件設(shè)置6.1.4實戰(zhàn)案例：為游戲H5首頁按鈕添加行為①添加素材②編輯行為③添加行為后的效果行為與觸發(fā)條件6.16.2控件6.2.1陀螺儀控件在工具箱中選擇“陀螺儀”工具，在舞臺中單擊，會出現(xiàn)陀螺儀”工具的圖標(biāo)和一串?dāng)?shù)字，系統(tǒng)自動將陀螺儀命名為“陀螺儀1”。在其“屬性”面板中可調(diào)整陀螺儀的各個屬性，改變其顏色、文本內(nèi)容、陀螺儀類型等。陀螺儀控件主要用于制作外力感應(yīng)交互效果，如當(dāng)用戶晃動手機時，H5頁面中的物體將跟隨手機的晃動角度進(jìn)行運動。添加陀螺儀陀螺儀的旋轉(zhuǎn)類型6.2.2點贊控件選擇繪制的愛心圖案，在“屬性”面板中可設(shè)置其屬性，包括文字位置、文字顏色、文字大小、不允許撤銷、允許多次點贊、隱藏提交提示、多次點贊間隔、每次增加數(shù)等。選擇工具箱中的“點贊”工具，在舞臺中拖動鼠標(biāo)，確定點贊按鈕的尺寸后，釋放鼠標(biāo)左鍵，將會出現(xiàn)一個示意圖案（一般為愛心圖案），示意圖案上方的數(shù)字為點贊的數(shù)量。6.2.2點贊控件如果需要直觀地顯示點贊數(shù)量，可先在舞臺上添加一個文本框，在文本框中輸入數(shù)值“0”，選擇繪制的愛心圖案，單擊右側(cè)的按鈕，打開“編輯行為”對話框。在左側(cè)選擇“屬性控制”展開列表中的“改變元素屬性”選項，然后設(shè)置觸發(fā)條件為“屬性改變”。單擊按鈕，打開“參數(shù)”對話框，在其中設(shè)置對應(yīng)的參數(shù)，如右圖所示。6.2.3擦玻璃控件選擇繪制的形狀。在“屬性”面板的“專有屬性”欄中可設(shè)置其各種屬性，如背景圖片、前景圖片、圖片位置、圖片尺寸、水平偏移、垂直偏移、橡皮擦大小、剩余比例、端點、接合等。在Mugeda中使用擦玻璃控件可通過手指拖動形成玻璃擦除效果。只需選擇“擦玻璃”工具，在舞臺中拖動鼠標(biāo)，確定玻璃區(qū)域。6.2.3擦玻璃控件另外，擦玻璃控件還有特有的觸發(fā)條件，選擇繪制的擦玻璃控件形狀，單擊按鈕，打開“編輯行為”對話框，在左側(cè)任意選擇觸發(fā)行為，如選擇“下一頁”選項，在右側(cè)“觸發(fā)條件”下拉列表中選擇“擦玻璃完成”選項。6.2.4投票控件選擇“投票”工具，在舞臺中單擊，將自動打開“投票數(shù)據(jù)設(shè)置”對話框，在其中可設(shè)置相關(guān)參數(shù)，完成后單擊“確定”按鈕。此時，數(shù)據(jù)庫中會生成一個投票數(shù)據(jù)點，同時會在舞臺中生成投票控件。投票控件是一個后臺數(shù)據(jù)組件，添加后會在服務(wù)器中生成一個投票數(shù)據(jù)記錄，完成記錄后還需要添加投票行為才能提交投票結(jié)果。6.2.4投票控件選擇設(shè)置的投票對象，單擊按鈕，打開“編輯行為”對話框，選擇“數(shù)據(jù)服務(wù)”展開列表中的“投票”選項，在右側(cè)單擊

按鈕，打開“參數(shù)”對話框，在其中設(shè)置投票行為。由于在預(yù)覽H5頁面時投票控件不會顯示，為了方便用戶查看投票的內(nèi)容，通常還需要單獨設(shè)置每個投票對象。設(shè)置投票對象設(shè)置參數(shù)6.2.5抽獎控件選擇“抽獎”工具，在舞臺中單擊，將自動打開“抽獎設(shè)置”對話框，在其中可對抽獎狀態(tài)、活動期間抽獎次數(shù)、再次抽獎等待時間、抽獎模式、獎項設(shè)置、領(lǐng)獎碼等進(jìn)行設(shè)置。6.2.5抽獎控件選擇繪制的抽獎按鈕，單擊按鈕，打開“編輯行為”對話框，選擇左側(cè)“數(shù)據(jù)服務(wù)”展開列表中的“抽獎”選項，在右側(cè)的“觸發(fā)條件”下拉列表中選擇“點擊”選項，單擊按鈕，打開“參數(shù)”對話框，對抽獎行為進(jìn)行設(shè)置由于抽獎控件是一個后臺數(shù)據(jù)組件，不會在舞臺上顯示，添加后會在服務(wù)器中生成一個抽獎數(shù)據(jù)記錄，設(shè)計師需要為該組件添加抽獎行為才能提交抽獎結(jié)果。添加抽獎設(shè)置參數(shù)6.2.6其他控件用于創(chuàng)建定時事件和動畫。通過使用定時器控件，可以設(shè)定一個時間間隔，在該時間間隔內(nèi)執(zhí)行特定的操作或觸發(fā)某些事件。選擇“定時器”工具，在舞臺中單擊創(chuàng)建控件，在右側(cè)的“屬性”面板中可設(shè)置定時器的參數(shù)，如精度、記時方向、是否循環(huán)、不可見時、長度等。定時器繪畫板用于創(chuàng)建繪畫效果的控件，可以為用戶提供自由繪畫的體驗，并能夠?qū)崿F(xiàn)交互和多樣化的創(chuàng)作內(nèi)容。選擇“繪畫板”工具，在舞臺中拖動鼠標(biāo)，繪制出一個繪畫板，通過調(diào)整“調(diào)整繪畫板屬性”行為，可設(shè)置繪畫板、畫筆線寬、畫筆顏色等，提升繪畫板的可操作性。用于在一些特定內(nèi)容（如教育類測試課件等）中允許用戶連接兩個元素，從而實現(xiàn)特定的交互效果。選擇“連線”工具，在舞臺中拖動鼠標(biāo)，可繪制連線。連線6.2.6其他控件用戶可指定一個拖放容器來接收拖放元素，以實現(xiàn)特定的交互效果。選擇“拖放容器”工具，在舞臺中拖動鼠標(biāo)，繪制拖放容器控件，在右側(cè)的“屬性”面板中可設(shè)置放置提示、提示顏色、允許多次拖放、自動復(fù)位等。用于在一些特定內(nèi)容（如測試類H5頁面等）中設(shè)置特定時間。選擇“計時器”工具，在舞臺中單擊可生成計時器內(nèi)容，在右側(cè)的“屬性”面板中可設(shè)置計時方向、自動開始、計時方式、顯示格式、時間長度、長度單位、是否循環(huán)等。用于按照一定規(guī)則對參加活動的用戶進(jìn)行排序并顯示結(jié)果。選擇“排行榜”工具，在舞臺中單擊，打開“排行榜”對話框，在其中可設(shè)置上榜數(shù)目、上榜分?jǐn)?shù)、分?jǐn)?shù)規(guī)則等。用于設(shè)置簽到內(nèi)容，包括簽到的開始時間、結(jié)束時間、簽到規(guī)則等。選擇“簽到”工具，在舞臺中單擊，打開“簽到”對話框，在其中可設(shè)置開始日期、結(jié)束日期、簽到規(guī)則等。拖放容器計時器排行榜簽到6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面①添加素材②縮小文字③制作按鈕6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面④編輯行為⑤繪制形狀6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面⑥設(shè)置擦除圖片⑦設(shè)置投票數(shù)據(jù)6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面⑧完成投票插件添加⑨輸入文字⑩設(shè)置點擊行為的事件參數(shù)6.2.7實戰(zhàn)案例：制作企業(yè)員工評選H5頁面預(yù)覽效果現(xiàn)代

編著技術(shù)數(shù)字祝學(xué)習(xí)進(jìn)步??！H5頁面設(shè)計（Mugeda版）（微課版）現(xiàn)代

編著技術(shù)數(shù)字第7章關(guān)聯(lián)與表單H5頁面設(shè)計（Mugeda版）（微課版）7.1關(guān)聯(lián)7.2表單7.1.1舞臺動畫關(guān)聯(lián)關(guān)聯(lián)即互相貫連，是指事物之間互相牽連和影響。在Mugeda中，關(guān)聯(lián)是指通過連接和交互來建立頁面元素之間的邏輯關(guān)系和互動效果。設(shè)計師使用Mugeda的關(guān)聯(lián)功能可實現(xiàn)更復(fù)雜和豐富的H5頁面效果。7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)①添加素材②設(shè)置圖標(biāo)拖動方式7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)③啟用關(guān)聯(lián)④設(shè)置關(guān)聯(lián)內(nèi)容⑤編輯行為7.1.2實戰(zhàn)案例：為H5頁面添加舞臺動畫關(guān)聯(lián)⑥查看效果7.1.3元件動畫關(guān)聯(lián)選擇需要關(guān)聯(lián)的元件，在“屬性”面板中設(shè)置該元件的名稱，然后設(shè)置“拖動”方式，再設(shè)置“動畫關(guān)聯(lián)”為“啟用”，單擊右側(cè)的“關(guān)聯(lián)”按鈕，在其下方將顯示關(guān)聯(lián)的相關(guān)屬性，在其中可設(shè)置元件動畫關(guān)聯(lián)的參數(shù)。7.1.4基礎(chǔ)屬性關(guān)聯(lián)1.公式關(guān)聯(lián)在“關(guān)聯(lián)方式”下拉列表中選擇“公式關(guān)聯(lián)”選項，在下方將出現(xiàn)“被控量=”選項，在右側(cè)的文本框中可通過輸入關(guān)聯(lián)公式來完成公式關(guān)聯(lián)，如設(shè)置“被控量=”為“關(guān)聯(lián)屬性”，以右圖所示的數(shù)據(jù)為例，被控對象的值等于“文字1”的“旋轉(zhuǎn)角度Z”的值。同理，若設(shè)置“被控量=”為“關(guān)聯(lián)屬性×3”，即被控對象的值等于“文字1”的“旋轉(zhuǎn)角度Z”值的3倍。7.1.4基礎(chǔ)屬性關(guān)聯(lián)2.自動關(guān)聯(lián)自動關(guān)聯(lián)是一種更加便捷的方式，可自動對關(guān)聯(lián)屬性和被控制對象進(jìn)行關(guān)聯(lián)，如通過拖動進(jìn)度條來控制動畫的播放。①繪制關(guān)聯(lián)對象②設(shè)置關(guān)聯(lián)屬性③查看效果關(guān)聯(lián)7.17.2表單7.2.1自定義表單1.輸入框輸入框是表單中的一種常見組件，提供了一個可編輯的區(qū)域，用戶可以在其中輸入相關(guān)信息以響應(yīng)特定