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另外切图的文件名后加[email protected]
（2）命名建议
建议采用如下方法命名，如：
1 |
|
用例:
- Retina屏幕切图
1 2 3 4 5 |
|
- 普通屏幕切图
1 2 3 4 5 |
|
- 另外贴个建议命名备忘
参考
时间： 2024-12-06 10:32:33