咨询热线 13923776320

您所在位置: 广州兄弟连IT教育 > 学校动态> 广州HTML5全栈就业如何?

广州HTML5全栈就业如何?

发布时间:2019-09-23 广州兄弟连IT教育 访问 : 558

广州HTML5全栈就业如何?  

腾讯手机页面用户行为报告,从加载时间、页面热度、流失率、共享率、转换率等方面对H5的传输进行了分析。你看过吗?只要掌握了用户的行为习惯,为了适应治疗,许多H5传播的雷区是可以避免的。不,没关系。根据这份报告,基于设计师和开发者丹尼尔的观点,总结了以下25种H5设计技术。这篇文章有点长,需要仔细阅读。广州HTML5全栈对未来就业有帮助吗?

1尝试在三秒钟内渲染第一个屏幕。

腾讯《手机页面用户行为报告》第1条指出,74%的用户在加载超过5秒后会离开页面。

用户不耐烦了。第一个屏幕渲染越短越好。

因此,有必要尽可能减小第一屏幕的尺寸。业内普遍以中国联通3G网络的平均338千字节/秒(2.71兆字节/秒)为标准,渲染在3秒内完成。因此,第一个屏幕资源不应超过1014KB。


2大型资源页面采用加载页面。

如果您不能保证第一个屏幕在3秒内出现,请添加一个有趣的加载页面,以便在加载资源后预加载并显示该页面。虽然加载页面可以缓解用户等待的焦虑,但时间过长也会导致用户流失。因此,H5材料优化是绝对的原则。


3单色绘图

这是三个200*200像素图像、第一单色块、第二垂直梯度和第三对角线梯度的体积比较。对H5来说,流畅往往比画面的精致更重要。


4尽可能将静态地图保存为png8

这是一张1M的图片,由PS压缩成jpg、png8和png24。应该补充的是,Png8最多只能显示265种颜色,而png24最多可以显示1600万种颜色。

因此,当颜色单一时使用png8,当颜色丰富时使用jpg,当需要精度时使用png24。


5网站上可用的无损压缩图像

每个人都知道——叮叮

业界的好名声——智图


广州HTML5全栈就业如何?


6图片避免调整大小

根据要求上传相应尺寸的图片,以避免调整大小,并且不超过640像素(基于手机屏幕的总宽度),以避免残留的图片质量。


7擅长用H5工具匹配多个终端

H5背景图片的宽度固定在640像素,如何匹配高度?

如果你用H5制造tool-ih5.cn,你可以解决它。

打开ih5.cn,在舞台下添加[移动设备]功能,设置不同方案的高度,案例可以根据终端设备自动跳转到相应的方案进行浏览。这种方法需要重复设计各种尺寸的图纸,这可以称为一种让设计师筋疲力尽的方法。

懒惰的设计者使用——按照最大计划,即640*1040px创建设计文档,然后添加一个移动设备,选择默认高度,在设计文档时记住把主要信息放在中间,并把重要按钮尽可能放在中间。


8动态图优化和再优化

在不影响动态图形整体效果的前提下,通过修改尺寸、质量、帧数等进行优化。


9充分利用背景颜色属性

如果您正在使用H5工具编辑案例,以ih5为例。如果需要使用纯色作为背景或其他环境,可以使用图形工具中的背景颜色属性或舞台和页面的背景属性。

▲ih5平台页面属性面板


10开发人员都喜欢的H5音频规范

格式:mp3,单轨,最好在30秒内,文件大小最好控制在10万以内。

从上图中可以看出,较大的mp3文件主要是由于高比特率,64kbps对于H5背景音乐比特率来说一般就足够了。使用Adobe试听、格式化工厂或一些音乐播放软件来编辑和压缩音乐。应该注意的是,作为无限循环的背景音乐,头部和尾部必须连接正确,并逐渐淡入淡出。


11:3分钟内的视频,H.264格式

(1)视频时长:3分钟以内。近年来,流行的全屏视频长度不到3分钟。例如,薛之谦历史上最疯狂的广告(由腾讯制作,2分51秒)就是为了避免跳得太高。

(2)格式:MP4,h264编码后生成的视频文件尺寸小,图像质量好。蓝光技术和几乎所有高清摄像机都采用这种格式。

(3)在保证基本定义的前提下,使用format factory软件进行压缩。视频宽度也是640像素,尺寸越小,尺寸越小。


12不要滥用网络字体

通用浏览器只支持一些默认字体,中文如宋体,微软优雅黑,中文精细黑,英文如Helvetica,阿丽亚娜,佐治亚,泰晤士报。

H5使用其他字体,需要下载、解析和重绘当前页面。它应该尽可能少的使用,或者文本应该直接转换成图片然后导入。

但是,在ih5中,如果您使用中文字体组件输入文本,它实际上是自动将文本转换为图片,您不需要担心这个问题。


13善于重用元素

H5在生产过程中经常使用相同的元素,如按钮、箭头等。我们可以在iH5编辑阶段直接复制或直接填充重用元素的连接,从而避免了重复插入图片的需要,节省了案例记忆,提高了流畅性。

▲图片属性面板记录资源位置


14小心使用水平屏幕

水平屏幕需要用户设备开启屏幕旋转功能才能正常观看,用户操作成本高(许多安卓手机经常不响应水平屏幕)。

对于具有不同屏幕的手机,长宽比是不同的,这使得很难显示最佳的视觉效果。


15谨慎的输入行为

输入行为或复杂的交互行为会导致用户流失。

用户不耐烦了。如果他们必须输入,最好尝试改变选择的形式。

例如,ih5平台的设计师吴皋叔叔在他的作品《你,你有什么资格睡觉》中将一些输入行为转化为选择行为。对于H5的每个测试班,都有一个参考。


16充分利用父对象

当需要同时控制多个对象时,控制父对象比逐个控制要好。例如,在ih5中,操作模式需要在其他索引位置执行,并且父对象可以被添加到目标坐标以在父对象的帮助下减少操作。例如,可以在父对象上设置碰撞,以减少碰撞事件的计算,碰撞将在画布下更加平滑地流动。


这16种H5设计技术中有许多属于H5规范。充分利用这些规范可以节省很多时间与开发兄弟们战斗。为什么不呢?

免责声明:以上信息是由学考培训网平台用户自行发布,所有内容均由发布者对信息的真实性负责,学考培训网仅提供信息发布、展示,不对用户信息内容的真实性负责,请用户自行甄别,谨防受骗!!

免费试学

课程好不好,学过才知道!

已有2341个同学来校试学/听过