iOS界面设计切图小结

APR 12TH, 2013

1.基本尺寸

（1）界面

实际设计时按：

  • iPhone4、4s：640px*960px
  • iPhone5: 640px*1136px
  • iPad：1536px*2048px

(2) 图标：

  • 1024px*1024px 圆角180px
  • 提交1024px*1024px 方角 png格式图片

2.图形部件及字体

（1） 为显示清晰

  • 所有图形部件尺寸必须为偶数
  • 样式中阴影、发光、描边的数值也必须为偶数

（2） 为方便用户点击

  • 所有可点击的部件需大于88px*88px
  • 若图片本身不够，可在切图时补足空白像素 例如：

（3）为减小程序体积

建议尽量使用可平铺图案设计界面

（4）苹果默认字体

在pc上没有完全一样的字体，Hiragino Sans GB苹果丽黑最相近 一般做效果图时，用Hiragino Sans GB（包括中英文）代替即可，也可以用方正黑体代替

  • 所有字体使用偶数字号进行设计
  • 苹果丽黑有W3、W6两种粗细的字体

附下载地址：苹果丽黑

（5）系统可以做到如下字体效果

即，向特定方向1px（做效果图时做2px的效果）投影，需给出字体颜色、阴影颜色。 一般不建议按钮上的文字做特殊效果。如果必要， 需将字体和按钮一起切图。

（6）导航栏中的文字一般为40点W6

3.切图提示

(1）所有切图必须为偶数

先根据Retina屏幕切图（即640960/6401136/1536*2048），后将切图缩为普通屏幕尺寸。 （有特殊图片需要单独制作）

（2）可平铺部件切图时可如下图：

带圆角按钮切图时可如下图

同理

并在效果图中标出具体大小

标注软件推荐：dorado

（3）导航栏和标签栏下的阴影程序可以自动生成，可不切，如图：

若不满意默认阴影效果，可以单独切2px宽的阴影，如图：

如有异形阴影如：

需切整条阴影，并与攻城师说明。

（4）所有按钮需有两种状态——正常状态和按下状态

（6）一般情况下切图格式为png24

  • 若个别图片jpg比png小很多，可用jpg
  • 但欢迎页、icon必须为png，在不影响显示效果的前提下，可以考虑用png8

4.命名

（1）图片命名后缀

  • 根据Retina屏幕的切图文件名后加@2x，普通屏幕尺寸不用加。

  • 欢迎页、背景等需要对iPhone5另外切图的文件名后加-568h@2x

（2）命名建议

建议采用如下方法命名，如：

1

切图性质_功能相关描述_图片描述（可无）_状态说明（可无）@2x.png

用例:

  • Retina屏幕切图
1
2
3
4
5

bg_booksnum_pressed@2x.png
ico_arrow_blue@2x.png
btn_blue_pressed@2x.png
pic_books_blue@2x.png
bg_main-568h@2x.png
  • 普通屏幕切图
1
2
3
4
5

​bg_booksnum_pressed.png
ico_arrow_blue.png
btn_blue_pressed.png
pic_books_blue.png
按下状态切图命名后加_pressed
  • 另外贴个建议命名备忘

参考

  • iOS交互设计指南翻译
  • iOS设计指南·官方
  • iconhandbook

Posted by 徐大雨 Apr 12th, 2013  UI, iOS

原创&整理的文章，版权声明:自由转载-非商用&衍生-保持署名 | Creative Commons BY-NC-ND 3.0

iOS界面设计切图小结相关推荐

  1. 移动APP界面设计切图指南

    移动APP切图信息图:iOS界面设计切图指南 http://blog.163.com/conghui1986@126/blog/static/5647097520146311247618/ Andro ...

  2. android 系统的切图方式_UI设计切图规范

    移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度.设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力 ...

  3. iOS设计规范、切图规范与需求

    iOS设计规范.切图规范与需求 最后更新于 2016年1月22日 一.设计规范 1. 常见iPhone尺寸与分辨率等 设备 尺寸 分辨率(px) 分辨率(pt) 状态栏高度(20pt) 导航栏高度(4 ...

  4. 移动端切图内容包括什么_移动ui设计切图规范有哪些要求

    随着智能手机的不断运用,移动端ui设计成为大家关注的重点.而移动ui设计中,移动ui设计切图跟手机的使用密切相关.今天就让小编为大家介绍移动ui设计切图规范有哪些要求. 移动ui设计切图规范 1.切图 ...

  5. 9图工具 android,在线自动生成.9png图的Android设计切图工具推荐

    当我们完成了一套iOS的切图的时候,当android开发人员让你切几个版本的dpi切图时,你是不是一下子崩溃了! 我想大家都会崩溃,切一套APP设计稿 已经够麻烦了. 因为在Android的设计过程中 ...

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

    UI设计规范一iOS字体和切图及规范 说明: 1.对象为程序员等开发人员. 2.方法有千种,仅供参考. 3.文档的本质是备份与查看,对外方便协作与对内提升效率. 4.文档不是万能的,如果文档查看对象看 ...

  7. iOS界面设计，12个优秀案例激发你的灵感

    总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design.作为设计师,尤其是App设计师,总是会在这两者进行设计 ...

  8. 浅析iOS界面设计方法

    眼看移动互联网之风吹遍祖国大地,各种移动应用接踵而来,作为互联网设计师,若能掌握一些基本设计原则,将会对新平台带来的的挑战轻松应对!今天就以iPhone为起点,让咱们来分析一下iOS界面的设计方法- ...

  9. iOS界面设计之基础控件的学习 --- UITextField

    学习iOS界面设计也有段时间了,每次写到一些基础控件(如:UILable . UITextField)的时候就深觉应该总结一个函数来实现这些基础控件的属性设置,所以下面就是我对UITextField的 ...

最新文章

  1. oracle 中关于null的操作
  2. php连接数据库输出的中文几个字就…
  3. mysql round 四舍五入_MySQL之ROUND函数四舍五入的陷阱
  4. 内窥镜去反光的论文整理
  5. 如何显示python的内置模块_Python 如何查看Python自带的模块 - 弟球嗑学
  6. 关于Visual Studio .NET 2010最近的发布情况
  7. 交换机 Telnet远程登录配置
  8. MySQL数据库Binlog解析工具--binlog2sql
  9. 【道高一尺，魔高一丈】Python爬虫之如何应对网站反爬虫策略
  10. [原创]威胁猎人 | 2018年上半年短视频行业黑灰产研究报告
  11. win10 更改中文用户名为英文
  12. python实现猜测随机数
  13. xdm，外包能干吗？实在是....
  14. 大屏数据展示，5.5寸大屏幕手机更受消费者喜爱
  15. H.264/H.265/H.266三代视频编码的图像划分
  16. 基于ZigBee 的多点温度采集系统设计与实现
  17. java导出html word文档_java生成带html样式的word文件
  18. GNURadio 3.9 使用 OOT 自定义模块问题记录
  19. 在估值之前的“问题”以及什么是“格罗斯曼－斯蒂格利茨悖论”
  20. 2016中国“互联网+”千人论坛隆重举行 郎永淳主持 杨学山刘九如等嘉宾出席

热门文章

  1. java项目极验验证_有关极验验证SDK的使用过程-Java版本
  2. 极验滑块加密JS分析（一）
  3. 太佩服梁宏达老师了!!---老梁回顾体育评书两周年 看好阿森纳击败米兰
  4. markdown特殊符号语法，亲测可用
  5. Packet Tracer 命令行 使用
  6. 昊鼎王五：centos7上如何使/etc/hosts文件修改后生效
  7. rtl8221b+mcu，2.5g光纤收发器的开发备份
  8. 阿里云代理商：阿里云服务器自带DDoS高防,怎么还是打不开了？
  9. 百度视频质量评测的实践之路
  10. Python——结束语句