01 H5入门知识课件

第1章H5入门知识必备H5页面设计与制作目录Contents1.1

了解H51.2

H5的策划与制作流程1.3

H5制作工具介绍1.4

优秀的H5制作秘籍1.1.1H5的定义H5这个词来自HTML5，HTML5（全称HyperTextMarkupLanguage5）即超文本标记语言，是当前世界网络上应用最为广泛的语言，也是构成网页文档的主要语言。超文本标记语言，是以一种用来描述网页的语言。“超文本”是指页面内可包含图片、链接、音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。1.1.2

H5的作用H5作为当下移动端的主流宣传方式之一，作用是非常多的，企业在不用开辟其他的网站的情况下便可以快速获得用户流量。1.实现增粉引流2.增加企业曝光率树立企业形象3.增强用户的活跃度和粘性1.1.3

H5的特点H5页面中的元素包括文字、图片、音乐、视频、链接等多种形式，其具备丰富的控件、灵活的动画特效、强大的交互应用以及数据分析功能。H5页面非常适合通过手机进行展示和分享，且灵活性高、制作周期短，因此能够实现高效率低成本的传播。1.1.4

H5适用的行业H5种类很多，并具备内容丰富、趣味性强、玩法多样化、不用下载等多重优点，可以适应各种行业的不同需求。通过对比H5模板网站的热门素材和行业分类规律，总结出的一些对H5有高频需求的行业包括：招聘、新媒体、电商、保险金融、教育培训、婚礼婚庆、地产中介、广告传媒、生活娱乐等，。1.1.5

H5应用类型常见的H5包括产品展示类、品牌传播类、活动营销类、总结报告类等。1.产品展示型2.品牌传播型3.活动营销型4.总结报告型目录Contents1.1

了解H51.2

H5的策划与制作流程1.3

H5制作工具介绍1.4

优秀的H5制作秘籍1.2.1明确设计目标在制作H5页面之前，首先需要明确制作目标。例如，是用于提高品牌知名度、推广产品、还是吸引用户注册等。同时，还需要了解目标受众的特点，如年龄、性别、职业等，明确目标和需求有助于制定更具针对性的页面设计。1.2.2内容策划设计目标确定好以后，便可以策划H5的具体内容了。1.策划方向设计者在策划内容时需要先明却方向，通常可以从内容、交互以及视觉3个方向着手。2.策划关键有了策划方向，还应该遵守策划的五个关键点：社交性、故事性、参与感、话题性、互动性。1.2.3

页面设计在设计H5页面结构时需要先确定风格，根据风格来搜集素材，设计页面结构，然后选择合适的模板或框架，设计页面内容和样式。1.确定风格2.搜集素材3.设计页面结构4.选择合适的模板或框架5.设计页面内容和样式1.2.4交互设计使用模板制作的H5通常已经包含了良好的交互效果。如果设计者是使用图像工具全新设计的H5页面，则需要添加动画、音效活动等内容。优化页面性能。通过添加交互效果和动画，可以增强页面的吸引力和用户体验。1.2.5生成与发布H5页面制作完成后，可以先对效果进行预览，然后将页面发布到线上并进行推广。可以通过二维码或链接将页面嵌入到电子商务网站、微信公众号、APP等平台中，通过各种渠道引导用户访问和使用。目录Contents1.1

了解H51.2

H5的策划与制作流程1.3

H5制作工具介绍1.4

优秀的H5制作秘籍1.3.1

图像处理工具Photoshop是一款功能强大的图像处理软件，它被广泛的应用于各种设计领域，其中也包含H5设计领域。利用Photoshop软件可以对H5页面布局进行设计，包括页面背景、图片素材、装饰素材等。在用Photoshop软件设计H5页面时，需注意页面尺寸设置。因为设计的H5页面最终是需要导入到H5制作平台中，所以在用Photoshop设计前，先了解所用H5工具规定的页面大小。以人人秀平台为例，导入PSD画布大小为640px×1240px，文件大小不超过30M。1.3.2矢量图设计工具对于制作矢量图形来说，用Illustrator软件要比Photoshop软件方便的多。因为Illustrator是一款专业的矢量设计软件，主要用于插画设计、图标设计、文字设计等方面，这些图形在H5中也是经常要用到的。用户还可使用一些便捷的矢量小工具来进行快速绘制。例如Pixso、Sketch等，这些小工具会自带很多矢量图形的模板，用户可在模板的基础上进行二次编辑，使其符合制作需求。1.3.3影视后期制作工具AfterEffects（简称AE）是一款专业的视频特效制作软件。利用AE可创建各种酷炫的视觉效果，让H5的内容更加吸睛。使用AE软件是需要有影视后期基础的，如果是零基础或者是刚入门的新手，建议可以用一些轻量化、好操作的小工具。例如，剪映就是时下较为热门的视频剪辑工具之一。1.3.4音频处理工具AdobeAudition是一款功能强大的音频处理软件。它可进行音频录制、音频编辑、声音去噪、音频转换等功能，让声音文件更好的融入到H5内容中。除此之外，GoldWave、Audacity、SoundForge等软件也可以很好的处理音频文件。1.3.5

H5制作平台利用以上工具所制作的文件最终是要导入至H5平台中，生成一份完整的H5页面才可。目前常用的H5制作平台有易企秀、人人秀、MAKA等。这类平台操作起来比较简单，适合新手使用。平台都会提供大量的模板和素材库，以节省用户制作时间。1.3.6

H5专业设计平台对于新手来说，用以上H5平台是可以套用相应的模板进行快速制作。而对于有设计基础的设计师而言，可以使用专业的H5制作平台来设计内容。例如意派Epub360、iH5等。这些平台功能比较全面，操作灵活度很高，可以更好的满足设计需求。目录Contents1.1

了解H51.2

H5的策划与制作流程1.3

H5制作工具介绍1.4

优秀的H5制作秘籍1.4.1

H5页面设计规范在开始制作H5之前，需要掌握H5的制作规范及相关的设计原则，以保证H5内容能够正常显示，同时也能够将其内容进行准确的传播。1.手机界面尺寸设置H5主要是通过移动设备来查看的，在设计H5页面时必须要在设备的物理特性和软件特性的基础上进行合理设计。以手机设备为例，目前手机设备分ios（iPhoneOperatingSystem）和Android（安卓）两种。设备类型不同，其屏幕分辨率也不同。2.H5页面设计原则在进行具体设计前，需掌握一些页面的设计原则，以便更好的传播所要表达的内容。1.4.2好的H5作品的特征优秀的H5作品应该是以内容为主，设计为辅，两者相辅相成。下面将简单的分析一下好的H5应当具备哪些特征。1.选题的受众面广2.用心的文案策划3.互动性很强4.弱化营销1.4.3设计人员应具备的能力作为一名优秀的H5设计人员，至少需要具备以下几种能力。1.创新思维能力具有创新思维是H5设计师必需具备的基本素养。2.有扎实设计表现力具有创新思