手机端的网页设计规范（手机网页设计html）

本文目录一览：

• 1、网页设计规范
• 2、h5页面制作,设计多大的尺寸,怎么和前端适配,实现设计的视觉稿效果

网页设计规范

XML最初设计的目的是弥补HTML的.不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

放眼望去，网上的许多个人主页简直就是杂货店，内容包罗万象，题材千篇一律，人人都是软件下载，个个都有网络导航，从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。

可以参考常规字体的使用规范：在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。

经典设计布局分配一般包括头部，导航，焦点图，主要内容，底部5部分。设计准备3--设计图层的规范 基于经典设计，在图层面板里添加5个文件夹，分别命名是：头部，导航，焦点图，主要内容，底部。设计准备完成。

排名第七的分辨率，1024×768，是最小的电脑尺寸了，仅占13%，很少有人使用。在做pc端的网页设计时，不用考虑这个尺寸，而应在做pad端和手机端的适配时，将其纳入考虑。

规范中的精确性是至关重要的，因为在规范不准确的情况下，开发人员在开发时不得不依赖猜测，或者让设计人员解答他们的问题。但是人工编写规范是一个头痛的问题，通常需要很长的时间。

h5页面制作,设计多大的尺寸,怎么和前端适配,实现设计的视觉稿效果

1、一般安全区内框的尺寸是375X603PX，但在制作上又是另外一回事了，作铺满内框的图要按照这个尺寸的2倍大小去做。出血区也就是外框尺寸是422X748PX，作铺满外框的图要按照这个尺寸的2倍大小去做。

2、移动端的h5页面的尺寸是多少H5的尺寸一般设计为640x1136px 既满足了显示需求，又能降低用户加载图片需要的带宽。

3、左右边框各：25px 上下边框各：75px 根据该画布，后续将会推出配套的layer组件等尺寸，即当选择使用该微信尺寸时，layer画布跟layer容器尺寸自动默认尺寸：375X603PX，方便调整，欢迎大家持续关注。

4、不同的手机机型，还要考虑不同手机屏幕上手机适配问题。也就是H5页面的尺寸要怎么做才合适，一般会做一个带有出血框的画布，外框尺寸422X748px内框尺寸：375X603px。重要的信息放内框，不重要的信息铺满外框，比如背景图。

5、由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。