码迷,mamicode.com
首页 > 移动开发 > 详细

iOS界面设计切图小结

时间:2014-11-20 01:27:07      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:des   http   io   ar   os   使用   sp   文件   on   

iOS界面设计切图小结

APR 12TH, 2013

1.基本尺寸

(1)界面

bubuko.com,布布扣

实际设计时按:

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

(2) 图标:

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

2.图形部件及字体

(1) 为显示清晰

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

(2) 为方便用户点击

  • 所有可点击的部件需大于88px*88px
  • 若图片本身不够,可在切图时补足空白像素 例如:bubuko.com,布布扣

(3)为减小程序体积

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

(4)苹果默认字体

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

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

bubuko.com,布布扣

附下载地址:苹果丽黑

(5)系统可以做到如下字体效果

bubuko.com,布布扣

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

(6)导航栏中的文字一般为40点W6

bubuko.com,布布扣

3.切图提示

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

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

(2)可平铺部件切图时可如下图:

bubuko.com,布布扣

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

bubuko.com,布布扣

同理

bubuko.com,布布扣

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

标注软件推荐:dorado

(3)导航栏和标签栏下的阴影程序可以自动生成,可不切,如图:

bubuko.com,布布扣

bubuko.com,布布扣

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

bubuko.com,布布扣

如有异形阴影如:

bubuko.com,布布扣

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

(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
  • 另外贴个建议命名备忘

bubuko.com,布布扣

参考

iOS界面设计切图小结

标签:des   http   io   ar   os   使用   sp   文件   on   

原文地址:http://www.cnblogs.com/lgphp/p/4109599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!