作者：mobisynth

在我正式开篇论述iPhone游戏设计和手机UI总体设计之前，我想先与各位分享一些iPhone游戏相关的琐事。在所有的iPhone原生应用中，游戏是最受欢迎的产品类型，在2009年的前20名热销应用中，游戏就占据了14个席位。

我有个朋友是个非常成功的游戏开发者（他在游戏行业已有12年资历），但现在仍在重复一个问题：你什么时候才打算开始真正的工作？他是个玩《使命召唤》、《Texas Hold’em 》和《光晕》等游戏的老手，他赚的就是开发游戏的钱，而我则是擅长《帝国时代》的游戏玩家。如果我想让自己的草图得到一些点评，我就会采纳他的建议，而他每回也总能以自己的UI创意让我大开眼界。在他看来，他创建的UI是一个场景，而对我来说它却是一款伏特加酒应用的实用性表现。他从场景中看到的是一个物体，而我看到的却是一个视图。他的物体可以移动，我的视图却是因UIKit的指令而呈现生命力。他画图，我调整……后来我就会采用他的主意然后再作图。

在与许多客户沟通开发iPhone、Android、Palm、Windows Mobile和黑莓应用之时，我一开始就会发现一个有趣的倾向。我们所有的主要客户都要求设计外观、风格、操作方式均不落窠臼且更具互动性的UI。杂志应用看起来像一个列表，列表显示的是新闻，新闻是一个警报信息，而警报信息总是极具刺激性。这些客户的要求还有很多，他们要求应用极具“夺人眼球”的特点，同时拥有极富创意的UI。

这让我不禁思考一个问题：究竟什么才是出色的手机应用UI？手机应用UI的设计与手机游戏设计有何不同？游戏设计与手机应用UI设计之间有何关联？但至今仍无从解答。

如果你想让自己的应用比常规的UI（游戏邦注：这类UI更依赖UIKit的控制和视图功能）更具吸引力，那就得从游戏设计的思维出发，将自己从UIKit画布和默认控制系统中解放出来。对我来说，在开发iPhone应用时，游戏设计与UI设计之间的关系甚为紧密。

在过去两年中我们开发了一些很棒的手机应用，以下就是我们团队创建新颖UI的一些经验：

UI-Mobile(from jonbroadus.com)

我们将游戏设计的规则、专业术语和过程运用于iPhone应用的UI设计，结果非常不赖，我们的客户很喜欢这种创意性的UI设计。但这真能算是“创意性的设计”吗？毕竟服务器引擎的开发者也在使用这种方法，游戏引擎领域也同样不例外。

经过多次调整之后， 我们的iPhone UI设计日趋成熟，更为有趣的是这一过程与设计iPhone游戏UI如出一辙。以下是有助于各位创建游戏/应用设计文件的一些简单而实用的小窍门：

1.创造一个主题：创造主题意味着为游戏/应用定下一个基调，或者反映其中一个功能，也可以是游戏中的一个关卡。

2.创造场景：这里我们假设UI条件和功能条件都是可以编写的场景。

·“场景”是一个关于从A点转向B点的故事情节（使用实例）编辑过程。故事情节的每一次进展，都会造成两物或多物之间的互动。

·每个场景都有演员（这里指在状态转换过程中的物体）。我们应将每个角色及其在场景中的行为记录在案。

·使用工具绘制场景的画布（游戏邦注：在iPhone应用开发过程中，这是指物体每次交互动作从头至尾的转变过程），并记录每个物体的转变状态。

针对每个主题/功能设置重复这个过程，这有助于让游戏或应用设计文件在开发过程中派上用场。在开发过程中，你还需要注意处理游戏细节、游戏设置、游戏系统/引擎、游戏玩法、音效等事项。当然，非游戏应用就无需考虑这些环节了。这个流程总结如下：

主题 -> 场景 -> 确定物体 -> 物体互动 -> 绘制画布 -> 测试结果 -> 强化主题

无论开发哪种手机应用，这个设计过程就相当于场景、画布与物体互动之间的集合。如果你想开发一款游戏，那就先开始定一个主题，然后布局场景，不试试怎么知道呢？也许成功就在不远处了。（游戏邦注：本文为游戏邦/gamerboom.com编译，如需转载请联系：游戏邦）

Basics of iPhone Game design and Game Like UI Design

by mobisynth

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）