恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
值得收藏!iPhone 5快速适配6/6 Plus
0.0°
2015-11-03 原创文章 教程 原作者: 原作者 举报 6047 135 54 6


最近建了一个零基础学ui的群,许多新人问我适配的问题,他们很疑惑——他们知道iPhone 5用2@的切片,6 Plus用3@的切片,是5的1.5倍。所以,他们做好iPhone 5的设计稿后,整个乘以1.5倍后分辨率是960*1704,发现与iPhone 6 Plus的分辨率不一致。

我也看过有一些设计师的适配方法,用750*1334也就是iPhone 6去向上和向下适配,我没有仔细去看其中的步骤,看见写了很大篇幅的内容,感觉很复杂,所以我把自己的适配方法分享出来,如有错误也请指正。

因为iPhone 6和6 Plus同时上市,而5很早就有,也就是说5的设计稿我们都有,只需要向上适配2个机型就可以了。如果从iPhone 6适配,就得重新画一套6的设计稿,没必要。并且,以iPhone 5适配,只需要给5做标注,6不用任何工作,共用5的2@切片,再给6 Plus切一套3@的切片就够了。6 Plus也不用标注,程序员会根据5的标注乘以1.5倍。

说夸张点,即使做了非常详细严格的标注,程序员开发的第一个包也是一坨翔,因为他们根本不会认真仔细看标注。我合作过多家公司几十名几乎覆盖全部12星座的程序员,没有一个在打第一个包时会严格按照标注,你得一遍一遍地去验收,耗上生命,直到调整完美。

目前主流iOS机型的分辨率如下:(注:iPhone 6 Plus的制图分辨率是1242*2208)

其实该3种机型分辨率的比例非常接近,把750*1334和1242*2208都按宽度640换算,其高度都是1138,比1136多2px。

下面以iPhone 5界面来讲解向上适配的原理

界面可以划分为三个区域:状态栏、导航栏、列表栏

里面包含五个元素:导航标题、导航图标、列表图标、列表文字、间距

重要的事说三遍。适配iPhone 6不用设计师重新排版,开发会根据5的切图进行适配。适配iPhone 6不用设计师重新排版,开发会根据5的切图进行适配。适配iPhone 6不用设计师重新排版,开发会根据5的切图进行适配。

如果硬要输出6的设计稿,可以这样:

1.新建750*1334界面

2.将iPhone 5设计稿与之上对齐、左对齐

3.将iPhone 5设计稿中居中的内容在6上保持居中

4.将iPhone 5设计稿中右边的内容移至右边,边距与5保持一致

完成!

适配iPhone 6 Plus,只需提供3@的切片给开发延用5的标注进行适配

如果需要输出6 Plus的设计稿,可以这样:

1.新建1242*2208界面

2..将iPhone 5设计稿乘以1.5倍后与之上对齐、左对齐

3.将1.5倍后的iPhone 5设计稿中居中的内容在6 Plus上保持居中

4.将1.5倍后的iPhone 5设计稿中右边的内容移至右边,边距与之保持一致

完成!

更新:2015-11-03

收藏

135人已收藏

  • 5

    作品

  • 66

    粉丝

  • 0

    关注

  • COCO THEME DESIGN 2014(附PSD下载)
  • 一切吐槽iOS 9字体都是耍流氓
  • 完整版一张图看懂在腾讯和阿里工作的区别
  • 支付宝生活圈大战微信朋友圈之交互视觉点评

    猜你喜欢

      2015-11-03 原创文章 教程 原作者: 原作者 举报 6047 135 54 6

      值得收藏!iPhone 5快速适配6/6 Plus

      0.0°

      你确定要举报值得收藏!iPhone 5快速适配6/6 Plus

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年11月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      54
      135
      6

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录