写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

==============================

 

2018更新 iphone X 的设计内容

 

==============================

 

 

我保证你一分钟就能看完这篇文章! 真的..

 

角色解释：

需求方：有钱大爷

设计人员：美工殿下

前端工程师：前端文艺青年

 

---

一个HTML5页面从提出到完成上线的流程：

 

一、需求方、设计人员、H5实现人员三方共同讨论实现方案

二、设计人员出设计图

三、H5人员按设计图出H5页面

四、需求方评估已实现的H5页面后给予反馈

五、设计人员与H5人员根据反馈进行适当调整

六、发布推广

 

 

如何提出一个合理的微信HTML5页面设计诉求？

 

合理分析诉求与公司团队拥有的资源：

一、需求完成时间；

时间给的越多，项目作的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年

 

二、现有技术能力；

根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效

 

三、工做人员配备；

有些狂拽酷炫屌炸天的特效须要专业的游戏或影视人员参与制做

 

四、领导B格

不解释

 

五、公司B格

不解释

 

 

好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，因此往下看吧。

 

 

 

 

三方须要达成的共识与常识

---

 

1、手机屏宽度高度不一

因为手机屏大小不一，因此H5页面所承载的设计图相应的宽高也会不同，是否须要设计多套不一样的设计图以适应不一样的手机屏？

最好的效果确定是设计多套不一样的效果针对不一样的屏幕尺寸，但这样须要大量的人力与时间，并且维护成本过高，不符合大部分团队的实际状况。

 

典型的手机屏尺寸如：

导航栏+iphone状态栏高度： 64px

 

iphone4

屏幕总宽度: 320px

屏幕总高度: 480px

微信网页可视高度: 416px

推荐设计稿大小x2：

640*832

 

 

iphone5

屏幕总宽度: 320px

屏幕总高度: 568px

微信网页可视高度: 504px

推荐设计稿大小x2：

640*1008

 

iphone6

屏幕总宽度: 375px

屏幕总高度: 667px

微信内网页可视高度: 603px

推荐设计稿大小x2：

750*1206

 

iphone6 plus

屏幕总宽度: 414px

屏幕总高度: 736px

微信网页可视高度: 672px

推荐设计稿大小x2：

828 * 1344

 

iphoneX

屏幕总宽度: 375px

屏幕总高度: 812px

微信网页(可用)高度: 724px （注意：将body颜色设置成黑色，这样可忽略iphone x的“头顶刘海”和“下巴一横”）

推荐设计稿大小x2：

750 * 1448

 

iphone 的高度相对于其它手机来讲特别的高，因此必须得特别适配，我通常用css的media query去专门写一套针对iphone X的样式

 

 

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

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

屏幕总宽度: 360px

屏幕总高度: 640px

微信网页可视高度: 567px

 

 

特别注意：“推荐设计稿”大小是以微信可视区为基准

 

 

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

 

正由于只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就须要你们脑补了，

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

 

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

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

因为是水平居中，则两边能够用纯色平铺，无论屏有多宽，均可以以纯色填充，这就是最最容易的自适应了。

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

 

 

 

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

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

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

 

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

 

给前端人员的提示：使用SASS或LESS一类的CSS预编译语言能够减化这些东西的计算， 推荐使用"rem单位自适应"解决方案

 

 

三、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标签暂时浏览器支持很是糟糕)

3、不一样价格手机之间性能差异很大

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

 

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

一、直接减小动态效果，尽可能减化交互效果

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

 

二、专门为低性能手机设计不一样与高性能手机的H5版本

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

 

三、少的内容，炫的表现

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

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

 

 

若是你一分钟没看完，就别告诉别人了，智商问题，个人话你也信？

 

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

转载注明（博客园）

Author: sheldon.wang

Mail: willian12345@126.com

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