H5設(shè)計商業(yè)實戰(zhàn)案例教程H5設(shè)計概述/認(rèn)識易企秀/創(chuàng)建H5作品/H5制作的高級功能應(yīng)用/爆款H5頁面設(shè)計/H5創(chuàng)意互動設(shè)計/H5實戰(zhàn)案例張婷

編著人民郵電出版社212.1

易企秀簡介22.2認(rèn)識易企秀H5編輯器32.3作品尺寸與屏幕適配42.4

課后習(xí)題：制作浪漫粉紫色賀卡Chapters第2章

認(rèn)識易企秀12Section2.1易企秀簡介本節(jié)介紹易企秀的基礎(chǔ)知識。Section2.1.1什么是易企秀易企秀，全稱是北京中網(wǎng)易企秀科技有限公司，是一家基于內(nèi)容創(chuàng)意設(shè)計的數(shù)字輕營銷科技公司。易企秀借助大數(shù)據(jù)、人工智能、云計算等技術(shù)，打造一體化創(chuàng)意設(shè)計營銷平臺，涵蓋H5、海報、長頁、表單、互動、視頻等創(chuàng)意設(shè)計工具，幫助用戶在短時間內(nèi)做出炫酷的創(chuàng)意作品，滿足組織、團(tuán)隊和個人的全媒體、多場景在線創(chuàng)意設(shè)計和營銷增長需求。用戶在易企秀上進(jìn)行簡單操作就可以快速生成H5、海報圖片、營銷長頁、問卷表單、互動抽獎小游戲、特效視頻等，并可以一鍵分享到社交媒體。易企秀平臺提供了從創(chuàng)意策劃、設(shè)計制作、分發(fā)推廣、數(shù)據(jù)分析到客戶管理的“一條龍”營銷閉環(huán)服務(wù)。Section2.1.2賬號注冊和登錄方式如何注冊易企秀賬號。進(jìn)入易企秀官網(wǎng)。Section2.1.2賬號注冊和登錄方式用戶可以單擊右上角的“注冊”按鈕，通過微信掃碼注冊；也可以單擊“其他注冊方式”，選擇用手機(jī)號、郵箱、QQ、微博、釘釘注冊。用戶選擇最適合自己的注冊方式注冊好以后，登錄所注冊的賬號，即可進(jìn)入自己的易企秀賬號管理界面。Section2.1.3賬號類型和產(chǎn)品矩陣易企秀賬號可以分為秀客賬號、普通個人賬號、會員企業(yè)賬號。易企秀的產(chǎn)品矩陣包含H5、海報、長頁、表單、互動、視頻等。Section2.1.4認(rèn)識易企秀導(dǎo)航欄及商城產(chǎn)品易企秀的導(dǎo)航欄包括精選推薦、創(chuàng)意設(shè)計、其他這三大板塊?！熬x推薦”包含工作臺、創(chuàng)意設(shè)計等功能；“創(chuàng)意設(shè)計”包含H5、海報、長頁、表單、互動、電子畫冊、視頻、營銷工具等功能；“其他”包含幫助中心、案例中心、正版素材、成為設(shè)計師、免費領(lǐng)模板等功能。單擊這些功能對應(yīng)的選項可以直接打開制作所需要的模板、學(xué)習(xí)制作模板、了解各個品類的需求等。Section2.1.4認(rèn)識易企秀導(dǎo)航欄及商城產(chǎn)品易企秀商城產(chǎn)品種類齊全，集合了各種風(fēng)格、各行業(yè)模板。它為用戶提供了方便、快捷的設(shè)計與制作平臺，讓新手用戶也能輕松上手，幾分鐘即可制作一個完整的H5。Section2.1.5易企秀PC端和移動端的區(qū)別易企秀有PC（PersonalComputer，個人計算機(jī)）端和手機(jī)移動端，用戶可以根據(jù)需要選擇適合自己的制作工具。1．易企秀PC端易企秀PC端界面一目了然，主要針對企業(yè)用戶和使用計算機(jī)方便的用戶，相對移動端來說，更加簡單、容易操作，且搜索范圍廣，用戶更容易挑選到適合自己的產(chǎn)品?？偟膩碚f，易企秀PC端功能更齊全、操作更簡單，對于有計算機(jī)基礎(chǔ)的人很友好。2．易企秀移動端易企秀移動端分為Android和iOS系統(tǒng)，用戶可以根據(jù)自己的手機(jī)系統(tǒng)，直接在應(yīng)用商城里下載易企秀。易企秀移動端主要針對使用計算機(jī)不方便的用戶，比如外出的用戶可以直接使用手機(jī)登錄賬號，查看客戶數(shù)據(jù)、制作模板，非常方便。易企秀移動端的缺點是制作上有局限性，操作稍有不慎，就會移動素材。所以在易企秀移動端進(jìn)行制作的時候一定要熟悉并靈活運用編輯器中的隱藏按鈕，這樣操作會更加方便快捷。Section2.2認(rèn)識易企秀H5編輯器本節(jié)介紹易企秀H5編輯器的基本功能。Section2.2.1作品創(chuàng)建功能選擇空白創(chuàng)建里的H5“空白創(chuàng)建”，即可進(jìn)入空白的編輯器制作H5。創(chuàng)建H5的時候，可以選擇在工作臺或者作品中創(chuàng)建豎版H5或橫版H5。我們常用的是豎版H5。Section2.2.2左側(cè)導(dǎo)航欄功能選擇合適的產(chǎn)品創(chuàng)建、進(jìn)入H5編輯器以后，就可以制作一個H5作品了。H5編輯器左側(cè)導(dǎo)航欄包含“圖文”“單頁”“裝飾”“藝術(shù)字”“我的”。Section2.2.2左側(cè)導(dǎo)航欄功能“圖文”對應(yīng)易企秀的圖文模板，其中包含裝飾性文字、圖片，可根據(jù)自己的需要選擇合適的圖文排版?！皢雾摗卑琀5模板中比較優(yōu)秀的單頁模板，可以直接使用。值得一提的是，“單頁”中的“我的”在后期制作的時候會經(jīng)常用到。如果擔(dān)心自己制作的單頁模板丟失或者需要保存以便下次使用，都可存儲在“我的”里，需要使用的時候可以直接調(diào)用。Section2.2.2左側(cè)導(dǎo)航欄功能“裝飾”包含圖標(biāo)、形狀等裝飾性素材?！八囆g(shù)字”對于新手用戶很友好，其中包含的文字具有一些簡單的設(shè)計效果，新手用戶需要時直接選擇一種藝術(shù)字，將內(nèi)容更換為自己選定的文字即可。“我的”“我的申請”中都是用戶自行上傳的素材及收藏的組件，一般情況下，使用次數(shù)不多。Section2.2.3各項組件功能H5編輯器頂部是制作H5可能用到的所有組件，包含“文本”“圖片”“音樂”“視頻”“組件”“智能組件”“特效”。Section2.2.3各項組件功能單擊“文本”可以直接創(chuàng)建一個文本圖層并打開“組件設(shè)置”對話框，在該對話框中可以設(shè)置文字的字體、字號、顏色等。Section2.2.3各項組件功能單擊“圖片”可以打開“圖片庫”，其中包含易企秀官方提供的圖片和形狀素材，以及用戶自行上傳的圖片等。Section2.2.3各項組件功能單擊“音樂”可以打開“音樂庫”。制作H5時選擇合適的音樂很重要，在“音樂庫”中可以直接選擇易企秀官方提供的音樂素材，也可以自行上傳音樂。Section2.2.3各項組件功能單擊“視頻”可以打開“視頻庫”。用戶可以在H5頁面中添加關(guān)于本企業(yè)的視頻，也可以在H5頁面中添加易企秀官方提供的視頻素材。Section2.2.3各項組件功能“組件”包含很多功能，較常用的有撥打電話、地圖、快閃、一鏡到底、頭像、留言板、彈幕等。只有將組件使用得當(dāng)，H5作品才有精髓和靈魂。Section2.2.3各項組件功能“智能組件”包含一些小創(chuàng)意、強(qiáng)互動的功能，有紅包、抽獎、打賞、在線收款等。Section2.2.3各項組件功能通過“特效”可以給H5設(shè)置入場互動，可以添加涂抹、指紋、重力感應(yīng)、砸玻璃等效果，還可以給頁面添加一些氛圍感極強(qiáng)的飄落物，比如福字、雪花、楓葉、花瓣等，提高頁面靈動性。Section2.2.4作品分享設(shè)置及分享樣式1．作品分享設(shè)置制作好H5以后，單擊“預(yù)覽和設(shè)置”按鈕，打開“分享設(shè)置”界面，在該界面中可以給作品設(shè)置封面、標(biāo)題及描述。用戶在將作品分享給別人的時候，界面中會顯示設(shè)置好的封面、標(biāo)題及描述。Section2.2.4作品分享設(shè)置及分享樣式2．分享樣式在“分享樣式”界面中選擇“設(shè)置微信分享時樣式”，可以設(shè)置分享者、分享次數(shù)、分享人位置等。設(shè)置好分享樣式并發(fā)布，就可以顯示自己的微信昵稱、分享次數(shù)及分享人位置。Section2.2.5保存與發(fā)布1．保存在制作H5的時候，要養(yǎng)成隨時保存的習(xí)慣，以避免由于網(wǎng)絡(luò)和易企秀系統(tǒng)出現(xiàn)問題，導(dǎo)致制作的H5丟失。單擊右上角的“保存”按鈕即可保存。2．發(fā)布制作好H5，即作品的所有標(biāo)題、副標(biāo)題、音樂等都設(shè)置好以后，單擊“發(fā)布”按鈕就可以將作品分享出去。用戶可以在制作H5的過程中保存及發(fā)布作品，以便隨時用手機(jī)預(yù)覽自己的作品。當(dāng)然，作品發(fā)布后仍可以修改，待修改完成再發(fā)布。Section2.2.6頁面設(shè)置、圖層管理、頁面管理在“頁面設(shè)置”中，可以設(shè)置背景顏色、背景疊加，可以選擇是否將背景應(yīng)用于所有頁面，還可以設(shè)置頁面濾鏡等。“圖層管理”中顯示了本頁面所有的圖層，包括文本圖層及圖片圖層?！绊撁婀芾怼笔钦麄€H5所有頁面的集合，可以直接拖曳頁面以調(diào)整各個頁面的位置。Section2.3作品尺寸與屏幕適配本節(jié)介紹H5頁面的作品尺寸與屏幕適配的相關(guān)知識。Section2.3.1作品尺寸通過易企秀制作的H5分為兩種版式——豎版與橫版。一般使用豎版H5，效果如圖2-39所示。豎版H5的尺寸一般為640px×1060px，針對iPhoneX機(jī)型，尺寸為640px×1240px。用戶可以先在Photoshop（下文簡稱PS）中進(jìn)行設(shè)計，然后直接在易企秀編輯器中上傳PS源文件。注意，必須將PS源文件里制作的一些效果柵格化，否則在將文件上傳到編輯器的過程中效果可能會丟失。橫版H5的尺寸同樣一般為640px×1060px，針對iPhoneX機(jī)型，尺寸為640px×1240px。Section2.3.2文件大小和文件模式為保證上傳速度，PSD文件的大小不能超過30MB，圖層不能超過30個，并且每個圖層的大小不能超過5MB。在制作的時候一定要仔細(xì)把控文件的大小，避免超出規(guī)定文件大小，導(dǎo)致出現(xiàn)文件無法上傳或者顯示不全的問題。文件模式必須是RGB/8通道模式。在制作好PSD文件后，一定要把各個圖層、各種素材、文字制作的疊加效果等柵格化或者對圖層進(jìn)行合并操作，以保證最佳的上傳速度和最好的單個素材瀏覽效果。Section2.3.3識別文件中的文字上傳可識別文字的PSD文件后，原PSD文件中含文字的圖片可能會被轉(zhuǎn)化為文本格式。若字體庫中不包含原PSD文件中的文字字體，可能會自動使用默認(rèn)的字體顯示文字。Section2.3.4常規(guī)頁面及長頁面常規(guī)頁面對應(yīng)匹配手機(jī)屏幕尺寸的展示方法，如圖2-41所示。長頁面對應(yīng)可以向下滑動以瀏覽、查看更多內(nèi)容（也就是一頁到底）的展示方法，用戶可以根據(jù)自己需要展示的內(nèi)容及設(shè)計調(diào)整頁面長度。Section2.4課后習(xí)題：制作浪漫粉紫色賀卡本案例可應(yīng)用于表白賀卡設(shè)計、表白相冊展示等。資源位置素材位置素材文件>CH02>2.4課后習(xí)題：制作浪漫粉紫色賀卡視頻位置視頻文件>CH02>2.4課