一个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制作有很大的区别。
二、两种效果图排列,以及对应的解决方案
1、效果图水平居中排列设计(较容易实现自适应)
由于是水平居中,则两边可以用纯色平铺,不管屏有多宽,都可以以纯色填充,这就是最最容易的自适应了。
微软windows8以上以及windows phone的的大色块设计很大程度上也是更方便适应不同屏目而采用的方案。
2、效果图非居中排列设计(相对较难实现自适应)
由于是非水平剧中,内容可能放置在屏幕中任意位置
给前端人员的提示:使用SASS或LESS一类的CSS预编译语言可以减化这些东西的计算
@media screen and (min-width: 650px)
意思是当屏幕大于等于650像素时显示的是宽宽的躺着的喵星人
@media screen and (min-width: 465px)
意思是当屏幕大于等于465像素时显示的是站着的喵星人
@media screen
意思是当不满足以上条件,即小于465px宽的屏幕上显示的是盘着的喵星人
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。