After reading this analysis by Xiaomi designer, I realized that interface details can be done to such an extreme!

Numbers are one of the most important design elements in financial services, because in financial services, there are a large number of scenarios such as e-commerce, payment, and wealth management that require direct expression with numbers. The current situation is that we have common fonts such as Xiaolan Lanting under the entire big brand system, but we lack specific digital fonts and digital expression specifications for the special needs of financial services. Therefore, we need to summarize a set of digital functional design requirements that are suitable for our business.

1. Understand the characteristics of financial services business scenarios

So what are the differences between the digital fonts in the financial services business and the digital fonts in other businesses? We can start with the business as the guide and give examples of scenarios from the product solutions of Xiaomi Financial's existing businesses:

From the existing businesses, we can screen out the following functions and features of Jinfu Digital in different application scenarios:

1. Expression of large amounts with three or more decimal places, i.e. greater than 999.99 yuan

E-commerce large price tags, insurance limits, loan and repayment amounts, and financial management principal amounts, etc.

2. The expression of small amounts with decimals within three digits, i.e. less than or equal to 999.99 yuan

Small orders and cashier amounts, cash and MiCoin balances, bus card and MiPay amounts, insured amounts, financial management income and loan interest, etc.

3. Expression of long integers with more than ten digits

Bank number, ID number, order number, mobile phone number, etc.

4. Expression of short integers with ten digits or less

Credit score, license plate number, points, etc.

5. Others

Interest rates, percentages, exchange rates and financial symbols etc.

2. Habits and cognition based on people’s real-life scenarios

By citing real-life scenarios, we can find specific applications of actual numbers that intersect with financial services businesses:

In these practical scenarios, the relevant commonalities of digital applications are summarized: integers and decimals, recognizability, environmental relationships, and combination and equal width.

3. Integers and decimals

By collecting and sorting out real-life small price tags in supermarkets, stock market data displays, etc., we can get some basic commonalities of price labels: product price tags, annual report numbers, stock market numbers, electronic watch timing numbers, bill numbers, etc.

1. Two general ways to identify small amounts: with and without decimal points

2. How to identify large amounts

3. Simplified identification of amounts

4. Recognizability

By collecting and organizing real-life products and scenarios that focus on digital functional expression, such as timing devices, computing devices, traffic signs, vehicle instrument displays, currency, car license plates, etc., we can obtain some basic commonalities in the recognizability of digital fonts.

After refining the fonts of these collected image materials, 12 commonly used digital fonts were obtained:

The recognizability test method is to perform static Gaussian blur and dynamic blur on the font to roughly determine the degree of difference between the numbers in the font under extreme conditions. For example, perform Gaussian blur on the DIN Pro font:

Dynamically blur the DIN Pro font: Since the visual design of the interface is based on mobile devices, it is necessary to consider the impact of dynamic afterimages on the recognition of digital fonts in all directions:

Thus we conclude that the DIN Pro digital font may have some issues with legibility:

The same legibility issues that may exist with other fonts:

Thus, we can obtain some basic commonalities that affect the recognizability of digital fonts. Among them, Highway Gothic, Frutiger, LuzSans, Kint Extended, and UKIJ Ekran have better recognizability under extreme conditions. After comparison and analysis, we can get some brief conclusions:

5. Environmental Relationship

By collecting and arranging examples of real-life numbers with different thicknesses, spacing, etc. under extreme conditions such as darkness and deflection, these products and scenarios include deep-sea diving watches, moon landing watches, command lines, billiards, double-color ball numbers, etc., we can obtain some basic commonalities in the distinguishability of digital fonts.

Contrast of the bold and thin fonts of numbers in black and white environment:

Obviously, due to human visual illusion, at the same weight and point value, light text on a dark background appears thicker than dark text on a light background:

Comparison of the shape and spacing of numbers in black and white environments:

People's reading habits and environment:

6. Combination and equal width

For numbers to have financial attributes, the most important point is that they need to be combined with various currency symbols or mathematical symbols to be reflected. Therefore, by collecting and collating the display of numbers in real scenes such as price tags, we can also collect some real-life scenes of static and dynamic changes of numbers such as stock markets, financial reports, car instruments and central control to analyze the actual application of equal-width and non-equal-width numbers:

Different situations and analysis of the combination of numbers and symbols:

Monospaced fonts are more readable in static scenes with vertical layout:

Non-monospaced fonts are more visually comfortable on a single set of horizontal data:

In the dynamic changes of numbers, monospaced fonts can avoid horizontal changes in fields, providing a better readability experience:

7. Balance between form and function

With the popularity of full-screen mobile phones, the screen-to-body ratio of mobile devices will become larger and larger, which means that the display area of ​​content may also become larger and larger. On the other hand, in order to achieve better graphics and image display effects, the PPI of mobile devices may also become higher and higher. These trends may lead to higher and higher requirements for content font layout and details.

Based on the above analysis and conclusions on the functional design of numbers, the design of digital fonts should match the mainstream Chinese and English fonts of existing mobile device systems, and also be able to adapt to the needs of different application scenarios, reflecting the uniform font size, line spacing, weight, center, center of gravity, etc., but it does not need to be too rigid, and it is best to reflect the youthful and positive sense. Functionally, it can try to meet our understanding of the commonality and characteristics of digital design in Internet financial services, and reflect the security and rigor of financial service numbers.