首页- 百度优化资讯- 你可能不知道网页可以这样优化

你可能不知道网页可以这样优化

发布时间:2020-05-12 11:00:00

本次分享会的主题是H5案例优化。邀请很多嘉宾讲解案例优化的经验和技巧。我们可以回顾这些大联系人的经验和诀窍,希望能帮助那些有案例优化需求的用户。

1、 流行游戏“偷酵母”的游戏策划阶段与用户体验优化体验——周南志

博弈规划阶段的优化可以概括为一条主线、两个文件和三个角度。一条主线是试图用一句话概括游戏的内容。思考剧情,将品牌特色和品牌互动融入整条线路,引导用户沿着既定的故事线进行游戏。

故事情节

两个文件是指艺术文件和技术文件的安排。即对具体的组成部分(工艺文件)进行有序的设计和整理,并考虑逻辑整理(工艺文件)的总体实现。

三个视角分别是游戏的可实现性、用户心理分析和品牌视角分析。

(1) 游戏的可实现性:评估我们掌握的技术和我们的平台能否实现游戏。如果没有,我们将在他们之间做出选择。

(2) 用户心理分析:明确受众是谁、年龄、职业、消费能力等,分析哪种心理能诱发他们自发的交流。

(3) 品牌视角分析:充分了解品牌本身,仔细阅读品牌信息,获取灵感,而不仅仅是围观创意。

整个游戏共有20页,26个原创漫画场景,58个独立项目,但大小只有456kb,在使用移动流量的普通Android手机上体验相对流畅。优化的秘诀在于两个方面:使图片素材变小和重用素材。

??20个场景+58个独立组件材料,共计456kb

(1) 如何使图片材料变小:试着用单色绘画的方式制作材料。

这是三张900*900像素的图像。个单色块为9KB,第二个垂直梯度为53KB,第三个对角线梯度为87kb。对于H5来说,流畅性往往比屏幕的精细度更重要。让我们看以下两张图片:

这两张图片是900*900和72dpi,似乎没有什么不同,但张是8KB,第二张是113kb。原因很简单——压缩改变了图片的质量而不影响视觉。

(2) 关于材料的再利用:我们在生产过程中经常使用同样的元素,比如偷酵母的箭头。在ih5编辑阶段,我们可以直接复制或填充被重用元素的连接,这样就不需要重复插入图片,节省案例内存,提高流畅性。

2、 案例的整体实用优化技巧——范晓航的整体实用优化技巧分为三个部分:材料优化、生产方法优化和逻辑优化

一、材料优化:

(1) 图像优化:根据需要上传相应大小,避免图像质量过剩

(3) 画面应该合并:台下物体越少越好。各个组件应该合并到背景图中;那些相似的组件也需要合并。

(4) 动态图优化:在不影响动态图整体效果的前提下,通过修改大小、质量、帧数等进行优化。

(5) 音乐优化:音乐优化可以使用格式工厂软件进行剪切和压缩。(6) 图形工具的使用:在使用纯色作为背景或其他情况下,可以使用图形工具的背景色属性或阶段和页面的背景属性。

2、生产方法优化:

(1) 动态效果代替时间轴:制作动画效果时,首先选择使用动态效果。如果没有合适的动态效果,则选择时间轴的方式。

(2) 时间线优化:

●能合并的时间轴应尽量合并,在轨道的始端和末端不显示,即先隐藏不需要显示的对象;

●不同轨迹上的关键帧可以稍微交错,不影响动画效果;

●同时避免时间轴预算过多,合理分配时间轴的时长属性。

(3) 画布优化:

●当时间线或滑动时间线放在画布下时,流畅性会更好。将动画部分放在画布内,触发器部分放在画布外,通过事件控制动画的调度和执行;

●非常大的序列帧可以上传并通过滑动控件放置在画布下,并且可以设置预加载(注意添加两个事件:“预加载完成”和“全部加载完成”)。

(4) 熟练使用滑动工具:当箱子需要使用***图时,可以使用滑动工具代替时间轴或通过滑动时间轴制成的***图。

三、逻辑优化:

(1) 预加载优化模式:

●预加载页面过多会影响打开速度。可设置为在显示页时增加阶段预加载页的数量;

●如果是测试类,单击翻页将测试结果页放在第二页。

(2) 图片显示逻辑优化:图片初显示为否,并从对象树中移除图片。图片将不会被预加载。如果担心大型组件加载缓慢,可以在阶段下添加事件-初始化完成,然后隐藏图片。

(3) 序列优化:

●同时触发的动作越少越好。这些动作可以以适当的顺序触发,例如,当时间轴等于N时;

●用事件来控制动态效果的执行,不要自动播放多个动态效果,即使延时设置了几秒,也要同时触发;

●轴播放结束后开始执行其他动作,如开始播放动作效果、开始播放时间轴等。

(4) 事件优化:通过隐藏同一层控件的事件函数来减少事件数;对于具有相同触发条件的事件,使用事件组函数。

使用事件组优化具有相同触发条件的事件

(5) 控制计数器数量:控制N个结果的显示。可以使用计数器范围隐藏同一层的控件,或在数据库下启用事件。一个事件启用计数器下的所有事件。

(6) 数据库应用程序优化:

●如果有数据库,数据库可以直接限制提交的数量;如果不需要在后台记录结果,可以使用数据库整型变量来限制投票或类似的数量。如果数字很大,它可以显示在页面中。

●当前端无需实时刷新数据时,应避免时轴循环回放控制数据的输出或重复分配;

●多组数据输出可以通过禁用不需要执行的输出事件来减少输出操作。

(7) 聪明的父母:

●控制父对象优于逐个控制。如果需要在其他索引位置执行操作模式,可以将父对象添加到目标坐标,并借助父对象减少操作;

●例如,可以在父对象中设置碰撞,以减少碰撞事件的计算,并且在画布下添加碰撞会更加平滑。

(8) 操作优化:可以使用简单的公式来简化操作,例如(700-200)*$a到500*$a。

3、 视觉化打造H5——张腾飞

(1) 定义H5的整体风格:

根据H5的主要传播内容和目的,确定H5的风格。

(2) 根据主要受众判断H5的视觉需求:

判断主要受众是某行业的小资本用户还是公众。

●小资本用户:他们倾向于酷、有趣和有趣的H5类型,因此他们对视觉有更高的要求;

●普通公众:作为利益驱动型用户,对视觉的要求可能不会这么高。

(3) 注意每页的视觉:

将每一页设计成动态海报,并注意首页、过渡页等页面视觉效果的重要性,因为这些页面直接影响到案例背后的主旨和其他内容的发布,如果处理不好,会直接导致用户流失。

4、 ih5平台Dav案例改编相关技巧探讨

常用的适配方案是:iphone4640*832iphone5640*1008iphone6640*1030iphone6+640*1040android640*1008在这个方案中,我们将宽度固定在640px,然后根据每个终端的屏幕大小缩放到640,然后删除状态栏和导航栏,得到终的高度。

需要注意的是,Android系统是高度分散的。在640*1008方案下,大多数主流机型都是可行的,但仍有一些异国情调的终端是创新的。如果需要特别调整一些带有虚拟按钮的终端,方案的高度也需要减去虚拟按钮。

编辑案例时,使用移动设备功能设置不同方案的高度,案例可以根据终端设备自动跳转到相应的方案进行浏览。

按方案统一创建,即640*1040px。背景是整个1040高度,坐标原点是左上角。

对象适配应注意两点:文本框适配和app嵌入式H5适配

(1) 文本框适配:在IOS和桌面安装系统中比较文本框的文本时,位置有偏差。文本框坐标应通过使文本框透明,然后补偿坐标位置之间的1/2差来设置。或者使用移动设备功能为苹果设备制定另一套计划来补偿这些差异。

(2) H5嵌入应用:当ih5制作的H5页面需要嵌入应用时,应删除应用中多余的适配代码。

在制作一些复杂的计算案例时,苹果手机的性能将非常困难。此时,我们需要通过ih5[移动设备]制定两个方案来优化不同系统的参数。

5、 百万级浏览测试H5案例互动制作体会——徐倩

如果你想创建一个拥有数百万视图的测试H5案例,你应该关注三个部分:基本原则、交互反馈和共享裂变。

一、遵循测试H5病例的四个基本原则:

(1) 舞台操作无偏差:舞台翻页必须锁定,前后翻页只能通过按钮进行;

(2) 标题简单而吸引人:标题必须有趣,能触动用户的心理(后一个可以被上帝翻过来),且不到10个;

(3) 互动模式简单明了:统一使用手机触摸,让用户沉浸在话题中;

(4) 注重考试成绩的展示:考试成绩必须集中展示,分数要分级(通常以超过**百分比的形式),造成高分虚荣;

2、从色彩、声音、动画和心理四个方面影响用户交互反馈:

(1) 颜色:按下用户操作的选项后,显示该选项的按下状态(此时显示色块,右为绿色,右为红色);

(2) 声音:对错答案设置相应的声音效果,带动用户情绪;

(3) 动画:用动画来补充整个页面,在避免单调的同时提高页面的趣味性(在这种情况下,苏宁的方块狮子GIF,廉价的笑和可爱的哭);

(4) 心理学:使用数据库功能计算错误答案的数量。你为什么要做这些统计?数以万计的人答错了一个问题,而你答对了,你会有什么感觉?智力优势!

三、从结构、内容、标题三个层面引发用户共享裂变:

(1) 结构:在结构上,借用微信段子深的翻面技巧,让人感觉有趣,不厌恶广告;

(2) 内容:在内容上选择方言话题,因为倒鸭和你看到的有什么先例可循,并抓住了用户的好奇心心理;

(3) 标题:根据终的分数,标题是以分数的形式定制的,以诱导用户转发,同时以挑逗的语气结束——你敢试试吗?吸引朋友PK,并推广第二次播出。

这一阶段的H5病例优化将得到审查和总结。我希望你能从中学习,使它成为一个优秀的案例优化大师。谢谢你的支持。

Copyright © 2015-2020. 未经许可,不可拷贝或镜像 eleng.net