Game Development Reference
In-Depth Information
Using buttons
Buttonsarethecornerstoneofeachinterface.Thebuttonconsistsoftwolayers:anin-
visible active zone, determining the boundaries of the touch zone attached to the but-
ton, and a visual part, that is, the graphic shell. Normally, the shell has visual bound-
aries to separate the button from the background and to signal that the element is
interactive. But that is not obligatory, many modern UIs feature buttons without any
frames, by using only text as the visual shell; however, such an approach should be
used very carefully.
Tip
Try to avoid using static elements with some ornamentation that look like buttons.
For instance, there are some icons on your menu screen that are buttons, and a few
static text descriptions below them, decorated as small wooden plates; a user might
get confused, probably he will tap not the icons, but the plates, because they have all
the attributes of a button.
Usually, each button has several states: Normal , Focus , Disable , and Pressed .
Each of them requires a specific graphical representation.
Normal : This is the regular state of a button, its look tells a user that it is ready
to operate and can be pressed any moment. The button can be painted red to
mean that it activates a destructive action.
Focus : When a button tries to get some special attention, it can utilize the fo-
cus state, which associates with a more prominent and visible main color. The
dimensions are bigger. A simple blinking animation can be used too. Normally
there can only be one button with the focus state turned on.
Disable : If the button's action is not available, it should preferably be removed
from the screen. If this is impossible, the button should be switched to the dis-
able state, which is illustrated by low saturated colors and the absence of visu-
Search WWH ::




Custom Search