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

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

匠心实践新媒体视觉设计实战2.4H5中的信息可视化设计H5中的信息可视化可以理解为是将用户的需求从文字转变为图像、通过设计排版让内容清晰易懂，借助H5互动工具让用户与内容产生互动链接。步骤内容需要使用的工具明确需求理解文字内容word拆分关键词提炼文本内容word确定设计风格文字、图形、色彩的风格设计网站、PS制作动效借助H5在线设计平台兔展、易企秀文

本图

像可视化交互2.5.1H5交互动态页面设计与制作-明确设计需求上海微系统所2020X-Lab实验室招聘启事H5设计实战2020X-Lab是中国科学院上海微系统与信息技术研究所发起的创新型国际化基础科研平台，旨在推动前沿基础研究，为青年科研人员提供自主宽松的创新环境。此项目的设计需求为提升用户体验，优化招聘信息传达效率，同时塑造2020X-Lab科技前沿、创新开放的品牌形象。2.5.2H5交互动态页面设计与制作-确定设计风格确立设计风格时可以先在Pinterest、Behance、站酷等设计网站收集优秀参考案例，然后再根据需求方自身的品牌调性来确立设计风格。在该实战项目中，我们根据需求方提供的文字信息能够提取的关键词为：前沿科技、科研竞赛、创新年轻设计参考文字内容2.5.3H5交互动态页面设计与制作-完成设计草案根据前面总结出的设计思路、以及在Printerest、站酷等设计网站上收集到的素材，在photoshop中对h5页面进行排版设计在photoshop中进行标题排版设计2.5.4H5交互动态页面设计与制作-完成设计草案根据前面总结出的设计思路、以及在Printerest、站酷等设计网站上收集到的素材，在photoshop中对h5页面进行排版设计2.5.5H5交互动态页面设计与制作-完成设计草案本例将使用易企秀生成H5页面。在生成过程中可添加动画，使页面更具吸引力。选择工作台点击去制作2.5.6H5交互动态页面设计与制作-完成设计草案选择H5制作选择从空白创建2.5.7H5交互动态页面设计与制作-完成设计草案选择导入psd文件选择需要导入的文件2.5.8H5交互动态页面设计与制作-完成设计草案导入后调整页面位置选择需要设置动效的图层设置动效2.5.9H5交互动态页面设计与制作-完成设计草案在易企秀中添加链接跳转，点击首页的“关于我们”组件，在组件设置中选择点击跳转-跳转外链，复制进跳转的网址。2.5.10H5交互动态页面设计与制作-完成设计草案设置招聘详情页的页面切换，选择02页招聘详情页，选择组件-轮播图2.5.11H5交互动态页面设计与制作-完成设计草案将组件默认的素材更换为我们在photoshop中设计好了的页面，在易企秀平台中可以直接选择多种动效切换效果。2.5.12H5交互动态页面设计与制作-完成设计草案页面动效设置完成之后，我们再接着给每个页面之间添加转场动效设计人员在设计转场动效时，需要注意以下3点。转场时间要快转场过渡自然转场动效样式要与H5内容相符2.5.13H5交互动态页面设计与制作-完成设计草案选择“设置当前页面翻页”2.5.14H5交互动态页面设计与制作-完成设计草案选择合适的翻页形式预览动效2.5.15H5交互动态页面设计与制作-完成设计草案页面动效设置完成之后就可以直接点击发布按钮，易企秀会自动生成链接以及二维