《h5设计与制作》 课件汇总 模块1--3 H5的前世今生 ---H5的视觉套路.pptx

H5设计与制作;／H5的基本概念;H5的基本概念;聊几个有关H5的问题;Why——我们为什么要做H5;;H5基于Web的产品形态;Who——用户是谁;;What——优质H5的评判标准;需要具备以下特质;12;How——怎么做一个H5;H5究竟是什么呢;H5最显著的优势在于跨平台;;H5的诞生之路;／H5发展前史;;90年代：前Flash时代的那些事;十几年前：Flash来了;几年前：如日中天的Flash;不久以前：移动互联网时代降临;;;Newopenstandardscreatedinthemobileera,suchasHTML5,willwinonmobiledevices(andPCstoo).

移动时代的新开发标准，如HTML5，将在移动设备（及Pc设备）上获胜。

——SteveJobs

April2010;业界巨头的联合驱动;;为什么是2014;;纯静态页面;场景和故事;引入游戏;沉浸体验式的范游戏类交互式微电影;;H5设计与制作;／H5的设计流程;H5的设计流程;想要做出一个好的;;;要从不同的需求来挖掘目标背??的特点和优势;穿越故宫来看你;;90后的生活方式;;;H5设计师需要综合能力;;有代码实现;零代码实现;;H5常用的工具;／设计师使用工具;;Adobe产品线;H5领域;H5领域;H5领域;H5领域;;H5领域;;;;;H5页面设计

尺寸规范;H5页面尺寸设计需要注意哪些事项呢？;NativeAPP开发;iOS端与安卓端的主流分辨率;满足显示需求

降低用户加载图片需要的带宽。;;;H5设计与制作;／H5的原型图;H5的原型图;什么是原型图？;;;;H5设计执行的前期计划;原型图又大致可以分为3个阶段;H5的原型图;H5的原型图;;;构思原型相当于Ul设计领域的线框图与原型图的交集;快速表现原型设计方法;（二）演示原型图阶段;H5原型图应具备的因素;原型图链接关系的六大因素;;在H5，平面视觉只是一个表现分支;（一）视觉;（二）动效;（三）节奏;（四）交互;（五）声效;（六）可实施性;总结;H5的设计表现;;H5的画面表现主要分为三个层次;视觉感——传递情感;你有一条来自宫里的祝福，请查收;腾讯影业暖心H5：

致每一个被光影打动过的人;2019微博之夜;向Adobe之神祈祷;是一连串的信息内容载体

需要对所有页面进行视觉感的统一;（一）统一的背景;（二）成套的色彩和元素;形式感——打动用户的重要方法;一步一步看清韩寒;随着行业的发展，H5可以实现的形式

种类越来越多，好的形式，实际上就是

旧元素的新组合;参与感——H5设计的爆点;爱的不同定义;H5设计的表现力从易到难的金字塔演示图;H5的版式设计;;4个关键点;;;;（二）具备画面的焦点意识;2017淘宝造物节;;;1、内容分多屏，元素作统一

2、页面内容设计成长图文

3、通过动作让内容逐个呈现;1、内容分多屏，元素作统一;2、页面内容设计成长图文;3、通过动作让内容逐个呈现;