UI设计项目教程 课件 学习单元7 项目3:H页面动效设计_第1页
UI设计项目教程 课件 学习单元7 项目3:H页面动效设计_第2页
UI设计项目教程 课件 学习单元7 项目3:H页面动效设计_第3页
UI设计项目教程 课件 学习单元7 项目3:H页面动效设计_第4页
UI设计项目教程 课件 学习单元7 项目3:H页面动效设计_第5页
已阅读5页,还剩7页未读, 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

学习单元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设计项目教程实战强化

“汽车之家”是一款集看车、买车、用车于一体的

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论