我有个朋友是个非常成功的游戏开发者（他在游戏行业已有12年资历），但现在仍在重复一个问题：你什么时候才打算开始真正的工作？他是个玩《使命召唤》、《Texas Hold’em 》和《光晕》等游戏的老手，他赚的就是开发游戏的钱，而我则是擅长《帝国时代》的游戏玩家。如果我想让自己的草图得到一些点评，我就会采纳他的建议，而他每回也总能以自己的UI创意让我大开眼界。在他看来，他创建的UI是一个场景，而对我来说它却是一款伏特加酒应用的实用性表现。他从场景中看到的是一个物体，而我看到的却是一个视图。他的物体可以移动，我的视图却是因UIKit的指令而呈现生命力。他画图，我调整……后来我就会采用他的主意然后再作图。
经过多次调整之后， 我们的iPhone UI设计日趋成熟，更为有趣的是这一过程与设计iPhone游戏UI如出一辙。以下是有助于各位创建游戏/应用设计文件的一些简单而实用的小窍门：
主题 -> 场景 -> 确定物体 -> 物体互动 -> 绘制画布 -> 测试结果 -> 强化主题
Basics of iPhone Game design and Game Like UI Design
16Before I talk about game design for iPhone and mobile UI design in general, let me share some iPhone games related trivia with you all. Out of all iPhone Native Apps, games category is the fastest growing category with more than 10,000 games already part of app store. In 20 most sold apps, 14 are games … and did I mention this is just iPhone? The real kching kching is $21 billion in video game and video game systems sales in 2008 in US. This number is almost 20% of GDP of a typical growing economy and larger than most others.
One of my friends, who is a very successful game developer (12 years in gaming industry) still gets this question asked: So when are you planning to do a real job? He is a millionaire who can beat you in Call of Duty, Texas Hold’em and Halo and he made all his money developing games. I can beat him in Age of Empire though. If I need some critique on my sketches, I pick his brains and he never fails to amaze me with his UI ideas. In his mind, he is developing a scene, to me it is a usability aspect of a vodka app. In his scene he sees an object, on my screen I see a view. His object moves, my view animates per commandments from the UIKit. He draws, I refresh … then I decide to take his advice and draw.
While working with a lot of customers developing their iPhone, Android, Palm, Windows Mobile and BB apps, I am starting to see an interesting trend. All our major customers are demanding more and more interactive user interfaces that are a league apart from typical cookie cutter apps that look, feel, and work the same. A magazine that feels like a list, a list that shows news, news that is an alert, alert that makes a sound and a sound that is irritating. The customers are demanding more … they are demanding better and engaging apps that are filled with “attention grabbers” and have creative UIs.
This makes me think: What is the right approach to a great UI Design for Mobile apps? Is UI design of mobile apps getting closer to mobile game design? Is Game design relevant to mobile UI design and vice versa? The answer has never been more evident.
If you want your application to be more engaging than a typical UI that is subject to controls and views of UIKit, you need to think game design and liberate your canvas from UIKit and default controls. To me, game design has never been more relevant to UI design when it comes to developing apps for iPhone.
Over last two years we have developed some really cool mobile apps. Here is the synopsis of what we have learnt so far and how it has helped my team create innovative UIs:
We pretty much carried forward the terms, terminology and processes of game design and applied them to UI design for iPhone apps. The results have been amazing and our customers have loved our creative designs. Did I say “Creative designs”? that too coming from people who specialize on server side engines. Ah .. another similarity .. a game engine.
A simple and intuitive approach!
After multiple iterations we have refined our processes for iPhone UI Design and interestingly they are very similar to development of UI for an iPhone game. Here are very simple yet effective steps that can help you create a game/app design document:
1. Develop a Theme: Development of themes means setting up of a scenario for the game/application or one feature of the application. This could also be one level of a game.
2. Develop Scenes: Lets assume that UI requirements along with functional requirements can be written down as scenes.
•“Scene” is a compilation of how the story line (use case) progresses from point A to point B. Every time a story line progresses, it results in an interaction between two or more objects.
•Every Scene has actors (objects that undergo state transitions). Document the role of each actor and their participation in the scene.
•Draw a canvas of the scene (in iPhone this will mean transition from start to end of each interaction between objects) using tools and record state transitions of each object.
Repeat this process iteratively for each theme / feature set and your game design or app design document will be ready to be used as an input to development process. In development process you handle issues like Game detail, Game setting, Game System/Engine, Game play, Sound effects etc. These issues can be skipped for a non game app.
Theme -> Scene -> Define Objects -> Object Interactions -> Draw Canvas -> Test Results -> Improve Theme
Be it Babelgum, Drinkspiration or Tap Tap, they are all collections of scenes and a canvas responding to an object interaction. So if you can think of a game, start working on a theme and lay out your scenes. You never know .. the kching may be around the corner.（source:mobisynth.wordpress）