iPhone应用设计之被忽视的细节(1): Photoshop分辨率设置

“设计师要眼光六路，耳听八方，不错过一个细节，才有可能变‘资深’。”
——Millie，今天用  Hubba Hubba 给自己打造了一个“经典”形象

 
刚刚接到工程师的电话，说我给出的字体尺寸iPhone里实际应用时明显太小，需要我再调整。之前也出现过类似的情况，后来发现时Photoshop文件里分辨率（Resolution）处的预设不对。手机屏幕的ppi是很特别的，在开始设计前就要记得将预设调到对的数值，以免在后面的设计中出现问题。刚刚上网一搜，果然是分辨率的问题。并且iPhone 3GS（320×640）的分辨率和iPhone 4（640  ×  960）的分辨率设置会是不一样的。MobileTuts＋的这篇文章 ”  Preparing your iPhone App for higher resolution  “ by  Jon Shamir 就详细介绍了相应的设置。

这里简单引用文中的部分，记录一下相应的方法：

分辨率、屏幕尺寸和视网膜Retina显示

iPhone 4 ：106,000px/inch, 326PPI
iPhone 3GS及以前的老型号机型：26,000px/inch(是iPhone4的1/4), 163PPI 

在Photoshop里生成高分辨率图形

1. 为图像准备好高分辨率版本
2. 遵循无损原则，在设计过程中尽可能使用矢量图形、智能对象创建形状而非滤镜，以保证最大程度的灵活性。当所有元素都可编辑时，创建高分辨率的图形就变得非常简单。
3. 在开始设计iPhone应用时，应先对“老版本”尺寸界面（320 × 480）下手。如果一开始就从640＊960的尺寸开始设计，因为那些元素在屏幕上看起来非常大，当将他们缩小为320 × 480时，往往会显得很小。从老尺寸节目开始，可以说是保证了iPhone应用的“可用”。

在Photoshop的图像尺寸设置中，对于iPhone 3GS（320  ×  480）的设计文件设置应该是这个样子的，分辨率（Resolution）处应该填163，而不是我们以往通常使用的72（用于web，电脑显示器显示），或是300（用于打印）等，如下图：

* 记得要勾选“Scale Styles”方便之后将其放大两倍为iPhone4尺寸
* 先填Resolution，再改长和宽。

对于iPhone 4的图像尺寸设置，分辨率填326，记得勾选“Scale Styles”，如下图：

保存两种尺寸图像

这一点应该大部分的iPhone应用设计师应该都了解。用于iPhone4的图像会是iPhone 3GS版本的两倍。iPhone4图像的文件名追加“@2x"来示意。

有些公司往往会直接从iPhone 4（640  ×  960）的尺寸下手，将导出的图片尺寸直接缩小一半保存，这时就需要特别留意图片尺寸的数值，请尽量保持@2x尺寸的图片像素尺寸为偶数。如果像素尺寸为奇数，当它被缩小为原来的50％时，将会因小数点的存在四舍五入，而影响了图片的比例。

另外，Smarshing Magazine的这文章“ Designing for iPhone 4 Retina Display: Techniques and Workflow ”对于iPhone应用设计的注意点也做了很详细的解读，其中给出了“Add@2x”和“Remove@2x”这个帮助你快速命名文件的小应用，对设计流程也会有帮助。

关于设计流程，还可以参考Authentic Style的“ iPhone app design workflow for designers "

反思与小结
在项目实践中因为遇到了这么个细节的问题，之前一直知道iPhone的分辨率比较特别，但没有仔细查询确认过它在photoshop中应有的设置，导致在设计合作中出现问题。在iPhone设计中还有不少小细节需要设计师熟悉并牢记于心，在这里就只做简短地记录，并未详细地对来源文章进行详细地翻译。互联网依然是很万能的，遇到问题地时候就“搜她”吧   。
找到答案，这就解决那个因分辨率问题带来的字体尺寸问题去了。