<sup id="be0qt"></sup>
    1. <div id="be0qt"></div>

      <div id="be0qt"><ol id="be0qt"></ol></div>
    2. <div id="be0qt"><tr id="be0qt"></tr></div>

    3. h5页面制作技巧与规范--华攀科技

          随着html5技术的不断应用使用H5制作的页面是越来越多但市面上很多的h5页面制作的还是很不规范h5制作技巧掌握的不是很全今天小编花了大量的时间为大家总结的h5页面制作技巧与规范大家可是要好好的看一看啊

          1交互慎用向?#19968;?#21160;的操作方式

      h5页面制作技巧与规范

          如刮刮乐涂抹效果左?#19968;?#21160;翻页等

          原因苹果手机上向?#19968;?#21160;容易触发返回“上一级页面”效果

          2交互慎用横屏展示效果

      h5页面制作技巧与规范

          原因体验上需要用户设备开启屏幕旋转功能才能正常观看用户操作成本高对不同屏幕的手机长宽比例不一难以展示最佳的视觉效果

          3视觉功能按钮等远离页面底部大概128px这个尺寸不是固定值具体看重构采用什么适配方式仅供参考640*1136 px从上往下计算主要内容在1008px内

      h5页面制作技巧与规范

          原因更好的设备各?#21046;?#24149;的手机避免按钮被挡住

          4视觉慎用“光线叠?#26377;?#26524;”或PS里面的“图层样式”效果

      h5页面制作技巧与规范

          如给图层加个“柔光”“滤色”“色相”等等效果除非这个视觉元素可以合并为一体

          原因给重构挖坑导致不?#20204;?#22270;无法还原视觉效果

          5视觉矢?#23458;E?想做简单的动画 导出SVG格式试试

      h5页面制作技巧与规范

          原因能减少体积的事为什么拒绝呢……

          6动画尽量避免全屏动画优先考虑局部动画的方式

      h5页面制作技巧与规范

          如各种粒?#26377;?#26524;全屏飘过等

          原因如果呈现的视觉效果无法用代码实?#37073;?#23601;意味着要用全屏尺寸的序列帧来处理体积上会飙升影响加载体验

          7动画序列帧压缩小技巧静态的画面保存较高质量中间运动的模糊状态大胆的压低画面质量吧

      h5页面制作技巧与规范

          原因压缩体积运动状态就算有锯齿也不明显

          8重构?#21644;计?#35831;上“tinypng.com”压缩下有效减少体积

      h5页面制作技巧与规范

          原因额这个也要说原因好吧?#20302;?#21578;诉你现在这网站不止可以压缩png还可以压缩jpg更重要的是……支持批量下载了

          9重构音?#26234;?#21387;缩下能大大减少整体的体积

      h5页面制作技巧与规范

          技巧如果没有特殊要求可以考虑弄成单声道音频文件比特率48或更低就行了

          10重构安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放苹果机则没问题

      h5页面制作技巧与规范

          11重构视频无法自动播放首次播放需要用户点击触发

      h5页面制作技巧与规范

          视频用什么格式建议用mp4格式并用H.264编码器

          12重构测试请多留意“魅族”手机和华为P6/P7等屏幕底部采用虚拟按钮的手机设备容易出问题

      h5页面制作技巧与规范

          ?#30340;?#20040;多再来几条小知识

          微信到底是什么用浏览器内核额这个问题还真难说清楚

          安卓

          微信5.4-6.1版本如果有安装QQ浏览器则用QQ浏览器的内核否则用手机系统?#28304;?#30340;

          微信6.1版本后内嵌了QQ浏览器的内核

          QQ浏览器6.2版本及以后使用blink内核之前用webkit内核

          苹果

          一直都是系统?#28304;?#30340;……

          向上滑动翻页的操作视觉指引的箭头应该是向上而不是向下哦除非你是点击翻页效果才用向下的箭头

      上一个
      下一个
      10ּ
      <sup id="be0qt"></sup>
      1. <div id="be0qt"></div>

        <div id="be0qt"><ol id="be0qt"></ol></div>
      2. <div id="be0qt"><tr id="be0qt"></tr></div>

      3. <sup id="be0qt"></sup>
        1. <div id="be0qt"></div>

          <div id="be0qt"><ol id="be0qt"></ol></div>
        2. <div id="be0qt"><tr id="be0qt"></tr></div>