How Layered Decomposition Can Transform Game UI Design

Preface

Modern games come in many genres, each with its own mature design patterns, but not every pattern can be copied directly. For example, the MOBA "King of Glory" had a simple UI 1.0, while UI 2.0 adds seasonal themes and short videos that subtly convey the game’s world view and encourage players to spend money.

UI layout is the skeleton of a game; designers must map the logical relationships between its parts to align product goals with user goals. This article shows how layered decomposition can solve game UI layout challenges.

Game Experience Transmission Layers

Because players cannot directly perceive experience, games deliver it through three design layers:

Presentation layer : visual and audio cues that let players feel the mechanics and receive feedback.

Mechanism layer : the collection of rules, gameplay systems, and world‑building elements.

Experience layer : the intended psychological impact that fulfills player needs and drives behavior, ultimately achieving the product’s objectives. Misalignment between experience design and player expectations reduces the effectiveness of the product.

Developers view the game as a means to achieve their product goals, so they must consider what services to provide to users.

Layered Decomposition Finds Design Breakthroughs

We can think about UI architecture from two dimensions:

Vertical dimension: start from player goals, categorize game mechanisms, and map them to UI relationships.

Horizontal dimension: consider the player’s skill level and the frequency or intensity of UI needs. To illustrate, the article uses the mini‑game “Dream Town”.

Dream Town is a hybrid game where players combine houses to upgrade and unlock a grand prize. Its upgrade mechanisms are:

Passive mechanisms: system‑provided upgrade elements.

Active mechanisms: upgrades purchased with gold.

Passive mechanisms are more complete, supporting core gameplay, while active mechanisms are simpler. The UI framework therefore divides the screen into three zones: the top shows the core benefit, the middle (largest) area focuses on the core gameplay (passive), and the bottom houses the active operation area.

As product growth targets rise, new scenes, task rewards, and game‑reward features are added, turning the active mechanism into the next growth driver. The UI layout is adjusted accordingly: the passive area shrinks, the gold‑benefit area expands, and active task zones are added on both sides to ensure extensibility.

Conclusion

Games are essentially exchanges of experiential value: they provide a certain experience to obtain user engagement and achieve developer goals. By using layered decomposition based on design objectives, designers can clearly see player needs and game levels, resolve design conflicts, and prioritize information—such as adjusting the weight of important prompts when too many messages compete for attention.