高二机工社UI设计项目教程课件学习单元7项目3：H5页面动效设计

学习单元7——动效设计. UI设计项目教程 单元概述 动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为现在Web、APP产品交互设计和界面设计必不可少的元素。为什么要为产品设计动效呢？首先必须弄清楚这个问题，才能让我们设计的动效更符合产品实际，给产品带来实质性的提升。除了欢迎动画外，其他常见动效通常是由多个基础动效组合而成，动效必须帮助用户高效地完成当前任务，给予用户明确的指引和提示。 学习目标 1．能够掌握常见基础动效的制作思路 2．通过项目制作，学习动效的制作方法及作用 3．通过学习动效设计，了解动效的应用设计和动效评判 H5页面动效设计 项目3. THREE 项目描述 E-Design设计公司近期承接某购物网站的“双11网购狂欢节”H5页面动效设计项目。“双11网购狂欢节”的H5页面动效属于商业促销类动效设计。项目总监将该动效设计任务分配给α组由Emma负责，由助理设计师Marry协助。Emma将工作分为两个任务阶段：设计前期准备，H5页面动效制作。 UI设计项目教程 任务1：设计前期准备 α小组设计师Emma接到任务后，明确任务目标，收集同类型H5页面动效，之后根据本项目的需求设计静态H5页面，最后进行修改以及细节调整。本项目的页面为手机横屏显示的效果。 UI设计项目教程 必备知识 H5页面设计尺寸 H5页面设计尺寸为740×1136px，能够填充不同手机屏幕边缘的区域，确保不会露白；内框区域640×960px，这个区域里的内容可以确保在所有手机屏幕上完整显示。 UI设计项目教程 任务拓展 打开手机，从个人手机中挑选出不同的H5的页面，观察它们的特点并进行分析。 UI设计项目教程 任务2：H5页面动效制作 动效效果 UI设计项目教程 必备知识 H5页面动效制作常用工具 除了我们所熟悉的Photoshop软件，还有几款比较常用的H5页面动效制作工具，分别为搜狐快海报、微信初页、Maka、百度H5平台、兔展、易企秀、人人秀等，其中有很多都是可以免费使用的，可供大家学习参考。 UI设计项目教程 项目拓展 搜集节日类H5页面动效，设计并使用Photoshop软件制作最终动效。 UI设计项目教程 实战强化 “汽车之家”是一款集看车、买车、用车于一体的汽车类APP，主要包括“最新车讯”“火热论坛”“底价购车”“用车保养”4个模块，APP的界面效果如图所示。 $