H5面创意设计课件 项目2 H5面设计的注意事项和工具

项目2H5页面设计的注意事项和工具2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训2.1.1浏览器的选择H5页面的许多制作工具都通过浏览器直接进行操作，因此选择合适的浏览器十分重要。QQ浏览器QQ浏览器是腾讯公司开发的一款浏览器，具有风格简约、架构精巧、稳定易用的特点。Safari浏览器Safari浏览器是苹果公司开发的浏览器，该浏览器无论是在Mac、iPhone还是iPad、iPodtouch上都能运行。Chrome浏览器Chrome浏览器是谷歌公司开发的一款浏览器，具有稳定性高、安全性高、流畅度高、兼容性强的特点，常用于H5页面的制作。2.1.2H5页面的常用设计尺寸H5页面的常用设计尺寸虽无绝对标准，但行业内普遍采用几种主流方案，以确保良好的跨设备适配性。目前主流的设计尺寸是750px×1334px，具备较高的清晰度和广泛兼容性，适合大多数H5活动页；另一种常见选择是640px×1136px，文件更小、加载更快，适用于对性能要求较高的场景，依然被广泛使用。此外，也有设计人员采用逻辑分辨率，如375px×667px或375px×812px，更贴合现代前端响应式开发流程。需要注意的是，H5编辑器虽然能自动配置屏幕尺寸，但在设计时还须注意背景图的设置，要避免出现黑边、白边、内容错位等情况，这会影响整个页面的美观度。为了避免这些情况，可将重要内容居中设置，并通过扫描生成二维码，在手机上预览查看的方法进行测试。2.1.3H5页面的安全区H5页面的安全区指整个页面的可视窗口范围，即页面的“版心”，处于页面安全区的内容不受手机上侧摄像头和下侧指示条的影响。下图所示的蓝色区域为H5页面在手机中的安全区。2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训2.2.1功能强大的设计工具——Photoshop设计人员常使用Photoshop制作H5页面中的图像效果等，左图所示为使用Photoshop制作H5页面。2.2.2专业的矢量图绘制工具——IllustratorIllustrator全称AdobeIllustrator，是一款矢量绘画软件，具有矢量图设计、页面设计、网站制作、位图编辑和网页动画制作等多种功能。下图所示为使用Illustrator制作H5页面。2.2.3视频特效制作工具——AfterEffectsAfterEffects全称AdobeAfterEffects，是一款图形及视频处理软件，具有视频处理、动画制作、多层剪辑等多种功能，可以帮助用户高效且精确地创建动态图形和动画特效。右图所示为使用AfterEffects制作H5页面动态效果。2.2.4音效设计制作工具——AuditionAudition全称AdobeAudition，是多音轨编辑工具，支持128条音轨、多种音频格式和特效，并且可对音频文件进行修改、合并等操作。下图所示为使用Audition制作H5页面的音效。2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训2.3.1定制推广H5页面制作工具——MAKAMAKA是一款H5页面在线创作及创意工具。使用该工具可进行形象宣传、活动邀请、产品展示、活动报名等方面的H5页面设计。MAKA是本书主要讲解的工具，其具体用法将在项目5中进行介绍。下图所示为MAKA首页。2.3.2微场景H5页面制作工具——人人秀人人秀是一款H5页面微场景制作工具，具有免费、简单易用、发布迅速等特点。人人秀的功能和模板比较单一，适合初学者使用。左图所示为人人秀制作页面。2.3.3专业H5页面制作工具——意派Epub360意派Epub360是一款专业级H5页面制作工具。该工具不仅具备丰富的动画设定、触发器设定功能，还配置了许多强大的交互组件，可满足不同的场景需求。但需要注意，意派Epub360的很多功能需要开通年度VIP或付费购买才能使用。下图所示为意派Epub360编辑页面。2.3.3专业H5页面制作工具——意派Epub360意派Epub360的主要功能和特点如下。（1）动画展示（2）触发交互（3）数据应用2.3.4在线编辑H5页面工具——iH5iH5是一款操作较为复杂的H5页面制作工具，对初学者来说可能难度较大。如果想通过iH5实现较复杂的H5页面效果，不仅需要熟练的技术，需要花费较长的时间。下图为iH5编辑页面。2.3.4在线编辑H5页面工具——iH5与其他工具相比，iH5的优势如下。综合性能强平台开放应用领域广泛2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训2.4.1图片、音视频压缩工具——格式工厂在制作H5页面的过程中，往往会用到音频、视频、图片等素材，而这些素材有时无法直接使用，可能需要转换文件格式。格式工厂是一款免费的格式转换软件，可以对音频、视频、图片等素材进行格式转换，以满足设计人员的需求。2.4.2二维码生成工具——草料二维码设计人员在进行H5设计时，常常会在其中添加二维码以减少信息沟通成本，提高营销和管理效率。下图所示为使用草料二维码生成二维码的页面。2.4.2二维码生成工具——草料二维码下面介绍草料二维码的功能。二维码生成Chrome插件二维码解码器二维码内容实时更新二维码美化二维码记录表单2.4.3手机预览设计稿工具——PSPlay设计人员经常使用Photoshop制作H5页面，而完成后PSD文件只能通过Photoshop才能打开，不能直接在手机上进行预览。PSPlay是一款通过Wi-Fi网络，能在手机等终端设备上预览、调试、保存PSD文件，并且可实现即时分享的跨终端应用。2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训2.5.1文本生成工具——DeepSeek、文心一言文心一言是百度推出的一款AI文本生成工具，它不仅能够与用户互动对话、回答问题，还能够协助用户进行创作，帮助用户高效便捷地获取信息、知识和灵感。文心一言还具备智慧绘图功能，能以图像形式表达生成的内容，设计人员可在此基础上进行H5创意设计，如右图所示。1．文心一言2.5.1文本生成工具——DeepSeek、文心一言DeepSeek是一款AI大模型，专注于通过深度学习技术来理解和生成高质量的文本内容，支持多种语言输入，适用于文案创作、文案优化、自动摘要等，其使用方法与文心一言类似，都简单易用。DeepSeek具备语义理解能力，提供深度思考和联网搜索模式，在理解语境、把握语气及准确响应用户需求方面表现出色。2．DeepSeek2.5.2图像生成工具——MidjourneyMidjourney是一款功能强大的AI工具，能快速生成各种风格的图像和视频，可帮助用户在H5页面设计和视频制作等方面设计出创新的视觉表达效果。Midjourney提供MX绘图、视频制作等功能，用户可根据不同的需求进行选择，右图所示为使用Midjourney生成H5页面背景和封面。2.5.3视频生成工具——即梦AI视频生成工具为视频创作带来很大的灵活性，简化了创作流程，也为视频素材的获取提供了新的灵感来源。下图所示为使用即梦AI生成中秋节宣传动画。2.5.4视频制作工具——剪映剪映是一款全能型视频制作工具，具备手机、平板计算机、台式计算机全平台互通特性，为用户提供从基础视频剪辑到AI智能创作的全方位一站式解决方案。下图所示为使用剪映制作视频。2.5.5音频生成工具——讯飞智作、网易天音讯飞智作是一个虚拟的“AI演播室”，具有AI配音、虚拟主播、文案创作、创意视频、AI后期等多种功能，提供声音定制、形象定制等服务，能让用户一键生成音视频内容。右图所示为使用讯飞智作制作配音。1．

讯飞智作2.5.5音频生成工具——讯飞智作、网易天音网易天音是网易推出的一站式AI音乐创作平台，具备一键写歌、AI编曲和AI作词功能，旨在提供便捷、高效的音乐创作体验，可以根据视频的内容和风格定制专属音乐。右图所示为使用网易天音生成歌曲。2．

网易天音2.5.6创意设计工具——墨刀、Pixso墨刀作为一款在线原型设计与协同工具，支持App、网站页面、可视化大屏、小程序、H5页面等多场景应用领域。右图所示为使用墨刀设计的幸运大转盘H5页面。1．

墨刀2.5.6创意设计工具——墨刀、PixsoPixso是一款集原型设计、视觉设计与项目交付于一体的在线协作设计工具，其智能组件库是设计人员进行H5页面设计的强大助力，而AI技术在其中发挥了关键作用。右图所示为使用Pixso设计原型图。2．Pixso2.1H5页面设计注意事项2.2H5页面元素设计工具2.3H5页面的设计与制作工具目录Content2.4H5页面的辅助设计工具2.5AI创意设计工具2.6项目实训实训一

使用文心一言生成中文网站中秋节H5活动方案

实训要求运用本项目所学知识，使用文心一言生成中文网站中秋节H5活动方案。完成后的参考效果如右图所示。实训一

使用文心一言生成中文网站中秋节H5活动方案制作思路（1）打开文心一言官网，在中间的文本框中输入中文网站背景、设计原因和中秋节活动要求（配套资源：\素材\项目2\中文网站背景和中秋节活动要求.txt），单击按钮。（2）稍后，页面中将显示生成结果，在其中对活动背景与目标、活动主题与核心创意、H5活动内容设计等进行了详细策划（配套资源：\效果\项目2\千仟惜中文网站中秋节H5活动方案.docx）。实训二

使用即梦AI和MAKA制作中秋节H5活动页面

实训要求运用本项目所学知识，并根据中文网站中秋节H5活动方案，使用即梦AI和MAKA制作中秋节H5活动页面。完成后的参考效果如右图所示。实训二

使用即梦AI和MAKA制作中秋节H5活动页面制作思路（1）登录即梦AI官方网站，在上方的文本框中输入“中秋节场景，中国风，嫦娥仙子手持千仟惜书卷邀约，其下方添加‘今夜月华如练，愿与君共赴千年之约’文字”提示词，设置比例为“9:16”，单击按钮，即梦AI将生成对应的内容，选择适合的场景作为背景，然后下载该图片。（2）使用相同的方法，生成长安夜宴和都市月语两个场景（配套资源：\效果\项目2\长安夜宴.png、都市月语.png），方便后期设计H5页面。（3）登录MAKA官方网站，进入MAKA首页，在左侧列表中选择“创建”选项卡，在右侧的面板中选择“翻页H5”选项，单击“创建”按钮。实训二

使用即梦AI和MAKA制作中秋节H5活动页面（4）选择“我的”选项卡，再单击“上传素材”超链接，在打开的对话框中选择保存的背景，单击“打开”按钮。（5）单击“