您的位置：首页 > 移动开发 > IOS开发

iOS界面设计切图小结

2014-11-16 17:04 375 查看

[-]

iOS界面设计切图小结

基本尺寸

1界面
2 图标

图形部件及字体

1 为显示清晰
2 为方便用户点击
3为减小程序体积
4苹果默认字体
5系统可以做到如下字体效果
6导航栏中的文字一般为40点W6

切图提示

1所有切图必须为偶数
2可平铺部件切图时可如下图
3导航栏和标签栏下的阴影程序可以自动生成可不切如图
4所有按钮需有两种状态正常状态和按下状态
6一般情况下切图格式为png24

命名

1图片命名后缀
2命名建议

参考

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）命名建议

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

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>

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

用例:

Retina屏幕切图

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span><span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">5</span>

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

普通屏幕切图

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span><span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">5</span>

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界面设计切图小结