iOS界面设计切图小结

[-]

1. iOS界面设计切图小结
   1. 基本尺寸
      1. 1界面
      2. 2 图标
   2. 图形部件及字体
      1. 1 为显示清晰
      2. 2 为方便用户点击
      3. 3为减小程序体积
      4. 4苹果默认字体
      5. 5系统可以做到如下字体效果
      6. 6导航栏中的文字一般为40点W6
   3. 切图提示
      1. 1所有切图必须为偶数
      2. 2可平铺部件切图时可如下图
      3. 3导航栏和标签栏下的阴影程序可以自动生成可不切如图
      4. 4所有按钮需有两种状态正常状态和按下状态
      5. 6一般情况下切图格式为png24
   4. 命名
      1. 1图片命名后缀
      2. 2命名建议
   5. 参考

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>

[email protected] [email protected] [email protected] [email protected] [email protected]

• 普通屏幕切图

<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