zoukankan      html  css  js  c++  java
  • 【原】为什么选择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设备的市场占比,包含了主要型号的分辨率和市场占比,另外对设备高度和宽度简单做了计算,得到以下数据:

    • 5占ios市场比例为47.4%,ios中占比最高
    • 4占ios市场比例为23.10%,不可忽视的窄屏手机
    • 5、6、6+共占据市场比例61.9%
    • 5到6及6+的分辨率基本是等比例增大的,高与宽比约为178:100

    下图为android设备的市场占比:

    • 设备高与宽比约为178:100的占据市场比例为64.4%

    从以上2则数据可以看出,不轮是ios还是android系统,设备高宽比178:100的占据市场比例超过60%,不难看出这个比例的设备是目前市场的主流,从最多用户数的设备进行设计,向前向后兼容,那么iPhone5的高大上及市场占比可以作为目前H5视觉稿的首选

    写到这里,文章也算结尾了,再抛出文章开头一个问题:是否需要视觉设计师设计多套的视觉稿呢?具体要2套还是3+套?

    敬请期待下期的分享~

    祝大家520快乐~

  • 相关阅读:
    IntelliJ IDEA 快捷键终极大全,速度收藏!
    49式!Python初级到高级招式都全了
    字节跳动三轮技术面_后端研发提前批
    这样让你的 IDEA 好用到飞起来!
    你 多久没有跳槽了?
    推荐几款能提升代码效率的笔记应用
    推荐 15 款编程游戏,从此谁都可以学编程!
    StackOverflow 创始人关于如何高效编程的清单
    11 条编程经验分享
    InnoDB和MyISAM存储引擎的区别
  • 原文地址:https://www.cnblogs.com/PeunZhang/p/4518134.html
Copyright © 2011-2022 走看看