How to make good looking custom ui in mobile and tablet devices?
I'm looking for an intro into designing and making a custom and dynamic UI on mobile specific platforms. As I understand Nokia(Qt), Android, and iOS all use OpenGL ES (2.0?). I haven't looked into Windows phone 7 yet so not sure what that uses. So I think OpenGL would be a pretty good place to start. While OpenGL is mostly about 3D, I'm also open to 2d ways of creating dynamic UI.
I've never really been big on designing interfaces or coming up with cool concepts but now I have an idea for a mobile app that really needs a good looking user-interface. It's sort of a half app, half game type of thing. It really targets people in the gaming community who I think are used to a bit more polish开发者_开发技巧 and advanced UI. I could still probably get away with a simple UI(simple not being a bad thing) but I think I at least should learn some design techniques for future reference.
Of course I realise that excessive eye candy which hurts usability, like bloated graphics that slow down the mobile, are of no use at all. I'm trying to make a sleek UI that while looking good allows the user to interact well with the app effectively.
Any suggestions, resources, experience you can share would be most helpful.
EDIT: While I'm looking for ways to use 3D graphics, I'm more concerned with how to come up with a sleek UI in a mobile. I come from a mostly web developer background, with some experience in Photoshop(CSS is the furthest I've gone in designing). I have never really had to design a dynamic interface that reacted to touch and moved all around the screen with some laws of physics attached. There are lots of such effects, such as the carousal effect, which gives the user an enhanced experience. I have no idea how to incorporate these effects into a mobile device. For example, one of the things I need this app to do is take a glassy circular object(a button) that moves around, then turn it into a sort of convex glass lens so it's sort of zooming in on the image underneath to make it look like its actually a magnifying glass. I looked around and this effect is created by a "grid warp" or a "mesh warp". Suffice it to say I have no idea how to do it.
This will help you not only with Windows Phone 7. WP7 uses DirectX 9, but not directly, you must pick XNA or Silverlight(no other options). Also these blog posts I find quite usefull.
For game, game related app I would stick to one design, and as you said start with OpenGL.
I have been searching since yesterday and thought I'd add some links for anyone interested. Although I'm dividing them up by the platform the articles refer to, with some elbow grease the ideas should be cross-platform compatible.
Qt
- Carousal animation in Qt
- Shadow effect Qt
- Qt Kinetic Scrolling describes kinetic scrolling algorithm in Qt(self descriptive really)
- Qt OpenGL Nehe tutorials converted to the Qt environment
Iphone
- OpenGL from the ground up - expansive list
- Flow Cover tutorial.
Android
- Android 3d Tutorial
- Another Android OpenGL tutorial
- Yet another Android OpenGl ES tutorial, seems people have gone open-source mad.
- Custom UI on Android
- One finger zoom tutorial at Sony Ericsson Developer World
- 3D list at Sony Ericsson Developer World
OpenGl/ES
- OpenGl tutorials at NeHe, there are tons, I read through the first one (on light) and it was really informative.
- TheRedBook intro to OpenGl
Books
- Books list at Design4Mobile, these do not cover the technical side rather covers the things to keep in mind when designing mobiles, I think the O'Rielly one should be pretty good.
Inspiration
- 10 beautifully designed Iphone Apps - for a touch of inspiration
All rounder
- Mobile TutsPlus sort of a gathering of tutorials for android and iPhone
That's I found in the last four or five hours, as I find more I'll add it on. I've also made this a community Wiki so others can correct any mistakes I've made here, or to add anything they feel relevant.
精彩评论