You should try to imitate the behavior, but not the exact appearance, of standard UI elements from iOS; it is better to create your own version of controls with ornamentation close to the graphic style of the game. The standard UI components will look a bit silly if you would not have enough imagination, talent, and time to create something customized to support the mood of your game. Another reason is the universality of your title; usually, developers try to port their games on other platforms, where other paradigm designs are afloat. But try to only decorate them a bit, not invent new principles and rules. The player already has some UI experience based on iOS mechanics, so he expects the same paradigm in your game.
All the UI elements are listed by Apple in IOS Human Interface Guidelines in the chapter iOS UI Element Usage Guidelines.
There are various fields in the UI that are explained as follows:
- Text field: This is used by the user to enter some text input. Graphically, this is one of the simplest kinds of UI elements: a rectangle with a small frame and a light gradient inside. It is better to use large text fields as they look more comfortable. Another good tip is to use text hints, for example, if you have a text field asking the player to enter his name, try to add the text description Enter your name here painted light grey.
- Page control: This is a specific example of UI designing introduced exclusively on mobile devices, not on desktop systems. It looks like a collection of dots and one of them is highlighted. The main goal of the element is to show the amount of content in the pages, and to mark the current position of the user. Page control is extremely useful for various panels with a list of graphic or text elements (help chapters and trophy rooms). Typically, page control is used for horizontal lists. The principles of this control can be adapted for your game's main screen, for example, there are several horizontal screens in a platform game; the page control can be used to mark each of them, so the player sees the size of the level and has the opportunity to switch between screens quickly (on condition that the page control dots are interactive).
- Picker: This is another original UI detail of iOS. It looks like a cylinder with some text on its sides, which the user can pick from. The main advantage of the picker is its fixed screen size, regardless of the number of elements it stores; it is useful when the screen size is small. But you have to remember that this UI element is not without some drawbacks. Let me say that the input process is tricky, mostly because of inertia; it also does not indicate the exact number of entries it includes. So it is better to use the picker for specific data, with a predicted number of elements, for instance for entering digits.
- Popover: This is a more traditional element. It is a list of objects of different kinds, displayed above the current screen. The user has to choose one of them. Its functionality is tested over the years, but it is important to note that popover is a pretty large screen component, and it may have big screen dimensions. This is not a problem if it includes a small amount of data.
- Action sheet: This is very close to popover, but it displays a set of buttons with a specific action each. It is useful to control different game units, for example, in a strategy game each soldier can have a few types of behavior; by tapping the soldiers, the player activates the action sheet and chooses the type he needs.
- Status bar: This is one of the important parts of the information system of any interface, games are not exceptions. Looking back at the logic of iOS, it is reasonable to put the status bar at the top, above all the elements. It should include a button that can start the in-game menu and also pause the game (this is why some developers use the pause symbol on such buttons). You are free to choose the position for the menu button, but sometimes it is good to place it at the left-hand side of the status bar, like native iOS applications do. It's advisable to add a mute button too, so it can work like an indicator, showing if the sound is on or off. Then the game score and life indicator should be placed; sometimes, a timer is needed too. I have to mention that the special graphic panel that symbolizes the status bar is optional, you can deal with status bar elements hanging in the air, but they have to be aligned properly and some approaches need to be used to increase visibility; for example, contrasting outlines, shadows, and so on.
- Toolbar: This comes with a list of graphic representations of tools (usually, it is a list of weapons) that can be placed either at the top or at the bottom of the screen.
- Switch: This is my favorite control. It looks and operates neatly! It is a trigger with two states, on and off, so it successfully replaces more cumbersome solutions based on radio buttons or checkboxes alone. The switch in iOS has a small animation, its lever moves from one side to another; however, you can skip this and limit yourself to only two graphic states of the trigger. Usually, the switch is used in the Options menu, but it can be successfully used in gameplay too; an average puzzle game has a lot of different triggers, many of them have designs similar to those of switches.
- Progress bars: These are very common elements of game interfaces; usually, they display various exhaustible parameters, first of all, the status of the character's health or ammo. The rule of a good progress bar is simple; you need a beautiful gradient for the bar and a good dark background, the contrast between the empty and filled parts should be clearly visible. You can add any unostentatious animation to the progress bar to make it more attractive. A good practice is to introduce some additional signal functions to it. The bar can become redder if the game situation is critical, for example, when time is running out. Some game designers also add some markings to demonstrate the various stages of a game session, letting the player plan his efforts. A pie chart can be implemented instead of a progress bar, it looks interesting and fresh, but takes too much of screen space and can confuse the player.
- Sliders: This helps to adjust various parameters on the Options screen, primarily audio and music volumes. These are progress bars, but feature an additional element: a lever that can be moved by the user. A special background can be used to illustrate the increasing of values, very light at the beginning of the slider and dark (or saturated) at the end. Another way to add a professional touch is to apply some interactivity; for instance, if the music slider is set to zero, the icon that represents the term music in the menu should be crossed with a red stripe, which would mean that the music is switched off.
- Segment control: This is a set of buttons that stick together, only one of them can be pressed and active at a time, so the control operates in the same manner that the button panels on old radios and tape recorders did. For users familiar with the desktop metaphor of tabs, segment control is a replacement, as in contradiction to them, it usually uses only one of the few raw elements.
Note
The website http://www.noteloop.com/kit/fui/movie/ is a very good inspiration for movies dedicated to futuristic GUI designs.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.