集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

H5设计基本手册

发布者: 成都达内     浏览次数:     发布时间:2017-04-20 13:27:32

成都ui培训:精华:H5设计基本手册...

  成都ui培训:精华:H5设计基本手册

      导语:H5通用设计基本手册系列,让大家深入了解H5制作上各个领域的基础知识,避免多走弯路。本文为:网页性能篇——解决H5太大的问题。

  所需工具:iH5(H5页面制作),PS(图像编辑),智图(图像压缩),格式工厂(多媒体输出)


成都达内


  现在国内说起H5,其实就是移动网页广告。作为一个希望在3秒内抓住用户眼球的东西,你可千万别用传统印刷的眼光看待它,做张图还要确保什么高画质,结果因为图片太大加载不出来。

  建议使用腾讯出品的“智图”压缩图片,能实时对比不同质量的图片效果,选择合适的压缩效果——比如把图片质量设为55。


成都达内


  还可以根据不同图片的特征,尽可能地降低体积。

  如果图片色彩数量很多(尤其是含有渐变色的),使用PS的“存储为Web所用格式”时,输出格式最好选JPG,因为这种格式可以调整压缩率,去掉一些肉眼难以识别的中间颜色。

  如果颜色不复杂,使用无损的PNG-8格式,这样既可以确保图片质量,又能保证体积小——但会损失渐变色。


成都达内


  请注意,这些图最后要放在H5里,一个通常只在手机屏幕上被看到的在线广告。所以,图片应该按照移动设备的尺寸输出,包括单独的导航、按钮等等。

  假设你做了一张1280×2080像素的图片,导入iH5编辑器,再重新调整为640×1040像素的标准设备尺寸,就浪费了3倍的体积。


成都达内


  要是这个H5所需素材量极大——比如需要很多帧图片序列,为了避免图片体积太大,你在设计的时候就得尽量使用单色。

  单色还不是说你用颜色相近的渐变色就行了,而是让颜色表中的颜色数量越少越好。

  此外,你最好把一些可以重复利用的素材,在iH5的编辑器中直接复制粘贴,避免素材二次上传导致的多次加载。


成都达内


  用iH5添加过音频的人,应该知道它的上传上限是5M的MP3。可能有执着的人上传过10多M的无损歌曲,等了半天才发现太大或格式不对…

  据说比特率(码率)在192kbps或以上时,人耳就听不出来了——而我们从网上下载的歌曲一般是128kbps。因此,你可以用格式工厂把音频的比特率转换为64kbps,能节省50%以上的体积。

  当你对比一下两个版本时,可能结果很残忍(因为听不出差别)。


成都达内


  如果你的H5最多让人停留1分钟,你为什么要保留3分多钟的BGM呢?大部分音乐都包含重复的旋律或歌词,为了节约空间最好进行裁剪。

  当然,音频最好设为循环播放,确保持续的视听氛围。


成都达内


  要让音频玩命地小,要求就比较高了。

  首先你得有比较好的乐感,可以找网上各种低于10秒的音效素材,设置同时或连续播放,形成长音频的效果。

  这种做法只适用于简单的音效,可以确保加载速度;但不能合成复杂歌曲,而且同时播放多个音频可能不被微信支持。


成都达内


  和音频的原理相似,视频也可以用格式工厂压缩,这里iH5支持的视频格式是MP4(H264编码),50M以内。

  首先,视频尺寸要和移动页面所需尺寸匹配,避免浪费体积。其次,你能通过降低视频和音频的比特率,来降低视频的体积。不过先说清楚,视频比特率越低,画质也越差……


成都达内


  想让视频再小?你可以想想它是不是太长了,把不重要的画面剪掉——和预告片的道理一样,用最少的时间打动用户。

  假设一个视频1分半钟,有10M这么大,全部缓冲就需要50秒(以250K/s计算)。那么,你就得先留出10秒左右的加载时间,再利用播放过程中的缓冲,让它不停播放。

  根据上面的思路(播放前加载时长),你可以判断你的视频到底要多短。


成都达内


  当然,你也可以利用设计先行的思维,在制作时尽量采取色彩数量较小的设计外观,依次降低视频体积。

  和图片颜色越简单、体积越小一样,你做个薛之谦参与的真人动画视频,就已经决定了它要么舍弃画质、要么延长加载时间、要么降低播放时长。

  所以,其实前阵子薛之谦和二次元结合的爆火视频,还利用了二次元画风为视频减去很大的压。

  对于H5广告而言,由于依赖于网络的加载,对网页性能的要求非常高。但上面这些优化素材体积的技巧,却经常被很多人忽视,导致成品很卡。

  今后这个系列会分为创意类型、设计风格、网页性能、广告效率、应用场景等多个方面,不定时更新。

     成都it培训哪家好,当然是成都达内培训,成都达内是一家专业的程序员培训机构,专注于成都嵌入式培训,成都web前端培训,成都.NET培训,成都大数据培训,成都会计实操培训,成都IT培训,成都编程培训等IT培训,专业的成都软件培训机构,专业师资授课,真实项目实战、零首付、低押金、名企就业

(责任编辑:成都达内)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼段35号明宇金融广场19楼1903室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市成华区建设路10号万科钻石广场B座5楼

联系电话:15023458194

公交路线:建设路中(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

20016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56