H5广告的设计窍门,全在这里!

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看74 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 74|回复: 1
收起左侧

H5广告的设计窍门,全在这里!

[复制链接]
h5lover 发表于 2016-7-1 17:12:45 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

这是我最近看到的一篇比较优质的关于H5设计的内容分享,并非我们资讯站出品,但是内容确实比较实用,特别转赞~虽然都是一些常规的小知识,但是从事这个行业的同学一看就会知道,讲的基本靠谱,对新手设计帮助比较大~

下面就是具体正文了!

H5广告的设计窍门,全在这里! 0

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 0




H5广告的设计窍门,全在这里! 1

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 1


1、交互:慎用向右滑动的操作方式。

如:刮刮乐涂抹效果,左右滑动翻页等。

原因:苹果手机上,向右滑动容易触发返回“上一级页面”效果。




H5广告的设计窍门,全在这里! 2

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 2


2、交互:慎用横屏展示效果。

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




H5广告的设计窍门,全在这里! 3

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 3


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

原因:更好的设备各种屏幕的手机,避免按钮被挡住。


H5广告的设计窍门,全在这里! 4

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 4


4、视觉:慎用“光线叠加效果”或PS里面的“图层样式”效果。
如:给图层加个“柔光”、“滤色”、“色相”等等效果,除非这个视觉元素可以合并为一体。
原因:给重构挖坑,导致不好切图,无法还原视觉效果。



H5广告的设计窍门,全在这里! 5

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 5


5、视觉:矢量图? 想做简单的动画? 导出SVG格式试试!
原因:能减少体积的事,为什么拒绝呢……



H5广告的设计窍门,全在这里! 6

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 6


6、动画:尽量避免全屏动画,优先考虑局部动画的方式。
如:各种粒子效果全屏飘过等。
原因:如果呈现的视觉效果无法用代码实现,就意味着要用全屏尺寸的序列帧来处理,体积上会飙升,影响加载体验。



H5广告的设计窍门,全在这里! 7

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 7


7、动画:序列帧压缩小技巧,静态的画面,保存较高质量。中间运动的模糊状态,大胆的压低画面质量吧。
原因:压缩体积,运动状态就算有锯齿也不明显。



H5广告的设计窍门,全在这里! 8

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 8


8、重构:图片请上“tinypng.com”,压缩下,有效减少体积。
原因:额,这个也要说原因?好吧,偷偷告诉你,现在这网站不止可以压缩png,还可以压缩jpg,更重要的是……支持批量下载了!



H5广告的设计窍门,全在这里! 9

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 9


9、重构:音乐请压缩下,能大大减少整体的体积。
技巧:如果没有特殊要求,可以考虑弄成单声道音频文件,比特率48或更低就行了。



H5广告的设计窍门,全在这里! 10

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 10


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



H5广告的设计窍门,全在这里! 11

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 11


11、重构:视频无法自动播放,首次播放需要用户点击触发。
(视频用什么格式?建议用mp4格式,并用H.264编码器)


H5广告的设计窍门,全在这里! 12

H5广告的设计窍门,全在这里! - 敏捷大拇指 - H5广告的设计窍门,全在这里! 12


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




说那么多,再来几条小知识。


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



安卓:

微信5.4-6.1版本,如果有安装QQ浏览器,则用QQ浏览器的内核。否则用手机系统自带的。
微信6.1版本后,内嵌了QQ浏览器的内核。
QQ浏览器:6.2版本及以后使用blink内核。之前用webkit内核。
(别晕,如有需要,请上:http://x5.tencent.com/index 了解关于QQ浏览器的更多信息)


苹果:

一直都是系统自带的……

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

◆指纹扫描?亲屏幕触发互动?吹口气检测气体成份?
这些都是伪技术,开开心心被玩弄下就好了~
不过像多屏互动,音频分析等,通过各种接口做技术支持,实现一些互动操作,这些可是未来的趋势哦!




来源:PALWO朋沃
作者:palwo

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元
1起来 发表于 2016-7-3 16:58:17 | 显示全部楼层
这个之前在大拇指H5版块看到过呀
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表