一个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

iphone6 plus

屏幕总宽度: 414px

屏幕总高度: 736px

微信网页可视高度: 672px

samsung galaxy note3 （三丧手机开发者的黑洞。。）

导航栏 Android状态栏高度： 73px

屏幕总宽度: 360px

屏幕总高度: 640px

微信网页可视高度: 567px

仅iphone就4个尺寸了，更别说Android阵营的手机了

特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。

比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。

一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果

正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，

需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。

二、两种效果图排列，以及对应的解决方案

1、效果图水平居中排列设计（较容易实现自适应）

由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。

微软windows8以上以及windows phone的的大色块设计很大程度上也是更方便适应不同屏目而采用的方案。

2、效果图非居中排列设计（相对较难实现自适应）

由于是非水平剧中，内容可能放置在屏幕中任意位置

H5要实现这样的设计图并且要适应各种屏幕下各内容的位置、大小比例的正常，就需要计算每个内容元素的位置、大小比例等

实现具体方案是，计算每个内容元素的位置，宽高与整体效果图的宽高的比例，以百分比的方式定位内容元素及大小

给前端人员的提示：使用SASS或LESS一类的CSS预编译语言可以减化这些东西的计算

3、H5自带自适应属性媒体查询(Media Query)

H5天生就自带自适应属性媒体查询，功能就是可以检测和过滤不同屏宽或屏高的设备，也即可以为不同屏宽或屏高设定不一样的布局画面。

可以根据不同屏幕加载不同的图片和其它资源，比如下面以喵星人图片举例：

@media screen and (min-width: 650px)

意思是当屏幕大于等于650像素时显示的是宽宽的躺着的喵星人

@media screen and (min-width: 465px)

意思是当屏幕大于等于465像素时显示的是站着的喵星人

@media screen

意思是当不满足以上条件，即小于465px宽的屏幕上显示的是盘着的喵星人

媒体查询，大发好啊..

有钱大爷，美工殿下就可以根据不同屏幕设计不一样的效果针对不同屏，从320宽的iphone手机屏到ipad到pc电脑屏，同一个页面可以根据不同屏显示不同的效果给用户

(注：上面的喵星人借（盗）用的是国外演示picture标签的教程，而picture标签暂时浏览器支持非常糟糕)

三、不同价格手机之间性能差别很大

一份价钱一份货，低价手机在性能表现上肯定不如价高的旗舰机

如果你的H5页面还是要分享给低价手机的用户欣赏或使用，那么你不得不考虑性能低下的低价Android手机用户

1、直接减少动态效果，尽量减化交互效果

内容过多会导致加载速度慢，浏览时滑动不流畅

2、专门为低性能手机设计不同与高性能手机的H5版本

例如可以对低性能手机直接以一张图代替活动的内容元素

3、少的内容，炫的表现

切勿堆砌内容，这样真的很土...

微信H5分享，是一个适合传播轻量HTML5页面的地方，少即是多，内容要少，解释性的东西尽量放在其它地方，比如另开网页。

如果你一分钟没看完，就别告诉别人了，智商问题，我的话你也信？

------------------------------------------------------------------------------------------------------------------------------

转载注明（博客园）

Author: sheldon.wang

微信HTML5页面设计建议相关推荐

微信html5页面开发教程,微信网页开发，如何在H5页面中设置分享的标题，内容以及缩略图...
前言最近的需求是做一个移动端H5的长屏广告页,最后需要在微信分享的时候修改文案以及带上图片,这个实现起来也不是很复杂. 实现步骤先绑定域名,先登录微信公众平台进入"公众号设置" ...
html 视差效果,使用6种不同视觉差特效的HTML5页面设计效果
这是一款使用6种不同的视觉差效果混合在一起来组成一个HTML5滚动视觉差特效页面.该视觉差特效分为:页面头部图片视觉差,文字视觉差,图片列表视觉差,图片画廊视觉差等,效果非常的炫酷. 使用方法该滚动 ...
html5页面设计时做多大的,pc端网页按什么尺寸设计
如果不做全屏,或者主区域没有全屏设置,可以固定中宽,比如bootstrap的container的固定宽度1170px.下面小编给大家介绍pc端网页按什么尺寸设计,一起来看看吧. pc端网页的尺寸设计规 ...
购物网站的html5页面,网购商城(html5页面设计)
[实例简介] [实例截图] [核心代码] itheimaM ├── cart.html ├── category.html ├── css │ ├── animate.css │ ├── ba ...
微信H5页面的建议尺寸
秀米给的满屏建议尺寸:640×1008, 按照这个尺寸测试了效果还算满意.
视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
微信里嵌入html5页面,微信小程序web-view嵌套H5实现微信支付功能解决方案
一. 产品现状首先,在接入微信支付功能以前,我们的产品情况是这样的: 1 有公众号和app的h5站点及相关配套功能 2 小程序已经有一些基础功能,这些功能没有使用web-view 3 小程序之前的服 ...
微信可以识别哪些HTML语言,h5原本是一种制作万维网页面的标准计算机语言，由HTML5简化而来的词汇，HTML5的设计目的是为了在移动设备上支持多媒体。由于微信迅速的崛起，h5语言编写的界...
当前位置:首页 >其他资讯 >请柬资讯 >h5原本是一种制作万维网页面的标准计算机语言,由HTML5简化而来的词汇,HTML5的设计目的是为了在移动设备上支持多媒体.由于微信迅速的崛 ...
微信html5展示页,H5科普|微信H5页面的展示形式
原标题:H5科普|微信H5页面的展示形式随着移动互联网的不断发展,越来越多的企业开始运用微信H5来营销推广,微信H5凭借着方便快捷.页面丰富的优势,已经成为了如今最受欢迎的微信营销方式.一款微信H5 ...

微信HTML5页面设计建议