iOS应用设计切图常识

最新各个iOS设备分辨率全

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
标注稿 单位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设计规范、material design 设计规范
    使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号，比如:color_a”_1，c...
    youyeath阅读 26,337评论 2赞 237
  • iOS APP UI设计之从效果图到UI切图
    声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，我写的...
    白屏阅读 9,516评论 20赞 100
  • 一款APP，从设计稿到切图
    纯干货 UI上的精品文章，很有用，共享一下 iOS9使用的西文字体由Helvetica Neue变更为San Fr...
    UI_TING阅读 1,306评论 1赞 8
  • 亲子日记(63)
    这几天都是儿子自己洗澡，今晚我到洗澡间一看，他用的洗发露瓶子倒了，而且瓶口是开着的，洗发露洒出来好多，刚买...
    李玺辰妈妈阅读 196评论 0赞 1
  • 赶自己上架
    信息时代，每天都有好大一块时间浪费在划拉手机上。碎片式的信息获得了一堆，但对于自己的想法和见识并无很大的帮助。这跟...
    poguy阅读 227评论 0赞 0