==============================
 
2018更新 iphone X 的设计内容
 
==============================
 
 
我保证你一分钟就能看完这篇文章! 真的..
 
角色解释:
需求方:有钱大爷
设计人员:美工殿下
前端工程师:前端文艺青年
 

一个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
推荐设计稿大小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
 
 
特别注意:“推荐设计稿”大小是以微信可视区为基准
 
 
一般我们都是以用自适应的解决方案,以一套或两套效果图适应大部分的屏目,放弃极端屏或对其优雅降级,牺牲一些效果
 
正因为只有一套或两套效果图,团队、公司拥有的手机型号又是有限的,那么其它型号的手机显示效果就需要大家脑补了,
需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。
 

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

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

由于是水平居中,则两边可以用纯色平铺,不管屏有多宽,都可以以纯色填充,这就是最最容易的自适应了。
微软windows8以上以及windows phone的的大色块设计很大程度上也是更方便适应不同屏目而采用的方案。
 
 
 

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

由于是非水平剧中,内容可能放置在屏幕中任意位置
H5要实现这样的设计图并且要适应各种屏幕下各内容的位置、大小比例的正常,就需要计算每个内容元素的位置、大小比例等
 
实现具体方案是,计算每个内容元素的位置,宽高与整体效果图的宽高的比例,以百分比的方式定位内容元素及大小
 
给前端人员的提示:使用SASS或LESS一类的CSS预编译语言可以减化这些东西的计算,推荐使用"rem单位自适应"解决方案
 
 
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
Mail: willian12345@126.com
------------------------------------------------------------------------------------------------------------------------------
 
 

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

  1. 不会美工的前端不是好UE

    1.UE.美工.前端的工作似乎很类似,用不同的形式去画出页面效果.UE用AXURE,美工用PS,前端用代码. 2.我是一个前端,在好几家公司都是自己默默的一个人,所以在做好本职工作的同时,近朱者赤. ...

  2. 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  3. 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...

  4. 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使 ...

  5. 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...

  6. 文艺青年、普通青年、2b青年到底是什么意思?

    文艺青年.普通青年.2b青年到底是什么意思? 文艺青年就是脑子里跟别人想的不一样,思维跟人家相反或者另类的人. 普通青年呢就是像你一样,普普通通的. 2B青年就是黑铅笔青年,做事比较搞怪,古怪到让你哭 ...

  7. Nios程序烧写到EPCS方法 - 第1页 - asus119's Blog - EDN China电子设计技术

    Nios程序烧写到EPCS方法 - 第1页 - asus119's Blog - EDN China电子设计技术 这里主要是针对EP3C系列FPGA的Nios程序固化到EPCS中的方法做简要说明.硬件 ...

  8. JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  9. 产品前端重构(TypeScript、MVC框架设计)

    最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...

随机推荐

  1. docker-py安装

    linux: pip install docker-py  

  2. Logrotate还有谁记得它??

    我发现很多人的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相发明自己的轮子,这真是让人沮丧啊!就好比明明身边躺着现成的性感美女,大家却忙着自娱 ...

  3. vue & keep-alive & activated

    vue & keep-alive & activated vue 生命周期 钩子函数 缓存 http://www.cnblogs.com/nekoooo/p/6442077.html ...

  4. Leetcode模拟题篇

    43. Multiply Strings 高精度非负整数的乘法. string multiply(string num1, string num2) { '); ; <= i; --i) { ; ...

  5. 【刷题】洛谷 P3950 部落冲突

    题目背景 在一个叫做Travian的世界里,生活着各个大大小小的部落.其中最为强大的是罗马.高卢和日耳曼.他们之间为了争夺资源和土地,进行了无数次的战斗.期间诞生了众多家喻户晓的英雄人物,也留下了许多 ...

  6. fzyjojP2931 乱搞

    其实很简单(第二个不知是啥) 贡献独立 其实第一种就是考虑一个点在哈夫曼树上的期望深度是多少 因为精度要求较高 所以要高精小数加,高精小数除以低精整数

  7. 【Asp.net入门5-01】SportsStore:一个真实的应用程序

  8. 深入了解volatile

    volatile关键字经常在并发编程中使用,其特性是保证可见性以及有序性,但是关于volatile的使用仍然要小心,这需要明白volatile关键字的特性及实现的原理,这也是本篇文章的主要内容 一.J ...

  9. tp5.1 insert 返回id, 不等于符号

    $insertId = Db::name('user_address')->insertGetId($data); //add=>insert, insert 返回值不再是插入的id; i ...

  10. 怎样彻底卸载(删除)SQL server2000

    如何完全卸载SQL server 2000 一.卸载安装程序:找到电脑右下角的Windows开始按钮,找到控制面板——卸载程序. 找到server 2000的安装程序,并点击后面的卸载按钮.  是,确 ...