全国服务热线 13602656525

分享一个h5几个网页设计

更新时间:2016-07-06 11:15:13
价格:¥3800/个
专业网站制作:888
专业建网站:999
专业网站建设:10000
联系电话:0755-83589234
联系手机:13602656525
联系人:阮经理
让卖家联系我
详细介绍

   专业建网站功成网络今天给大家分享一个h5几个网页设计

 

     1、延时,60秒做出生长的效果

     如果你准备发布Apple Watch,如何在5秒内立刻抓住人们的眼球?一个简单却实用的方法是让产品细节分步呈现出来,形成组装产品的生长效果。

 

     大部分产品有PSD格式的原型图,设计精美但细节繁多,导入PPT等软件进行动效处理十分麻烦。如上图,利用iH5.cn发布的新功能,能在保留所有分层结构的前提下一次性导入PSD,快速制造延时的动效。

 

     专业网站制作把PSD文件拖拽到编辑器进行上传,再为产品的部件分别添加飞入、弹跳等动效、设置动效在不同时间出现,就能模拟出产品的“生长情况”。

KEY#1:动效的延迟一开始可以控制在1-3秒,后面的间隔越来越短(并低于动效时长),还能形成重叠的动感,有利于制造现场的张紧感。

 

     2、聚焦,Duang一样的特技

  “怎么让观众把注意力集中到我想要让他们看的地方?”聚焦有两个技巧,一是把你想要突出的内容放大,二是隐藏不重要的内容。

 

 

     的展示工具Prezi用的就是第一个法子,实时放大展示重点。但它应用还不广,每到一个地方得重装一次,功能也比较有限。如上图,使用画布工具来设计好玩的“聚焦”特技的遮罩功能,能在普通浏览器中进行在线展示。

 

 

     在画布下放两张图片,一张展示图,一张PNG格式的白色苹果LOGO,把展示图的遮罩设为苹果LOGO,就有上图的效果。容易吧?如果再为图片放一个向左滑动的效果,还能制造漂移的动感。

 

KEY#2:画布的遮罩效果和设为遮罩的图片息息相关,作为遮罩的图片色彩越明亮,被遮的图片越不透明。

 

     因为作为遮罩的苹果LOGO是全白的,它显示区域内的图片才是完全不透明的。比如上面从白色到黑色的四个圆是遮罩,它的颜色越深,城堡图片对应位置的透明度越低。遮罩全黑时,城堡就不见了。

 

(注:国内很多移动端浏览器尚未支持HTML5的Canvas遮罩效果,所以它目前更适用于PC端展示。)

 

     3、演示,是调节气氛的步伐

     如果想要设计一场毫无缺漏的发布会,直接搞一场录播就行,但也失去了现场的魅力。因为可能会出现各种突发情况,现场才更刺激、更有吸引力。怎样能在展示中加入可控的“变量”来调节气氛?

 

 

 

     答案之一是演示,而且是用一些让观众自己上台,同样能轻易完成的行为。电脑上的比如简单的拖动,如上图,利用有趣的遮罩结合拖动来展示不同型号的苹果手机。

 

 

     这里应用到了遮罩强悍的“滤镜”功能,设置很简单,只是把刚才的白色苹果LOGO做成了彩色渐变,再用一张苹果手机的图片作为彩色LOGO的遮罩。这样一来,相当于保留了LOGO的颜色特征,又能利用苹果手机图片的色彩明暗变化让LOGO现出苹果手机的“原形”。

 

     这时候,把苹果LOGO图片的“拖动类型”设为任何方向,就能在展示中途随意用鼠标拖移苹果LOGO,演示为苹果手机加彩色滤镜的特技了。

KEY#3:想要实现Prezi的聚焦放大效果?使用事件工具,在一张允许拖动的图片上放个透明按钮,设置点击按钮时图片尺寸放大就行

 专业网站建设-功成网络的优势在于我们不仅仅制作网站,网站只是一个工具,关键是怎样使用这个工具,也就是说:要把网站这个工具与企业、产品、消费人群、市场、品牌形象、广告等各个方面融为一体。怎样用这个工具直接快捷地达到我们的目标。功成网络,成功在我!

 

 文章由【深圳市功成创意企业形象策划有限公司】原创,转载请注明来源:http://www.gc711.com/

联系方式

  • 地址:深圳 深圳市龙华新区民田路1980创意产业园G栋2楼
  • 邮编:518005
  • 电话:0755-83589234
  • 联系人:阮经理
  • 手机:13602656525
  • QQ:2983660879
  • Email:2983660879@qq.com
产品分类