iOS Proper size and resolution of IPhone / IPad interface elements (Image, font size)?

[cthesky]

Hi all,

I am developing IPhone, IPad apps. When designing the user interfaces, is it any efficient ways to know the proper size of interface elements (example image, button and font) to produced a good looking interface? This is because sometimes when I run on device, some images seems blur, some font seems too big.

Any comments are welcome. Thanks a lot.

 

[xStep]

I haven't dealt with the iPad yet, but this information may help you out...

In my app I've coded the custom icons I use. If in Interface Builder if I declare a custom button at a size of 44x44, I had to have graphics at 88x88 for newer iPhones and iPod touches that have a resolution of 640x960 (held vertically). This size increase makes my graphics sharper looking on the newer hi-DPI devices. The system works with points of 320x480 which match pixels of the older lower resolution devices. I'm don't know what it does for iPads. You'll have to dig that information up, or NSLog the following, which I use in my code to influence the size of my graphics:

[[UIScreen mainScreen] scale];

I suspect you'll find that scale is 1 and so you'll have to account for the density of the pixels between the iPad and other devices. The next iPad is expected to a scale 2x what the current one is.

These images I make are UIImages that I place as backgrounds to custom buttons. The buttons are still declared in Interface builder as 44x44, but the system knows it is dealing with a higher density display and handles the two possible results correctly, upsizing the lower resolution version I had previously coded. They looked more pixelated.

It looks like I should also set the scale property of my UIImages to 2 for my extra large images. So, it is likely that the button is resizing my images for me, not the system in general. Some new homework for me.

 

[jnoxx]

The thing is, in the Apple Docs they state that for lower res devices like iPhone 3G/3GS, iPod series (without retina). You should use the images of size 320x480 (or in proportion).
But you also have to put the same image in the app but with sizes 680x960 (or in proportion), and you have to insert @2x at the end of the image name.
This will make the SDK use the normal images for normal devices and the @2x for the Retina displays, so it should display neatly on each device
For iPad there is no difference yet, so it maybe will have to do with your layer thing (not a photoshop guru), or resizing.