正文

微信html5页面设计建议

梨花带雨伊人泪  2022-02-10  389

关键词：

一个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页面；1.通常微信都有第三方合作平台，直接调用第三方接口，然后将html5和页面素材统一打包上传到第三方服务端。2.倘若有服务... 查看详情

规范抢先看！微信小程序的官方设计指南和建议

基于微信小程序轻快的特点，我们（微信官方）拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持... 查看详情

微信小程序怎么设计微信小程序设计指南

参考技术A概要基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支... 查看详情

电商项目测试实战之购物车页面用例设计建议收藏

　购物车页面用例设计　　一、购物车页面　　二、购物车页面测试范围列表　　三、购物车页面功能点需求分析　　四、部分功能点的测试用例设计　　购物车页面　　1、验证添加商品到购物车页面合法，添加成功　... 查看详情

电商项目测试实战之购物车页面用例设计建议收藏(代码片段)

微信小程序设计规范

一、宏观角度微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、... 查看详情

微信小程序怎么选择组件做操作

微信小程序是一种全新的应用形态，微信小程序平台不需要下载安装即可使用应用的平台，微信小程序实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安... 查看详情

微信h5适配解决微信调整字体大小导致html5页面混乱

...号遇到一个问题：iOS、Android加载页面，如果用户调整了微信自带的字体大小，那么我们的页面就会跟随调整字体大小，导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。找了一些方法总结如下：原理：阻止ios和... 查看详情

html5+css3响应式设计

...计（一）》设置viewportmeta标签后，任何浏览器都不再缩放页面了，这一节我们可以针对不同视口来修正设计效果。一、我们用一个ipad（1024*768）来说明这一点上一节中我们的页面是960px宽度，我们ipad如果是横屏显示1024px，页面显... 查看详情

微信端的html5页面，如何禁止下拉刷新，以及下拉显示提供商

参考技术A微信自带功能，禁止不了查看详情

html5页面打开微信并分享

...要做个功能是点击某软件里面h5页面的一个链接，分享到微信朋友圈，判断分享成功就加积分。通过js-sdk可行，但是无法通过点击链接使用微信客户端打开原网页。====分享功能已经能实现了。但是前提是在微信客户端下。我是要... 查看详情

微信h5页面的视觉设计原则

参考技术A微信h5页面的视觉设计原则关系到用户的视觉体验，我们必须在充分了解之后再进行设计，这不单单是为了页面的精美度，更是一种向用户负责的表现。下面就是我们要了解的微信h5页面视觉设计原则。　　1.字体表达... 查看详情

微信小程序单位rpx解析

参考技术A首先要分清两种分辨率：视觉上的清晰度：单位逻辑分辨率上的物理像素点越多，视觉效果越清楚。但是人类的眼球是有视觉极限的。也就是326ppi;通常来说一个pt可以由1个px或者2个px甚至3个px构成结论：工作时如果按... 查看详情

[极致用户体验]为什么建议2022年不用"等比设计稿"+rem，而用"灵活设计稿"+px(代码片段)

背景最近写了3篇关于微信大字号的文章：《在微信大字号模式下，网页样式乱了怎么办？》提供了一种解决方案，在用户调整微信字体大小后，可以保证网页字体大小不变，解决了样式错乱的问题。《让你的网页，适配微信大... 查看详情

怎么让html5页面中的链接启动微信打开

h5页面有个链接，如何点击这个链接启用微信打开该链接？这个是没办法的。只有app才调用应用，网页是没办法的。补充：1、万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。2、HTML5赋... 查看详情

JavaScript 设计模式的建议 [关闭]

...-12-1222:22:09【问题描述】：我有一个JavaScript变量，被同一页面上的10个不同函数使用。这些函数设置并从此变量获取值并执行某些操作。我想知道我是否可以遵循一些架构在功能之间共享公共资源。谢谢！【问题讨论】：你能展... 查看详情

it兄弟连html5教程css3属性特效渐变1

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来，Web设计师都是通过图形软件设计这些渐变效果，然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，... 查看详情

简单的微信小程序页面怎么制作

微信公众号后台就可以直接申请门店小程序的，不过说实话这种小程序对企业对客户来说都不太实用，建议根据企业需求制作小程序，做一款展示类或者介绍类也不贵的参考技术A点击“企业”选项，然后就可以填写各种信息了... 查看详情