From the point of view of a graphical designer, which are the differences in developing for iPhone, Android and Blackberry. Is it possible to design for one platform and to use that work on the others? What are the constraints when implementing the same graphical interface to all of the above mentioned platforms?
-
1What are you designing?– DA01Commented Feb 13, 2012 at 4:14
Add a comment
|
2 Answers
This answer only deals with iOS and Android, Blackberry exceeds my knowledge
Resolution
In iOS you have three screen resolutions to consider
- 480*320 (iPhone3)
- 960*640 (iPhone4)
- 1024*768 (iPad)
In Android there are 4 resolutions, to cover at least:
- xlarge for screens that are at least 960dp x 720dp
- large for screens that are at least 640dp x 480dp
- normal for screens that are at least 470dp x 320dp
- small for screens that are at least 426dp x 320dp
Guidelines
In iOS there are some standerd UI-elements to work with like the tab bar, pickers, status bar etc. See this psd for more Detail.
And you can find even more detailed information in the iOS human interface guidelines
In Android there are less UI standards but since Android 4 it has some usable design guidelines
Differences
Android has its "hardware buttons". Menus and navigation are often at top of the screen. Buttons orientate on the default android buttons and UI. The bottom is often filled with the actual content and overlaid with the hardware menu.
iOS splits the menus and navigation in two parts. At top is the Navigation like back button, title, ok and cancel. At bottom there is navigation like the tab bar to switch between views.
Some apps simply use the same UI layout for both systems with some minor changes, like the use of the menu button from android. Path is an example for iOS and Android
Blackberry has its own design guidelines but there ends my knowledge. Here is a good collection of UI guidelines for further reading ;)
-
1Caveat: There are really only two iOS resolutions in terms of overall UI dimensions. One does have twice the resolution, though. That gives you sharper images, but doesn't change the size of the UI. (And it looks like the iPad3 may do this too). Android also has many more resolutions, given that it's not any sort of standard.– DA01Commented Feb 13, 2012 at 4:17
We need more information to fully understand what you are designing, but if I were to assume you are designing web sites, then yes, you can design for any device.
That's pretty much my day job...design and develop a mobile web application that supports iOS, Android, BlackBerry and (groan) Symbian.
In terms of visual design, each OS has it's own native UI, but as a web app, you'd be designing a UI just for the web app. This is the standard approach for a lot of the UI libraries out there such as jQuery UI and Sencha Touch.
In terms of hardware, iOS is touch-only. Android is mostly touch. BlackBerry is mostly keyboard.
In terms of software, iOS, Android, and BlackBerry OS 6+ are all running a Webkit browser. Which is nice. Alas, Android and BlackBerry's browsers have plenty of bugs.
Avoid styling native form elements if you can...each OS likes to do things differently with default sizing of those.
UPDATE:
I should also note that one area where you may NOT want to use a universal UI is the split between keyboard and touch devices. This is tricky, as some operating systems have both devices available (such as blackberry) and even more tricky, some devices are both touch screen AND keyboard enabled.
The problem is that they are really two different ways to interact with a screen. Touch is happy to be scrolling with big icons and swipes. Keyboards need a very compact screen and probably prefers pagination over scrolling.
The challenge is that it's really hard to design for both equally. Right now, we mainly target touch, and one can still use the site with a keyboard, but we're not optimizing for keyboard.
In hindsight, it would have been great for mobile browsers to some how detect when a page is being interacted via touch vs. keyboard.
