HN Explorer

Ask HN: I am designing a iOS app. Is there a cheat sheet for sizing?

9 points by allsystemsgo ↗ HN
Also, for retina display, don't I basically need to make the designs twice to accomodate for both retina and non retina displays? Thanks for all your help. I'm new to mobile design.

9 comments

[ 53.0 ms ] story [ 349 ms ] thread
michaelpinto
You want to think in terms of aspect ratio first, and pixels second. Currently (and this may change) the iPad has the same aspect ratio that's shared between an iPad, an iPad with Retina and an iPad mini. On the other hand the iPhone 5 and say the iPhone 4s have different aspect ratios since the iPhone5 is taller.

Also don't forget that your design has to be responsive so that it can go from horizontal to vertical. And then keep in mind that if at some later point you want to port to Android that there really aren't any fixed aspect ratios since there are so many devices.

My advice is that you should sketch and then use an app like Keynote to see what your interface looks like on the device. You can be shocked sometimes just how different things feel when you go from a personal computer to a mobile device.

program247365
Check out the articles here: http://bjango.com/articles/

Great resource for what you're looking for. Including downloadable Photoshop actions to make it all easier.

allsystemsgo
Thanks. That'll help a lot. I'm tempted to leave the designing up to a professional.
eduardordm
No, you need 'textures' for both displays, but not geometry. The geometry has not changed in retina displays :D (This question was answered dozens of time @ stackoverflow, you should check there)

This is why I'm converting an open source app I built to just render everything (using CG, not CALayer) instead of using images. Yeah, images are faster. But I hate to repeat myself and exporting images from photoshop is more time consuming than it seems.

(Edit): Images are usually faster, but that's not entirely true if you use only CG calls on a drawRect. From a memory standpoint, keep in mind that a PNG file will occupy the 'framebuffer' + the original image + all the crap that comes with UIImage. By drawing it yourself, you will burn a little cpu time but than only the result buffer will allocated.

nglevin
I don't really know what graphics you're drawing in your app, but this approach will kill the performance of anything that relies on the GPU.

Since you're only using Core Graphics, this is acceptable. Core Graphics only has a CPU implementation on iOS. Core Animation has a CPU implementation that only gets activated under certain conditions; otherwise, it renders through the GPU by default.

If you're planning on using CA...

- outside of -drawRect:,

- with no shadows or masks (transparent gradients, for instance,)

- without text (CATextLayer, UILabels, Core Text, UIFont,)

- with -shouldRasterize: assigned to NO (the default,)

- without overriding -drawInContext: (which draws a CALayer's content to a CGContext,)

- with any OpenGL code at all,

...you're going to quickly end up in the land of seconds per frame instead of frames per second.

eduardordm
"Core Graphics only has a CPU implementation on iOS."

No. :D

nglevin
Would you care to elaborate, rather than be glib?

QuartzGL runs all Core Graphics on the GPU[1]. It's only available on OS X.

If you can show me evidence that some API on iOS runs Core Graphics on the GPU, I'd be happy to know. I do a fair amount of work running Core Animation, CG and OpenGL at the same time, so it would be a big help.

[1] - http://www.cocoawithlove.com/2011/03/mac-quartzgl-2d-drawing...

eduardordm
This really isn't the place, but: You are confusing the composition and the actual rendering. When you use CG you are composing in the cpu but the actual result is always rendered by the gpu, there is no such thing as rendering by cpu in ios devices. When using opengl the composition and rendering will happen in the gpu. But this is not really important for static objects like buttons, they are built once, unless use force changes, it wont touch the cpu (written on a phone, sorry about typos)

For instance, this is 100% gpu: http://developer.apple.com/library/ios/ipad/#documentation/G...

nglevin
This is the place. It's HN!

I have a strong suspicion that CGAffineTransform and its associated methods are calculated through the ARM NEON co-processor. I don't see anything in the documentation you provided that mentions the GPU.

It _could_ be done in a vertex shader on the GPU, but looking at the API, the use of Rotation, Scale and Translation methods seems more consistent with it being done on the CPU or the CPU's floating point co-processor. Otherwise, there would be something equivalent to glBegin() or glEnd() to prep calls to update the uniforms for the shaders and render to the frame and render buffers, much like CA's transaction based API for animations - the block based API is similar, too.[1] Frankly, switching to a shader just to do rotation/scaling/translation is a bit much, and better left to the CPU in most cases.

Andy Matsuchak of Apple claims that "When you implement drawRect or draw with CoreGraphics, you're using the CPU to draw, and that drawing will happen synchronously within your application. You're just calling some function which writes bits in a bitmap buffer, basically."[2]

That is rendering. Unless you're confusing rendering with compositing layers, the act of blending several CALayers/UIViews together.

The compositing bit is completely dependent on how you opted to draw your layers; some can be composited on the CPU, others on the GPU. I've listed all the ways that a layer can be composited on the CPU, it's just something to watch out for.

[1] - I'll grant you that CA has an implicit animation API, but CA also has a much more elaborate system of keeping current state and projected state in place. CA has layer trees for each to avoid having to block the CPU and wait on the asynchronous GPU for results, which CG doesn't.

[2] - http://robots.thoughtbot.com/post/36591648724/designing-for-...