文档介绍：微信h5页面制作平台
篇一：HTML5微信页面设计
我保证你一分钟就能看完这篇文章!真的..
角色解释：
需求方：有钱大爷
设计人员：美工殿下
前端工程师：前端文艺青年
一个HTML5页面从提出到完成上线的流程：
1、需求方、设计人员、H5实现人员三方共同讨论实现方案
2、设计人员出设计图
3、H5人员按设计图出H5页面
4、需求方评估已实现的H5页面后给予反馈
5、设计人员与H5人员根据反馈进行适当调整
6、发布推广
如何提出一个合理的微信HTML5页面设计诉求？
合理分析诉求与公司团队拥有的资源：
1、需求完成时间；
时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年
2、现有技术能力；
根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效
3、工作人员配备；
有些狂拽酷炫耪ㄌ斓奶匦需要专业的游戏或影视人员参与制作
4、领导B格
不解释
5、公司B格
不解释
好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。
三方需要达成的共识与常识
一、手机屏宽度高度不一
由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。
典型的手机屏尺寸如：
导航栏+iphone状态栏高度：64px
iphone4
屏幕总宽度:320px
屏幕总高度:480px
微信网页可视高度:416px
iphone5
屏幕总宽度:320px
屏幕总高度:568px
微信网页可视高度:504px
iphone6
屏幕总宽度:375px
屏幕总高度:667px
微信内网页可视高度:603px
iphone6plus
屏幕总宽度:414px
屏幕总高度:736px
微信网页可视高度:672px
samsunggalaxynote3（三丧手机开发者的黑洞。。）
导航栏+Android状态栏高度：73px
屏幕总宽度:360px
屏幕总高度:640px
微信网页可视高度:567px
仅iphone就4个尺寸了，更别说Android阵营的手机了
特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。
比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。
一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果
正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，
需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。
二、两种效果图排列，以及对应的解决方案
1、效果图水平居中排列设计（较容易实现自适应）
由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。
篇二：用案例浅谈微信传播的H5页