02H5交互动态页面设计与制作-2

主讲：张玲老师新媒体视觉设计视觉传达设计专业苏州经贸职业技术学院新媒体视觉设计实战匠心实践项目六H5交互动态页面设计与制作App交互页面的设计与制作010203信息可视化设计与制作2.1H5的基础概念2.2H5的设计与制作流程2.3H5的设计规范和工具2.4H5中的信息可视化设计2.5H5交互动态页面设计与制作2.6AIGC在H5交互页面设计中的应用H5交互动态页面设计与制作02项目六

匠心实践新媒体视觉设计实战2.3.1H5的设计规范-浏览器的选择H5的许多制作工具都是通过浏览器直接进行操作的，因此选择合适的浏览器十分重要。QQ浏览器QQ浏览器是腾讯公司开发的一款浏览器，具有风格简约、架构精巧、稳定易用的特点。Safari浏览器Safari浏览器是macOS中的浏览器，该浏览器无论是在Mac、PC还是iPodtouch上都能运行。Chrome浏览器Chrome浏览器是谷歌公司开发的一款开源浏览器，具有稳定性高、安全性高、流畅度高、兼容性强的特点，常用于H5的制作。2.3.2H5的设计规范-H5的常用设计尺寸在进行H5设计时，不同工具软件显示的尺寸会存在区别，如MAKA的全屏尺寸为640像素×1240像素，H5的基本尺寸为640像素×1040像素等。由于H5编辑器都存在自动配置手机型号的能力，因此在设计时需根据所选择的编辑器进行尺寸的设置。2.3.3H5的设计规范-H5页面的安全区页面安全区指整个页面的可视窗口范围，即页面的“版心”，处于页面安全区的内容不受手机上侧圆角和下侧小黑条的影响。2.3.4H5的设计工具-H5的元素设计工具Photoshop简称“PS”，它是平面设计、建筑装修设计、三维动画制作、网页设计的必备软件之一，具有使用方便、功能强大的特点，可以高效地进行图片处理与制作。Illustrator简称“AI”，它是一款矢量绘画软件，具有矢量动画设计、页面设计、网站制作、位图编辑和网页动画制作等多种功能，适合设计小型项目或大型的复杂项目。多应用于广告设计、商标设计、网页制作、插图绘制、排版输出等诸多领域。AfterEffects简称“AE”，是一款图形视频处理软件，具有视频处理、动画制作、多层剪辑等多种功能。AfterEffects可以帮助用户高效且精确地创建动态图形和动画特效。此外，结合使用AfterEffects与其他Adobe软件还可完成2D和3D合成，以及动画的特效制作。Audition即AdobeAudition，是多音轨编辑工具，支持128条音轨、多种音频格式和特效，并且可对音频文件进行修改、合并。Audition功能强大，可轻松创建音乐、制作广播短片等。2.3.5H5的设计工具-H5的元素设计工具在H5页面中常常会使用矢量素材营造与美化场景。本例将在Photoshop中绘制矢量人物。确定第一点创建头部轮廓2.3.6H5的设计工具-H5的元素设计工具调整轮廓建立选区2.3.7H5的设计工具-H5的元素设计工具填充轮廓描边轮廓2.3.8H5的设计工具-H5的元素设计工具绘制脸部中间轮廓绘制头发轮廓绘制头部其他部分2.3.9H5的设计工具-H5的元素设计工具绘制衣服部分绘制双手部分绘制彩带2.3.10H5的设计工具-H5的元素设计工具绘制衣领和衣袖处缝线绘制腮红2.3.11H5的设计工具-H5的元素设计工具打开背景素材查看完成后的效果添加矢量人物2.3.12H5的设计工具-H5的动效设计工具MAKA（码卡）是一款H5在线创作及创意工具，使用该工具可进行形象宣传、活动邀请、产品展示、活动报名等方面的设计。2.3.13H5的设计工具-H5的动效设计工具易企秀是一款基于智能内容创意设计的数字化营销工具，主要用于H5、轻设计、长页、易表单、互动、视频等各种内容的在线制作，且支持PC、App、小程序等多种端口的使用，设计人员可根据需要选择端口进行H5的制作。2.3.14H5的设计工具-H5的动效设计工具兔展定位普通用户，是微信H5页面、微场景、微页、微杂志、微信邀请函、场景应用的专制作工具。但是需要注意的是，兔展中只有很少一部分模板是免费的，大部分模板都需要付费购买。2.3.15H5的设计工具-H5的动效设计工具人人秀是一款基于H5的微场景制作工具，具有免费、简单易用、发布迅速等特点。设计人员可以通过图片、文字、音乐的形式制作H5页面场景，然后将其分享到社交平台，并能通过后台数据监测