A:
我们在制作手机方面的H5页面设计原稿时(当然包括微信方面的H5页面设计),如果没有设计过类似的移动方面,UI设计师和前端工程师一定会纠缠在一起。如果是app设计师,就不会那么烦恼。
那么多手机屏幕尺寸,设计原稿应该以哪个尺寸为基准尺寸呢?现在有2K分辨率的手机画面,设计原稿也必须按照最大的分辨率设计。显然不是这样。
请注意:(以下所有讨论内容和规范都将viewport设置为content=width=device-width),即必须包们的H5页前端代码中。
根据目前市场上流行的手机移动端,统计他们的设备独立像素。
只有iPhone6+采用分辨率降频处理。
具体看下图:
感兴趣的合作伙伴可以尝试1倍、2倍、3倍等尺寸。最终得出的考试结果是。H5的设计稿一般设计为640x1136px即可。可以满足显示需求,降低用户加载图像所需的带宽。
当我们可以使用各种分辨率的移动智能手机查看我们设计的H5页面时,当然也会出现以下情况,内容显示不完整,甚至一些重要的内容和按钮都会被屏蔽。
第一,背景图像必须采用background-size:cover实现。
第二,我们在设计H5页内容规划布局时,不能把重要内容放在太低的位置或太高的位置。否则,前端布局可能会显示内容不完整。
比较可以得到:
除了显示浏览器的全屏外,几乎所有情况都有顶部状态栏和导航栏。
iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。
Android系统可以改变状态栏和导航栏的高度,因此默认值为48px和100px。
然后将网页内容挤压到下面,进入盲区(根据不同的布局方法,可以挤出视野,即视野下面)。取这两个系统的最大值为148(48+100),如下图5所示,设计原稿应尽量保证单页下无重要内容。
图5。
所有画面的大小都要完全显示重要内容,注意市场上存在的小型手机画面,现在大部分智能手机的分辨率都在640x960px(iPhone4分辨率)以上,所以把重要内容放在上图5的死角上就可以了。计算后最安全的高度是812(960-148=812)。
总结一下,一般来说,在现有市场流行的移动智能手机中,单页翻转(不伸长的长页)的设计原稿尺寸为640×1136,在高度为812的地方设置安全线(参考线),将重要的内容配置在该安全线上。