Mobile easy UI layout?
Hi,
I'm having a very hard time trying to figure out how big each UI element should be and where should it go on the Mobile. Is there a easier way to do this? Trial & Error is taking a huge amount of my time just restarting the app.
Thank you,
Adrian
6 Answers
-
Hi Adrian
I always wireframe up the idea behind the display before trying to implement. The main reasons for this are that it really helps to formulate the idea behind the design you are coming up with and secondly, I have previously used the API function width= parseInt(Titanium.Platform.displayCaps.platformWidth,10) and likewise platformHeight to calculate the left and top position of each element. My apps are for Android and iPhone so the dimensions are different. I found this to be unrealiable with graphics being shifted to the right on the iPhone platform.
The iPhone has a display width of 320 and height of 480 pixels. Apple documentation therefore recommends a ppi (pixels per inch) setting based upon the height and width of the display at 72dpi however all documentation should use a 163 dpi image to accurately reflect the size of the image on the display. They also recommend a graphic of 48x48px for buttons.
Android based devices vary in screen dimension, however the Operating System will auto scale images to fit the available display size. Display dimensions for the top end Android have a width of 480 and a height of 854 pixels. Google recommends a 240 dpi resolution.
Therefore you probably want two copies of any image and you would put them in the Resources/Android or Resources/iPhone directory of you project.
There are a large number of wireframe graphics available: My favourite one is the Teehan+Lax photoshop PSD (http://www.teehanlax.com/blog/?p=447), though there is also a Fireworks PNG version and there is a graffletopia here : http://graffletopia.com/stencils/download/358.
Google iPhone wireframe and Android wireframe and you should get plenty of hits.
-
Few things.
1) Hopefully you're not restarting the emulator between each test. It's not required for Android.
2) The upcoming 1.2.0 release has a deploy from sdcard mode that will speed up turn times considerably when not production.
3) There will be other layout managers in the future. Just not in 1.2.0.
-
I'm not restarting the Emulator itself, just hitting Launch button for every change.
That kind of sucks that these are the only options available. -
> 2) The upcoming 1.2.0 release has a deploy from sdcard mode that will speed up turn times considerably when not production.
Do you really mean version 1.2.0, Don? We are already on Ti 1.2.1.
-
So where is the rumored "deploy from sdcard" mode? Am I not aware of it, or was it pushed out?
-
Any progress on this? UI is becoming the main use of development time in any project, i.e. the savings in time made by Titanium are lost in the trial and error UI development.