How Contrast, Repetition, Alignment, and Proximity Shape Financial UI Design

Graphic Design Principles

Contrast : Avoid overly similar elements; differentiate fonts, colors, sizes, line widths, shapes, and spacing to make the page stand out.

Repetition : Reuse visual elements such as colors, shapes, textures, spacing, line widths, fonts, sizes, and images to create a cohesive brand style.

Alignment : Every element should have a visual relationship with another element, providing balance and preventing misleading humor in serious content.

Proximity : Related items should be placed close together, forming visual groups that reduce clutter and give users a clear structure.

Applying the Principles to Financial Product Design

Financial interfaces often display only numbers—balances, loan limits, investment assets, etc. Spacing, weight, composition, and whitespace are carefully designed to enhance readability and convey safety and precision.

Psychological research shows that different numeric presentations convey different messages, influencing users' perception of high price, low price, trust, cognitive laziness, and unified currency units.

Perceiving High Price

Scenario : High‑value items such as insurance coverage, balances, available credit, and returns.

Strategy : Show numbers with precise units, keep thousand separators, and retain two‑to‑four decimal places.

Visual Design : Emphasize size, color, weight, and contrast.

Perceiving Low Price

Scenario : Loan interest, recharge amounts, minimum purchase, price inputs, product prices, payment limits.

Strategy : Use integers, omit trailing zeros, apply abbreviations.

Visual Design : Adjust size, color, weight, and contrast.

Operation Strategy : Offer bait options to stimulate consumption.

Trust and Safety Analysis

Scenario : Transaction details, balance display, order amount, premium orders, payment confirmations.

Strategy : Increase numeric precision.

Visual Design : Use size, color, weight, and contrast to reinforce professionalism.

Cognitive Laziness

Users often skim tables and numeric comparisons, leading to slower reading of important figures.

Scenario : Price fluctuations, table numbers, recharge amounts, discounts, comparative figures.

Strategy : Simplify numeric display—use integers, abbreviations, and truncation.

Visual Design : Consistent size, color, weight, and contrast.

Operation Strategy : Provide bait options and subtle nudges.

Currency Unit Rules

Although the symbol “¥” is used domestically, it also represents other currencies; therefore, the Chinese financial system standardizes the unit as “元”.

When the numeric content is emphasized, the unit “元” follows the heading; in tables, numbers remain clear and undisturbed.

Conclusion

By following these four principles—contrast, repetition, alignment, and proximity—designers can create lively, engaging, and well‑structured pages that enhance user experience and adapt to evolving user expectations.