美文网首页
移动端H5页面的设计稿尺寸大小规范

移动端H5页面的设计稿尺寸大小规范

作者: 醉于麦田 | 来源:发表于2019-08-03 10:20 被阅读0次

那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />

<meta content="telephone=no" name="format-detection" />

根据目前市场流行的手机移动终端,统计他们的设备独立像素。

在这里,25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范:http://screensiz.es/phone值得大家好好细看的智能手机尺寸图表。

也只有iPhone6+采用了分辨率降频处理。

8. 静态图尽量保存成png8、或者进行图片压缩,在线png图片压缩工具很多。

这是一张1M的图片用PS压缩成jpg、png8、png24的体积对比。需要补充的是Png8最多只能展示265种颜色,而png24能有1600万。

所以色彩单一时用png8,色彩丰富时用jpg,需要追求精度时用png24。

9. 无损压缩图片可用网站

大家都知道的TinyPNG 和业界好口碑的智图。

手机APP设计必备图片压缩神器-TinyPNG

推荐一个APP切图文件的PNG压缩工具-Pnggauntlet

10. 图片避免大小重设

根据需求上传相应尺寸图片,避免大小重设,不宽于640像素(基于手机屏幕一般宽度),避免造成图片质量剩余。

11、善于用H5工具匹配多终端

H5中背景图片宽度固定为640px,那如何匹配高度呢?

如果你用的是H5制作工具——ih5.cn,就能够解决。

打开ih5.cn,在舞台下添加【移动设备】功能,设置不同方案的高度,案例就可以根据终端设备自动跳转到对应的方案去浏览。这种方法需要重复设计多种尺寸的图,堪称累倒设计师的方法。

偷懒的设计师们用的是——将设计文档统一按照最大方案也就是640*1040px来创建,然后添加一个移动设备,选择默认高度,在设计文档时记得将主要的信息放在中间,重要的按钮尽量往中间放。

相关文章

  • 移动端H5页面的设计稿尺寸大小规范

    那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高...

  • 移动端H5页面的设计稿尺寸(上)

    由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行。在设计制作移动端网页的时候,你是否疑惑,这种网站设计...

  • 手机APP UI设计尺寸基础知识

    从原理开始介绍一下移动端设计尺寸规范右键“在新标签页中打开图片”看 初涉移动端设计和开发的同学们,基本都会在尺寸问...

  • web移动端常见面试题以及适配兼容问题

    1、移动端你们一般采用什么布局?移动端设计稿是多大的尺寸? ● 定宽布局 ● 一般移动端设计稿是640或者750的...

  • UI设计中的IOS14设计规范

    你了解UI设计的规范吗? 很多新人在开始做移动端UI设计的时候,对界面的尺寸规范不是那么清楚,很多时候都是凭借自己...

  • 移动端web页面适配

    移动端Web页面,即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一,在做移动端的Web页面...

  • 移动端 870*1280 设计规范 和 rem.js

    科普H5尺寸适配 H5的页面与一般移动端的尺寸稍有不同,由于主要是在微信里进行传播推广,所以在设计的时候,H5设计...

  • VUE移动端和PC端适配方案总结

    移动端和PC端适配采用的方案,之前做大屏的时候设计稿是以1920*1080的尺寸设计的,考虑到市面上的显示其尺寸包...

  • 响应式布局rem布局

    我们做的h5页面只能在移动端访问(rem不兼容低级版本浏览器) 第一步:从UI设计师拿到设计稿(psd) 640*...

  • 最新Android & iOS设计尺寸规范

    Android 和 iPhone、iPad以及主流手机屏幕的分辨率和相关设计尺寸规范。--设计达人 移动设备屏幕大小

网友评论

      本文标题:移动端H5页面的设计稿尺寸大小规范

      本文链接:https://www.haomeiwen.com/subject/vnaddctx.html