写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议
我保证你一分钟就能看完这篇文章! 真的..
角色解释：
需求方：有钱大爷
设计人员：美工殿下
前端工程师：前端文艺青年
一个HTML5页面从提出到完成上线的流程：
1、需求方、设计人员、H5实现人员三方共同讨论实现方案
2、设计人员出设计图
3、H5人员按设计图出H5页面
4、需求方评估已实现的H5页面后给予反馈
5、设计人员与H5人员根据反馈进行适当调整
如何提出一个合理的微信HTML5页面设计诉求？
合理分析诉求与公司团队拥有的资源：
1、需求完成时间；
时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年
2、现有技术能力；
根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效
3、工作人员配备；
有些狂拽酷炫耪ㄌ斓奶匦枰ㄒ档挠蜗坊蛴笆尤嗽辈斡胫谱
4、领导B格
5、公司B格
好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。
三方需要达成的共识与常识
一、手机屏宽度高度不一
由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。
典型的手机屏尺寸如：
导航栏+iphone状态栏高度： 64px
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
屏幕总宽度: 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页面还是要分享给低价手机的用户欣赏或使用，那么你不得不考虑性能低下的低价手机用户
1、直接减少动态效果，尽量减化交互效果
内容过多会导致加载速度慢，浏览时滑动不流畅
2、专门为低性能手机设计不同与高性能手机的H5版本
例如可以对低性能手机直接以一张图代替活动的内容元素
3、少的内容，炫的表现
切勿堆砌内容，这样真的很土...
H5分享，是一个适合传播轻量HTML5页面的地方，少即是多，内容要少，解释性的东西尽量放在其它地方，比如另开网页。
如果你一分钟没看完，就别告诉别人了，智商问题，我的话你也信？
------------------------------------------------------------------------------------------------------------------------------
转载注明（博客园）
Author:&sheldon.wang
------------------------------------------------------------------------------------------------------------------------------
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。看情况而言吧，离线地图个人感觉太大了，而且更新不及时。
UID149性别男阅读权限40记录日志QQ注册时间在线时间45 小时最后登录飘香币111371
高级站友, 积分 1752, 距离下一级还需 248 积分
帖子日志精华0贡献值0 知名度2671 飘香币111371
恩，接API不错~
(暑假减肥)
(暑假减肥)当前离线
UID43801性别男阅读权限70记录日志QQ注册时间在线时间1146 小时最后登录飘香币59140
我个帮叫占士邦
本站长老, 积分 13782, 距离下一级还需 4218 积分
帖子日志精华0贡献值11 知名度12027 飘香币59140
谢谢支持！
UID149性别男阅读权限40记录日志QQ注册时间在线时间45 小时最后登录飘香币111371
高级站友, 积分 1752, 距离下一级还需 248 积分
帖子日志精华0贡献值0 知名度2671 飘香币111371
学生的想法就是这样……我有百度地图干吗用你的？
UID82115性别保密阅读权限20记录日志QQ注册时间在线时间16 小时最后登录飘香币10690
一般站友, 积分 257, 距离下一级还需 243 积分
帖子日志精华0贡献值0 知名度331 飘香币10690
youjian 发表于
是的，暂时人还不多。功能还继续加，有什么好建议吗？
说实话，其实接口都是公开的，没什么技术含量....
UID64447性别保密阅读权限40记录日志QQ注册时间在线时间43 小时最后登录飘香币15525
中级站友, 积分 539, 距离下一级还需 661 积分
帖子日志精华0贡献值0 知名度864 飘香币15525
呵呵。。。见仁见智，做出来了再说吧。
UID149性别男阅读权限40记录日志QQ注册时间在线时间45 小时最后登录飘香币111371
高级站友, 积分 1752, 距离下一级还需 248 积分
帖子日志精华0贡献值0 知名度2671 飘香币111371
您好，我们在做一个移动互联网项目：work4.0，全民随时随地兼职就业。技术、服务商品化的交易平台。已获得第一笔天使投资，天使投资人也是联合创始人有人脉有地位有money！现诚心寻求CTO和PC网页设计及安卓方向的技术开发人才。加入我们，实现自己价值之余也让用户有机会实现自身价值量化成金钱吧！^_^
(晨桂汗)当前离线
UID70242性别男阅读权限50记录日志QQ注册时间在线时间200 小时最后登录飘香币24873
顶级站友, 积分 2786, 距离下一级还需 2214 积分
帖子日志精华0贡献值0 知名度3494 飘香币24873
你看我头像屌不
请加我微信:JiangHuKeyke
UID149性别男阅读权限40记录日志QQ注册时间在线时间45 小时最后登录飘香币111371
高级站友, 积分 1752, 距离下一级还需 248 积分
帖子日志精华0贡献值0 知名度2671 飘香币111371
youjian 发表于
呵呵。。。见仁见智，做出来了再说吧。
楼主很大的自信，不就是要调用别人的api而已嘛，你认为你的工作很有技术含量？这就是程序猿可悲之处
UID64447性别保密阅读权限40记录日志QQ注册时间在线时间43 小时最后登录飘香币15525
中级站友, 积分 539, 距离下一级还需 661 积分
帖子日志精华0贡献值0 知名度864 飘香币15525
期待信仰 发表于
楼主很大的自信，不就是要调用别人的api而已嘛，你认为你的工作很有技术含量？这就是程序猿可悲之处
呵呵。。。还是那句话做出来再说吧。。。
UID149性别男阅读权限40记录日志QQ注册时间在线时间45 小时最后登录飘香币111371
高级站友, 积分 1752, 距离下一级还需 248 积分
帖子日志精华0贡献值0 知名度2671 飘香币111371
推荐阅读 /2
首先祝各位老总大大月薪上万
转眼又是毕业季，三月尾，各学院的毕业照时间也应该陆续出来了，请各位大四的师兄师姐们以及亲爱的站友们能够将了解到的每个学院的毕业照时间跟帖回复，便于各位站友了解。本帖用于统计今年（2015）各学院的毕业照时间，要求真实可靠的毕业照日期。请勿抛砖灌水，谢谢。
或许很多人都不知道，早在1997年，在我们当中还有很多人在读小学的时候，南国飘香就已经建站了。历经了十余载的辛苦经营运作，飘香终于日益壮大并坚持走到了今天，感谢一届又一届的管理者，是你们用辛勤的汗水浇筑起了飘香发展历史的伟大长城。
有人说，既然经历过，那就一定要有所收藏才能印象深刻。虽然大家在飘香这段共同的经历都曾经让彼此动容，但毕竟没能留下实质性的东西，实在可惜。既然如此，为什么不在来一次“站衫”呢。
07:33&&|&&
&&|&&&&|&&&
Powered by微信公众平台页面设计特效_微信_新浪房产_新浪网
写在前面的废话，嗯哼！
本页面仅供乐居各站近乎零代码基础的微信编辑使用引用，如果您是代码高手请把鼠标移至右上角点关闭。
本页面将不定期更新，欢迎将您喜欢的微信正文页特效页面的链接发送给我。
我会尽力保证将你喜欢的代码整理并发布到这里(这个我真的不敢保证全部整理出来 就酱)。 (手机端打开效果更好)
最后更新：11月18日
使用方法：
你们可以直接把这个页面里任意特效复制粘贴到微信发布框里，修改文字即可。
推荐阅读及使用
传说中的微信页面特效
标题排版-圆角背景自适应模板
标题排版-圆角背景自适应样式
标题排版-圆角背景自适应样式
锦上添花篇-直角背景自适应样式
锦上添花篇-直角背景自适应样式
锦上添花篇-直角背景自适应样式
标题标题标题
这里是标题哦~
这个标题也还不错吧
文字一定要短，否则IPHONE下容易折行。
1&妈妈说标题要足够长才会吸引人
新浪乐居微信号：bjhouse据说，这种边框和微信号的，一般用于微信号互推。
他们管这个叫标题
3这也是橙色的
3这也是橙色的
这也是橙色的
内容内容内容
这里可以输入标题
请输入文字请输入文字
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
纯灰色背景的导语
内容内容内容
居中内容。
同样，请按Shift+Eneter 来进行回车。他们说想要这种紫色的，可是我真不觉得这种紫色的有多好呢？
同样，请按Shift+Eneter 来进行回车。他们说想要红色的，而且不想要居中，而且还不要首行缩进的。
你们不会真的打算用这种黑色的底吧？
带有阴影的白框框
这个框框很扁平化小清新
北京新浪乐居
微信号：bjhouse分享到朋友圈丨点右上角&&&分享楼盘信息搜索丨发楼盘名称查询详情
几款导语都出现多余空行，暂时百思不得其解，大家复制粘贴到微信发布框内，请自行删除多余空行即可。
①复制"微信号或ID"，在"添加朋友"中粘贴搜索号码关注。
②点击微信右上角的"+"，会出现"添加朋友"，进入"查找公众号"，输入以下公众号的名字，即可找到。
①复制"微信号或ID"，在"添加朋友"中粘贴搜索号码关注。
②点击微信右上角的"+"，会出现"添加朋友"，进入"查找公众号"，输入以下公众号的名字，即可找到。
①复制"微信号或ID"，在"添加朋友"中粘贴搜索号码关注。
②点击微信右上角的"+"，会出现"添加朋友"，进入"查找公众号"，输入以下公众号的名字，即可找到。
①复制"微信号或ID"，在"添加朋友"中粘贴搜索号码关注。
②点击微信右上角的"+"，会出现"添加朋友"，进入"查找公众号"，输入以下公众号的名字，即可找到。
蓝色文字效果是这样的呢
红色文字效果是这样的呢 换行请用 shift+enter
请务必保证框内最后一个文字后无空格、无回车，否则发布出来页面排版很难看。
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
内容内容内容内容内容内容内容内容
点击"阅读全文"，了解详情
点击"阅读全文"，了解详情
点击"阅读全文"，了解详情
点击"阅读全文"，了解详情
点击"阅读全文"，了解详情
点击"阅读全文"，了解详情
XX艺术书画
xxxxshuhua
直接选择需要的样式拷贝到需要的地方，修改其中的文字即可。
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
XX智慧人生
直接选择需要的样式拷贝到需要的地方，修改其中的文字即可。
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
他们说，这种左侧的竖杠杠是用于引用的内容？
这个代码也是这样的，随着回车键延长或者缩短。
他们说，这种左侧的竖杠杠是用于引用的内容？
别问我为什么这个特效会有三组，因为某人想要一张淡蓝色的边。
别问她是谁，请叫我红领巾。
三伏天到了，作为御宅一族，首选模式当然是躲开炎热的天气和拥堵的人群，在家静心地欣赏自己喜爱的影视大片。快来看看周末看片小指南吧，宅家style开启~
从上到下，圆润
我要找作者吐槽！
算了，还是不留联系方式了吧，请教问题的小白用户太多了。微信公众账号大全-微信公众平台推荐！
最好的微信公众账号推广平台！
最新收录微信公众账号
微信公众平台使用:
免费的微信公众服务平台
优质微信公众号推荐
微信公众账号-地区分类:
最受欢迎的微信公众账号大全
热点君 舆论热点 舆论热点 最高人民法院关于适用《中华人民共和国行政诉讼法》若干问题的解释(日最高人民法院审判委员会第1648次会议通过) 为正确适用第十二届全国人民代表大会常务委员会第十一次会议决定修改的《中华人民共和国行政诉讼法》,结合人民
标签:乳神 海边写真 巨乳 写真 三亚莫晓茜身高:165三围:94-64-90微信:wqj990微博:晓茜sunny欢迎【订阅】女神来陪你,微信号:nvmm360喜欢本文就分享吧!点或,分享给朋友圈或朋友新用户也可以下载二维码扫一扫哦!
19岁的富二代与相差12岁的老师不伦师生恋,妈妈跪地求儿子与老师分开 老师跪地求成全下面是2015最HOT公众号,赶快试试新的关注方法吧!(如果无法弹出“识别图中二维码”选项,请升级手机微信版本)风水财运每天学点风水,顺风顺水,运气旺,改变你的人生,改变你的命运!长
男人失业了,他没有告诉女人他仍然按时出门和回家男人夹着公文包,挤上公交车,三站后下来他在公园的长椅上坐定,愁容满面地看广场上成群的鸽子到了傍晚,男人换一副笑脸回家他敲敲门,大声喊,“我回来啦!”男人这样坚持了5天5天后,他在一家很小的水泥厂找到一份
关注一下又不会怀孕! 一市场综述西安住宅市场2015年17周成交量较2015年16周小幅上涨,共计成交2887套,环比上涨322%;成交面积为3157万平方米,环比上涨694%本周西安商品住宅成交均价为7603元/平方米,较2015年16周上涨279%从整体状况看,西安房地产市场楼市成交
3月23日晚上22:50分,一男子从北园高架桥上纵身跳下,摔成重伤送往医院后,诊断为骨盆及股骨颈骨折,内脏也受到严重损伤,目前男子还在接受治疗 经了解,男子姓朱,自称喝了一斤白酒后,乘出租车由解放东路去太平洋小区在高架桥上由东向西行驶时,男子要司机停车司机怕
1颜值低,气质无,体态不匀称,稍不留神便消失于茫茫人海2年终奖福利不超过2000,身上现金从来不超过1000元3男生抽烟不超过10块,女生不穿5cm以上高跟鞋4男生出门运动装,女生出门不化妆5宅家上网、看电视,卫生纸泡面需求大6万年一个发型,一年365天都在喊减肥7
《Dream Knight》不仅是与海外制作公司强强联合的代表作,更是被誉为“2015年最大制作”,成为优酷土豆“大自制”时代最受瞩目的作品之一!闪兔已约!该剧制作阵容包括韩国知名编剧金银荣、导演朴炳焕,由“大势男友团”GOT7成员倾情出演,闪兔更要约~《玩偶骑士》作为一部富
日,全国首个全年无休公益跑步基地——阿迪达斯Runbase西岸基地正式启动!上海市徐汇区人民政府副区长王宏舟、上海市体育局副局长赵光圣、阿迪达斯集团大中华区运动表现与运动时尚市场副总裁孟书漫先生、上海市徐汇区体育局党组书记、局长金伟红、上海西岸开发(集
据警民直通车-浦东官方微博消息,3月29日0时20分许,上海浦东公安分局接报110称,惠南镇一酒吧内发生聚众斗殴接报后,浦东警方迅速组织警力赶赴现场,开展伤员救治、现场勘查、抓捕犯罪嫌疑人等工作
经初步调查,系纠纷引起双方持械斗殴,造成2人死亡,另有5人不同程度受伤
【神推理】一个人半夜回家,他的家住在14楼,他走进电梯,过了几秒,发现八楼亮了,他想一定是八楼的人要坐电梯,过了一会儿他猛然按下了3、4、5楼,门打开就冲了出去,待在大楼附近的便利店直到第二天他想到了什么呢?那么,请仔细看下图实在想不出来的话——↓↓↓↓↓↓ 点击
点这里的人都过上了幸福的生活!加美女小编微信:yes609 爽爆你!一分钟教你学会变魔术想知道怎么做到的吗?点击阅读原文,查看答案!↓↓↓↓↓↓
以下内容转自网络先来看下快走的优缺点以及快走跑步方法:1、快走的优点:步行运动比较能轻松地展开,即使平时运动不足的人也很容易接受2、快走的缺点:快走运动不适宜过于长期地坚持,因为往往会变成一个无目的的,进行到一定的程度时需要转为其他高强度的运动3、快走的正
第一章 总则第一条 立法依据为规范商业保理企业经营行为,防范行业风险,促进商业保理行业健康发展,根据《合同法》、《公司法》、《物权法》和有关外商投资的法律、行政法规,特制定本办法第二条 适用主体在中国境内投资设立的商业保理企业适用本办法第三条 商业保理企业本办
点击底部“阅读原文”,可查看公司所有车辆信息!以下车型如有意向,请直接联系销售人员::索经理 ,:张经理大众 桑塔纳志俊 2008款18L手动实尚型新车4S店最低价:1029万元(裸车价948万元+购置税081万元)价格:598万元上牌:2012年7月里程:3
安卓系统也可以:如何下载;微信直接扫一扫安装下载!!首先需要两部手机,或者电脑,ipad,一部扫二维码下载软件,一部保存图片,然后打开软件对着图片就会有小熊出来了!!关注微信: PPMIX 回复系统: 3D熊 免费获得二维码下载!!保存好以下几张图片,下载后扫一扫3D熊就出
交通新规日施行:1、 闯红灯,记6分,罚100元2、酒驾,记12分、5年内不得再考取驾照3 、不系安全带,记3分,罚100元4、 副驾不系安全带,记1分,罚50元5 、行驶中拨打手机,记3分,罚100元6、行驶中抽烟,记1分,罚100元7 、有意遮挡号牌,记12分,顶额
这几天视频事件闹腾得毕姥爷受不了,于是老毕就想改个名字众名人纷纷支招:崔永元说叫毕雷针,倪萍说叫毕门羹,李咏说叫毕B机,海霞说叫毕超,白岩松说叫毕孕套,周涛说:深沉点叫毕嘴外国政要也关心:普京建议起个俄式的,叫沙毕洛夫,奥巴马称最好起个美式的,叫马拉个毕
微信公众号排行榜
微信公众号推广介绍
[微信扫一扫]
微信公众号推广
1.微信公众账号免费收录：您可以在本站免费提交微信公众账号，我们会在一天内人工审核您的微信。您的微信公众账号收录到本站后，在百度也能搜索到您提交到本站的微信公众账号信息，这样会有更多的用户找到您。在百度搜索“百度微信公众账号”“京东微信公众账号”查看效果，排名第1的均是本网站呢。
2.微信公众账号付费推广：本站日流量2万。付费推广的微信公众账号将展示在本站的首页、频道页、详情页和微信手机版内不同位置。我们的用户都是搜索微信公众账号而来，更有针对性，推广效果最好！欢迎体验！
3.微信公众账号大号互推：微信公众账号互推也是现在比较流行的一种微信推广方法，本站将微信互推的方式进行了更好的优化。安全并且转化率非常高！避免了微信互推被封或是在互推复制－查找－关注这个过程中用户流失。目前我们只接受粉丝10万以上的微信大号参加。如果有兴趣请联系我们的工作人员微信"alex69966"或扫描左边的微信二维码进行认证。
4.微信公众账号排行榜：本站自动提取微信公众账号的活跃度数据生成，让用户轻松分辨优质的微信。
微信网页版介绍
微信网页版-微信电脑版
微信网页版登录方法：首先打开，然后打开手机微信，点击右上角扫描二维码，扫描网页二维码就可以登录了。
微信网页版主要特点：微信网页版与手机同步收发信息。可用来与手机微信互传图片或将电脑中图片发给微信上的朋友。
微信网页版补充说明：就是。最好在手机微信连接上WIFI网络的环境下登录微信网页版，节省流量。
微信公众平台导航
简介：5hb.org收录了微信公共账号,微信美女账号,微信明星帐号,微信搞笑账号等各种类型的微信公众账号以及微信、微信网页版的使用方法。声明：本站与腾讯微信无任何关联，非腾讯微信官方网站！& &
&微信公众号大全 微信公众号推荐平台 5hb.org,All Rights Reserved.}