H5-页面设计与制作.pptx

H5初识;掌握H5的定义 了解H5的发展 了解H5的特点 熟悉H5的应用 熟悉H5的类型;H5指的是移动端上基于HTML5技术的交互动态网页，是用于移动互联网的一种新型营销工具，通过移动平台（如微信）传播。;开始阶段 引爆阶段 绽放阶段 成熟阶段;1. 开始阶段 H5的开始可以追溯到2014年，其最初的呈现状态和PPT类似，将经过简单设计的静态页面设置成滑动翻页效果，常用于婚礼邀请、企业招聘等。;2. 引爆阶段 2014年下半年，一款名为《围住神经猫》的H5小游戏，引爆了微信朋友圈，最后页面浏览量达数亿级。随后相继产生的《看你有多色》等小游戏，让H5真正的开启了引爆。;3. 绽放阶段 2015年～2016年是H5的全面绽放阶段。在这一阶段中的H5交互设计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5的意愿。 ;4. 成熟阶段 2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一种是纯视频类H5，另一种是测试类H5。;H5具有跨平台、多媒体、强互动以及易传播的特点。;H5的应用形式多样，常见的应用领域有品牌宣传、产品展示、活动推广、知识分享、新闻热点、会议邀请、企业招聘、培训招生等。;营销宣传类 知识新闻类 游戏互动类 网站应用类;1. 营销宣传类 营销宣传类H5是最常见的，它通常都是为产品、品牌以及活动做宣传推广而设计的。;2. 知识新闻类 知识新闻类H5同样比较普遍，它通常都是根据社会重大事件进行宣传新闻、普及知识的。;3. 游戏互动类 游戏互动类H5一般比较简单，在微信中点开就可以直接玩，不用安装卸载，通常多为娱乐或引流而制作。;4. 网站应用类 网站应用类H5在产品设计领域中常被称为“H5网站”，可以直接在浏览器中观看和操作，不像App那样需要安装，它通常带有大量信息及App中的部分功能。;H5的设计与制作;了解设计与制作H5的项目流程 熟悉设计与制作H5的常用软件 掌握设计与制作H5的基本规范 掌握设计与制作H5的注意事项 熟悉设计与制作H5的创意方法;设计与制作H5的项目流程可以按照前期策划、交互设计、设计执行、制作开发、测试发布以及运营推广来??行。通常大型互联网公司在制作时往往会由团队分工合作完成，受众面较窄的H5则只需要由一个综合能力较强的人员独立完成。;H5的常用软件包括前期策划、交互设计、视觉设计、动效设计、影音编辑、制作开发以及在线辅助这7类。;2.2 H5设计与制作的常用软件;H5的设计尺寸 H5的页面适配 H5的文字使用 H5的图片压缩;设计与制作H5的基本规范可以分为设计尺寸、页面适配、文字使用以及图片压缩。;有个别H5在线制作工具的有效尺寸会有些许区别。如凡科的画面最终有效尺寸是750px×1206px，其根据的是iPhone6/7/8的手机屏幕尺寸去掉导航栏和状态栏而来。而iH5默认尺寸是640px×1040px，则是根据iPhone6/7/8plus的手机屏幕尺寸去掉导航栏和状态栏又整体缩小而来。因此H5的尺寸设计需要结合最终使用的工具来进行，而分辨率都是72px。;2. H5的页面适配 H5的页面适配包括H5工具的自动适配、页面安全区的设置以及H5其他设备的处理3个方面。;（1）H5工具的自动适配 H5的在线制作工具本身就具备自动适配的功能，因此最主流的尺寸虽然是根据iPhone5的手机屏幕尺寸而来，也可以保证对于大多数手机的自动满屏适配。 ;（2）页面安全区的设置 针对于设计师而言，如果要适配如iPhoneX/XS等大屏手机，可以将背景设计得较大。而类似按钮、信息等重要内容不要放到非安全区域中，否则在小屏手机中内容会被裁掉。 ;（3）H5其他设备的处理 H5虽然具有跨平台的特点，但其主要分享设备还是依靠手机，而且如重力感应等交互效果亦不适合用计算机浏览器打开。因此，针对运用计算机浏览器观看体验不佳的H5，设计师可以为网页浏览器设置一个扫码页，引导用户用手机扫码观看。 ;3. H5的文字使用 通常500个汉字约占1KB的内存，而一张将文字导出的图片至少占10KB的内存。因此除非字体经过设计，不建议将文字以图片的形式输出。 ;4. H5的图片压缩 图片的压缩同样可以减少H5文件的大小，提升加载速度。在使用Photoshop将设计稿导出图片进行制作时，选择“存储为Web所用格式”会进行图片的压缩。 ;浏览器的选择 交互控件的使用 H5的加载优化 微信诱导分享;1. 浏览器的选择 由于H5的制作都是通过线上工具完成，因此在浏览器的选择方面一定要注意。这里建议使用谷歌浏览器，因为谷歌浏览器可以最大程度保证线上操作的顺畅。 ;2. 交互控件的使用 （1）输入框 弹出式输入框在H5中容易造成页面错位，因此尽量不要