h5网页设计规范 第1篇
根据目前市场流行的手机移动终端,统计他们的设备独立像素。
值得大家好好细看的智能手机尺寸图表。
也只有iPhone6+采用了分辨率降频处理。
具体看下图:
有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。
第一:背景图片必须采用background-size:cover;来实现。
第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。
通过对比可得:
除去将浏览器全屏显示的情况,几乎所有情况均会有顶部的状态栏和导航栏。
iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。
由于Android系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px(这些尺寸网上均可查)。
那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取这两个系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面没有重要内容。
那么在所有屏幕大小上把重要内容显示完全,就要注意市面上存在的小尺寸手机屏幕,现在绝大部分智能手机分辨率都在640x960px(iPhone4分辨率)之上,所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812(960-148=812)。
在此总结,一般情况下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640x1136,在高度为812处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。
h5网页设计规范 第2篇
移动应用中使用 WebView 进行 H5 开发时,需要遵守一些规范,以确保应用的性能、安全性和用户体验。以下是一些常见的规范:
性能优化:
安全性:
用户体验:
跨平台兼容性:
资源管理:
遵循这些规范可以帮助开发者开发出高性能、安全可靠、用户体验良好的移动应用 WebView H5 页面。
h5网页设计规范 第3篇
在实现页面一些页面效果时,我们应该先进行分析、拆解。
2. 渐变替代。很多背景图都是渐变构成的,那就不需要让设计师切成图片格式,而是利用css直接绘制。
总之,尽量使用 CSS 来实现画面效果有以下几个好处:
还有一点,使用 CSS 实现的动画、过渡和效果可以通过 GPU 加速,提高动画的流畅度,并减少 CPU 的负载。
h5网页设计规范 第4篇
1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),
二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的1/2。
5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。
h5网页设计规范 第5篇
使用合适的图片格式和大小,以减少网络请求和提高加载速度。
下面是一些具体的建议:
JPEG 格式 适用于照片、图像和渐变色的图形,如实景照片和人物照片。具有较高的压缩比率,文件大小也相对较小,适合保存色彩丰富的图像。缺点是不支持透明度,压缩过程中可能导致图像细节损失,不适合保存线条清晰的图形。
PNG 格式 适用于图标、线条清晰的图形或者LOGO等需要透明度的图像。支持透明度,无损压缩,保留图像细节。缺点是通常文件大小较大,不适合保存色彩丰富的照片。
WebP 格式 谷歌开发的一种新型图片格式,具有较高的压缩率和良好的图片质量,也支持透明度,适合用于网络传输和需要保持高质量的同时减少文件大小的图像。缺点是兼容性差,部分PC浏览器可能不支持,手机端反而支持度高一些。
base64 格式 base64 是一种将二进制数据编码为 ASCII 字符串的编码方式,常用于在 HTML、CSS 和 JavaScript 中嵌入图片数据。在移动应用开发或 Web 前端开发中,对于小文件可以转换成 base64 格式。base64 格式的图片数据适用于一些体积较小、不需要频繁更新或在页面加载时需要优化性能的图片,可以减少对外部图片资源的依赖,提高页面加载速度和性能。
之前合作过的设计师给出过如下建议:
使用图片压缩工具,如TinyPNG、JPEG Optimizer、gif5 compress 等,将图片压缩至合适的大小,以减少文件大小。
一般来说,移动端使用的图片几十K左右的范围,大几百K肯定不合适。
注意,避免无损压缩,因为在移动应用中,通常更关注文件大小而不是细微的图像细节。
将多个小图标或按钮合并成一个图片 Sprite,在页面加载时只需请求一次该图片,减少网络请求次数。使用 CSS Sprite 技术需要指定所需图片在的位置和大小,以便正确显示所需的图标。
雪碧图(Sprite Sheet)是一种将多个小图标、图片或动画帧合并到单个图像文件中的技术。雪碧图的原理是将多个图像按照一定的规则排列在一张图像上,然后通过 CSS 的 background-position 属性或者 JavaScript 来控制显示具体的图像区域。这样,在页面加载时只需请求一张合并后的大图,然后根据需要显示其中的某个部分,避免了多次请求小图标或图片导致的网络延迟和性能损耗。
在使用 CSS Sprite 技术时,需要注意:
适当调整图片尺寸指的是根据图片在页面上的显示大小和分辨率,对图片的实际尺寸进行调整,以达到优化页面加载速度和用户体验的目的。
具体来说,适当调整图片尺寸包括以下几个方面:
根据显示大小调整图片尺寸:
根据分辨率调整图片尺寸:
下面是一个例子:
当然,也可以用JavaScript来控制 src
属性来进行动态换图。
将页面上不立即需要加载的图片设为懒加载状态,在用户滚动到图片可见区域时再进行加载,以提高初始页面加载速度。使用 JavaScript 库,如等,来实现图片的懒加载功能。
使用 JavaScript 库来实现图片的懒加载功能是一种常见的方法,它可以延迟加载页面上不立即需要的图片,直到用户滚动到图片可见区域时再进行加载。下面是一个示例,使用 库实现图片的懒加载:
首先,引入 库文件:
然后,在需要进行懒加载的图片元素上添加 data-src
属性,并给图片元素添加一个特定的类名,例如 lazy
:
最后,在 JavaScript 中初始化 LazyLoad
实例,并指定需要进行懒加载的图片元素的选择器(这里选择类名为 lazy
的图片):
这样,页面上带有 lazy
类名的图片元素将会被延迟加载,直到它们进入用户视野范围内才会被加载,这底层运用了 IntersectionObserver,从而提高了页面的初始加载速度。更多关于 IntersectionObserver 检测页面内容渲染的内容可以阅读 HOW - IntersectionObserver 和页面元素曝光
另外可以根据实际需求和设计,在懒加载图片上添加一些过渡效果或加载指示,以提升用户体验。