H5、小程序设计,视频输出规范

H5、小程序设计尺寸和视频输出规范要求说明:

视频规范:由于视频拍摄主流机型默认是16:9,假如按750宽来算,高度就是1333(1334)。所以做如下规定,视频输出:750*1334,编码为H264,格式为MP4的视频。注意需要上下留128px,左右留64px边距,边距预留主要是为了适配机型,小屏手机按宽度适配,视频就会裁掉上下128px,大屏手机按高度适配,视频就会裁掉左右64px(安卓刘海屏水滴屏需预留88px)所以边距区域内不能有重要内容,比如字幕,LOGO等。见图A。

H5规范:由于手机屏幕尺寸的多样性,做出以下规范(不含导航条)输出:750*1514px,安全区750*1224px,特小屏安全区750*1124px,以上均按居中适配(见图:B,注意上下各留145px的可遮挡区域)

小程序规范:同H5规范,值得注意的情况是当小程序要求满屏(全屏)的情况下设计输出为:750x1624px。

关于H5这个规范,很多人质疑,特小高度1124px感觉没有必要,但是我特别强调很有必要,部分老旧的安卓机型,由于自带触控按键区导致可视区域特别小。也有人质疑高度1514,为啥不是1448?这个66px误差是故意留的,简单可以这样理解对于大屏手机来说DPR(不明白请百度搜索一下)至少是2或者3,那么视觉上相差33px(像素除以DPR)或者22px其实无大碍的。况且对于各种APP来说头部栏的高度无法确定,留多一点区域也可以方便应对。然后需要特别强调一下,这个规范是统一适配单屏应用的,瀑布流等布局不在规范内。