【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸
【20160105更新:可以用iPhone6分辨率为视觉稿尺寸啦】
又是一年的520网络情人节,深圳这边却下了大雨,这雨只能是单身汉的泪,而对于我来说这一天具有特别的意义,一来怀念父亲,二来对我这种结婚人士来说还可勉强表达对老婆的爱,so,本文的图片宽均以520像素来设计。
回到主题,在微信朋友圈经常看到的H5页面(滑屏页面),除了炫酷的动画效果之外,细心的你会发现有些H5页面在不同的移动设备上适配效果良好,页面的元素适配你的设备屏幕,并且展示完整的信息,如下图,页面在iPhone 6和iPhone 4不同屏幕分辨率下,内容自动适配,在iPhone4窄屏手机中男主角的下半身隐藏在屏幕外,但指引的信息完整展现在页面中。
那么,响应式设计是否需要设计师提供多套的设计稿呢?例如宽屏手机(iPhone6)、窄屏手机(iPhone4)各自一套。
相信很多人的回答是否定的,因为这会增加设计和前端的工作量,实际工作中设计H5页面,有很多专业的设计师会提供2套甚至是3套的尺寸给前端的同事,以下截图来自suco的《移动端品牌营销要素-快 简 准》。
这样的好处很明显,减少了前端的构建成本和沟通成本,在此向设计师们表示敬礼。
视觉稿不管设计1套还是2套以上,总以其中一个尺寸为准开始设计,从转到移动开发以来,听到有不少同事在问:H5视觉稿是以什么尺寸来设计?
在2年前,我们拿到的视觉稿大都是iPhone4的分辨率960x640的尺寸,如今iPhone6/6+出来了,一代版本一代王,想想应该选择iPhone6,然而本文的观点偏偏选择iPhone5,为什么呢,简单说明下我的见解。
以下分析数据取自4月份的友盟指数,有很大的参考价值。
ios设备的市场占比,包含了主要型号的分辨率和市场占比,另外对设备高度和宽度简单做了计算,得到以下数据:
下图为android设备的市场占比:
从以上2则数据可以看出,不轮是ios还是android系统,设备高宽比178:100的占据市场比例超过60%,不难看出这个比例的设备是目前市场的主流,从最多用户数的设备进行设计,向前向后兼容,那么iPhone5的高大上及市场占比可以作为目前H5视觉稿的首选。
写到这里,文章也算结尾了,再抛出文章开头一个问题:是否需要视觉设计师设计多套的视觉稿呢?具体要2套还是3+套?
敬请期待下期的分享~
祝大家520快乐~
如何让你的小游戏适配不同尺寸的手机屏幕 本文主要内容:教你如何对游戏中的 UI,背景以及内容进行不同尺寸屏幕的适配,让你的小游戏在各种尺寸的屏幕上,都展示出最好的一面。
相关文章
- 微信小程序跳转到h5页面_微信怎样打开小程序
- python库——h5py读取h5文件「建议收藏」
- python开发h5页面_大数据和python有关吗
- 520-七夕-H5兴趣项目演示+海报生成
- H5/公众号小程序小游戏项目系统开发部署搭建理解
- H5标签datalist
- 独立第三方部署客服APP或H5在线客服系统解决更换接口域名问题
- H5拖放原生js将图片拖放另外一个元素里
- H5-web存储
- H5-server-sent Event服务器发送事件
- 实战:第六章:H5微信与支付宝调试错误,请回到请求来源地,重新发起请求。 错误代码 insufficient-isv-permissions
- H5/APP客服端源码/uniapp在线客服系统源码开源了,全源码代码解读及发行安装教程
- 开源轻量级,高性能,前后端分离的电商系统,支持微信小程序+H5+公众号+APP
- 采用H5多屏直播时,H.264和H.265视频流混合播放导致的卡顿问题解析
- SkeyeVSS综合安防视频云服务WEB H5无插件播放RTSP摄像机解决方案,拒绝插件,拥抱H5,Windows PC、 Liunx、 Android
- html toastr.js 悬浮通知(h5 toast 提示)
- 安卓H5页面软键盘顶起页面底部
- 手机h5 页面 iPhone 下 手机号码 蓝色字体 黑色字体详解编程语言
- 使用H5与Oracle构建强大的数据库应用(h5 数据库oracle)