iOS应用设计切图常识

作者: 清無 | 来源:发表于2017-03-23 18:28 被阅读174次

最新各个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应用设计切图常识

    最新各个iOS设备分辨率全 设计尺寸选择 750 x 1334px (iPhone6/7) 切图则为@2x.png...

  • UI设计规范整理一iOS字体和切图及规范

    UI设计规范整理一iOS字体和切图及规范 UI设计规范整理一iOS字体和切图及规范

  • [iOS-Practice] 图片资源的管理

    iOS 及 Android 应用开发中,怎样命名和管理切图资源最科学?iOS 切图文件命名规范 移动应用作为面向用...

  • iOS设计、切图规范

    一、为什么要规范 1、设计师的设计效果被快速理解和使用,降低设计和开发之间的交流成本,节省开发时间和效率。 2、移...

  • iOS应用架构

    iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用...

  • iOS应用架构谈

    iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用...

  • iOS应用架构谈 组件化方案

    iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用...

  • iOS应用架构谈(转载)

    iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用...

  • iOS应用架构谈 开篇

    iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案iOS应用架构谈 网络层设计方案iOS应用架构...

  • iOS应用架构谈 开篇[转]

    iOS应用架构谈 开篇iOS应用架构谈 view层的组织和调用方案iOS应用架构谈 网络层设计方案iOS应用架构谈...

网友评论

    本文标题:iOS应用设计切图常识

    本文链接:https://www.haomeiwen.com/subject/hwetottx.html