iOS应用设计切图常识

最新各个iOS设备分辨率全

iOS应用设计切图常识_第1张图片
updated 2017-09-21

设计尺寸选择

  • 750 x 1334px (iPhone6/7)
  • 切图则为@2x.png
  • 切图/2则为@1x.png
  • 切图x1.5则为@3x.png

主要Bar控件尺寸一览(此处1dp = 2px)

  • StatusBar
    • 高度20dp
  • NavigationBar
    • 高度: 44dp
    • 分割线: 1dp
  • 返回icon: 13x21dp
  • 返回title字体大小: 17px
  • 返回icon和title间距:6dp
  • UIBarButtonItem:高度30dp
  • TabBar
  • 高度: 49dp
  • 分割线: 1dp
  • bar_button_item_icon: <=30x30dp
  • title字体大小: 12px
  • 最多items数量: 5
  • bar_button_item间距: 4dp
  • 最左和最右边item间距: 2dp
iOS应用设计切图常识_第2张图片
标注稿 单位dp=2px

分享一个完整的App从设计到切图全过程教程参考:
http://url.cn/46SYF7S

另附iOS人机交互设计指南官网:
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles

MarkMan标注工具地址:
http://www.getmarkman.com
个人感觉MarkMan已经不怎么好用了。。。

推荐一个Sketch的可以导出html的标注插件:
https://github.com/utom/sketch-measure

Sketch一个不错的学习网站:
http://sketch.im

PS切图插件CutterMan地址:
http://www.cutterman.cn

你可能感兴趣的:(iOS应用设计切图常识)