2.画布适配原理

小E发表于:2016年10月27日 18:05:32更新于:2019年01月02日 10:52:04

现在随着全面屏等大屏手机日趋主流,新增适应该类屏幕的画布“微信Plus”,外框尺寸为422X748PX。下面是该画布适配原理介绍。


“微信Plus”画布,

兼容:16:8————16:10(文末附手机型号参考)

内容安全区:375*603(750*1206)

出血区:422*748(844*1496)

左右边框各:23.5px

上下边框各:72.5px

设计作图尺寸为显示尺寸的2倍大小,分辨率72dpi。

并附满屏图片设计尺寸PS模板,百度云盘下载地址   密码:p7is

将重要信息一定放在安全区内,但安全区外的蓝色区域也尽量要放置元素作为背景,防止在个别手机屏幕上露白。

0015a13ecc5ba6f6b44d97ccc6d34eb

0015c2c274feb2d23fed2c3656c0e15

那么该画布在哪里添加呢?作品信息面板——作品属性——页面尺寸:

image.png

画布内容布局

0015c27460599c12d95fa7f0f9610ae

手机型号显示参考

0015c27462541f7a131c577dfc20ad3

根据该画布,后续将会推出配套的layer组件等尺寸,即当选择使用该微信尺寸时,layer画布跟layer容器尺寸自动默认尺寸:375X603PX,方便调整,欢迎大家持续关注。



原微信尺寸及适配原理:

画布的外框尺寸是370*568,内框的尺寸是320*480。为了保证图片的清晰度,一般作图我们按照两倍的尺寸去做,即740*1136,内框为640*960。单位像素(PX)。

重点:背景图需要铺满外框,主要内容要放在内框里才会显示。

说明:Photoshop里新建740*1136px,分辨率72px的尺寸就可以了,需要画布尺寸模板的同学可以戳这里下载

Epub360官方画布模板.PSD

image.png


二.手机适配原理


为了适配各种型号手机屏幕尺寸,Epub360采用了“安全区”配合“出血区”的设计,这是借鉴了印刷行业的做法。安全区与出血区的划分,如下图所示:

  • 安全区:内框区域,这个区域里的内容可以确保在所有手机屏幕上完整显示;

  • 出血区:内外框之间的区域,这个区域仅用于填充不同手机屏幕边缘区域,确保不会露白。

所以大家作图时需要注意:

主要内容一定要做在640*960框内  确保位置大小比例合适 重要内容能全部显示

设计制作图片参考尺寸如下图所示:


三.不同机型的适配情况

不同的机型因为屏幕大小及比例的原因,显示的情况会有所不同,这里我们参照画布的效果图与几种不同机型的效果图的对比,可以根据需求微调。

1.Epub360编辑器的效果图

注意:LOGO可以勾选启用相对位置,固定在左上角

image.png

编辑版式文档_-_后台管理系统 4.png

2.不同机型的展示效果

从这里能够看出来,外框就是用来填充露白部分的,应该作为内框主视觉内容的外延设计。


不同机型的显示.jpg


四.调整画布尺寸

根据场景需求,可通过右侧的设置面板设置画布的尺寸,调整画布为微信,ipad横版,ipad竖版或其他尺寸。


五.调整画布位置

我们可以通过拖拽画布的右上角的移动图标或按住空格键来移动画布的位置。


补充:如何修改画布尺寸


画布尺寸二:


兼容:16:8————16:10(文末附手机型号参考)

内容安全区:375*603(750*1206)

出血区:422*748(844*1496)

左右边框各:23.5px

上下边框各:72.5px

0015a13ecc5ba6f6b44d97ccc6d34eb

根据该画布,我们还将会推出配套的layer组件等尺寸,即当选择使用该微信尺寸时,layer画布跟layer容器尺寸自动默认尺寸:375X603PX,方便大家调整。

那么该画布在哪里添加呢?老地方:

image.png

并附设计尺寸PS模板,百度云盘下载地址   密码:p7is

手机型号参考

0015a1bb7b0ec2e71bab795cb8d9bba