Designing Effective Navigation Bars: Principles and Best Practices
This article explores the fundamentals of navigation bar design for mobile apps, covering component structure, why traditional bars need redefinition for financial products, layout rules for left/right actions and titles, and guidelines for fixed top bars to improve usability while maintaining visual consistency.
What Is a Basic Navigation Bar
The navigation bar is an indispensable UI component that guides users to reach targets and discover content. It consists of five parts: status bar, background, left action area, title area, and right action area.
Why Redefine the Navigation Bar
Current navigation bars no longer meet the needs of financial products. Redefining them enhances professional recognition, provides a consistent visual experience across client and H5 boundaries, and reduces manual intervention.
Two styles—white (default) and transparent—cover most scenarios. The height is fixed; designers must define spacing for left/right action areas, title size, and margins.
Left and Right Action Areas
Icons should have defined height, width, and side margins. The left area shows up to two icons; the right area also up to two icons, and text cannot coexist with icons. Only one text label is allowed, with limited characters and configurable color.
If more than two icons are needed on the right, a “More” button appears, opening a dropdown menu.
Title Area
After setting the action areas, the title area must ensure readability. Users scan quickly, so titles should be concise—typically no more than nine characters for a single line—and may use bold styling for emphasis.
Fixed Top Navigation Bar
A fixed top navigation bar improves usability but consumes page space, so it should be applied judiciously. The bar remains visible regardless of user actions, and designers must balance functionality with visual aesthetics.
Designers should consider both visual presentation and interaction principles to create products that are functional and beautiful.
Tianxing Digital Tech User Experience
FUX (Xiaomi Financial UX Design) focuses on four areas: product UX design and research; brand operations and platform service design; UX management processes, standards development and implementation, solution reviews and staff evaluation; and cultivating design culture and influence.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.