background image

  

●DPI:72 

yixieshi.com

  

●色彩模式:RGB

  由于本文的焦点主要将集中在开发的基础知识上,所以在视觉设计方面不做深入探讨。
更多关于

iOS 界面设计技术及流程方面的信息,可以参考 Marc Edwards 的

Designing

 

    for

    

iPhone

 

    4     Retina

 

    Display

 

 

 一文。

  关于图片导出的小贴士

  

●虽然你可以在应用中使用多种格式的图片,不过鉴于 alpha 通道及无损压缩等方面的

考虑,我们最为推荐的仍是

PNG 格式。

  

●多数情况下,要将按钮导出为不包含文案的背景图片,以便更加灵活的在开发环境

中调整文字属性,或是对多语种进行支持。

 

互联网的一些事

  

●对于按钮的背景图片,要确保实际按钮的部分(不包括阴影或外发光等效果的区域)处

于背景图片的正中,因为我们在

Xcode 的 Interface Builder 当中很难对背景图片及前景文字

之间的位置关系进行精密的调整。很多时候,我们需要在制作背景图片的过程中,在按钮的
另外一侧添加一块空白的区域,以弥补阴影效果所占据的空间,确保按钮自身处于正中央。

  

●在设计方案允许的情况下,尽可能将那些在视觉上叠加在一起的元素直接保存在一

张背景图片当中,而不要留到开发环节里再进行层叠处理,否则成本将会变的很高。另外,
这样做也有助于减少资源文件的数量,提高应用运行的效率,减少内存占用。只有那些需要
对用户行为进行交互响应的界面元素需要独立的背景图片或是动画效果。

  

●在所有适用于 Retina 屏的图片文件名中增加特殊的后缀"@2x"作为标示,使系统能够

进行识别:

  

image.png:适用于普通屏幕。

  

image@2x.png

 :适用于 Retina 屏幕。

  

●可以尝试使用

SuperSlicr

 这样的自动化批处理脚本对 PSD 中的 UI 元素进行格式化及

导出。

 

互联网的一些事

  

●所有的资源文件都会保存在 app 包(app bundle)的同一个路径当中,所以文件名不能有

重复的情况。

 

互联网的一些事

  

●Photoshop 不大擅长对 PNG 图片进行压缩。可以试着使用 imageOptim 这样的工具减小

图片尺寸,然后再导入到

Xcode 当中。另外,Xcode 本身也会对导入过来的图片进行一定程

度的压缩,不过有时反而会增加图片的尺寸。

  

Xcode 概览

  

Xcode 已经安装好了叭?

  接下来我们去下载一套用于本次案例学习的

模板文件

 ,其中包括一些 PSD、PNG 资源,

还有一些用来起步的代码文件。进入里面的

Begin Here 文件夹,找到 Portfolio.xcodeproj 文

件,双击打开。

  文件加载成功之后,点击左侧导航栏

(Navigator)中的项目(Portfolio,1 target,iOS SDK),